React Native+Expoで始めるスマホアプリ開発

初めに

こんにちは。これが初めての投稿になります。

この記事は、株式会社富士通システムズウェブテクノロジーが企画する
いのべこ夏休みアドベントカレンダー2020 の30日目の記事です。

参加の機会を頂き、感謝の限りです。ありがとうございます!!!
本記事の掲載内容は私自身の見解であり、所属する組織を代表するものではありません。

背景

スマホアプリ開発に興味があったものの、物ぐさで重い腰が上がりませんでした・・・

最近、朝・夜のウォーキングをするようになり、体重とフットワークが軽くなったことで、
興味があったアプリ開発勉強欲が再燃してきたので、React Native + Expoを使って
今学んでいることを書いていきたいと思います。

今回、WebViewを使って、Qiita画面をAndroidエミュレータで表示する所までを記載します。
これからスマホアプリ開発を始めたいという方に、React Native + Expoを知って頂き、
スマホアプリ開発導入の手助けになれば嬉しい限りです。

React Native とは？

Facebook が開発したJavaScriptであり、iOSとAndroidのアプリ開発を行うことが可能な、
クロスプラットフォームフレームワークとなります。ロジックは、Reactのお作法に則り、
JavaScriptとJSXと呼ばれるXMLライクなマークアップを使い記述します。
Reactを勉強したことがある人にとっては、学習コストが低くなります。

Expo とは？

React Nativeでの開発を、よりお手軽にするツールとなります。
変更がリアルタイムに反映(ホットリロード)されるため、WEB感覚の開発が可能となります。
作成後のアプリをリリースする際、最初の審査のみで、その後は審査不要でアップデートが
可能のようです(※OTAアップデート)。
デメリットとして、ネイティブモジュールが使えないことや、また基本Expoが提供している
APIのみ利用といった点が挙げられます。

アプリ開発

前段はこれぐらいにして、そろそろアプリ開発の話に入っていきたいと思います。

事前準備

・JDK(Java Development Kit)のインストール
・Node.jsのインストール
　公式サイトより事前にNode.jsをダウンロードします。
　ダウンロード後、下記コマンドでインストール可否をチェックします。

$ node --version

・VSCode, Android Studioのインストール
　・VSCode
　　MicroSoftのダウンロードページよりVSCodeをインストールします。
　・Android Studio
　　GoogleのダウンロードページよりAndroid Studioをインストールします。
　　その上で、エミュレータを作成し、起動できるようにしておく必要があります。

Expoインストール

公式サイトの手順に従い導入します。

１．npmコマンドを利用してglobalインストールを実施します。

$ npm install expo-cli --global

２．expoコマンドでプロジェクトを作成します。
　下記コマンドでは、myAppのプロジェクトを作成します。

$ expo init myApp

　コマンド実行すると対話モードが始まり、プロジェクトのテンプレートを選択します。

┌─────────────────────────────────────────────────────────────────────────┐
│                                                                         │
│   There is a new version of expo-cli available (3.25.0).                │
│   You are currently using expo-cli 3.22.3                               │
│   Install expo-cli globally using the package manager of your choice;   │
│   for example: `npm install -g expo-cli` to get the latest version      │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
> blank                 a minimal app as clean as an empty canvas
  blank (TypeScript)    same as blank but with TypeScript configuration
  tabs (TypeScript)     several example screens and tabs using react-navigation and TypeScript
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration

　今回、シンプルモードでの作成としますので、blankテンプレートを選択します。
　テンプレート選択後、myAppプロジェクトのフォルダが作成されます。

３．作成されたmyAppフォルダに移動して、npmコマンドによりnode_modulesを
　　インストールします。

$ cd myApp
$ npm install

　ここまでの操作が完了することで、開発出来る環境が整います。
　myAppのディレクトリ構造は、下記のようになります。
　
　開発は、App.jsを修正して進めていくことになります。

Expo起動

Androidエミュレータと連動して動作確認を実施するために、エミュレータを
事前に起動しておきます。エミュレータを起動後、下記コマンドによりExpoを起動します。

$ expo start

起動すると、下記画面が表示されます（QRコード部分は加工しています）。
※画面が表示されない場合、http://localhost:19002/ にアクセスして下さい。

こちらの画面を利用することで、エミュレータおよび実機による開発が可能となります。

ExpoとAndroidエミュレータの接続

Expo画面のRun on Android device/emulatorをクリックします。
下記のような画面が表示されていれば、Expoとエミュレータの接続OKとなります。

WebViewを利用した実装

WebViewを利用して、Qiita画面をAndroidエミュレータ上に表示したいと思います。
表示するQiita記事は、いのべこ夏休みアドベントカレンダー2020の画面にしたいと思います。

まずは、下記コマンドにより必要なライブラリをインストールします。
※コマンド実行は、作成されたmyAppフォルダ下で実施下さい。

$ expo install react-native-webview

インストール後、ExpoとAndroidエミュレータを再起動下さい。
再起動しない場合、正しくJSファイルが読み込まれず、エラーとなることがあります。
Expo再起動の際は、オプション-cを付与することでキャッシュクリアを行い起動します。

次に、App.jsを下記のように修正します。${URL}には、表示させたいURLを指定します。
※今後のことを考慮すると、ViewやSafeAreaViewタグでWebViewをネストしておく
　のが良いです。しかし、ネストされたWebViewのuriでは、指定するURLのローディングが
　実施されない問題が確認できたために、下記の記載のようにシンプルな記載としています。

import React from "react";
import { StyleSheet } from "react-native";
import { WebView } from "react-native-webview";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
});

export default function App() {
  return (
    <WebView
      sytle={styles.container}
      source={{ uri: ${URL} }}
    />
  );
}

最後に、修正したApp.jsを保存します。
保存後、Androidエミュレータにリアルタイム反映され、直ぐに結果確認が出来ます。
WebViewのuriに設定したURL先が表示されていますので、今回の検証は成功になります!!!

実機を利用する場合

実機を利用する場合、iOSまたはAndroidでExpo Clientアプリのインストールが必要です。
アプリインストール後、Expo画面のQRを読み込むことで動作確認が可能となります。
Expoを起動するネットワークと、同一ネットワークで操作する必要がありますが、
コードを繋ぐ必要が無く実機で確認できることは大きなメリットだと思います。

おわりに

現状、WebViewを利用してAndoroidエミュレータに表示する部分を行いました。
今後は、Prettierを組込み整形ルールを定義したり、PropsやStateを利用して、
情報の引き渡しやComponentの状態を変更する対応などを実装していきたいと考えています!!!
※Componentには、Class ComponentとFunction Componetの2種があるようなので、
　このあたりの違いも意識して進めていけたらと思っています。

参考資料

参考にさせて頂きました。ありがとうございました。
・React Nativeとは何なのか
・expoによるReact Nativeのおさらい（最低限）
・ExpoのOTAアップデートとrelease-channelについてまとめてみた。
・Windows10でAndroidStudioの環境構築
・ExpoでAndroidエミュレータが起動しない場合