React Nativeは、「複雑なUIを持たないモバイルアプリをJavaScriptエンジニアが開発する」というケースにおいて、最適なフレームワークとなりました。
これから数回に分けてReact Nativeに関する記事を書く予定ですが、今回はその概要とiOSアプリを開発する準備について書きます。
React Nativeとは
React Nativeは、Reactを用いてiOSやAndroidのネイティブアプリを構築できるフレームワークです。
その内部では、JavaScriptがバックグラウンドで動いており、JavaScriptからiOSネイティブのAPIが呼ばれています。
Nativeという名が付いているものの、ReactにおけるDOMレンダラをネイティブレンダラに置き換えているだけで、やっていることはその名のとおりReactそのものです。
また「一度書けばどのプラットフォームでも動作する」のではなく、「一度覚えればどのプラットフォーム向けにも書けるように」なります。 それぞれのプラットフォームへの最適化は必要なので、その点に注意しましょう。
メリット
React Nativeには、次のようなメリットがあります。
- ネイティブアプリがJavaScriptで書ける
- Reactと同じ設計のため、リッチなUIを宣言的なコンポーネントとして開発できる
- アプリをよりはやくビルドできる
- 再コンパイルの代わりにリロードすればよい
- 必要に応じてSwiftなどのネイティブコードを利用できる
- CSSのサブセットがあるため、CSSでスタイリングできる
デメリット
一方で、次のようなデメリットもあります。
- UIはネイティブで実行されるが、ロジックはJavaScriptのため、重い処理が苦手
- 複雑なUIになると、ネイティブコードを書かざるを得なくなる
- React Nativeのエコシステムに制限される
開発環境の構築手順
それでは、React NativeによるiOSアプリ開発の環境をつくっていきます。 動作環境は次のとおりです。
- React Native 0.31.0
- Xcode 7.3.1
1. インストールする
まず、必要なパッケージをbrew/npmでインストールします。
$ brew install node
$ brew install watchman
$ npm install -g react-native-cli
2. プロジェクトを作成する
react-native-cliは、React Native用のCLIパッケージです。
これを用いてプロジェクトを作成します。
$ react-native init AwesomeProject
3. 実行する
あとはプロジェクトのルートディレクトリ上で次のコマンドを実行すると、iOSシミュレータが立ち上がり、アプリが実行されます。
$ react-native run-ios
おわりに
これでiOSアプリを開発する準備が整いました。 次の記事では、iOSアプリ開発の参考になるリソースをまとめたいと思います。