React Nativeを簡単に利用できるExpo Snackでスマホアプリを作ってみる

日経ソフトウエア2019.7でReact Nativeを利用したスマホアプリ開発の記事がありましたので簡単に纏めてみます。

React Native?

米Facebookが開発したスマホアプリ開発用フレームワーク。
JavascriptでAndroid,iOSアプリを同時に開発できる事から近年注目を集めている。
React Native は、Facebookが開発したWebアプリのJavascriptフレームワーク、Reactから派生したもの。
ネイティヴAPIは隠蔽されており、JSXと呼ばれるHTMLに似たタグを使ってWebページを記載するのと同じ感覚で画面表示を記載することが出来る。
React Nativeを使うことで、Javascriptで開発できる、Andoroid,iOSアプリの同時開発が出来るなどのメリットがあります。

開発環境

開発環境をしっかり整備しようとすると、Node.js,Python2, Android Studio, Xcode....などいくらかのソフトウェアをインストールせなければならず面倒です。
そこで、Expo SnackというWebサービスで提供される開発環境を利用することで簡単に開発環境を揃えることが出来ます。
Expo Snackは、Expoベースのアプリを作成して実行できるWebベースの開発環境です。
Expoというのは、React Nativeで利用頻度の高いネイティヴモジュールやビルドツールなどを纏めたソフトウェアです。
ただし、Expo Snackでは、Expoが用意するアプリのビルド機能は利用できない。つまり、スマホにインストールするための実行ファイルの生成ができない。
しかし、Webブラウザ上のエミュレータで即時実行する、またはスマホアプリのExpoをインストールすればスマホの実機で実行させることも可能。
つまり、React Nativeを利用した本格的な開発を行う場合はPCに開発環境を揃える必要があるが、試用などの目的であればExpo Snackの利用で十分なのである。

https://snack.expo.io/

アプリを実行する

Expo Snackにアクセスし、Expoアカウントを作成しログインします。
まずは、表示されているサンプルアプリをSaveし、実行してみます。
実行方法は2つあります。

Webブラウザ上のエミュレータで実行
スマホアプリのExpoまたはExpo Clientを利用して実行

1.の方法では、画面右側に表示される「Tap to Play」をクリックすることでWebブラウザ上のエミュレータを1ヶ月100分まで無料で利用できます。が、多くの場合リソースの順番待ちとなる事が多く、課金する事で順番待ちせずに実行させる事が可能です。

2.の方法は、スマホの実機にExpoまたはExpo Clientのアプリをインストールし、このアプリ上から実行させる。

ファイル構成

名前	説明
App.js	アプリのプログラム本体
package.json	パッケージ情報
assetsフォルダ	画像などのアセットファイル（リソースファイル）を格納する
componentsフォルダ	コンポーネントと呼ばれるスクリプトを格納する。デフォルトではAssetExapmple.jsというファイルが入っている
README.md	README

App.jsの構成

ソースコードに相当するApp.jsを整理すると、以下のような構成となっている。

export default class App extends React.Component {
  render() {
    return (表示内容);
  }
}

const styles = StyleSheet.create({
  スタイル設定
});

このAppクラスは、React.Componentクラスを継承している。React.Componentは、Reactのクラスである。つまり、ReactNativeは、Reactのシステムをそのまま利用している。
React.Componentは、renderメソッドを持っており、これは画面の表示を返すメソッドである。

App.js

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone! Save to get a shareable url.
        </Text>
        <Card>
          <AssetExample />
        </Card>
      </View>
    );
  }
}

このメソッド内にはHTMLの様なタグが記載されているが、これがJSXタグである。
JSXはJavascriptの文法を拡張したものである。

styles変数の中には画面に表示するJSXタグで利用されるスタイルシートの情報を変数に纏めたものである。
ReactNativeではHTMLと異なるJSXタグを利用するが、スタイル設定はHTMLとほぼ同じ。