Expoに入門してアプリ作ってみる

Expoとは？

Expoとは、React Nativeアプリケーション開発を簡単にするためのフレームワーク・プラットフォームです。

主な特徴：

• 開発の容易さ
• 設定不要ですぐに開発開始可能
• iOS/Android両方のアプリを1つのコードベースで開発可能
• 複雑な環境設定（Xcode/Android Studio）が不要

1. 開発環境のセットアップ

# Node.jsがインストールされていることを確認
node -v

# Expoのコマンドラインツールをグローバルにインストール
npm install -g expo-cli

# プロジェクトの作成（TypeScriptテンプレート使用）
npx create-expo-app -t expo-template-blank-typescript アプリ名

# プロジェクトディレクトリに移動
cd アプリ名

アプリ名/
├── App.tsx           # メインアプリケーション
├── app/              # アプリケーションコード
│   ├── components/   # 再利用可能なコンポーネント
│   ├── screens/      # 画面コンポーネント
│   ├── hooks/        # カスタムフック
│   └── utils/        # ユーティリティ関数
├── assets/           # 画像やフォントなど
└── package.json      # 依存関係の管理

2. 必要なパッケージのインストール

# 使いたいパッケージをインストール
npm install expo-sensors  # センサー系（歩数計などを使う場合）
npm install @expo/vector-icons  # アイコン
npm install expo-font  # カスタムフォント

# 必要に応じて追加パッケージをインストール
npm install @react-navigation/native  # 画面遷移
npm install @react-navigation/stack   # スタックナビゲーション

3. 開発

# 開発サーバーの起動
npx expo start

# 以下のオプションが表示されます
# › Press a │ open Android
# › Press i │ open iOS simulator
# › Press w │ open web browse

4. アプリのテスト方法

実機でテスト：

• スマートフォンに「Expo Go」アプリをインストール
• QRコードをスキャン
• 同じWiFiネットワークに接続

シミュレータでテスト：

• OS: Xcodeのシミュレータ
• Android: Android Studioのエミュレータ

Scan QR code から QRを読み込むとすぐ実機で試せる。

簡単！