JavaScript（フレームワーク未使用）業務経験1年・React/React Nativeもスマホアプリ開発のいろはも分からなかった私が、平日夜・休日の時間を使って、約２ヶ月(80時間)かけてReact NativeでiOSアプリを開発したときの流れや参考になった記事・動画を紹介します！
自分自身、何度も壁に打ち当たり、心が折れそうだったので、少しでも役に立てればと思います！
あと日本語のドキュメントが少ないため、英語のサイトを見ることも多くなりますが、英語の良い勉強の機会だと思って、めげずに頑張りましょう！！
作った外国語用単語帳アプリ"lankiage"はこちら(App Store)
ソースコードはこちら(Git Hub)
そもそもReact/React Nativeとは？
Reactは、Facebook社が開発した、WebアプリケーションのUIを構築するためのライブラリです。
JavaScript三大フレームワーク・ライブラリとして、他にVue.jsやAngular.jsがありますが、世界的にReactが最も利用されているため、フロントエンドとしては最も身につけておくべきスキルだと思います。
- React公式サイト
- JavaScript経験ありReact初心者向け動画
【とらゼミ】トラハックのエンジニア学習講座 日本一わかりやすいReact入門
一方、React Nativeは、JavaSciptでiOSアプリ・Androidアプリを、同時に、かつReactライクに開発できるフレームワークで、いわゆるクロスプラットフォームフレームワークの１つです。
従来は、OSに合わせて言語を使い分ける必要がありましたが、これによってコード１つで両方のアプリが開発できるわけです。
現在は、Flutterというフレームワークの方が注目されているという記事もありますが、DartというGoogleの独自言語ということもあり、React NativeはJavaScirpt経験者がさらっとスマホアプリに手を出すにはもってこいのライブラリだと思います。
※React Native勉強中にFlutterの勢いを知ったのはちょっとショックでした（汗）
1. 開発環境構築編
1-1. 開発プロジェクトのインストール
プロジェクトのインストールはこちらを参考にしました。
React Nativeの開発環境は主に２つあり、React Native CLIとExpo CLIがありますが、Expoは独自のライブラリしか使えないため、React Native CLIで開発することをオススメします。私もReact Native CLIを使いました。
デバイスごとにシミュレーションをしたい場合は、こちらのコマンドを打つことでできます。
1-2. Xcode
XcodeはAppleのアプリを作るには必須のツールですが、React Nativeで開発するにあたってはそれほどは使いませんが、開発中に時々使いますので、事前にインストールしておきましょう。
インスタントはApp Store経由でも可能ですが、SSDに十分な容量がないと、インストールができません。私は20GBほど空きがあっても、インストールできませんでした。。。
そこで代わりに、Apple Developerからインストールをしました。
ただここでも15GB程度は空きがないとインストールできません。
1-3. 実機テスト
シミュレータを用いたアプリのテストでは、CLI(react-native run-ios)で可能ですが、実機テストをしたい場合は、Xcodeを使う必要があります。やり方はこちらを参考にしてください。
2. 実装編
今回、実際に使用したライブラリについてご紹介します。
2-1. Realm（モバイルデータベース）
世はクラウドブームですが、今回は全てデータをモバイル（ローカル）で保存することにしました。（バックエンドも開発するとなると、かなりの負荷があるので、やめました。）
その際に使用したライブラリがこのRealmです。
他にCoreDataやSQLiteというのがあるようですが、realmが話題のようなので、これを使いました。
※React Native Expoを使っている方は、Realmが利用できないので、ご注意ください。
2-2. react-native-vector-icons（アイコン）
豊富なアイコンが使える便利なライブラリですが、かなりビルドに苦労しました。。。
特にXcodeの設定を変更するこのステップを見落としがちなので、丁寧にやっていきましょう！
2-3. React Navigation（画面遷移）
画面間の遷移を扱うライブラリです。
似たライブラリとしてReact Native Navigationもありますが、設定ファイルであるAppDelegate.mをいじる必要があった上に、使い勝手が良くないと感じたので、今回はReact Navigationを使うことにしました。
2-4. react-native-picker-select（セレクトボックス）
React Nativeのセレクトボックスライブラリは中々少ないようで、今回はこれを使いました。ちょっと微妙ですが。。
2-5. その他
その他、使用頻度は高くないかもしれませんが、今回使用したライブラリはこちらです。
- Google翻訳（translate-google-api）
- 多言語音声読み上げ（react-native-tts）
- スライド式のページネーション（react-native-slider）
- 裏表のあるカードのアニメーション（react-native-card-flip）
3. アプリ申請編
基本的には、[2020年版]AppleにiOSアプリを申請する方法を参考に進めましたが、
まず第一にやるべきは、Apple Developer Programへの登録です。
（年間税込¥12,980と高額ですが、目を瞑りましょう。。）
進めていく中で一番厄介だったのが、スクリーンショット作成だったので、それについてはこちらの記事で無料で作成する方法を説明しています。以下のようなスクリーンショットが無料で作成できます。
4. 一通り開発をやってみて...
一番の感想は、ビルドのエラーが多すぎて辛いということ（泣）
こればかりは初心者のうちは仕方ないですかね、、
ただ徐々に耐性がついてきたので、ある意味エンジニアとしてスキルアップしたと思います。笑
あとは、進めていく中でReactのコーディングのトレンドを知っていき、自分がいかにレガシーな書き方をしていたかということに気づかされました、、
途中で引き返しにくかったので、諦めましたが、最低限以下くらいは知っておいた方が良いと思います。
・TypeScript > JavaScript
・関数コンポーネント > クラスコンポーネント
・Stateの管理はReduxでやるべし
記事を調べる場合は、できるだけ新しいものに触れることをオススメします。
【参考記事】
5. 実際に開発したアプリ
coming soon...