Claude CodeとExpoでスマホアプリを作る方法

TL;DR

Expoでプロジェクトを作成し、要件定義をClaude Codeへ渡して実装させ、Expo Goで実機確認します。型エラーと動作不良を修正した後、EAS CLIでビルドとストア提出を進めます。iOS公開にはApple Developer Programへの事前登録が必要です。

Transcript

はい、どうもしです。今回はですね、 クロードコードとXを使って爆速でスマホ アプリを作ろうというですね、動画を撮っ ていきたいと思います。ま、クロード コード使えばですね、簡単なスマホアプリ であれば30分1時間くらいでですね、 開発から、ま、そのAppStoreの 審査までできることができますので、え、 そこお伝えできたらなと思います。なので 、この動画最後まで見れば、ま、スマホ アプリ作ったことがない方でも、ま、12 時間くらいで簡単なアプリを量産すること ができますのでご覧いただけたらなと思い ます。え、このチャンネルではですね、 エンジニアとしてのは幅広い知識とAI コーディングの知識が学べるチャンネルに なっておりますので、気になる方は今の うちにチャンネル登録よろしくお願いし ま... Read More

Key Insights

• ExpoはReact Nativeを利用し、Reactのコンポーネント知識を転用しながらiOSとAndroid向けのアプリを開発できる環境である。動画ではWindowsからAppleへの提出も可能だと説明されている。
• 要件定義はアプリのアイデアを実装可能な形へ変換する基盤である。話者はClaude Desktopで内容を整理し、Expoを使う条件を明記してから、その文書をClaude Codeへ渡している。
• タスク分割は要件や機能を連番付きのチケットへ変換し、実装順を明確にする工程である。繰り返し使う指示は、グローバルなカスタムスラッシュコマンドとして登録すると再利用できる。
• Expo Goは開発中のアプリをスマートフォン実機で確認するための手段である。「npx expo start」で開発環境を起動し、QRコードや表示されたリンクからアプリを開ける。
• 実機確認は生成されたコードの問題を発見するために不可欠である。実演ではデータ保存、チェック表示、追加完了モーダルの位置などに不具合が見つかり、追加修正が必要になった。
• 型チェックはビルドと公開の前に実施すべき検証工程である。動画では「npx tsc --noEmit」を実行し、多数見つかった型エラーをClaude Codeに修正させている。
• EAS CLIはExpoアプリのビルドとストア提出に使うコマンドラインツールである。利用前にグローバルインストールとExpoアカウント登録を行い、EASのビルド機能を利用する。
• ストア公開はアプリ実装だけでは完了しない工程である。iOSではApple Developer Programへの登録、本人確認、審査が必要であり、話者は年間約1万2000円と説明している。
• 🎬 このチャンネルの他の動画:
  • 個人開発SNSをゼロから4万人に広げる方法
  • Bolt.newで高品質なLPを作る方法
  • Node.jsとStripeでサブスク決済を作る方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Claude CodeとExpoでスマホアプリを作る方法は？

最初に「npx create expo」でExpoプロジェクトを作成し、エディターでそのディレクトリを開きます。次にClaude Codeを初期化し、機能や画面を整理した要件定義書を渡します。要件を連番付きタスクへ分割して順番に実装させ、Expo Goで実機確認しながら不具合を修正します。

Q: Expoプロジェクトを実機で確認する方法は？

スマートフォンへExpo Goをインストールし、プロジェクトのターミナルで「npx expo start」を実行します。表示されたQRコードをカメラで読み取るか、画面上のリンクをタップすると実機で開けます。起動できない場合は、セキュリティソフトやファイアウォールの遮断を確認します。

Q: アプリの要件をClaude Codeへ渡す方法は？

作りたい機能、画面、利用する技術などを要件定義書として整理し、その内容をClaude Codeが参照できる文書へ保存します。実演ではClaude Desktopでアイデアを壁打ちし、Expoで作る条件を加えてからClaude Codeへ渡しています。その後、要件を細かな実装タスクに分割しています。

Q: Claude Codeに実装を任せるときの進め方は？

要件定義をそのまま一括実装させるだけでなく、機能を連番付きのチケットへ分割し、番号順に実装するよう指示します。実装中はExpoのホットリロードで画面を確認できます。ただし、生成内容を放置して完成とみなさず、保存処理や表示、操作性を実機で検証して修正を重ねます。

Q: Expo Goでアプリをリロードする方法は？

実演ではスマートフォンの画面を3本の指でタッチして開発メニューを表示し、そこからリロードボタンを押しています。それでも問題が解消しない場合は、開発用ターミナルを一度閉じて再起動します。保存エラーなどは、リロード後も再現するか確かめてから修正を依頼します。

Q: Expoアプリをビルドする前に何を確認しますか？

ビルド前にはTypeScriptの型エラーを確認し、すべて解消します。動画では「npx tsc --noEmit」を実行するカスタムコマンドを使い、多数検出された型エラーをClaude Codeへ修正させています。さらに、データ保存やチェック操作など主要機能を実機で試すことも重要です。

Q: EAS CLIでアプリを公開する手順は？

まずEAS CLIをグローバルにインストールし、Expoのアカウントを作成してログインします。次にEASのビルドコマンドでストア向けのビルドを作り、完了後に提出コマンドで審査へ送ります。ただし、スクリーンショットや画像など、一部のストア設定は手作業が必要だと説明されています。

Q: iOSアプリをApp Storeへ提出する条件は？

Apple Developer Programへの登録と審査通過が必要です。話者は費用を年間約1万2000円と説明し、本人確認書類の提出や、登録後に最大48営業時間ほどかかる場合があると述べています。支払い直後に必ず公開できるわけではないため、開発と並行して早めに申請します。

Summary & Key Takeaways

• 開発は「npx create expo」でExpoプロジェクトを用意し、Claude Codeを初期化して要件定義書を読み込ませる流れです。例として、GitHubのコントリビューショングラフ風に習慣を記録するアプリを設計し、要件を連番付きのタスクへ分割して順番に実装させています。

• 動作確認にはスマートフォンへExpo Goを入れ、「npx expo start」で表示されるQRコードなどからアプリを開きます。実演では習慣の追加、完了チェック、期間別グリッド、ライト・ダークテーマなどを確認し、保存エラーやモーダル位置などの不具合をClaude Codeへ修正させています。

• 公開準備では「npx tsc --noEmit」による型チェックを行い、検出されたエラーを解消します。その後、EAS CLIをグローバルに導入し、Expoアカウントへログインしてビルドと提出を進めます。iOS公開にはApple Developer Programへの登録と審査が必要で、画像など一部の設定は手作業も必要です。