Summary  
This chapter explains how to start a local development server with a single command to compile and preview your code, automatically detect and fix startup errors, and interact with the running application in real time.

General domain of usage  
Web application development

アプリを表示する前に、起動する必要があります。本章では、その手順と問題が発生した場合の対処方法について説明します。

### ローカルで実行するとは

Claude Code がプロジェクトを実行すると、コンピュータ上にローカルサーバーが作成されます。これにより、Wi-Fi 接続を利用して、`localhost:3000` のようなアドレスでブラウザからアプリにアクセスできます。

これはインターネット上で公開されているわけではありません。そのリンクを他の人に送っても、開くことはできません。自分のマシンでのテスト専用です。


注意

本番前のリハーサルのようなもの。まだ一般公開はされていませんが、すべてが本番同様に動作します。

### 覚えておくべきコマンド

このコマンドがアプリを起動します。Claude Codeが自動で実行します。プロンプトが表示されたら「Allow」をクリックしてください。

```
npm run dev
``` 

アプリが最初に起動しなくても問題ありません。Claude Codeがエラーを読み取り、自動で修正します。

### 表示される内容

アプリが初めてブラウザで読み込まれると、ランディングページが表示されます。ページ内を操作したりクリックしたりできます。AI機能はまだ利用できません。APIキーの設定がまだだからです。次の章でこの設定について説明します。

アプリをローカルで実行するとはどういう意味ですか

現代のAIツールとシンプルで実践的なワークフローを活用し、わずか週末で実際のアプリを構築・公開します。Claude Codeを使ってコードの計画、生成、改良を行い、GitHubでプロジェクトを管理し、完成したアプリをVercelでオンラインにデプロイします。アイデアから始めて明確なプロジェクト計画に素早く落とし込み、コア機能、シンプルなアーキテクチャ、高速なイテレーションに重点を置きながら、不要な複雑さを避けて実用的なアプリケーションを段階的に構築します。AIと効果的に連携するためのプロンプト作成、エラー修正、機能改善の方法を学び、最終的にはライブアプリ、整理されたGitHubプロジェクト、今後のアイデアをより速く実現するための再現可能なシステムを手に入れます。

AI支援開発の基本を理解し、開発環境をセットアップし、最初のアプリを作成する前にClaude Codeに慣れる。

あなたのアイデアを明確でシンプルな計画に変換し、実際に価値を提供する最小限のアプリバージョンを定義します。

AIを活用してコードを生成し、プロジェクトをセットアップし、作成された内容を理解することで、ゼロから動作するアプリを構築します。

機能の追加、デザインの洗練、効果的な問題解決方法の習得によるアプリの改善。

プロジェクトを公開し、オンラインでアクセス可能にし、GitHubとVercelを使用してすべてが正常に動作することを確認します。