React Nativeをどんなツールとして捉えるのか
React Nativeの雰囲気が少しわかってきたところで、JavaScriptエンジニアやモバイルアプリエンジニアにとって、React Nativeをどんな存在として見ればいいのか、考えてみましょう。
JavaScriptエンジニアから見たReact Native
既にReactの文化を理解しているJavaScriptエンジニアにとってのReact Nativeは、「ちょっとクセの強い、新しい種類のブラウザ」として捉えるとよさそうです。
React NativeではHTMLファイルもCSSファイルも使いません。しかし、現代のReactによるシングルページアプリケーション開発では、Aphroditeやstyled-componentsのようにJavaScript側でスタイルを定義するライブラリが市民権を得ているのですから、そういった開発手法がデフォルトである、と受け入れてしまえば、そこまでブラウザ向けの開発からかけ離れたものではありません。Flexboxがデフォルトで縦方向に並ぶなど、スタイル上のクセはありますが、多くのスタイル記述はCSSと同じ名前で定義され、同じような効果をもたらします。
あとは、DOM APIがない、<div>の代わりに<View>を使わないといけない、テキストは<Text>の中にしか書けない、といった文化に慣れれば、普通のReactによるWebアプリケーション開発に近い感覚で、取り組むことができるはずです。
モバイルアプリエンジニアから見たReact Native
モバイルアプリ開発に慣れ親しんだエンジニアの皆さんにとってのReact Nativeは、「JavaScriptとReactというDSL（ドメイン固有言語）で、UIの状態管理を行うことができるUIライブラリ」と捉えるとよさそうです（図6）。
図6で示したように、React Nativeは、基本的に1つの画面であるActivityやUIViewControllerの上で、動的にビューを書き換えることで成り立っています。そこに乗っているのは、FrameLayoutやUIViewです。JavaScriptからの更新指示を受け付けることができる特殊能力を持っているとはいえ、基本的にはモバイルアプリエンジニアが慣れ親しんだものです。「その動的なUI更新の制御を行うために、データバインディングの機能（次回以降に解説します）に強みを持つReactがUI記述言語として採用されている」と理解していただけると、React Nativeというテクノロジーの全貌が把握しやすいと思います。
実際の開発現場では、UIだけではなくビジネスロジックの大半をJavaScript側に書いてしまうことが多いです。ただ、ネイティブブリッジを自作することでJavaScript側からJava製やObjective-C製のロジックを呼び出すのは、モバイルアプリに精通したエンジニアならば難しいことではありません。本連載では少し抽象化されたツールを通じてReact Nativeに触るため、ネイティブ側の深いところに触れることはありませんが、興味があればぜひReact Nativeをプレーンな形で利用してみてください。
事例から見る、React Nativeが向いている領域
最後に、React Nativeの得意分野を解説します。React Nativeはブラウザの文化を踏襲している部分が多いため、基本的には情報を見るアプリに適しています。つまり、SNSやニュース系には強いということになります。実際の導入事例としては、写真共有SNS最大手「Instagram」のいくつかの画面がReact Nativeでできています。
また、ゲームプレイヤー向けのテキストチャット＆音声チャットとして最大手のサービス「ディスコード」のiOSアプリがReact Native製であることからも、SNS向けのパワフルなアプリを作成する際に強みがあることがわかります。
一方で、OpenGLによるグラフィックを多用するゲームなどの領域では、React Nativeはあまり威力を発揮しません。こういった領域では、Unityなどの採用を検討した方がよいでしょう。
まとめ
今回は、React Nativeの概要と魅力について紹介しました。ブラウザ、Android、iOSの3つのプラットフォームのアプリを開発していく際に、もっとも時間がかかるUI開発の学習コストを、JavaScriptとReactに寄せることで解決するアプローチは、開発効率の向上に大きく寄与するのではないでしょうか。
次回以降は、React Nativeを少し抽象化したツール「Expo」を使って、実際の開発手法についての解説をしていきます。
