React Nativeの公式ドキュメントを和訳してみる - はじめに(Getting Started)※iOSアプリ開発向け
注意
- 当記事はReact Native 0.51の公式ドキュメントGetting Started · React Nativeの独自和訳です。間違いなどあればご指摘ください。
- バージョン0.51のドキュメントに準拠します。
- 参照リンク先は基本的に元サイトです。リンク先サイトを和訳したらそのページに差し替えます。
- Facebook社に無断なので怒られたら消します。
はじめに
このページでは最初のReact Native アプリをインストールし構築するまでを解説します。もしすでにReact Vativeをインストール済みなら、次のチュートリアルへ進んでください。*1
Quick Start
→ Building Projects with Native Code
プロジェクト内にネイティブコードを含む必要がある場合はこちらの説明に従ってください。例えば、すでにあるアプリとReact Nativeを統合する場合や、Create React Native Appに弾かれた場合*2はこのセクションが役立つでしょう。
開発環境のOS、またiOSとAndroidのどちらから開発をスタートしたいかによって説明が少し変わってきます。iOSとAndroidの両方を開発したい場合も、セットアップが微妙に異なるのでとりあえずどちらか一方を選んでください。((公式ドキュメントでは環境をタブ選択できますが、本記事では
を選択したものを対象とします。))
インストール依存環境
Node, Watchman, React Nativeのコマンドラインインターフェース, Xcodeが必要です。
アプリ開発のエディターは好きなものを使えますが、XcodeのインストールはReact NativeのiOSアプリ構築のための必須ツールを設定するために必要です。
Node、 Watchman
NodeとWatchmanはHomebrewを使ってインストールすればよいでしょう。Homebrewをインストール後、下のコマンドをターミナルで走らせてください。
brew install node brew install watchman
Nodeがインストール済みの場合は、バージョンが4かそれより新しいものであることを確認してください。
WatchmanはFacebook製のファイル変更監視ツールです。より良いパフォーマンスのために、インストールすることを強くおすすめします。*3
React Native CLI*4
Nodeをインストールするとnpmコマンドが使えるようになるので、npmを使ってReact Native コマンドラインインターフェースをインストールしましょう。
次のコマンドをターミナルで実行しましょう。
npm install -g react-native-cli
注: もし Cannot find module 'npmlog' のようなエラーが出た時は、次のコマンドで直接npmをインストールしてみてください。curl -0 -L https://npmjs.org/install.sh | sudo sh
新規アプリケーション作成
React Native コマンドラインインターフェース を使って、"AwesomeProject"という新しいReact Native プロジェクトを生成しましょう。
react-native init AwesomeProject
ReactNativeをすでにあるアプリに統合する場合や、Create React Native Appに弾かれた場合、または既存のReactNativeプロジェクトにiOSのサポートを追加しようとしている場合などはこのコマンドは必須ではありません。( Platform Specific Code参照)
React Native アプリケーションの起動
React Native プロジェクトフォルダでreact-native run-iosを実行してください。
cd AwesomeProject react-native run-ios
間も無く、iOS シミュレーターで新しいアプリが起動されるのを確認できるでしょう。react-native run-ios
はアプリを起動する一つの方法でしかありません。XcodeやNuclide*5から直接起動することも可能です。
もしうまく動かない場合はトラブルシューティングをごらんください。
アプリの編集
さぁ、アプリの起動に成功しました。次は編集をしましょう。
完成!
おめでとう!初めてのReact Native アプリを起動~編集まで達成しました!
お次は?
- 開発者メニューからLive Reloadをonにしましょう。変更の保存に応じてアプリが自動で更新されるようになります。
- もしこの新しいReactNativeコードを既存のアプリケーションに組み込みたい場合は、インテグレーションガイドを参照してください
もっとReact Nativeを学びたいなら、引き続きチュートリアルへ進みましょう
*1:Quick StartではなくBuilding Projects with Native Code(ネイティブコードを含めたプロジェクト構築)を対象とします。
*2:ビルド設定なしでReact Nativeのアプリを立ち上げられるnpmモジュール。要はQuick Startがうまくいかなかった人向け。
*3:エディターの保存と同時にシミュレーターを自動アップデートする機能が使えるようになるのでデザイン時に重宝します。
*5:Facebook社製のオープンソースの開発環境。javascriptのデバッグに強いらしい
*6:Xcode起動->プロジェクト選択->左上のプロジェクト名>デバイス選択欄から有線でつないだiOSデバイス選択->二つ左の三角。開発者登録してなくても実機検証できます。
*7:バージョン0.49からindex.ios.jsとindex.android.jsはindex.ios.jsに統合されました。