2025.07.10

Claude Codeで始めるVibe Coding #1：遅くなったけど

o_wani

私もだいぶ遅くなりましたが、Claude Codeを使い始めました。AIとの新しい開発体験いわゆる「Vibe Coding」を始めるにあたり、そのノウハウを蓄積していくことを第一の目標に、さっそく使い始めたので、私のログを残しておきます。

「Claude Codeで始めるVibe Coding」っていう記事を早く書いてみたかったのと、これから本格的に触れてみていろいろと記事を書いていこうと思います。

QiitaやZennなどのいろいろな有益な情報を試してみて、自分なりに確認していければと思っています。

Contents

Claude Codeとは？
基本的な使用方法
実際に使ってみる：テトリスゲームの作成
今後の展望

Claude Codeとは？

Anthropicが提供するClaude Codeは、開発者のための強力なAIアシスタントです。主な機能は以下の通りです。

コードベース全体でのファイル編集とバグ修正
コードのアーキテクチャとロジックに関する質問への回答
テスト、リンティング、その他のコマンドの実行と修正
gitの履歴検索、マージコンフリクトの解決、コミットとPRの作成

（Claude Code概要 – Anthropicより抜粋）

基本的な使用方法

インストール

Claude Codeのインストールは、NPMを使って簡単に行えます。

% npm install -g @anthropic-ai/claude-code

より詳細なインストール手順については、Claude Codeのセットアップを参照してください。

インストールが完了したら、以下のコマンドでバージョンを確認できます。

% claude --version

1.0.44 (Claude Code)

プランの選択

Claude Codeの利用プランには、API従量課金とサブスクリプション（ProまたはMaxプラン）の2種類があります。

使い始めるにあたって調べた情報では、API従量課金はコスト予測が難しいため初心者には非推奨で、Maxプランがおすすめとのことでした。私もその情報を参考に、まずはMaxプランで試してみることにしました。

月額100ドルで、AIとの新しい開発体験をスタートです。

CLIの起動とログイン

Claude Codeを実行するには、単純にclaude CLIを呼び出します。

% claude

その後、インタラクティブなClaude Code REPLセッションからClaudeに直接プロンプトを送ることができます。

初回起動時にはログインが必要です。

ブラウザで承認を行うと、

ターミナルに戻り、Claude Codeとの対話を開始できます。

実際に使ってみる：テトリスゲームの作成

さっそく、Claude Codeに「HTMLで古典的なテトリスゲームを作って」とお願いしてみました。

> HTMLで古典的なテトリスゲームを作って

⏺ I'll create a classic Tetris game in HTML for you.

⏺ **Update Todos**
⎿ ☐ Create HTML structure for Tetris game
　☐ Add CSS styling for game board and pieces
　☐ Implement Tetris pieces (tetrominos) and rotation
　☐ Add game logic (movement, collision, line clearing)
　☐ Implement scoring and level system
　☐ Add game over detection

✶ Moseying… (12s · ↑ 179 tokens · **esc** to interrupt)

すると、わずか1分？ほどで、以下のようなゲームが完成しました。

⏺ 古典的なテトリスゲームを作成しました！tetris_game.htmlファイルをブラウザで開いてプレイできます。

ゲームの特徴：
- 7種類のテトロミノ（I、O、T、S、Z、J、L）
- 矢印キーで操作（←→：移動、↓：高速落下、↑：回転）
- スペースキーで一気に落下
- Pキーで一時停止
- レベルが上がると落下速度が速くなります
- ラインを消すとスコアが加算されます
- 次のピースの表示機能付

実際にブラウザで開いてみると、普通に遊べるテトリスゲームが目の前に現れました。