対象読者
- 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などがあります。
| コンポーネント名 | 役割 |
|---|---|
| View | レイアウトの基本単位 |
| Text | テキストを表示・装飾する |
| ActivityIndicator | 処理待ちを表すインジケーター |
| FlatList | 配列データを省メモリで表示 |
| ScrollView | 内側のコンテンツが画面をはみ出たらスクロールさせる |
| RefreshControl | ScrollViewに「引っ張って更新」を付与する |
| TouchableOpacity | あらゆるビューにタップイベントとフィードバックを持たせる |
モバイルアプリを作る上では最低限必要な部品が、ちょうどいい粒度で提供されています。同様に、代表的なモジュールとしては表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に挙げます。
| ライブラリ名 | 主な機能 |
|---|---|
| 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の機能を拡張することができるでしょう。
