バックエンドエンジニアが事前知識なしでReact Native(+ Expo)に入門して詰まったところ
この記事は？
ウェブクルー Advent Calendar22日目の記事です。
普段はJavaを書いているバックエンドエンジニアが、事前知識なしでReact NativeにExpoで入門したときに詰まったところについて振り返ります。
この記事に書いてあるものは正解じゃないものも混じってそうなのですが、基本的にはこんな感じの気持ちでJSを書いています。※ あと、英語のドキュメント頑張って読めば書いてあることがほとんどです。積極的にリンクを貼っておりますのでそちらを確認してください。
誰向け？
私みたいな人
- JavaScript自体はそれなりに書けて、npmぐらいならJavaScriptのツールが使える
- プログラミングスキルはそれなりにある(他の言語とかで)
- ターミナルの扱い自体は大丈夫
- JSがっつり書いたことない
- React NativeどころかReact自体ほとんどやったことない
そもそも
セットアップ
ExpoのGetting started的なページがあるので、この通りセットアップすれば 5番目の expo start の手順でもうアプリが動く状態になっています。
Simulatorとかのインストールがまだなのであれば実機で確認するのがアプリを入れてQRコードを読み込むだけなのでお手軽です。Expo Clientをインストールしましょう。AndroidとiOS両方いけます。
JSX is 何
React Nativeを始めて最初に躓くのがJSXだと思います。こういうやつです。
最初はJSXを「JavaScriptに埋め込めるつよいHTML」ぐらいにしか考えていなかったのですが、このJSXコードはBabelによって関数の呼び出しにトランスパイルされます。
とてもシンプルですね。入れ子になっても基本的にはこの形になると思います。
なんとなくでプロジェクトを作成すると、テンプレ的に入っているJSXやら何やらが急に押し寄せてきて、「なんかよくわからんけど動いてる〜！」という感じになってしまうのですが、ただの関数呼び出しと考えればだいぶハードルは下がると思います。
このあたりの話は、 JSX In Depthに書いてあります。英語ですがコードが多いので雰囲気はつかめるでしょう。 JSXの文法的なところでうまくいかないときはこのドキュメントを読むことで解決することが多いです。
開発環境は何を選ぶ？
Reactの場合、ES Modulesと呼ばれるモジュールシステムを活用したコードを記述する必要があります。
私は普段、JavaScriptは(シンタックスハイライトと簡単補完が効くぐらいの)ほぼ素のVimで書ける程度のJavaScriptしか書きませんが、importやらJSXやらを記述するとなると、素のVimだとかなりのつらみがあります。平成もあと数カ月で終わるというのに、importしたいものを人力で探すという行為はもはや人間がする仕事ではありません。
なので、私はReact NativeでコーディングするときはWebStormを使うようにしました。Vimの環境を汚したくなかったのと、Javaを書くときはIntelliJ IDEAを使っていたためです。プラグインとかを新たに入れなくともデフォルトで補完とかが効いたような気がします。当たり前ですがあると便利です。WebStormは有償ですが、無償のものを選ぶのであればVS Codeとかでも良いと思います。
react-native linkの謎
セットアップ手順にreact-native linkをしているnpmモジュールがありますが、Expoだとnpm installすればだいたいすぐに使えるので、Expoが持っている機能でアプリを作っているうちは特に気にする必要は無いのかなぁと思います。(というより、expoを普通にセットアップした場合react-native コマンドはPATHに居ないですし。。)
逆に言うと、Native Modulesを使いたいときには意識する必要があります。そのときはこのあたりから参照しましょう。
Detaching to ExpoKit - Expo Documentation
画面の作り方
Button よりも TouchableOpacity
Button に良い感じにスタイルを当てたかったのですが(サイズを変えたり画像を入れたり。あとはテキストを小文字にしたかった)あまりうまく行かなかったですね。
どうやらこの Button には結構制約があるらしく、ちょっと凝ったことをするならば TouchableOpacity が推奨されているみたいです。ちょっと込み入ったことをしたときはTouchableOpacity 、そうでないときは Button のシンプルさがマッチします。
React Nativeの画面遷移
画面遷移は react-navigation を使います。
使い方はこのあたりにドキュメントがあります。
例ですがApp.jsが下記のようにデフォルトのまま記述されているとして、分解してゴニョっとやるとすぐに画面遷移が使えるようになります。
元のApp.js
書き換えて画面遷移が出来るようになったもの
React Nativeにおいて画面のコンポネントはScreenで終わる名前にするのが良いらしいです。 App.jsの中に記述されていたコードが、screen/HomeScreen.jsに移動したことがわかると思います。 具体的なソースコードは長くなるので割愛しますが、遷移先の画面を用意すれば画面遷移ができる状態になっています。
SwitchNavigatorやStackNavigatorを使ったときにどのような画面遷移が実現できるかはNavigationPlaygroundというアプリを動作させることでイメージがつかめると思います。 実機確認するときと同じようにQRコードを読ませると動きます。
バックエンド
React NativeでのRESTful APIコール
何かJSONを返すようなAPIを叩きたいときはaxios使うと通信できます。Promiseベース！便利ですね。
READMEにも同じようなものが載ってますがこんな感じです。
Firebaseの利用
Firebaseを使いたいときは、とりあえず npm install firebase をすれば使えるようになります。
react-native-firebaseとかいろいろあってどれを使うべきか迷いますが、今の所firebaseであまり困ってないですね。。
Expoを使ったアプリ開発の場合、実行しているのはNode.jsで動作するJavaScriptでFirebaseのライブラリを動作させるため、参照すべきドキュメントは、ウェブで使ってみるのドキュメントです。
https://firebase.google.com/docs/web/setup
ローカルストレージの利用
バックエンドではないですが、端末にあるローカルのストレージを使うには、 AsyncStorage が使えます。
WebStorageに近いAPIが使えます。値にオブジェクトを突っ込むと壊れるっぽいので、JSON.stringify で雑にJSONにシリアライズして雑に setItem してやると雑に良い感じになります。
ただ、考えて使わないとグローバル変数化して頭悪い感じになりそうです。
なんかおかしくなった
Expo(expo startしている方)がおかしそうなとき
expo start するときに、 --clean オプションを付けることでキャッシュをクリアできます。
expo start --clean みたいな感じです。
あとは node_modules を消して npm install し直すとうまく行くことがあります。
Expo Client側が原因っぽいとき
Expo Client側が何かおかしいとき(一般に公開されているものも使えないとか)は、アプリのデータを削除するとうまく行ったりします。
よくわからないとき
シュミレーター開いてたら閉じて(完全に閉じる)リセットしつつ、node_modulesを削除して、コーヒーとか飲んでからもう一度npm install すればなんかよくわからないときもなんとかなります。ならなかったらすみません。
まとめ
たまに赤い画面が出ることもありますが、だいたいググって気合いでどうにかなる感じです。よくわからないときは
／）
／／／）
／,.=ﾞ''"／
／ i f ,.r='"-‐'つ＿＿＿ まぁなんでも動きゃあいいんだよ！！！
/ / ,.-‐'~／⌒ ⌒＼
／ ,i ,二ﾆ⊃（ ●）. （●）＼
/ ﾉ ilﾞフ::::::⌒（人）⌒::::: ＼
,ｲ｢ﾄ､ ,!,!| |r┬-| |
/ iﾄヾヽ_/ｨ"＼ `ー'´ ／
というマインドでどうにかしますが。 React Nativeみたいな、目の前で画面が組み上がっていくものを作っていくのは楽しいですね。
普段はJavaとかですが、React Native(+ Expo)は新しいものをもっともっと触っていきたいなぁという気持ちにしてくれます。
