React Nativeの公式ドキュメントを和訳してみる - はじめに(Getting Started)※iOSアプリ開発向け

注意
  • 当記事はReact Native 0.51の公式ドキュメントGetting Started · React Nativeの独自和訳です。間違いなどあればご指摘ください。
  • バージョン0.51のドキュメントに準拠します。
  • 参照リンク先は基本的に元サイトです。リンク先サイトを和訳したらそのページに差し替えます。
  • Facebook社に無断なので怒られたら消します。

facebook.github.io

はじめに

このページでは最初のReact Native アプリをインストールし構築するまでを解説します。もしすでにReact Vativeをインストール済みなら、次のチュートリアルへ進んでください。*1

 Quick Start
→ Building Projects with Native Code

プロジェクト内にネイティブコードを含む必要がある場合はこちらの説明に従ってください。例えば、すでにあるアプリとReact Nativeを統合する場合や、Create React Native Appに弾かれた場合*2はこのセクションが役立つでしょう。

開発環境のOS、またiOSAndroidのどちらから開発をスタートしたいかによって説明が少し変わってきます。iOSAndroidの両方を開発したい場合も、セットアップが微妙に異なるのでとりあえずどちらか一方を選んでください。((公式ドキュメントでは環境をタブ選択できますが、本記事では

を選択したものを対象とします。))

Development OS;
macOS
  Windows
  Linux

Target OS:
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かそれより新しいものであることを確認してください。

WatchmanFacebook製のファイル変更監視ツールです。より良いパフォーマンスのために、インストールすることを強くおすすめします。*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

Xcode

Xcodeのインストールには、App Store経由が一番簡単です。
Xcodeをインストールすると、IOS シミュレーターとその他iOS appの構築に必要なすべてのツールがインストールされます。

すでにXcodeをインストールしている場合は、バージョンが8以上か確認してください。

Xcodeコマンドラインツールも必要です。Xcodeを開き、”Preference..."をメニューから選択しましょう。"Locations"パネルへ行き、Command Line Toolsのドロップダウンで最新版を選択しツールをインストールしてください。

f:id:divrots:20171124213355p:plain
訳者環境で作成

新規アプリケーション作成

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 シミュレーターで新しいアプリが起動されるのを確認できるでしょう。

f:id:divrots:20171124214344p:plain
引用元:http://facebook.github.io/react-native/releases/0.51/docs/getting-started.html
react-native run-ios
はアプリを起動する一つの方法でしかありません。XcodeNuclide*5から直接起動することも可能です。

もしうまく動かない場合はトラブルシューティングをごらんください。

バイス上での起動

上記コマンドは初期設定では自動的にiOS シミュレーター上でアプリを起動します。もしiOSの実機上で起動したいならば、Xcodeを使いましょう。*6

アプリの編集

さぁ、アプリの起動に成功しました。次は編集をしましょう。

  • App.js*7テキストエディタやその他お好きなエディタで開きます。
  • iOSシミュレーターで ⌘R を叩きアプリを更新し、変更を確認しましょう
完成!

おめでとう!初めてのReact Native アプリを起動~編集まで達成しました!

お次は?

  • 開発者メニューからLive Reloadをonにしましょう。変更の保存に応じてアプリが自動で更新されるようになります。
  • もしこの新しいReactNativeコードを既存のアプリケーションに組み込みたい場合は、インテグレーションガイドを参照してください

もっとReact Nativeを学びたいなら、引き続きチュートリアルへ進みましょう

*1:Quick StartではなくBuilding Projects with Native Code(ネイティブコードを含めたプロジェクト構築)を対象とします。

*2:ビルド設定なしでReact Nativeのアプリを立ち上げられるnpmモジュール。要はQuick Startがうまくいかなかった人向け。

*3:エディターの保存と同時にシミュレーターを自動アップデートする機能が使えるようになるのでデザイン時に重宝します。

*4:コマンドラインインターフェース

*5:Facebook社製のオープンソースの開発環境。javascriptデバッグに強いらしい

*6:Xcode起動->プロジェクト選択->左上のプロジェクト名>デバイス選択欄から有線でつないだiOSバイス選択->二つ左の三角。開発者登録してなくても実機検証できます。

*7:バージョン0.49からindex.ios.jsとindex.android.jsはindex.ios.jsに統合されました。