ExpoでHello World

Expoを使ってスマホアプリの実装環境を構築してみたいと思います。

個人的にはコンテンツはWebアプリで十分、スマホアプリはコストメリットが少ないという考えです。

• 市場の大きさはAndroid、iPhoneよりもWebが広い
• 常にAndroid、iPhoneのバージョン依存に付き合わないといけない開発・運用コスト
• 公開するための審査のコスト

ただ、知らずして思い込んでいる部分もあるという反省から、アプリ開発にも触れてみようと思います。

今回はアプリ開発の中でもコストを抑えられると「Expo」を使って、React Nativeアプリの開発環境を構築してみます。
Expo
Expo開発には以下のメリットが期待できます

• iSOやAndroidなどクロスプラットフォーム開発が可能
• カメラや位置情報機能などを比較的容易に実装できる
• アプリ公開に必要な審査のサポートがある

ちなみに、以下の環境を前提にご紹介します。

• Windows 11 Home
• Node.js 16.18.1
• npm 8.19.2

※この時点でのExpo CLIがNode.js 17以下にしか対応していないという事で、意図的にNode.jsのバージョンを落としています。

スマホアプリExpoのインストール

開発環境を実機で確認するために、AndroidにExpoアプリをインストールしておきます。
Expo – Google Play のアプリ

Expo CLIのインストール

Expo CLIはExpo開発をサポートするコマンドラインツールで、プロジェクトの初期化、ビルドやデプロイを実行することができます。
Expo CLI – Expo Documentation

以下のコマンドでインストールします。

> npm install -g expo-cli

以下のコマンドでバージョンが確認できれば、インストール成功です。

> expo -V
6.0.8

プロジェクトの新規作成

Expo CLIを使ってプロジェクトを初期化します。作業フォルダで任意プロジェクト「helog」を作成する場合、以下のコマンドを実行します。

> expo init helog

そうすると、プロジェクトのテンプレートを選択することができます。

? Choose a template: » - Use arrow-keys. Return to submit.
    ----- 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

「Managed workflow」は開発からビルドまでExpoで完結できるプロジェクトですが、Expoがサポートしていない機能は使えません。
一方で「Bare workflow」だと上記の問題はクリアできますが、iOSアプリ開発ではmacOSが必要となり、Windowsでのクロスプラットフォーム開発ができなくなってしまうみたいです。

それぞれ、「TypeScript」はTypeScript、「tabs」はreact-navigationを使うこと前提でプロジェクトが初期化されます。

ここでは「tabs (TypeScript) 」を選択します。

プロジェクトの初期化には時間がかかります。私の場合、10分ほどかかりました。

Expoの実行

実際にプロジェクトを実行して、Androidの実機で確認してみます。

作成したプロジェクトに移動して「expo start」を実行すると、コードがビルドされQRコードが発行されます。

> cd helog
> expo start

私の場合、最初、AndroidのExpoアプリでQRコードを読み取ると、以下のエラーが表示されました。

Something went wrong.
Network response timed out.

開発環境と検証端末は同じLAN内で接続している必要があるようです。当然ですよね。。

LANに接続すると、以下の結果を確認することができました。

表示内容に従い、ソース「/screens/TabOneScreen.tsx」のテキスト「Tab One」部分を「Hello World!」に書き換えて保存したら、実機のAndroidに即時繁栄されました！

ここまで調べながら1～2時間、昔に比べるとだいぶスピーディーに環境を作ることができました。