Claude CodeとExpoによるとにかくライトなアプリ開発フローを試した話

はじめに

近年、AIエージェントの発展が目まぐるしいですが、本記事では一例としてClaude CodeとReact NativeのExpoを組み合わせて、楽に簡単なアプリを作成しどのようにしてアプリをリリースまで持っていくかを解説します。
あまり特殊なことはしていませんが、とにかく考えることを少なくライトなアプリ開発をする際の参考になれば幸いです。

Claude Codeの詳細については、公式ドキュメントをご確認ください。

React NativeとExpo

React Native

React Nativeは、JavaScriptを使用してiOSとAndroidのクロスプラットフォームアプリを開発するためのフレームワークです。

Expo

Expoは、React Native開発をさらに効率化するための包括的なフレームワークおよびプラットフォームです。
色々な利点があると思いますが、今回はホットリロードとEAS（Expo Application Services）というビルドやデプロイの自動化部分に惹かれ、使用しました。

Expo環境のセットアップ

1. 前提条件の確認

Node.jsとnpmがインストールされていることを確認します。

node --version
npm --version

2. 新しいExpoプロジェクトの作成

# 新規プロジェクトの作成
npx create-expo-app MyGameApp

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

3. 開発サーバーの起動

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

# または特定のプラットフォームで直接起動
npx expo start --ios
npx expo start --android
npx expo start --web

開発サーバーが起動すると、以下の方法でアプリを確認できます：

• 実機の場合：Expo Goアプリで表示されるQRコードをスキャン
• エミュレータ：ターミナルでi（iOS）またはa（Android）を押す
• Web：ターミナルでwを押してブラウザで開く

今回はandroid studioをメインに確認を行いました。

Claude Codeの利用

CLAUDE.mdファイルの作成

Claude Codeを起動したらまずはCLAUDE.mdファイルの作成のため以下のスラッシュコマンドを入力します。

/init

これによりClaude Codeがプロジェクトのコンテキストを自動的に理解できます。

カスタムコマンドの作成

.claude/commandsディレクトリを作成し、よく使う操作をカスタムコマンドとして登録できます。
今回はカスタムスラッシュコマンドにより仕様書を作成し、実際の制作も指示します。

/generate-spec = 仕様書の作成
/implement-project = 仕様書を元にプロジェクト制作

"generate-spec.md"

---
description: "アプリの機能仕様書を生成します"
---

# 仕様書生成コマンド

以下の形式で機能仕様書を生成してください：
生成した仕様はそのプロジェクトに新しくmdファイル(project-spec.md)として保存してください。

## 機能概要
{引数で指定された機能の概要}

## 実装詳細
- 使用するコンポーネント
- 必要なライブラリ
- 画面フロー

## 技術的考慮事項
- パフォーマンス最適化
- アクセシビリティ
- エラーハンドリング

## 実装ステップ
1. コンポーネントの作成
2. ロジックの実装
3. スタイリング
4. テスト

"implement-project.md"

---
description: "仕様書を元にプロジェクトを実装します"
---

# プロジェクト構築、実装コマンド

project-spec.mdの仕様書を元にプロジェクトの実装を行ってください。

## 技術的考慮事項
- パフォーマンス最適化
- アクセシビリティ
- エラーハンドリング

## 実装ステップ
1. コンポーネントの作成
2. ロジックの実装
3. スタイリング
4. テスト

実践的な開発フロー

前述のカスタムスラッシュコマンドで仕様書を作成します。この時に引数で要件を伝えます。
※本来は別ファイルにして読み込ませた方が良いと思いますが、今回は気楽に作れるのを目標としています

Claude Code内での対話例：

#プロジェクト仕様書作成
 /generate_spec 現在時刻を表示するタイマーアプリ 

"色々生成処理・・・"

● 機能仕様書を作成しました！project-spec.mdとして保存されています。

  生成した仕様書の内容:

  機能概要:
  - リアルタイムで現在時刻を表示するタイマーアプリ
  - 12時間/24時間形式の切り替え機能
  - ダークモード対応
  - クロスプラットフォーム対応（iOS、Android、Web）

  実装詳細:
  - 新規コンポーネント4つの設計（時刻表示、日付表示、形式切り替え、タイマー画面）
  - 既存のライブラリのみで実装可能
  - タブナビゲーションに新しい「Timer」タブを追加

  技術的考慮事項:
  - パフォーマンス最適化（メモリリーク防止、バッテリー消費最適化）
  - アクセシビリティ対応（スクリーンリーダー、視認性、操作性）
  - 包括的なエラーハンドリング

  実装ステップ:
  1. 4つのコンポーネント作成
  2. 時刻更新・フォーマット・永続化のロジック実装
  3. レイアウトとスタイリング
  4. 単体テスト、統合テスト、手動テストの実施

# プロジェクト制作の指令
/implement-project

リアルタイムでの動作確認でバグ修正と改善

前述した通りExpoの開発サーバーが起動している状態で、コード変更が自動的に反映されます。

# ClaudeCodeで使用しているウィンドウとは別のターミナルウィンドウで
npx expo start

動作を確認しながら、Claude Codeに修正を依頼します。
例として、異様に上下が見切れていたのでこちらを修正してもらいます。

ユーザー:  時間部分が見切れてしまっているので修正してください。(スクショを添付しながら)

Claude：
  lineHeightを適切に設定して、文字の上下が切れないようにします：

● Update(components\timer\clock-display.tsx)
  ⎿  Updated components\timer\clock-display.tsx with 4 additions and 1 removal
       33            accessibilityRole="timer"
       34            accessibilityLabel={`Current time is ${timeString}${period ? `
            ${period}` : ''}`}
       35            numberOfLines={1}
       36 -          adjustsFontSizeToFit
       36          >
       37            {timeString}
       38          </ThemedText>
     ...
       55        flexDirection: 'row',
       56        alignItems: 'flex-start',
       57        justifyContent: 'center',
       58 +      paddingVertical: 8,
       59      },
       60      time: {
       61        fontSize: 38,
       62        fontWeight: 'bold',
       63        letterSpacing: 0,
       64        fontFamily: 'monospace',
       65 +      lineHeight: 50,
       66 +      includeFontPadding: false,
       67      },
       68      period: {
       69        fontSize: 18,
       70        fontWeight: '600',
       71        marginLeft: 6,
       72        marginTop: 4,
       73 +      lineHeight: 24,
       74      },
       75    });

● Bash(cd "C:\Users\81809\AppProjects\testA\TestA" && npx tsc --noEmit) timeout: 1m 0s        
  ⎿  (No content)

● Bash(cd "C:\Users\81809\AppProjects\testA\TestA" && npm run lint)
  ⎿  > testa@1.0.0 lint
     > expo lint

● 縦の見切れ問題を修正しました！

  修正内容:

  components/timer/clock-display.tsx

  1. lineHeight を明示的に設定:
    - 時刻表示: lineHeight: 50 を追加（fontSize 38pt に対して十分な高さ）
    - AM/PM表示: lineHeight: 24 を追加
  2. includeFontPadding を無効化:
    - includeFontPadding: false を追加（Android専用）
    - Androidのデフォルトフォントパディングを削除して、テキストが上下に切れるのを防止
  3. コンテナに縦パディング追加:
    - paddingVertical: 8 を追加して、上下に余裕を持たせる
  4. adjustsFontSizeToFit を削除:
    - この属性が縦の見切れの原因になる可能性があったため削除

  効果:

  ✅ 時刻の数字の上部と下部が切れずに完全に表示される
  ✅ lineHeightで十分な垂直スペースを確保
  ✅ Android特有のフォントパディング問題を解決
  ✅ きれいで読みやすい時刻表示

  アプリを再起動して、時刻が上下とも完全に表示されるか確認してください！

といった形で修正をしてくれました。

ビルドとデプロイ

EAS Build のセットアップ

アプリが完成したら、EASという機能でプラットフォーム向けの本番ビルドを作成してGooglePlayStoreやAppStoreにアップロードできます。
様々な機能があり、紹介しきれないため触りの部分のみ記載させていただきます。

# EAS CLIのインストール
npm install -g eas-cli

# EASへのログイン
eas login

# プロジェクトの設定
eas build:configure

開発ビルドの作成

# iOS向け開発ビルド
eas build --profile development --platform ios

# Android向け開発ビルド
eas build --profile development --platform android

# 両方同時に
eas build --profile development --platform all

おわりに

本記事では、Claude CodeとExpoを使った効率的なモバイルアプリ開発フローを紹介しました。本格的なアプリというより、気軽にライトなアプリを作ってリリースしたいときの活用方法にはなりますが、アイデアから実装、デプロイまでを高速に進めることができます。
参考になりましたら幸いです。

参考リンク

• Claude Code公式ドキュメント
• Expo公式ドキュメント
• React Native公式ドキュメント
• EAS Build
• Expo Router

---