Expoを始めよう:React Nativeアプリをより速く構築する方法

XcodeやAndroid Studioと格闘することなくモバイルアプリを構築したいJavaScript開発者の方、ここが正解です。React Nativeを使えばJavaScriptでクロスプラットフォームアプリを構築できますが、初期セットアップは困難な場合があります。そこでExpoの出番です。Expoは複雑さを取り除き、すぐに開発を始められるようにします。

Expoとは何か、なぜ使うべきか?

Expoは、React Nativeの上に構築されたフレームワークおよびプラットフォームで、モバイル開発の面倒な部分を処理します。バッテリー同梱のReact Nativeと考えてください。JavaScriptを書けば、Expoがネイティブ設定、ビルドプロセス、デバイスAPIを処理します。

Expoが特に便利な理由は以下の通りです:

• ネイティブセットアップ不要: Xcode、Android Studio、またはビルドツールの設定をスキップできます
• 即座のテスト: Expo Goを使用して数秒でスマートフォンで変更をプレビューできます
• マネージドワークフロー: Expoが証明書、アプリ署名、ビルド設定を処理します
• 組み込みAPI: ネイティブコードなしでカメラ、位置情報、通知などにアクセスできます
• デフォルトでクロスプラットフォーム: 1つのコードベースがiOS、Android、Webで動作します

create-expo-appで最初のExpoアプリを作成する

Expoを使った新しいReact Nativeプロジェクトの開始は、たった1つのコマンドで済みます。ターミナルを開いて以下を実行してください:

npx create-expo-app my-app
cd my-app
npx expo start

これだけです。グローバルインストールも複雑な設定も不要です。create-expo-appコマンドが必要なものすべてをセットアップします:プロジェクト構造、依存関係、設定ファイル。

npx expo startを実行すると、ターミナルにQRコードが表示されます。ここから魔法が始まります。

開発ループ:コーディング、保存、変更を即座に確認

Expo Goでのテスト

iOSまたはAndroidデバイスにExpo Goアプリをダウンロードします。ターミナルのQRコードをスキャンすると、アプリがスマートフォンに即座に読み込まれます。USBケーブルもビルドプロセスも不要です。

コードに変更を加えてみましょう:

// App.js
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24 }}>Hello, Expo!</Text>
    </View>
  );
}

ファイルを保存すると、スマートフォンがすぐに更新されます。このホットリロードサイクルにより、React Native開発がWeb開発のように感じられます—高速で反復的です。

さらに必要な場合:開発ビルド

Expo Goはほとんどの開発ニーズをカバーしますが、カスタムネイティブコードや特定のネイティブモジュールが必要な場合があります。その時は開発ビルドを作成します—基本的にアプリに合わせてカスタマイズされたExpo Goのバージョンです。

npx expo install expo-dev-client
npx expo run:ios  # または run:android

開発ビルドは、Expoのツールの利便性を保ちながら、ベアReact Nativeの柔軟性を提供します。

EAS Buildでのビルドとデプロイ

出荷準備が整ったら、EAS Buildがクラウド上で複雑なビルドプロセスを処理します。ビルド環境を維持したり、証明書を手動で扱う必要はありません。

EAS Buildのセットアップ

まず、EAS CLIをインストールします:

npm install -g eas-cli
eas login

プロジェクトをビルド用に設定します:

eas build:configure

プロダクションビルドの作成

1つのコマンドでiOSまたはAndroid用にビルドします:

eas build --platform ios
eas build --platform android

EAS Buildが処理する内容:

• コード署名と証明書
• ネイティブ依存関係
• ビルドの最適化
• アプリストアへの配信

ビルドはExpoのサーバー上で実行されるため、iOSアプリをビルドするためにMacは必要ありません。完了すると、アプリバイナリのダウンロードリンクまたはアプリストアへの直接送信が取得できます。

完全なExpoワークフロー

すべてがどのように連携するかを以下に示します:

1. 初期化: create-expo-appを使用してプロジェクトを開始
2. 開発: JavaScriptを書き、Expo Goで即座にテスト
3. 反復: ホットリロードで変更を即座に表示
4. ビルド: プロダクション準備ができたらEAS Buildを使用
5. デプロイ: アプリストアに直接送信または内部配布
6. 更新: アプリストアのレビューなしでJavaScriptの更新をOTA(Over-The-Air)でプッシュ

このワークフローは、React Native開発の従来の問題点を排除します。「自分のマシンでは動く」問題も、証明書の頭痛も、プラットフォーム固有のビルド問題もなくなります。

まとめ

ExpoはReact Native開発を、複雑でプラットフォーム固有のプロセスから、Web開発と同じくらい簡単なものに変えます。create-expo-appを使えば、数時間ではなく数分でコードを書いてテストできます。Expo Goを使えば、Web開発のスピードで反復できます。そしてEAS Buildを使えば、従来のモバイル開発のオーバーヘッドなしでデプロイできます。

セットアップの複雑さからモバイル開発を躊躇していたなら、Expoがその障壁を取り除きます。npx create-expo-appから始めれば、コーヒーが冷める前にスマートフォンで動作するアプリが手に入ります。

よくある質問

既存のReact NativeプロジェクトでExpoを使用できますか?

はい、Expoモジュールを使用して既存のReact NativeプロジェクトにExpoを追加できます。プロジェクトディレクトリで npx install-expo-modules を実行すると、現在のセットアップを維持しながらExpoのAPIと開発ツールを統合できます。

開発にExpo Goを使用する際の制限は何ですか?

Expo Goには固定されたネイティブモジュールのセットが含まれており、カスタムネイティブコードを実行できません。特定のネイティブライブラリやカスタムモジュールが必要な場合は、代わりに開発ビルドを作成してください。これにより、Expoの開発者体験を維持しながら完全な柔軟性が得られます。

プロダクションアプリのEAS Buildの料金はいくらですか?

EAS Buildは、月あたりのビルド時間が制限された無料プランを提供しています。有料プランは個人向けで月額29ドルから始まり、ビルド頻度とチームサイズに基づいてスケールします。expo run コマンドを使用してローカルで無料でビルドすることもできます。

後で完全なネイティブ制御が必要になった場合、Expoから離脱できますか?

はい、ExpoプロジェクトをプレビルドしてネイティブのiOSおよびAndroidディレクトリを生成できます。これにより、ネイティブコードを完全に制御できるようになります。これはExpoライブラリを維持しながら、必要に応じて直接ネイティブの変更を可能にします。