ReactNative

Blog

 

React Nativeのメリット・デメリットといった基本情報や、国内・海外の採用事例10選を紹介したうえで、それらを踏まえてReact Nativeを採用することで得られる効果について解説します。React Nativeの採用を検討している方は、ぜひ参考にしてください。

 

React Nativeの基本情報

まずはReact Nativeの基本情報について解説します。

React Nativeとは

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

 

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

 

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

 

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

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のメリット

React Nativeのメリットは、主に次の4点です。

 

  1. 1.Webエンジニアでもネイティブアプリ開発ができる
  2. 2.ネイティブアプリ開発に必要なリソースを短縮できる
  3. 3.ネイティブUIで描画されるため実際の挙動を参考にしながら開発ができる
  4. 4.AppStoreのリジェクトを回避できる

メリット①:Webエンジニアでもネイティブアプリ開発ができる

まず、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のリジェクトを回避できる

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

 

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

 

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

React Nativeのデメリット

一方で、React Nativeには次のようなデメリットもあります。

 

  1. 1.エラー箇所の特定に時間がかかる
  2. 2.ネイティブエンジニアには学習コストが高い

デメリット①:エラー箇所の特定に時間がかかる

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

 

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

デメリット②:ネイティブエンジニアには学習コストが高い

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

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

React Nativeで開発されたアプリの事例10選

ここからは、React Nativeで開発されたアプリの事例について解説します。NAVITIMEやProgateなど、まだまだ数の少ない国内事例についても紹介しますので、ぜひご覧ください。

事例①:NAVITIME


navitime


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

 

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

 

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

 

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

 

参考:

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

事例②:Facebook Ads Manager


adsmanager


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

事例③:Instagram


instagram


写真や動画投稿を中心とする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

progate

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

 

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

 

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

 

参考:

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

事例⑤:Coinbase

coinbase

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

 

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

 

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

 

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

 

参考:

Onboarding thousands of users with React Native | by Coinbase

事例⑥:Shopify

shopify

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

事例⑦:Discord

discord

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

ubereats

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

 

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

 

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

 

参考:

Powering UberEATS with React Native and Uber Engineering|Uber Engineering

事例⑨:Pinterest

pinterest

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

 

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

 

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

 

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

 

参考:

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

事例⑩:SoundCloud Pulse

soundcloud_pulse

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

 

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

 

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

 

参考:

React Native at SoundCloud | SoundCloud Backstage Blog

React Nativeで得られる効果

メリットとデメリットや事例を踏まえて、React Nativeを用いることで得られる効果をまとめると次の通りです。

開発リソースの確保と平準化

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の審査をパスできるのでリジェクトが回避できることはメリットでも触れた通りですが、これによって得られる効果は多岐にわたります。

 

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

 

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

 

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

React Nativeを検討する上での注意点

ここまで解説した通り、React Nativeは正しく使えば非常に便利なプラットフォームとして活用できます。一方で、使いどころを誤るとかえって作業効率やパフォーマンスを低下させる可能性がある点に注意が必要です。

 

まず、学習コストが高くなるためWebエンジニアよりもネイティブエンジニアが多くいる状況には向きません。

 

また、まだ比較的新しいプラットフォームということもあり、今後いつまでサポートが続くかは不透明です。そのため、長期的なサポートが必要となるBtoBのプロダクトには向かない可能性も考えられます。

 

加えて、新規にアプリを開発する場合、そもそもクロスプラットフォームで開発を始める必要があるのかも検討の余地があるでしょう。

 

たとえば、いまや世界的に有名なサービスとなったInstagramも、ユーザー数が数百万人になるまではiOSのみの対応でした。

 

すでに数多くのユーザーを抱えている場合や、初期のグロースが重要となるSNSサービスを展開する場合などは別として、特別な理由がなければあえて複数プラットフォームを前提として開発する必要はないかもしれません。