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アプリ開発の参考になるリソースをまとめたいと思います。