「React Native」はなにがすごい？ リクルートのエンジニアが徹底調査
React Nativeとは？
鎌倉正也（以下、鎌倉）：それでは、始めさせていただきます。「フロントエンドエンジニアがReact Nativeを触ってみた」というタイトルで発表させていただきます。鎌倉と申します。
まずは、自己紹介なんですけれども。普段はフロントエンドエンジニアとして、ReactとかReduxとか使って、Webアプリを使っております。今年の1月くらいから、React Nativeの調査を始めまして、今日に至るという感じです。
そして今日のアジェンダですね。今日の内容は、React Nativeについてという話と、なぜReact Nativeを調査し始めたのかというのと、React Nativeのアーキテクチャの話。あとは、デモのアプリも作っていたので、その紹介を少ししようかなと思っています。
まずは、React Nativeについてなんですけど。ご存知の方もけっこういると思うんですが、Facebookが中心となって開発しているネイティブアプリのためのフレームワークです。特徴としては、Web技術、知識、HTML、CSS、JavaScript、Reactなどを使って、iOS、Androidのアプリを開発できます。
WebViewでなく、ネイティブのUIを直接JSがコントロールしているので、よって、ハイパフォーマンス。パフォーマンスがよくて、さらにReact Nativeが提供している機能でライブリロードとかホットリローディングというのがありまして、開発効率がいいという特徴があります。「ライブリロード」というのは、後でデモします。
もう1個、これは、Reactの思想なんですけど、「Learn once, Write anywhere」というのがありまして、「一度学んだら、どこでも書ける」みたいな言葉なんですけれども。今回のReact Nativeの例で言うと、WebでReactを触っていれば、React Nativeを使って、ネイティブアプリの開発もできます。
少しReactについて書いたんですけれども。最近、WebアプリでReactを採用するケースというのが増えていると思いまして、要は、Reactを書ける人材も増えている。リクルートでも、React、Reduxを使ったフロントエンド支援みたいなものがありまして、それによってReactを書ける人材も増えている。人員確保が楽になる。React Nativeを使うことによって、今までWebでReact書いてたエンジニアが、ほかの領域にも行けることによって、仕事幅を拡大できる。
今、React Nativeのプラットフォームの話が出たんですけども、iOS、Android、みなさんご存知だと思うんですけども、あと、tvOSもビルトインで開発することができます。
ほかにも、サードパーティ、ライブラリとか使うと、Windowsのアプリであったり、MacOSのデスクトップのアプリであったり。昨年発売された新しいMacBook Proのタッチバーを使ったMacのデスクトップアプリも作れたりします。
じゃあReact Nativeはどういうアプリで採用されているのかというところでショーケースを見てみると、FacebookやInstagram、Airbnbなど、けっこうユーザー数の多いアプリでも採用されています。
事例として、Instagramの事例が詳細に記事で上がっていたので、紹介しようと思います。Instagramは、もともとネイティブのアプリがあったので、既存アプリにReact Nativeを統合するような感じになりました。なので、まずは最初に簡単な画面から取り掛かっていったそうです。
もともとWebViewの画面で、UIがシンプルで、ナビゲーションも少ない、そんな簡単なシンプルな画面に改良してきました。Push Notification Setting、プッシュサービスの設定画面ですね。そういうものを経て、次に、ネイティブで作られたObjective-CとかJavaで作られた画面をReact Native化することを次に行っていて、パフォーマンスの測定とか、トレードオフがどれくらいあがるのかとか、そういうのをスイッチ化して、細かくパフォーマンス測定していったそうです。
結果、コードシェアリングの話なんですけども、これはReact Nativeといっても、iOS、Androidとまったく同じコードが使えるわけではなくて、それぞれに特化したコードを書く必要が出てきまして、それのコードシェアのパーセンテージが紹介されています。平均すると、だいたい90パーセントくらいは、iOS、Androidが共有できているような感じになっています。
そして、InstagramがWebViewからReact Nativeに書き換えたときによかった利点ですね。WebViewの問題点としては、起動が遅いだとか、UXにネイティブ感がないとか言われるんですけども、React Native化することによって、起動時間やUXが改善。もう1個、もともとネイティブで書かれていたところからReact Nativeに書き換えたことで、やってよかったのはコードの共通化ができたということ。
あとは、ライブリロードとかホットリローディングのおかげで、コンパイル、インストールのサイクルが早くなって、開発のパフォーマンスが向上したこと。これをやって、より早く機能をリリースするようなことができるようになりました。
ライブリロード、ホットリローディングの話が出てきてるので、軽くデモをしたいと思います。
これは、すごく簡単なカウントアップするだけのアプリなんですけども。こっちがコードですね。今、ちなみに、これはホットリロードが有効になっているような状態になっています。なので、例えばバックグラウンドカラーを書き換えて保存すると、このようにわざわざアプリをリロードしなくても、変更が通知されて書き換わるというようなことが可能になっています。これがホットリローディングですね。
もう1個、ライブリロードがあったので、そっちも見てみます。今度は、背景色を変えると……カウントの値がゼロにリセットされていることに注目してほしくて。今、ライブリロードだと、Stateの値がリセットされての再起動なので、すべてこれ、Redux以外で使っていたりするんですけれども、そのへんの値もStateの状態もInitial Stateに戻ります。
ホットリローディングのほうは、Stateの状態を保持したまま更新してくれるので、例えば、画面の階層が深いところに行って、ホットリローディングをやると、わざわざトップに戻らないで、そのページのままモジュールの更新ができるというようなことができます。
