Posted inプログラミング

初めてのモバイルアプリをリリースする：React NativeとExpoによる実践ガイド

Programming tutorial - IT technology blog
Programming tutorial - IT technology blog

3分間のスプリント

モバイル開発環境の構築といえば、かつては30GBものAndroid Studioのダウンロードや、壊れたXcodeのパスに悩まされる悪夢のような作業でした。今年3つのプロダクションアプリをリリースした経験から言えるのは、Expoはこの数時間に及ぶ試練をわずか3分間のスプリントに変えてくれたということです。Node.jsがインストールされていれば、コーヒーが冷める前に、空のターミナルから実機で動作するアプリまで辿り着けます。

まず、プロジェクトを初期化します：

npx create-expo-app@latest my-first-app
cd my-first-app

ファイルが生成されたら、開発サーバーを起動しましょう：

npx expo start

ターミナルにQRコードが表示されます。iPhoneまたはAndroidのカメラでスキャンすれば、Expo Goアプリが即座にプロジェクトを読み込みます。この即時フィードバックループは、コンパイルに5〜10分かかることもある従来のネイティブビルドと比較して、生産性を大幅に向上させます。

なぜ今、Expoはプロダクション環境に最適なのか

以前の私は、「クローズドな環境（walled garden）」を恐れてExpoを避けていました。カスタムのネイティブ機能が必要になった時、行き詰まってしまうのではないかと考えたからです。しかし、その制限はもうありません。Development Buildsের導入により、カスタムのC++やSwiftモジュールを記述しながら、Expoのワークフローを享受できるようになりました。

Managed Workflowのメリット

標準的なReact Nativeプロジェクトでは、/iosと/androidフォルダを管理する必要があります。これらのディレクトリには、GradleスクリプトやCocoaPodsのような複雑なビルドロジックが詰まっています。ExpoのManaged Workflowは、この複雑さを隠してくれます。開発者はTypeScriptに集中し、Expoがビルドプロセス中に必要なネイティブの足場（scaffolding）を生成します。これだけで、私たちのチームは毎週約4〜5時間のローカルでのトラブルシューティング時間を節約できています。

コアコンポーネントとレイアウト

HTMLのことは忘れましょう。モバイルの世界では、<div>は<View>に、<span>は<Text>になります。スタイリングにはStyleSheetと呼ばれるCSS-in-JSシステムを使用します。重要な点が1つあります。モバイルのFlexboxはデフォルトでflex-direction: columnとなっており、Webとは逆です。

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Expoで開発をスピードアップ</Text>
      <TouchableOpacity 
        style={styles.button} 
        onPress={() => console.log('アクションが実行されました')}
      >
        <Text style={styles.buttonText}>はじめる</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
    alignItems: 'center', 
    justifyContent: 'center',
  },
  title: {
    fontSize: 26,
    fontWeight: '800',
    color: '#1a1a1a',
    marginBottom: 24,
  },
  button: {
    backgroundColor: '#007AFF',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 12,
  },
  buttonText: {
    color: 'white',
    fontSize: 18,
    fontWeight: '600',
  }
});

ナビゲーション：単一画面を超えて

ほとんどのチュートリアルは「Hello World」で終わりますが、実際のアプリにはナビゲーションが必要です。私は**Expo Router**を強くお勧めします。これは、Next.jsと同じロジックであるファイルベースのルーティングをモバイルにもたらします。もう、巨大な1つのファイルの中に複雑なナビゲーションスタックを手動で定義する必要はありません。

アプリの構造

tabsテンプレートを使用すると、ディレクトリは整理された状態に保たれます：

  • app/_layout.tsx: グローバルプロバイダーとナビゲーションのラッパー。
  • app/index.tsx: ランディング画面。
  • app/settings.tsx: セカンダリルート。

ナビゲーションはLinkコンポーネントを使うだけで、モバイルへ移行するWeb開発者にとっても非常に自然に感じられます。

現場での6ヶ月間から学んだ教訓

UIの構築は道のりの20%に過ぎません。残りの80%はデプロイ、最適化、そしてバグ修正です。ここでは、その重労働をどう処理すべきかを紹介します。

1. ビルドをEASに任せる

Expo Application Services (EAS) は画期的です。アプリのバイナリ（IPAおよびAAB）をクラウドでビルドしてくれます。iOSアプリをビルドするために、もう2,000ドルのMacBookは必要ありません。eas build --platform iosを実行すれば、開発者が挫折する原因になりがちな証明書やプロビジョニングプロファイルの管理をExpoのサーバーが代行してくれます。

2. 画像を適切に処理する

高解像度の画像は、モバイルアプリの動作が重くなる最大の原因です。React Native標準のImageコンポーネントは非常にシンプルです。代わりにexpo-imageを使いましょう。WebPをサポートし、ディスクキャッシュを自動で処理し、読み込み中に滑らかなブラー効果を提供するため、アプリの完成度が大幅に向上します。

3. 「秘密兵器」：OTA（Over-the-Air）アップデート

UIの構築は道のりの20%に過ぎません。残りの80%はデプロイ、最適化、そしてバグ修正です。通常なら新しいビルドを提出し、Appleの審査を24〜48時間待つ必要があります。しかし**EAS Update**を使えば、JavaScriptの修正を即座にプッシュできます。ユーザーが次にアプリを開いたときに、アップデートが適用されます。

# 数秒で本番環境にホットフィックスをデプロイ
eas update --branch production --message "チェックアウトの重大なバグを修正"

最後に

Web開発とモバイル開発の溝は、かつてないほど狭まっています。高パフォーマンスなゲームや複雑なARフィルターには依然としてカスタムのネイティブコードが必要かもしれませんが、ビジネスユースケースの95%において、Expoは完璧に対応します。小さく始めましょう。レイアウトのロジックをマスターし、デプロイの大仕事はEASに任せてください。Reactでサイトを構築できるなら、世界レベルのモバイルアプリをリリースする準備はすでに半分整っています。

Share:
Tags: