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

CodeZine / 2019年2月27日 11時0分

 今回は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などがあります。

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の機能を拡張することができるでしょう。

WINGSプロジェクト 中川幸哉[著]

【関連記事】
SEO対策やページ表示速度アップに有効!「Angular」のサーバーサイドレンダリング
Android Studio 3.3の目玉機能「ナビゲーションエディタ」を理解する
JavaScriptの変数宣言はletにすべきか 『入門JavaScriptプログラミング』から解説
フレームワークとツールの両面で完成度アップ! 「Angular」バージョン7の新機能
JavaScriptスプレッドシート部品「SpreadJS」と入力フォーム部品「InputManJS」をReact環境で活用

■記事全文へ

この記事に関連するニュース

トピックスRSS

ランキング