Claude CodeとExpo（React Native）を組み合わせることで、iOS/Android両対応のモバイルアプリを日本語の指示だけで開発できます。環境構築からアプリ完成まで、実践的な手順をご紹介します。
この記事の内容
Claude CodeとExpo（React Native）を活用すれば、iOS/Android両プラットフォームに対応したモバイルアプリを作成できます。本記事ではメモアプリを題材に、開発の全体像をステップバイステップで解説します。
Expoについて
- React Nativeベースのモバイルアプリ開発フレームワーク
- 1つのコードでiOS/Android双方に対応
- JavaScript/TypeScriptで開発可能
- Expo Goアプリを使うことで、XcodeやAndroid Studioなしでテスト実行可能
事前準備
スマートフォンに Expo Go アプリをインストールしてください（App Store / Google Play）。
サンプルアプリ：メモ帳アプリケーション
以下の機能を実装します：
- メモの新規作成・編集・削除
- ローカルストレージへの自動保存
- テキスト検索機能
ステップ1：プロジェクト初期化
npx create-expo-app memo-app --template blank-typescript
cd memo-app
claude
ステップ2：メイン画面の構築
メモアプリのメイン画面を実装して。
以下の機能が必要です：
- 上部に検索フィールド
- メモ一覧をFlatListで表示（タイトルと作成日時を表示）
- 右下にメモ追加ボタン（FAB）
- メモを左スワイプで削除可能に
UIはStyleSheetを使ってシンプルな白基調でデザイン
ステップ3：メモ作成画面の実装
メモ作成画面を実装してください。
- タイトル入力フィールド
- 本文入力フィールド（複数行入力対応）
- 保存ボタン
- React Navigationで画面遷移
- AsyncStorageを使ったローカル永続化
ステップ4：動作検証
npx expo start
スマートフォンのExpo GoアプリでQRコードをスキャンすれば、実機でアプリを動作確認できます。
ステップ5：機能の拡張
メモ編集機能を追加してください。一覧のメモをタップすると編集画面に遷移します。
さらにカテゴリ機能も実装。「仕事」「プライベート」「アイデア」の
3つのカテゴリをタグとして選択できるようにしてください。フィルタリングにも対応。
モバイルアプリの開発例
| アプリケーション | 指示内容の例 |
|---|---|
| 家計簿 | 「日々の収支を記録する家計簿アプリを作成」 |
| 習慣記録アプリ | 「毎日の習慣を記録し、実行状況を可視化するアプリ」 |
| タイマー | 「ポモドーロテクニック対応のタイマーアプリ」 |
| 天気情報アプリ | 「ユーザーの現在地の気象情報をリアルタイム表示」 |
| レシピ帳 | 「レシピの保存・分類・検索機能を備えたアプリ」 |
アプリをストアで公開する手順
npm install -g eas-cli
eas build --platform all
eas submit
- Apple Developer Program: 年額$99
- Google Play Developer: 初回登録料$25
- ストアでの審査期間: 1〜7日程度
要点のまとめ
- Expoを活用すれば、1つのコードベースでiOS/Androidに対応
- Claude Codeなら日本語での指示だけでアプリ実装が可能
- Expo Goにより即座に実機テストが実行できる
- EAS Buildを使うことで、公式ストアへの公開も容易
この記事が参考になったらLGTMお願いします！
Zennでも技術記事を発信中です → https://zenn.dev/and_and_and