ExpoではじめるReact Native開発環境の構築

基礎からはじめるReact Native入門 第2回

React Nativeのつらいところ

　ブラウザ向けの開発手法とモバイルアプリ向けの開発手法のいいとこ取りをしたかのように見えるReact Nativeですが、落とし穴もあります。Android SDKやiOS SDKの機能を使ったライブラリを利用するためには、GradleやXcodeやCocoaPodsといった、モバイルアプリのビルドツールに関する知識が必要になるのです。

　React Nativeのコマンドラインツールが、ある程度は自動化してくれているので、手間ではありません。ただ、Androidバージョンとライブラリの間で相性問題が発生した場合などに、トラブルシューティングをする必要があることを考えると、ビルドツールの知識に対して無関心ではいられません。

　JavaScript文化圏のお作法だけを分かっていればモバイルアプリ開発ができる、というわけではなく、むしろ、Android文化圏、iOS文化圏、JavaScript文化圏のすべてを扱えるチームでしか、十全にReact Nativeを運用していくことはできないと言っても過言ではないでしょう。

Expoでビルド環境を抽象化する

　さて、React Nativeの残念なところを紹介しましたが、JavaScriptエンジニアの皆さんからすれば、「できればJavaScript文化圏でシングルページアプリケーションを作るときのような方法論だけでモバイルアプリを作りたかった」と思いますよね。そんな希望を叶えるために、できる限りReact Nativeの面倒な部分を抽象化して、頻出のReact Native向けライブラリを設定済みのSDKを整備して、コマンドラインツールも使いやすくまとめたのが、Expoというツール群です。

　通常、React Nativeでアプリを作るには、図1のようにモジュールを組み合わせていきます。

図1：React Nativeで作ったアプリのテクノロジースタック

　黄色い部分がReact Native向けライブラリだと思ってください。Java/Objective-Cとしてのライブラリ部分と、JavaScriptライブラリとしての部分に分かれていますが、これらがReact Nativeというミドルウェアを通じて協調して働くことで、JavaScriptからAndroid/iOSの機能を動かすことができます。

　しかし、アプリの中でも大きなウェイトを占め、UIに関する実装が行われているのは、オレンジ色の「JavaScript App」の部分です。できたら、この部分に注力してアプリを構築したいですよね。そこで、Expo開発チームは、JavaScriptによるアプリケーション部分に注力するにあたって、さほど関心が高くない部分をパッケージングして、ひとつのライブラリとして提供することにしました。これがExpoです。

　Expoを用いたアプリ開発を行う場合、図2のように抽象化されます。

図2：Expoを使った場合のテクノロジースタック

　Android/iOS SDKのバージョンは何なのか、React Nativeのバージョンは何なのか、ライブラリ群のバージョンは何なのか、すべて隠蔽されています。プログラマーはJavaScriptアプリケーションの開発に注力することができるようになるのです。

Expoのメリットとデメリット

　Expoの公式ドキュメントを見ると、React Nativeが元々提供していた機能に加えて、多くのコンポーネントやモジュールが追加されていることが見て取れます（図3）。

図3：React Nativeにはなかった機能が増えている

　これらには、サードパーティの有力なライブラリを取り込んだものや、Expo開発チームが独自に開発したものが混在しています。共通しているのは、同梱しているReact Nativeとの相性について、一定のテストが行われた結果として取り込まれていることです。ビルドにおいてトラブルが発生しづらいのは大きなメリットです。

　筆者が好んで使っているコンポーネントやモジュールとしては、表4などがあります。

表4：Expoが提供する便利なコンポーネントやモジュール

コンポーネント名/モジュール名	概要
MapView	react-native-mapsを取り込んだもの
Camera	react-native-cameraを取り込んだもの
Svg	react-native-svgを取り込んだもの
BarCodeScanner	ANコードやQRコードなど、さまざまなバーコードを認識できるカメラプレビューのコンポーネント
Permissions	カメラやGPSを使う前にユーザーに使用許可を求めるダイアログを簡易に実装するモジュール
Audio	音声の再生や録音を行うモジュール

　BarCodeScannerは現在のブラウザではほぼ実装できない、React Nativeならではの機能なので重宝します。またAudioモジュールは、React Native向けの、類似のサードパーティーのライブラリと比べても使い勝手が良く、Expo専用で用意されているのがもったいないと感じるほどです。

　便利な一方で、デメリットもあります。JavaScriptだけで作られたライブラリならば、あとからnpmコマンドで追加できますが、Java/Objective-Cで作られたライブラリは、Expo内に存在しているものしか使うことができません。自分で拡張できるのがJavaScript部分だけになってしまうのは、Android SDKやiOS SDKを扱える人にとって、足かせになるかもしれません。

　しかしながら、既に紹介したreact-native-mapsやreact-native-camera、react-native-svgといった、モバイルアプリ開発に不可欠なライブラリは取り込まれており、筆者は多くの場合において、JavaScript以外の部分を拡張する必要を感じていません。もし拡張したくなった場合にはExpoを使わずにReact Nativeを直接運用することにして、第一歩としてExpoでアプリ開発をはじめるのは、悪くない選択肢だと感じています。

公式のチュートリアルでも採用されている

　そんなExpoは、初心者が環境構築する際にうってつけであることから、React Nativeの公式チュートリアルの中でも、環境構築をするためのツールとして紹介されています。

　本連載でもこれにならって、Expoを用いて環境構築を行い、その上でアプリ開発を学んでいきます。