なぜReact Nativeを選択したのか

　昨今「モバイルファースト」という言葉があるほど、スマートフォン(以下スマホ)の利便性や重要性が高まっており、スマホ向けのサイトやアプリケーション(以下アプリ)を先に作る手法が浸透しています。2011年頃から爆発的に増加したスマホの普及率は、ここ数年でパソコンを上回っており¹、私たちの生活の必需品だと言えます。このような時代背景のなか、アプリやサービスの運営者は優先事項としてスマホの利便性向上は欠かすことができません。しかし、スマホアプリ開発者が常に在籍する企業ばかりでないのが実情です。筆者が所属するピクスタ株式会社やスナップマート株式会社では、スマホアプリをSwiftで開発しています。ところが、開発部に所属するエンジニアの大半はWebを主戦場にして、Swift製のスマホアプリをメンテナンスできるエンジニアが限られています。この状況では、継続的かつ迅速に開発を行うことはおろか、ビジネス要求に応えることも困難です。スマホアプリ開発経験者が少ないことや、今後スマホアプリエンジニアを採用しアプリを専門領域とするチームを組成することは考えにくいため、Webエンジニアでもスマホアプリ開発を行うための方法を模索しました。また、開発部としての問題感が芽生えた時期と同時に、ビジネスとしてもAndroid版のSnapmartアプリ開発に着手した方が良いだろうと検討がなされました。²当時の状況、技術選定、開発時の詳細については後述しますが、開発組織としての問題感とビジネス貢献を考えると、弊社ではReact Nativeが最も合っている技術でした。いまではReact Native製アプリを無事にリリースでき、狙い通り継続的に改善改修ができる状態になりました。筆者は、この開発経験でWebエンジニアでもスマホアプリ開発が行える手応え得ることができたので、その知見を共有したいと思い、執筆を決意しました。

　本書では、4部に分けて下記のことをお伝えします。

　１．モバイルアプリ開発者が不在の現場で、スマホアプリ実装と継続的な開発をどう考え、どのように行うか

　２．React Native製アプリの基本的な実装とUI構築方法

　３．規模が大きくなったアプリで必要になるツールとその使い方

　４．より良いUX構築とリリースまでの流れ

本書の趣旨と対象読者

　本書では、筆者がスマホアプリ作成における技術選定から、実装、リリースまでの過程で得た知見や実装手法を紹介します。また、読者の皆さんがReact Nativeとはどのようなものなのかを理解することや、実際に動作するスマホアプリを構築できるようになることを目標にします。"習うより慣れろ"の精神で、実際にコードに触れながら解説をしていきます。

　筆者がReactNativeで実装を始めたときのスキルレベルは「Reactは知っているが、ネイティブアプリ開発の知識はない」というレベルでした。if文やfor文などの基本構文、JSX、propsとstateの理解、ライフサイクルは理解している状態です。しかし、実装の中で、しばしば「今発生したエラーはReact Native, React, その他のモジュールのどこにあるのか？」というように問題をうまく切り分けることができず、混乱してしまうことがありました。そのため、本書では「JavaScript(React)での開発経験はあるが、スマホのネイティブアプリの開発経験はない」というWebエンジニアの方向けに、React Nativeや実装を取り巻く技術をひとつずつ整理しながら解説していきます。

意見と質問

　本書の内容については万全を期して作成いたしましたが、万一ご不審な点や誤りなど、お気付きのことがありましたらご連絡ください。また、将来の改訂に関する提案なども歓迎します。連絡先は下記の通りです。

　星直史(ほしなおし)

　Facebook: https://www.facebook.com/naoshi.hoshi

　Twitter: https://twitter.com/NaoshiHoshi

第1章　スマアプリ開発の全体像

　スマホアプリ開発手法(言語やフレームワーク)は大きく4つに分けられます。

　・iOS開発

　　─Appleが開発しているOS。macOSで開発を行う必要がある。IDE(統合開発環境)はXcodeを使用し、言語はSwiftかObjective-Cで実装を行う。アプリはApple社が運営するApp Storeで配信される。

　・Android開発

　　─Googleが開発しているOS。IDEはAndroid Studio(Googleが提供するAndroid向けIDE)で開発を行うことが多い。言語はKotlinかJavaで実装を行う。アプリはGoogle社が運営するGoogle Playで配信される。

　・クロスプラットフォーム開発

　　─ひとつの言語でiOSとAndroidの両OSのアプリをビルドできる。クロスプラットフォーム開発が行える言語は多数存在し、特徴は大きく3つに分かれる。WebViewベース(Cordova, Titanium Mobile)、独自レンダラベース(Unity, Flutter)、ネイティブビューベース(React Native, Xamarin)。また、iOSとAndroidだけではなく、Windowsアプリも開発可能。

　・PWA(Progressive Web Apps)開発

　　─スマホ向けの"Webサイト"をスマホアプリのように動作させる仕組み。Googleが定めた要素¹を備えたWebサイトであり、Service Worker(ブラウザーAPI)を利用して、オフラインで動作やプッシュ通知を実現する。JavaScriptで実装を行う。

　iOSとAndroidのふたつのOS向けアプリを作るだけでも10言語以上も選択肢があります。アプリの要件にもよりますが、基本的にはここで挙げた言語を用いれば「スマホを利用するユーザー向けのアプリ」を作ることは可能です。React Nativeは上記の分類のうち、クロスプラットフォーム開発が行える技術です。

1.1　React Nativeとは

　React Nativeは、Facebook社が開発しているJavaScriptのフレームワークです。フレームワーク名からわかるようにReact.jsを用いて開発を行います。iOS SDKとAndroid SDKが提供するネイティブビューを内部実装として持つ、Reactコンポーネントを使用してUI構築ができます。そのため、React Nativeで実装を行うと、ひとつのソースコードからiOSとAndroidのアプリの生成が可能になります。また、JavaScript向けのモジュールを使用することも可能であるためnpmモジュールの恩恵を受けて開発を高速化することも可能です。

WebViewとネイティブビューの違い

　WebViewとは、指定したWebページを読み込んで表示する機能です。Webページを読み込むだけの枠を用意して、実際のコンテンツはHTMLとCSSで構築されます。Webページが既に存在している場合はそのまま流用が可能です。また、CordovaやTitanium MobileはWebViewでアプリを構築していくことを前提としています。ネイティブビューはAndroidとiOSが標準で用意している機能です。そのため動作速度が早いことや、一度アプリをダウンロードすれば、オフラインでも動作させることができます。また、デバイスの機能(位置情報、Push通知、音声認識、Bluetooth、加速度センサーなど)にアクセスしやすいため、UXの向上や、HTMLとCSSでは実現がしにくいUI構築を迅速に行えることが利点です。

1.2　Expoとは

　React NativeはReact.jsで書いたひとつのコードでAndroidとiOSアプリの生成が可能です。しかし、開発を行う中でテスト用のアプリ配布をiOSならTestFlightを使用し、AndroidならAPKファイルを配布して回らなければなりません。また、React Nativeでは、マップ表示や画像の加工するための機能など、用意されていないコンポーネントもあります。React Nativeはクロスプラットフォーム開発において有力な技術ではありますが、それ単体で使用すると手間がかかってしまう部分が多分にあります。

　このような問題を解決するのにExpoというReact Native開発を支援するツールが登場しました。Expoは先述したReact Native開発における痛みのほとんどを吸収しています。開発環境においては、Metro Bundler²を立ち上げることで、スマホ端末にあらかじめインストールしているExpoクライアントに向けて配信を行います。そうすることで、コードの変更を瞬時に検知してエミュレーターや実機へ配信が可能になります。

　Storeに配信するためのビルドは、KotlinやSwiftで開発した場合の配信方法とは大きく異なります。Expoを使用した配信は、ビルドなどの作業が全てexpo.io³で行われます。ビルドが終わるとiOSならIPAファイルが、AndroidならAPKファイルが手に入ります。しかし、このIPA/APKファイルは、expo.ioに配信されたアプリを参照するためのファイルとなります。つまりExpoを使ったアプリ配信の仕組みは、実際のアプリはexpo.ioに置かれ、デバイスで動作するアプリは実はexpo.io上のアプリを参照していることになります。KotlinやSwiftといったネイティブ言語では、修正をリリースする場合はビルドを行い、Storeへアップロードと審査申請を行い、ユーザーが新しいバージョンのアップデートをしなければ修正が反映されません。Expoを使うと、一度expo.ioを経由したリリースを行えば、ダウンロードされたアプリはリリースの検知と更新を自動で行うため、Storeの審査とユーザーアップデートをスキップすることができます。効率化もさることながら、ユーザーに対して修正を瞬時に反映できるのは非常に大きなメリットといえます。

　Expoはアプリに組み込む機能においても、React Native単体では実現できないコンポーネントを提供しています。先ほど挙げたマップ表示や画像の加工はそれぞれ、MapViewコンポーネント、ImageManipulatorコンポーネントで実現可能です。もちろんこれだけではなく、デバイスの機能(カメラ、位置情報、Push通知、センサーなど)が簡単に利用できるようコンポーネント化されており、Expo SDKとして提供されています。

目次