Macrosend

「React Native」とは、Facebookが開発したオープンソースのネイティブアプリケーションフレームワークです。

ネイティブアプリとは、Webブラウザ上で動作するWebアプリと異なり、iOSやAndroidなどのOSを搭載した端末へ直接インストールして動作するアプリケーションのことをいいます。

React Nativeを用いることで、同じくFacebookの開発したJavaScript用ライブラリ「React」とほぼ同じ原理、言語を用いてネイティブアプリを開発することができます。

Web開発向け言語であるJavaScriptを用いてネイティブアプリを開発できることと、iOSとAndroidの両方で動作するクロスプラットフォームであることから、React Nativeの採用には人材確保や工数削減といった効果が期待できます。

React Nativeを採用している企業の一例は次の通りです。

• ・Facebook
• ・Facebook Ads Manager
• ・Facebook Analytics
• ・Instagram
• ・Coinbase
• ・Shopify
• ・Skype
• ・Discord
• ・Bloomberg
• ・Pinterest
• ・Tesla
• ・Uber Eats
• ・Salesforce
• ・Tencent QQ
• ・SoundCloud Pulse
  

参考：Who’s using React Native?｜React Native

まず、React Nativeを採用する主なメリットのひとつとして人材を確保しやすいことが挙げられます。

Web開発に用いられるJavaScriptで記述できるため、SwiftやObjective-Cといったネイティブアプリ開発に用いられる言語での開発経験がないエンジニアを、ネイティブアプリ開発にアサインすることができるようになります。

反対に、JavaやObjective-Cのライブラリを自分で書いて、React Native自体を拡張することも可能です。

React Nativeでは、ネイティブアプリ開発に必要なリソースを短縮することができます。

その理由は大きく分けて2つあり、「複数のOSのアプリを1つの言語で作ることができる」ことと、「ホットリロードにより確認と修正が容易」であることが挙げられます。

ホットリロードとは、コードの修正内容を即座にUIに反映する機能のことです。JavaやSwiftでは修正内容を反映するためにはコンパイルが必要になりますが、React Nativeではホットリロード機能を搭載しているため、コンパイルすることなくスムーズに修正と確認を行うことができます。

React Nativeでは、アプリの動作をネイティブUIで描画します。

そのため、端末ごとの微妙な挙動の違いなども把握しながら開発を進めることができるのです。

独自UIを用いるGoogleのFlutterに比べ、より自然な挙動のネイティブアプリを開発しやすいと言えるでしょう。

アプリをAppStoreのプラットフォーム上で提供するためには、Appleによる審査を受ける必要があり、AppStoreのガイドラインに抵触する内容がある場合にはリジェクト（却下・不合格）されてしまいます。

リジェクトの理由はさまざまですが、エラーやリンク切れなどの単純なものでリジェクトされた場合であっても、修正してから再度審査を受けられるまでに数日待つ必要がある場合もあります。

これに対し、AppleではJavaScriptベースの一部修正・変更については審査なしで行うことを認めているため、React Nativeを用いればレビューを通さずにアプリをアップデートすることができるのです。

React Nativeに限った話ではありませんが、クロスプラットフォームを用いたアプリ開発では、デバッグの必要のあるレイヤーがJavaScriptレイヤーとネイティブレイヤーの二層になるため、エラー箇所の特定に時間がかかります。

さらにiOSとAndroidに分岐して、どちら一方でのみエラーが発生するケースもあるため注意が必要です。

React NativeはJavaScriptで記述されるため、もともとSwiftやJavaなどの言語でネイティブアプリを開発していた人にとっては、学習コストがむしろ高くなってしまいます。

導入前に、現在の開発チームのWebエンジニアとネイティブエンジニアの比率と、それによってどの程度の学習コストが発生するのかを把握しておきましょう。

NAVITIMEは、独自のナビゲーション技術「トータルナビ」をコアに、公共交通機関を始め、自動車・バイク・海外旅行・フィットネスといった各種移動手段ごとに最適化したナビ情報を提供するアプリです。

NAVITIMEでは数あるナビ事業の中で、インバウンド事業部がReact Nativeを採用しました。インバウンド事業部は、自治体向け観光アプリの開発や、外国人観光客の誘致、またそれらのコンサルティングなどを行う事業部です。

インバウンド事業部では、2019年時点で6つのネイティブアプリと2つのWebアプリを運用する中で、開発工数削減やAppStoreのリジェクト回避などを目的としてReact Nativeを導入しました。

試験的に、ネイティブアプリの一部をReact Nativeで描画して遷移するといった形で導入したところ、Webエンジニアだけでの実装は難しかったため、ネイティブエンジニアとの協力が不可欠であると語られています。

参考：

NAVITIME自治体アプリ高速リリースの舞台裏 – インバウンド事業でのReact Nativeの導入について -｜Slideshare

Facebookの広告管理アプリであるFacebook Ads Managerは、2015年からReact Nativeに開発環境を移行しています。

当時のReact Nativeは今以上に新しく未熟なものでしたが、それによるリスクよりも潜在的なメリットが上回ったため採用を決めたといいます。

すでにReactに精通しているチームだったため、ほとんどのコードがJavaScriptで書かれていたことから、それらをiOSアプリ用にObjective-Cで記述してAndroidアプリ用にJavaで記述する、といった方法は効率的ではありませんでした。

既存のJavaScriptライブラリの多くを再利用することができたことで、アプリ開発の重要な部分にリソースを集中することができたといいます。

参考：

React Native for Android: How we built the first cross-platform React Native app｜facebook engineering

写真や動画投稿を中心とするSNSサービスInstagramでは、2016年初頭からReact Nativeを導入し始めました。

既存のネイティブアプリにいきなりReact Nativeを統合すると予期しないエラーが発生してしまうため、まずは最もシンプルなUIのひとつであるプッシュ通知をReact Nativeで実装して様子を見ることから始めたそうです。

最終的に、次の5つの機能をReact Nativeで実装しました。

1. 1.ポストプロモート
2. 2.SMSキャプチャ チェックポイント
3. 3.コメントモデレーション
4. 4.リードジェネレーション広告
5. 5.プッシュ通知設定

5つの機能では、iOSアプリとAndroidアプリ間で、85～99％のコードが共有されています。

参考：

React Native at Instagram｜Instagram Engineerng

プログラミング初学者向けのプログラミング学習プラットフォームを開発するProgateでは、Web版サービスをReactで開発していたこともあり、国内での導入実績があまりなかった段階からReact Nativeでのアプリ開発を決めました。

Web版サービスを軌道に乗せていたProgateにとって、Webと同じ工程でアプリ開発ができることは大きな強みだったと語っています。

また、高品質のものを高速で提供することが重要なスタートアップにとって、ライブリロード・ホットリロード機能を標準で搭載している点も大きかったとのことです。

参考：

ProgateのCTO村井氏が語る「Web開発者がReact Nativeでアプリを開発した話」 | FLEXY（フレキシー）

アメリカに本社を置く仮想通貨取引所であるCoinbaseでは、2019年半ばにReact Nativeの採用を決定。

仮想通貨販売所であるCoinbaseモバイルアプリを完全にネイティブで開発したのに対し、トレーダー向けの取引所であるCoinbase ProはReact Nativeによって開発されました。

開発して得られた知見として、React Nativeの最大のメリットは速度にあると語られています。

より短時間でエンジニアをオンボーディングし、より多くのコードを共有することで、純粋にネイティブで開発した場合よりも迅速に機能を提供することができました。特にコードの共有化は、将来的な生産性の向上につながるだろうと見込んでいます。

参考：

Onboarding thousands of users with React Native | by Coinbase

ECサイトの開発・運営をサポートするプラットフォームであるShopifyでは、何年もネイティブによるアプリ開発を推し進めていました。

しかし、JavaScriptのノウハウや、それらを用いるWebエンジニアの力をモバイルに集中させるため、またiOSとAndroidの開発を統合するため、2019年にReact Nativeの採用を決定。

Web上でReactを幅広く使用していたShopifyにとって、そのノウハウを移行できるReact Nativeは非常に親和性が高いプラットフォームでした。

また、2018年にTictailというReact Native開発に強みを持つモバイルファースト企業を買収したことも、React Native採用に踏み切った大きな要因のひとつです。

参考：

React Native is the Future of Mobile at Shopify｜Shopify Engineering

PCゲーマー向けのボイスチャットアプリを提供するDiscordでは、React Nativeがオープンソース化されるとともに採用を決めました。

Discordは、iOSアプリの開発をわずか3人のコアエンジニアで行っているにも関わらず、アプリストアでも4.8という高い評価を保持しています。

その高い生産性を支えているのが、React Nativeによるコードの共有化です。また、2019年に行った高速化施策で全体的なパフォーマンスの大幅な向上に成功したことからも、React Nativeの潜在的な生産性の高さがうかがえます。

参考：

How Discord achieves native iOS performance with React Native｜Discord

近隣の飲食店メニューを気軽に宅配注文できるサービスを提供するUberEATSでは、飲食店側が利用するレストラン用ダッシュボードの開発にReact Nativeを採用しました。

UberEATSのレストラン用ダッシュボードのベースはWeb用に構築されていたため、それをそのまま再利用することのできるReact Nativeは、うってつけのプラットフォームだったといいます。

また拡大を目指すUberEATSにとって、マルチプラットフォームであることも採用を決める上で重要な要素でした。

参考：

Powering UberEATS with React Native and Uber Engineering｜Uber Engineering

Web上の画像を集めてブックマークできるWebサービスを提供するPinterestは、2017年にReact Native導入に向けて調査・検討を開始し、最終的に採用を決定しました。

調査を通じて、PinterestではReact Nativeのメリットが開発速度の向上にあると結論付けています。

コードの共有化は単純に実装時間を節約できるだけでなく、複数のプラットフォームに固有のエンジニアが必要な場合に、共通認識をもたらすことでプラットフォーム間の不整合や余計なプロセスの発生も削減します。

Pinterestではサービスの性質上、画像グリッドのパフォーマンスを重視しており、React Nativeの採用によって画像表示周りのパフォーマンスを低下させる可能性が懸念されていました。この点に関しても、調査によってその可能性はほとんどないと結論づけられたとのことです。

参考：

Supporting React Native at Pinterest | by Pinterest Engineering | Pinterest Engineering Blog

世界最大級の無料音楽ファイル共有サービスであるSoundCloudでは、React Nativeがオープンソース化された直後の2015～2016年ごろから採用を検討していました。

SoundCloudがReact Nativeを使用する主な理由は、新たなネイティブアプリを開発するにあたって、ネイティブエンジニアのリソースが十分ではなかったためです。

実際にReact Nativeを導入すると、ライブリロードやホットリロードによりフィードバックループが大幅に短縮されました。

参考：

React Native at SoundCloud | SoundCloud Backstage Blog

合同会社日本楊重Groupでは、React Nativeを利用して建設業者の業務管理アプリ「Booking OFF」を開発・利用しています。

Booking OFFは、案件の受発注やスケジュール管理・スタッフのシフトの集計や給与計算・各種データのアップロードが可能です。

出勤登録の際には位置情報を取得することで、現場にいるかどうかのチェックもできます。時給、日給、月給、現場給、一人親方といった給与管理も設定で対応可能で、自動計算します。

参考：

Booking off – 合同会社日本揚重Group｜App Store Preview

React Nativeを用いると、Webエンジニアでもネイティブアプリ開発ができるようになることで、特にWeb開発に注力していた企業にとってネイティブ開発に必要なリソースが確保しやすくなります。

またさらに、開発環境をクロスプラットフォームに集約することによって、たとえばiOS開発エンジニアとAndroid開発エンジニアが互いに連携できるようになったり、ネイティブエンジニアがWeb開発に参加するハードルが下がったりすることで、開発リソースを平準化することにもつながります。

特にネイティブエンジニアよりも多くのWebエンジニアがいる場合、React Nativeの採用が功を奏す可能性が高いと考えられるでしょう。

1つのコードで2つのプラットフォームで動作するものが開発できるので、それぞれのプラットフォームで個別に開発する場合に比べて工数を削減することができ、その分開発速度が向上します。

この効果は、シンプルなUIであるほど顕著に表れます。たとえば、Facebookの広告管理アプリであるFacebook Ads Managerの、Android版アプリで用いられるコードは、約85％がiOS版と同じとのことです。

ただしこれは同時に、複雑なUIや特殊技術を用いたアプリを開発する場合はより多くの手間がかかる可能性も示唆しています。デメリットでも示した通り、クロスプラットフォームではレイヤーが複数に渡るため、エラーの原因特定が困難になる点に注意しましょう。

参考：

React Native for Android: How we built the first cross-platform React Native app｜facebook Engineering

React Nativeを用いると、AppStoreの審査をパスできるのでリジェクトが回避できることはメリットでも触れた通りですが、これによって得られる効果は多岐にわたります。

まず、リジェクトによるスケジュールの乱れを防ぐことができるので、たとえば官公庁などの関わる納期厳守の状況において重宝するでしょう。

また、更新頻度の高いアプリの場合、微修正の度に審査を通していてはリアルタイム性が損なわれてしまうため、アプリそのものの価値を高めることにも寄与します。

ただし、審査をパスすることができるのはデザイン面における更新のみです。アプリの機能そのものに変更を加える場合は通常通り審査を通す必要がある点は認識しておく必要があるでしょう。