Claude Codeを使うと、自然言語での依頼をもとに、Visual Studio Code内でファイルを作成し、実際に動くアプリを作れます。初心者にとって最初に重要なのは、完璧なプロンプトを書くことではありません。公式拡張機能をインストールし、適切なプロジェクトフォルダーを開き、エージェントが何を変更しようとしているかを理解し、次の依頼をする前にブラウザーで結果を確かめることです。

Claude Codeをインストールして接続する

Visual Studio CodeはVS Codeとも呼ばれる、Microsoft製の無料コードエディターです。Windows、macOS、Linuxで利用できます。インストールしたら、左のサイドバーから拡張機能パネルを開きます。WindowsまたはLinuxではCtrl+Shift+X、macOSではCmd+Shift+Xでも開けます。

Claude Codeを検索し、発行元がAnthropicの公式拡張機能を選びます。検索結果に複数の候補が表示される場合があるため、インストールを選ぶ前に発行元を確認してください。インストールすると、エディターのサイドバーにClaude Codeのパネルが追加されます。

そのパネルを開き、ブラウザーに表示されるサインインの案内に従います。ClaudeアカウントでサインインしたらVS Codeに戻り、プロンプト入力欄が使える状態になっていることを確認します。利用には有料アカウントが必要です。Claude Proは月額$20で、より多く利用する人向けのClaude Maxプランは月額$100 ～ $200です。無料アカウントでは、この拡張機能を利用できません。

新しい拡張機能のサイドバーがあるコードエディターと、サインイン完了を示すチェックマークが表示されたブラウザー画面

▲ 拡張機能の導入とアカウントへのサインイン

最初はエディターの画面が複雑に見えるかもしれません。左のサイドバーにはファイル一覧と拡張機能、中央には開いているファイル、下部にはターミナルが表示されます。ターミナルは、テキストでコマンドを実行するための画面です。Claude Codeはこれらのパネルと並んで動作するため、別のアプリを行き来せずに、作成されたファイルや実行されたコマンドを確認できます。

最初のプロンプトを入力する前に、空のフォルダーを開く

アプリ用に、ClaudeProjectなどの空のフォルダーを作成します。VS Codeでファイル > フォルダーを開くを選び、そのフォルダーを指定します。このフォルダーが、Claude Codeの作業対象となるファイル一式、つまりワークスペースになります。

アプリケーションのメニューから統合ターミナルを開きます。WindowsまたはLinuxではCtrl+、macOSではCmd+でも開けます。ターミナルの現在のパスが、VS Codeで開いたフォルダーを指していることを確認してください。これは見落としやすい点です。ターミナルが別の場所で動いていると、生成したファイルやインストールしたパッケージが意図しない場所に入り、ビルドに支障が出る場合があります。

Claude Codeはファイルの作成・編集、フォルダーの整理、依存パッケージのインストール、コマンドの実行ができます。依存パッケージとは、アプリの動作に必要なパッケージです。ブラウザーベースのAIチャットで生じがちなコピー＆ペースト作業を大幅に減らせますが、その分、変更内容を確認することも大切です。エディターにコマンドの実行やファイルの編集について承認を求められたら、許可する前に対象ファイルと変更内容を確認してください。編集で追加・削除される内容を示す表示をdiff（差分）といいます。

目的を絞った4つの依頼で作る

Daybookという小さな生産性向上アプリを例に、空のフォルダーから使えるものを作る流れを見ていきます。日記とToDoリストを備え、両方で共通のデザインを使います。すべての機能と見た目の細部を一度に依頼するのではなく、Claude Codeに一つの作業を頼んでテストし、それから次に進みます。

  1. 土台を作る。 日記とタスク管理の2つの画面を持ち、すっきりしたレイアウトで画面を切り替えられる基本的なWebアプリを依頼します。プロジェクトと依存パッケージを準備し、ローカルで動くようにすることも頼みます。この例では、設定ファイルとソースファイルが作成され、フロントエンド用のパッケージがインストールされ、ローカル開発サーバーが起動しました。これにより、制作途中のアプリをブラウザーで開けます。両方の画面が表示され、切り替えられることを確認します。
  2. 日記を追加する。 タイトル、本文の入力欄、気分の選択肢、任意のタグを備えた投稿フォームと、保存した投稿の一覧を依頼します。この例ではLocalStorageを使いました。これはブラウザーの保存領域で、ページを更新したりタブを閉じたりしても、そのブラウザーにアプリのデータが残ります。次に進む前に投稿を作成し、一覧への表示、ページ更新後の保持、削除を確かめます。
  3. タスクを追加する。 タスクの作成、Low・Medium・Highの優先度選択、期限、完了操作、All・Active・Completedの絞り込みを依頼します。新しいタスクを作り、完了にしてから絞り込みを切り替えて試します。その後、日記に戻り、この追加によって確認済みの機能に問題が生じていないことを確かめます。
  4. デザインを整える。 両方の画面が動くようになったら、統一感のある文字組みと余白、ライト・ダークテーマの切り替え、小さな画面にも対応するレイアウトを依頼します。Daybookの例では、Evernoteに着想を得た緑色のアクセントと角の丸いカードを使いました。両方のテーマを試し、デスクトップとモバイルの画面幅で、フォームが横にはみ出さず使えるかどうかも確認します。

緑色のアクセントを使ったライト・ダークの画面で、日記カードと優先度付きタスクを表示するノートパソコンとスマートフォン

▲ 端末とテーマごとのDaybook画面

各依頼は、結果をテストできる程度に具体的にします。土台作りのプロンプトで目指すのは、完成した日記ではなく、動くアプリです。日記のプロンプトでは、すでに動いている画面の切り替えを壊さずに、その機能を充実させます。完成度の高いアプリを一度に依頼する場合に比べ、この順序なら、どの変更で問題が起きたのかをずっと特定しやすくなります。

ブラウザーだけでなくファイルも確認する

ページが開くことは良い出発点ですが、それだけでは確認は終わりません。依頼するたびにVS Codeのファイルツリーを見て、承認を求められた編集内容を確認します。そのうえでブラウザーを使い、画面の切り替え、投稿の保存と削除、タスクの完了、一覧の絞り込み、テーマの切り替えなど、依頼した動作を試します。

完成したDaybookのプロジェクトには、パッケージ設定、コンポーネント、スタイル、アセットなど、通常のローカルソースファイルが含まれます。これらのファイルは手元に保管したり、別のエンジニアに渡したり、ホスティング事業者を通じて公開したりできます。この可搬性が、独自仕様のノーコードプラットフォーム内で制作する方法との違いです。ただし、自分のコンピューターで動くアプリが、すでにオンラインで公開されているわけではありません。公開には別途デプロイが必要です。

小さく始め、変更のたびに確かめる

この方法を試すには、Visual Studio CodeとAnthropicの公式Claude Code拡張機能をインストールし、利用条件を満たすアカウントでサインインして、新しいプロジェクトフォルダーを開きます。最初のプロンプトを入力する前に、ターミナルがそのフォルダーを指していることを確認してください。まずは動く最小限のアプリを依頼し、求められた変更を確認して、ブラウザーでテストします。機能は一つずつ追加し、全体のデザインを整える作業は基本機能が動くようになってから行います。