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

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

　今回はReact Nativeを使ったアプリの作成と実行までの流れを解説します。React Nativeの仕組みはよくできたものですが、そのまま扱おうとすると必要な知識が多岐にわたってしまい大変です。本記事では、React Nativeを簡単に扱えるように抽象化されたツール「Expo」を使います。ReactやJavaScriptによるWebアプリ開発では、よくある形でのセットアップになります。

対象読者

• JavaScriptとWeb開発の基礎に理解がある方
• Reactを用いたJavaScriptアプリケーション開発の経験者
• Androidアプリ開発の経験者
• iOSアプリ開発の経験者

前提環境

　筆者の検証環境は以下の通りです。

• macOS Mojave 10.14.2
• Node.js 11.7.0／npm 6.5.0
• expo-cli 2.6.14

　Node.js環境が準備できていない方は別途インストールしてください。Mac環境であればnvmやnodebrew、Windows環境であればnvm-windows等のバージョン管理ツールの利用をおすすめします。

React Nativeでできること

　前回の記事では、React Nativeがブラウザの方法論でUIを実装しつつも、UI以外の構造としてはモバイルアプリに近いものであると説明しました。では、実際にJavaScriptで利用できる道具としては、何が用意されているのでしょうか。こちらの公式ドキュメントを見てみましょう。

　React NativeがJavaScriptに対して提供している機能は、大きく分けて、コンポーネントとモジュールに分類されます。代表的なコンポーネントとして、表1などがあります。

表1：代表的なコンポーネント

コンポーネント名	役割
View	レイアウトの基本単位
Text	テキストを表示・装飾する
ActivityIndicator	処理待ちを表すインジケーター
FlatList	配列データを省メモリで表示
ScrollView	内側のコンテンツが画面をはみ出たらスクロールさせる
RefreshControl	ScrollViewに「引っ張って更新」を付与する
TouchableOpacity	あらゆるビューにタップイベントとフィードバックを持たせる

　モバイルアプリを作る上では最低限必要な部品が、ちょうどいい粒度で提供されています。同様に、代表的なモジュールとしては表2などがあります。

表2：代表的なモジュール

モジュール名	役割
Alert	簡易なダイアログを表示する
Dimensions	アプリのウィンドウやデバイスの画面サイズを取得する
Keyboard	キーボードの表示・非表示を検知する
Animated	ビューをアニメーションさせる
StyleSheet	コンポーネントに適用するスタイルをまとめて管理する
Geolocation	現在地の緯度経度情報を取得する（window.navigator.geolocationとして提供）
Fetch	インターネットとの通信を行う（window.fetchとして提供）
Console	デバッグログを表示する（window.consoleとして提供）
Require	NPMモジュールや別のファイルとして定義されたCommonJSモジュールを取り込む（window.requireとして提供）

　こちらは、コンポーネントとは少し毛色が違っています。緯度経度情報の取得や、インターネットとの通信、ログといった、ブラウザでも提供されている機能については、グローバルスコープの関数として定義され、ブラウザと似た感覚で使うことができます。一方で、Webとは互換性のない機能が、importやrequireを要する、一般的なJavaScriptのモジュールとして提供されている形です。

サードパーティーツールを取り込むことで豊富な機能が使える

　React Nativeによるモバイルアプリ開発では、NPMによるJavaScriptアプリケーションの開発と同様に、NPMを使ってサードパーティーのライブラリを取り込むことができます。

　React Native向けのライブラリは、lodashやmomentといったJavaScript製のライブラリを扱えるだけではなく、JavaやObjective-Cによる実装を持つことができます。こういったライブラリは、JavaScriptを通じてAndroid SDKやiOS SDKの機能を扱うことができ、React Nativeの機能を強力に拡張します。筆者が業務でよく使うReact Native向けライブラリの一例を表3に挙げます。

表3：React Native向けのライブラリの例

ライブラリ名	主な機能
react-native-maps	GoogleマップやiOSマップを表示・操作する
react-native-camera	写真の撮影やバーコードのスキャンを行う
react-native-svg	SVGと互換性のあるAPIでベクターイメージを描画する

　react-native-cameraはブラウザだと実現が難しいカメラ機能を活用するための、まさにReact Nativeらしい機能を提供しているライブラリです。また、react-native-mapsも、ブラウザ版に比べて高機能なモバイルアプリ版のSDKを利用できるため、ユーザビリティが大きく向上します。react-native-svgはSVGファイルを読み込めるわけではありませんが、SVGのタグと同じ名前のコンポーネントを提供しています。SVGファイルからコピペしたタグの名前を少し変えるだけでブラウザと同様の表示ができることが多いため、SVGアイコンをReact Native製のアプリに取り込む場合に、重宝しています。

　これらのライブラリを導入する際には、NPMのインストールだけではなく、AndroidやiOSのプロジェクトに対しても設定を行う必要があります。幸いにも、その方法は通常のAndroidアプリ開発でGradleを使う場合や、通常のiOSアプリ開発でXcodeやCocoaPodsを使う場合と、かなり近いやり方になっています。モバイルアプリ開発に慣れ親しんだ人であれば、特に問題なく、React Nativeの機能を拡張することができるでしょう。