Zenn
🤖

Claude Codeって何者？ 想像以上に簡単！CLIで動くAIにアプリを作ってもらってみた話

に公開
AI
アプリ開発
ai開発
Claude Code
tech

2024年6月。話題のClaude Codeを実際に導入し、小さなWebアプリを作ってみました。
ChatGPTやGitHub Copilotとは違う、CLIベースの「AIエージェント」との対話的な開発体験は非常に新鮮で、学びも多くありました。個人的メモの意味もこめて、この記事では、導入から簡単なアプリ開発までの一連の流れを記録としてまとめます。

Step 1：Claude Codeとは何かを知る

まずはClaude Codeについて調査。

Claude Codeの概要

Claude Codeは、Anthropic社が開発したAIコーディングエージェントです。
最大の特徴は、CLI（コマンドライン）で直接AIと対話しながら開発できること。ChatGPTのように質問するのではなく、「開発ディレクター」としてタスクを指示し、AIが「アシスタント」としてコードを書いていくイメージです。

ChatGPT / Copilotとの違い

ツール 特徴
ChatGPT 汎用的なチャット型AI。質問に答えるのが主な役割
GitHub Copilot コーディング時の補完支援に特化
Claude Code ターミナル上で開発プロセス全体を支援。自律的にコードを提案・生成・編集

VSCodeとの統合も可能で、以下のような機能が使えます：

  • エディタで開いているタブ内容を認識
  • 選択したコードをプロンプトに挿入
  • linterやエラーの内容を自動共有
  • 差分はVSCodeのビューワー上に表示

Step 2：Claude Codeの導入と初期設定

導入コマンド

Claudeの有料会員になる前でもclaude-codeのインストールは可能です。

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

問題なく導入できれば、バージョンが表示されます。

asdf 使用時の注意点

私はNode.jsを asdf で管理していたのですが、インストール後 claude コマンドが動かずエラーが出ました。
この場合、以下のコマンドで解決できます（シムリンクの再設定）：

asdf reshim nodejs 23.4.0

（※バージョンは自分の環境に応じて調整）

起動後の設定

以下コマンドを叩くとClaude codeが起動されます

claude

プロジェクトのはじめの起動時にはいくつかの質問がされます。希望の設定にしてください。以下は今回採用した私の設定です。

  • モード：Dark mode　（見た目はダークモードで実行）
  • プラン：Claude account with subscription　（サブスクプランで実行）
  • ターミナル設定：Yes, use recommended settings（エンターで確定しないように設定）

Step 3：Claudeに小さなアプリを作らせてみる

テーマ選定と準備

何を作るか少し迷ったのですが、「Claude codeで簡単に試せそう」と思える題材として、以下のようなアプリを作ってみることにしました：

入力された「イメージワード」に対して、対応する絵文字を返すWebアプリ。

注意：Claude codeはトークン制限があるため、事前にChatGPTで要件を整理してからClaude codeに渡しました。
無駄なやりとりで制限に引っかかってコード作成が止まるのを避けるための工夫です。

Claude codeに渡したプロンプト

Claude codeにはChatGPTに作らせた以下プロンプトを渡しました

あなたはWebアプリ開発のエージェントです。
以下の要件を満たすシンプルなWebアプリを作ってください：

---

### 要件
- **目的**：ユーザーがフォームに入力した「文字によるイメージ」に対して、ぴったりの絵文字を返す機能
- **UI**：
  - タイトル
  - テキストフォーム
  - 「絵文字を適用」ボタン
  - 結果表示箇所（絵文字）
- **技術スタック**：HTML/CSS/JavaScript（フレームワーク不要）
- **機能**：
  1. ユーザーがテキストフォームに「悲しい」「お祝い」「眠い」などのイメージ語を入力
  2. ボタン押下で適切な絵文字（😢🎉😴など）を表示
  3. 複数のキーワードに対応、優先順やフォールバックロジックも含む
- **フォーマット**：まずはディレクトリ構成、依存関係、主要ファイル（index.html, style.css, app.jsなど）を提示し、次に、各ファイルの中身をコードブロックで返却してください。

---

もし仕様が曖昧な部分（例えば「複数キーワードの扱い」「UIの詳細な挙動」「絵文字辞書のソース」など）があれば、**すぐに質問してください**。  
完成したらその通りに実装を進め、実行可能な状態（ローカルブラウザで開けるHTML/CSS/JS構成）で提示してください。

よろしくお願いします。

Claudeはすぐに反応し、プロジェクト構成とTODOリストを提示してくれました：

☒ index.html を作成（UI構造）
☐ style.css を作成（スタイル）
☐ app.js を作成（辞書とロジック）
☐ 動作確認とテスト

また、仕様が曖昧な部分は丁寧に質問してきます。

例：

  • 「複数のキーワードが入力された場合どうする？」
  • 「対応語彙はどの程度？英語も対応？」
  • 「マッチしないときはどう返す？」
  • 「UIに履歴表示は必要か？」 など

このやりとりが非常に“開発者っぽく”て面白い！

20ほど待つと以下アプリが完成しました。簡単なアプリですが、数回のやり取りでここまで作れるのは凄い🙌

Step 4：Claude Codeを使いこなすTips

一度実装を始めると、作業が終わるまで少し時間がかかるので、その間にClaude Codeを使う際に有益なコマンドやTipsを調べました。

よく使うコマンド

コマンド 内容
/init プロジェクト構成ファイル（CLAUDE.md）生成
/clear コンテキストをリセット
/compact 会話を要約・圧縮
/review PRやコードをレビューしてくれる
/help コマンド一覧を表示

※ /init は「日本語で書いてください」など指示すれば、日本語対応も可能です

セキュリティ対策（自動承認の防止）

念の為、破壊的操作（rm, push, .env読み込み など）を防いでおいた方が良いので、以下を .claude/settings.json に設定：

{
  "permissions": {
    "deny": [
      "Bash(git commit:*)",
      "Bash(git push:*)",
      "Bash(rm:*)",
      "Bash(sudo:*)",
      "Read(.env.*)"
    ]
  }
}

深い思考を促すプロンプト修飾子

Claudeはプロンプト末尾に以下をつけると、より丁寧かつ高度な思考をしてくれます（トークンを大量に消費するので注意！）：

  • think
  • think hard
  • think harder
  • ultrathink

🏁 まとめ：Claude Codeは“とりあえず作ってみよう”のハードルがめちゃくちゃ下がる

Claude Codeは、ただのコーディング補助ツールではありません。
要件を聞いて、欲しいものをその場で形にしてくれる“有能なエンジニア”のような存在だと感じました。

今回のような小さなアプリなら、サクッと試してすぐに動くものが作れるという実感があり、AIとの協働に大きな可能性を感じています。

「これが簡単に作れるなら、あれもできそう」「ちょっと面倒で後回しにしていたあのツールも試せるかも」と、作ってみたいもののアイデアがどんどん湧いてきました。

次は、もう少し規模の大きなアプリにも挑戦してみようと思います。
ここまでお読みいただき、ありがとうございました。

Discussion