React NativeでiOS開発を始めてみよう

2017年3月30日2017年6月17日

今回は、FacebookのOSS「React Native」を利用して、Macで初期プロジェクトを立ち上げるところまで始めたので、知見を貯めておくために記事にしました。

この機会に、どんなものか知っておきたい方・触ってみたい方向けとなります。

始めた理由

Reactに関する知識は、概念だけ知っているレベルで、実務経験はなく、Android / iOS クロスプラットフォーム対応している点・僕がサーバーサイドエンジニアのため、Javascript Likeで低学習コストでアプリを作れるのではないかという思いが発端となります。

公式サイトによると、React Nativeでは、JavaScriptのみを使用してモバイルアプリを構築可能。
加えてReactと同じデザインを使用しており、宣言的なコンポーネントから豊富なモバイルUIを構築可能。

初見ですが、React・JavaScript・html/cssの経験があれば、すんなり入れそうな印象を受けました。

FacebookやInstagram/Airbnbの一部などでも実績があるようです。

iOS & Android向けの開発が出来て、開発環境にはmacOS/Linux/Windows環境別でチュートリアルがありました。

※ただし、現状iOS開発はmacOSのみ対応しているようです。

周辺の情報は、ここまでとして、チュートリアルを進めていこうと思います。

OS X El Capitan 10.11.6
Xcode 8以上
React Native 0.42

Node.js
Watchman
react-native-cli

※Watchmanは、ファイルシステムの変更を監視するためのFacebookのツール。
良いパフォーマンスを得るためにインストールすることを強くお勧めします。

Macなので、Homebrewを使います。

$ brew install node
$ brew install watchman
$ npm install -g react-native-cli

Xcode→Preferences→Locations→Command Line Tools dropdownから最新のバージョンを選択。

※Xcode 8以上が必要らしい。

ターミナルから以下のコマンドを実行するとシュミレーターが起動します。

// プロジェクトを作成
$ react-native init AwesomeProject
$ cd AwesomeProject
// プロジェクトをビルド
$ react-native run-ios

シュミレーターが起動されれば、プロジェクト起動完了です！！

作成したプロジェクトのディレクトリ（今回だとAwesomeProject）配下に、index.ios.jsというファイルがあるので、エディタなどで修正してみましょう。

修正した後、iOS Simulator起動中にCommand⌘+ Rを押すと、アプリがリロードされて変更が確認できる。

修正からの確認も楽でいいなと思いました。

今回は、ここまでで完了です！！

お疲れ様でした。

React Nativeを少し触ってみて、公式ドキュメントも英語ですが、しっかりと整備されていた。

思った通り、導入のコストはかなり低かったが、作り込みだすとどこまで画面がリッチにできるのか、パフォーマンス周りはネイティブと比べてどうなるのかが気になりました。

今後は、コードの書き方・実際に簡単なシングルアプリを作ってみようと思いました。

それでは、お楽しみに。