こんにちは。

エクスペリエンスデザインセンター、略して EXDC の sgi-chang です。

今日は、React Native の Expo CLI で、Web も Android も iOS も、

複数のプラットフォームのアプリも同時に作れちゃう、

夢のようなクロスプラットフォーム開発のはじめの一歩に挑戦したいと思います。

以下の流れで進めていきたいと思います。

  • クロスプラットフォーム開発とは
  • React Native とは
  • Expo CLI とは
  • クロスプラットフォーム開発を体験してみよう

なお、今回の「はじめの一歩編」では、開発環境の構築と、

ひとつのコーディングで We bとモバイル (Android) とでアプリを動かしてみるところまでをやってみます。

(実際の各プラットフォームのビルド展開はまたの機会に…)

クロスプラットフォーム開発とは

まずは「クロスプラットフォーム」について

Wikipedia では、

クロスプラットフォーム（英: cross-platform）とは、異なるプラットフォーム（例えば PC/AT互換機と Macintosh、あるいは Windows・macOS・FreeBSD・Linux などのように、仕様が全く異なる機械（ハードウェア）またはオペレーティングシステム）上で、同じ仕様のものを動かすことが出来るプログラム（ソフトウェア）のことを言う。

とあります。

例えば、同時にパソコンのブラウザでも、iPhone でも、Android でも、

同じアプリを作りたい！と思ったときに、Web 向けに開発して、iOS 向けに開発して、Android 向けに開発する必要があります。

となると、JavaScript や HTML、CSS、Objective-C または Swift、Java または Kotlin… などの複数の言語や複数の開発環境を用意して作成する必要があり、時間も要員の確保も容易ではありません。

しかし、クロスプラットフォーム開発で進めれば、一つのプログラムで作成したアプリを、Web、iOS、Android などの複数のプラットフォームに展開することができます。

Webや、iOS、Android のクロスプラットフォーム開発の代表的なフレームワークに、Flutter、React Native、Xamarin、Unity などがあります。

それぞれ、開発言語や特徴が異なります。

今日はその中でも、React Native を使って、クロスプラットフォーム開発に触れてみたいと思います。

React Nativeとは

「React Native」についてWikipediaでは、

React Native（リアクト・ネイテイヴ）は、Facebook が作成したオープンソースのモバイルアプリケーションフレームワークである。開発者がネイティブプラットフォーム機能とともに React を使用できるようにすることで、Android、iOS、Web および UWP アプリケーションを開発するために使用される。

とあります。

名前に「React」とあるとおり、JavaScript のフレームワークの中でも一番使われている React とほぼ同じ動きをしています。

※画像はイメージです。

主な違う箇所は、React は仮想 DOM を介して DOM を操作しますが、React Native は、JavaScript を介して Android や iOSのネイティブの UI システムを操作する点です。

React コンポーネントを使用して UI の外観と動作を記述すると、各プラットフォームの UI コンポーネントに翻訳して描画をします。

(※React Native は WebView ではありません。)

開発言語は、JavaScriptまたはTypeScriptで、React開発経験がある人なら、ほとんど学習コストなしで進められると思います。

Expo CLIとは

現在、React Native では、開発環境として「Expo CLI」と「React Native CLI」が用意されています。

公式サイトでは、

  • モバイル開発に慣れていない場合は、「Expo CLI」
  • モバイル開発に既に慣れている場合は、「React Native CLI」

とおすすめしています。

また、それぞれ動作確認の方法が違っており、

「Expo CLI」は検証対象のモバイルさえあれば始めることができ、

「React Native CLI」は、iOS なら Xcode、Android なら Android Studio のエミュレーターを使うため、それぞれのインストール、構築が必要になります。

今回は手軽に始めることができる、「Expo CLI」を使ってクロスプラットフォーム開発を体験してみます。

クロスプラットフォーム開発を体験してみよう

ボタンを押すとアラートが表示される単純なアプリを作ってみます。

用意するもの

  • Node.js がインストールされている。(できれば最新)
  • Chrome がインストールされている。(できれば最新)
  • JavaScript のコーディングができる。(Visual Studio Code)
  • スマートフォン(iPhone または Android端末)

上記がそろっていない方は以下のリンクからインストールしてください。

#Node.js
https://nodejs.org/ja/

#Chrome
https://www.google.com/chrome/

エディタは何でもいいですが「Visual Studio Code」があれば何かと捗ります。
#Visual Studio Code
https://code.visualstudio.com/

それでは、公式ページに沿って手順を進めていきます。

Expo CLI をインストールします。

$ npm install -g expo-cli

次にアプリケーションとなるプロジェクトを作成します。

$ expo init ProjectName
$ cd ProjectName
$ npm start

※ProjectName の箇所にお好きなプロジェクト名を指定してください。

もしも、「expo init ProjectName」で以下のようなエラーになったら、
[03:00:53] Input is required, but Expo CLI is in non-interactive mode.
–template: argument is required in non-interactive mode. Valid choices are: “blank”, “tabs”, “bare-minimum” or any custom template (name of npm package).

以下のように template オプションを指定してください。(ここではblankにしています)
$ expo init ProjectName –template blank

これで開発サーバが起動します。

ブラウザ上でターミナルに表示された URL にアクセスします。

(上の画像だと「http://localhost:19002/」)

すると、下の画像のような Expo Dev Tool sが表示されます。

まず、Web で実際に確認してみます。

先ほどの Expo Dev Tools の画面左側の「Run in web browser」をクリックします。

しばらくすると、ブラウザ上に画像のような画面が自動で立ち上がります。

ちょっと画像では見づらいですが中央に「Open up App.js to start working on your app!」と表示されていると思います。

まずは、アプリを作成することができました！

さて、これをモバイルでも確認してみましょう。

お手元に iOS (iPhone) か Android のスマートフォンを用意します。

当記事では、Android の手順をご紹介します。

(恐らく iOS (iPhone) でも同様の手順でいけるかと思いますが…念のため、公式サイトで確認しながら進めて下さい。)

React Native 公式サイト
https://reactnative.dev/

Expo 公式サイト
https://expo.io/

Playストアから「Expo」アプリをダウンロードします。

(iPhone は「App Store」から)

Expoアプリを開いたら「Scan QR Code」をタップして、先ほど立ち上げた「Expo Dev Tools」の画面左下に表示されているQRコードを読み込みます。

その際、以下の点に注意してください。

  • QRコード上の「CONNECTION」が「LAN」になっている。
  • PC と同じネットワークにつながっている。

PC と同じネットワークにつながっていなくても、「Tunnel」を選択して、同様に確認することができます。
(ngrok を使ってローカル環境を外部に公開している模様)

Expoのこの辺りの仕組みの詳細は公式ページのこちらを参照にしてください。
https://docs.expo.io/workflow/how-expo-works/

いかがでしょうか！？PC (ブラウザ) でも、モバイル (Android) でも、同じ画面が確認できたと思います。

次に、ボタンを表示させます。

./ProjectName/App.js

を下記のように実装します。

import React from 'react';
import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';
export default function App() {
  return (
    <View style={styles.container}>
      {/* <Text>Open up App.js to start working on your app!</Text> */}
      <View style={styles.buttonBack}>
        <TouchableHighlight style={styles.circleButton}
          onPress={() => alert("もしかして、おした？")}
        >
          <Text style={styles.buttonText}>おす</Text>
        </TouchableHighlight>
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonBack: {
    backgroundColor: "yellow",
    width: "55%",
    height: "60%",
    alignItems: 'center',
    justifyContent: 'center',
  },
  circleButton: {
    padding: 5,
    height: 100,
    width: 100,
    borderRadius: 200,
    backgroundColor: "red",
    overflow: "hidden",
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: "#ccc",
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 0,
    shadowOpacity: 1,
    elevation: 2
  },
  buttonText: {
    color: "white",
    fontWeight: "bold"
  }
});

これで完成です！

React Native Expo CLIは、ホットリロードに対応しているので、ソースを変更して保存する度に、すぐに確認することができます。

しかも複数のプラットフォームの反映が同時です！これは便利！思わず開発も捗ります。

エピローグ

私はほとんど Web 開発が主でモバイル開発の経験があまりないので、

React を実装する感覚でモバイル開発まで出来るというのは、本当にありがたいです。

また、一つのプログラムで複数のプラットフォームに展開できる体験は、感動すら覚えました。

しかもそれが簡単にできるとは…。

とはいえ、実際にビルドしてネイティブアプリにするまでに、必ず iOS だったり Android だったり、モバイルの知識は必須です。

また現在、参画しているプロジェクトで使っているのですが、React Native ならではの、欠点や細かい気づきは多々あります。

(ここら辺もいつか記事にしたいところ…)

とはいえ、環境構築も数分で始めることができますし、React を触ったことがあるなら、

React じゃなくても Vue.js とかの経験があれば、(実は私も React 経験なし)

とても敷居がひくく、まずはプロトタイプなどで気軽に始めてみてはいかがでしょうか。

最後までお読みいただき誠にありがとうございます。