はじめに
今回は、Claude Codeを使って、ブラウザ上で遊べるテトリスを作成してみました。
Claude Codeは、AIに自然言語で指示を出すことで、コードの作成やファイルの編集、コマンドの実行などをサポートしてくれる開発ツールです。
実際に使ってみると、コードを書いてもらうだけでなく、プロジェクトの作成から必要なライブラリのインストール、開発サーバーの起動まで、一連の作業を進められることが分かりました。
一方で、作業の途中には見慣れない英語の表示や、コマンドの実行許可を求める画面も出てきます。
初めてClaude Codeを使う場合、「これは何をしているの？」「許可しても大丈夫？」と戸惑うこともあると思います。
そこで今回は、実際にテトリスを作成したときの流れをもとに、Claude Codeに表示された内容や各操作の意味を初心者向けにまとめました。
これからClaude Codeを使ってWebアプリを作ってみたい方の参考になれば幸いです。
1. 今回作成するものと開発環境
今回作成するのは、HTML・CSS・JavaScriptを使ったシンプルなテトリスです。
使用する技術
| 技術 | 役割 |
|---|---|
| HTML | Webページの構造を作る |
| CSS | デザインやレイアウトを整える |
| JavaScript | テトリスのゲーム処理を実装する |
| Node.js | JavaScriptを実行する環境 |
| npm | パッケージを管理するツール |
| Vite | 開発サーバーやビルド環境を提供するツール |
今回は、HTML・CSS・JavaScriptをそれぞれ別ファイルに分け、Viteを利用したNode.jsプロジェクトとして作成します。
作業を始める前の準備
事前に以下の環境を用意しておきます。
- Visual Studio Code（VS Code）
- Node.js
- Claude Code
今回はVS Code上で作業を進めます。
まず、VS Codeでプロジェクト用のフォルダを作成し、開いておきます。
例：tetris2
次に、VS Codeのターミナルを開き、以下のコマンドを実行します。
claude
これでClaude Codeが起動します。
2. Claude Codeにプロジェクトの作成を依頼する
Claude Codeが起動したら、まずは作りたいプロジェクトの内容を伝えます。
今回は、以下のように依頼しました。
HTML・CSS・JavaScriptを分離したNode.jsプロジェクトを作成してください。
要件
・HTML、CSS、JavaScriptはそれぞれ別ファイル
・package.jsonを作成
・Viteを利用
・開発サーバーを起動できる構成
・初心者向けコメントを付ける
このように、作りたいものだけでなく、使用する技術やファイル構成なども具体的に伝えると、希望に沿ったプロジェクトを作成しやすくなります。
3. 開発サーバーの選択
依頼をすると、Claude Codeから開発サーバーについて質問されました。
実際に表示された選択肢は以下のとおりです。
開発サーバーはどのアプローチを希望しますか？
A：Vite
B：Express.js
C：http-server
これは、Webアプリをローカル環境で動かすために、どの開発サーバーを使用するか確認している画面です。
それぞれの特徴は以下のとおりです。
| 選択肢 | 概要 |
|---|---|
| Vite | フロントエンド開発向けのビルドツール・開発サーバー |
| Express.js | Node.jsでWebサーバーやAPIを構築するためのフレームワーク |
| http-server | 静的ファイルを配信するシンプルなHTTPサーバー |
今回はHTML・CSS・JavaScriptを使ったフロントエンド開発が目的なので、A：Viteを選択しました。
Viteは開発サーバーの起動が簡単で、ファイルを変更した際にブラウザへ変更を反映するホットリロードにも対応しています。
4. 実装計画（Implementation Plan）の作成
Viteを選択すると、Claude Codeが実装計画の作成に進みました。
その途中で、以下のような表示が出てきました。
Skill(superpowers:writing-plans)
初めて見ると少し戸惑いますが、これはエラーではありません。
実装計画を作成するためのSkill（機能）が呼び出されていることを示しています。
実装計画とは？
実装計画とは、実際にコードを書く前に、どのような順番で開発を進めるのかを整理したものです。
例えば、今回のテトリスであれば、
- プロジェクトの基本構成を作る
- HTMLでゲーム画面を作る
- CSSで画面のデザインを整える
- JavaScriptでゲームの動作を実装する
- 動作確認を行う
といった作業の流れを整理します。
最初からコードを書き始めるのではなく、事前に作業内容を整理することで、実装の進め方を明確にできます。
5. docsフォルダの作成確認
実装計画を作成する過程で、以下のようなフォルダを作成する確認が表示されました。
New-Item
docs/superpowers/plans
これは、実装計画を保存するためのフォルダを作成しようとしているものです。
docsはドキュメントを保存するためのフォルダで、今回はその中に実装計画を保存するためのフォルダを作成します。
どのように対応する？
今回のように、実装計画を保存するためのフォルダ作成であれば、内容を確認したうえで許可して問題ありません。
承認画面では、以下のような選択肢が表示される場合があります。
- Yes：今回の操作を許可する
- Yes, always allow：同様の操作を今後も許可する
- No：操作を許可しない
※表示内容や選択肢はClaude Codeのバージョンや設定によって異なります。
6. 実装計画（Markdownファイル）の作成
フォルダの作成が完了すると、実装計画がMarkdown形式のファイルとして作成されました。
今回作成されたファイルは以下のとおりです。
2026-06-20-tetris-game.md
拡張子の.mdはMarkdownファイルを表しています。
Markdownは、見出しや箇条書きなどを使って文章を整理できる形式です。
今回は、テトリスをどのような構成で作成するのか、実装する機能や作業手順などをまとめた設計書として使用されています。
ここで作成されるのはゲームのプログラムではなく、あくまで実装計画です。
7. 実装方法の選択
実装計画の作成後、Claude Codeから実装方法について質問されました。
1. このセッションで直接実装（推奨）
2. サブエージェント駆動
それぞれの意味は以下のとおりです。
1. このセッションで直接実装
現在のClaude Codeのセッション内で、計画に沿って順番に実装を進める方法です。
2. サブエージェント駆動
複数のサブエージェントを活用して、作業を分担しながら開発を進める方法です。
今回はシンプルなテトリスの作成であり、まずは基本的な開発の流れを理解したかったため、
1：このセッションで直接実装
を選択しました。
初めてClaude Codeを使う場合は、まず直接実装で進めると、作業の流れを追いやすいと思います。
8. npm installの実行
実装が始まると、Claude Codeから以下のコマンドを実行する確認が表示されました。
npm install
これは、プロジェクトで必要になるパッケージをインストールするためのコマンドです。
今回の場合は、package.jsonに記載された依存関係をもとに、Viteなどの必要なパッケージをインストールします。
package.jsonとは？
package.jsonは、Node.jsプロジェクトの基本情報や使用するパッケージ、実行するコマンドなどを管理するファイルです。
例えば、Viteを使うプロジェクトであれば、Viteの依存関係や開発サーバーを起動するためのスクリプトなどが記載されます。
今回の操作はプロジェクトに必要な環境を整えるためのものなので、内容を確認して許可しました。
9. srcフォルダの作成
続いて、以下のようなフォルダを作成する確認が表示されました。
src/css
src/js
これは、HTML・CSS・JavaScriptを整理して管理するためのフォルダです。
今回のプロジェクトでは、次のような構成になります。
tetris2/
├── docs/
│ └── superpowers/
│ └── plans/
│ └── 2026-06-20-tetris-game.md
├── src/
│ ├── css/
│ └── js/
├── index.html
├── package.json
└── ...
このように、ファイルの種類や役割ごとにフォルダを分けておくと、後からコードを修正するときにも管理しやすくなります。
今回はフォルダの作成を許可しました。
10. ファイル一覧の確認
続いて、Claude Codeが以下のコマンドを実行しようとしました。
Get-ChildItem
これはPowerShellで使用するコマンドで、指定したフォルダ内のファイルやフォルダの一覧を表示するものです。
今回の場合は、作成したプロジェクトのファイル構成を確認するために使用しています。
ファイルの削除や変更を行うコマンドではなく、一覧を確認するための操作です。
そのため、今回は実行を許可しました。
11. 開発サーバーの起動（npm run dev）
ファイルの作成が完了すると、いよいよ開発サーバーを起動します。
Claude Codeから以下のコマンドの実行確認が表示されました。
npm run dev
これは、package.jsonに設定されたdevスクリプトを実行するコマンドです。
今回のプロジェクトでは、Viteの開発サーバーを起動するために使用します。
実行すると、ターミナルに以下のような表示が出てきます。
Local:
http://localhost:5173/
※ポート番号は環境によって異なります。実際に表示されたURLを確認してください。
このURLが、ローカル環境で作成中のWebアプリにアクセスするためのアドレスです。
12. localhostへのアクセス確認
開発サーバーを起動すると、Claude Codeから以下のようなアクセス確認が表示される場合があります。
Fetch
http://localhost:5173
これは、Claude Codeがローカル環境で起動したWebページにアクセスし、表示内容などを確認しようとしている操作です。
localhostは、自分のPCを指すアドレスです。
そのため、今回のアクセス先はインターネット上の外部サイトではなく、自分のPCで起動している開発サーバーになります。
アクセス先のURLを確認したうえで、今回は許可しました。
13. ブラウザでテトリスの動作確認
ここまで完了したら、実際にブラウザでゲームを確認します。
先ほどターミナルに表示されたURLをブラウザのアドレスバーに入力します。
例：
http://localhost:5173/
ページが表示されたら、以下の項目を確認します。
動作確認項目
- テトリスのゲーム画面が表示される
- スコアが表示される
- レベルが表示される
- ライン数が表示される
- ゲームオーバー時の表示が正しく動作する
- キーボードの矢印キーでブロックを操作できる
実際に操作してみて、意図したとおりに動くか確認します。
もしエラーが発生した場合は、エラー内容をClaude Codeに伝えて修正を依頼することもできます。
ここまでできれば、テトリスの作成は完了です！
14. 作業終了時の開発サーバー停止方法
最後に、開発サーバーの停止方法についても確認しておきます。
ブラウザを閉じただけでは、開発サーバーは停止しません。
開発サーバーを起動しているVS Codeのターミナルに戻り、以下のキーを押します。
Ctrl + C
環境によっては、終了確認としてYの入力を求められる場合があります。
これで開発サーバーを停止できます。
再び作業をするときは、プロジェクトフォルダで以下のコマンドを実行すれば、開発サーバーを起動できます。
npm run dev
15. 今回の作業の流れを振り返る
今回のテトリス作成では、以下の順番で作業を進めました。
① Claude Codeを起動
↓
② プロジェクトの作成を依頼
↓
③ 開発サーバーにViteを選択
↓
④ 実装計画を作成
↓
⑤ docsフォルダを作成
↓
⑥ 実装計画をMarkdownで保存
↓
⑦ 実装方法を選択
↓
⑧ npm installを実行
↓
⑨ srcフォルダを作成
↓
⑩ ファイル構成を確認
↓
⑪ npm run devで開発サーバーを起動
↓
⑫ localhostへのアクセス確認
↓
⑬ ブラウザで動作確認
↓
⑭ Ctrl + Cで開発サーバーを停止
おわりに
今回は、Claude Codeを使ってViteを利用したテトリスのプロジェクトを作成してみました。
実際に操作してみて感じたのは、Claude Codeはコードを生成するだけでなく、プロジェクトの構成づくりから環境構築、動作確認まで、開発の一連の作業をサポートしてくれるということです。
特に印象的だったのは、実装計画の作成やコマンド実行前の確認があったことです。
最初は見慣れない英語やコマンドが多く、戸惑う場面もありましたが、それぞれの操作が何のために行われているのかを調べながら進めることで、Node.jsやnpm、Viteの役割についても理解を深めることができました。
また、AIに任せきりにするのではなく、表示された内容を確認しながら進めることも大切だと感じました。
なお、今回紹介した実装計画の作成や承認画面は、Claude Codeのバージョン、設定、利用しているSkillなどによって表示内容や手順が異なる場合があります。
本記事は、私が実際に操作した際の流れをまとめたものです。
これからClaude Codeを使ってみたい方や、AIを活用したWebアプリ開発に興味がある方の参考になればうれしいです。
最後まで読んでいただき、ありがとうございました。