Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2019/02/27 11:00

 今回は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環境であればnvmnodebrew、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の機能を拡張することができるでしょう。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:基礎からはじめるReact Native入門
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5