Claude Codeは、コードについて答えるだけの道具ではありません。 作りたいものを伝えると、ファイルを作り、必要ならコマンドを実行し、結果の確認まで進めてくれます。
ただ、最初から大きなアプリを作ろうとすると、見るべきものが一気に増えます。 フレームワーク、依存パッケージ、ビルド、サーバー起動、エラー対応。 まだ慣れていない段階では、どこで失敗しているのか分からなくなりがちです。
最初の練習には、HTMLファイル1つで動く小さなツールが向いています。 ブラウザで開けば動きますし、ファイルも1つだけなので、Claude Codeが何を作ったのか確認しやすいからです。
この記事では、記事本文を貼り付けると文字数や見出し数を数える、簡単なチェックツールを題材にします。 作るものを決め、Claude Codeに依頼し、作られたHTMLをブラウザで確認し、気になるところを直す。 その一連の流れを、初心者向けに整理します。
この記事で作るのは、ローカルPC上で開く小さなHTMLツールです。インターネット公開、ログイン機能、データ保存、外部API連携までは扱いません。
最初はHTMLファイル1つで十分
大きなアプリから始めない
Claude Codeに何かを作らせるとき、つい「ちゃんとしたアプリ」を作りたくなります。 でも、最初の目的は立派なサービスを完成させることではありません。 Claude Codeに依頼し、作業内容を確認し、動いたものを自分の目で見る感覚をつかむことです。
その練習には、1ファイルのHTMLがちょうどいいです。
index.htmlだけで始められる- ブラウザで直接開いて確認できる
- HTML、CSS、JavaScriptが同じファイルに入る
- ファイルが少ないので、変更内容を追いやすい
- 失敗しても作り直しやすい
ReactやNext.jsのようなフレームワークが悪いわけではありません。 ただ、最初の練習では、環境構築そのものがノイズになります。
確認できる範囲に収める
「まず作って、開いて、直す」。 この流れを覚えるなら、HTMLファイル1つから始めるほうが分かりやすいです。
作るツールを先に決める
今回作るもの
今回は、記事本文をチェックする小さなWebツールを作ります。 たとえば、ブログ記事や社内メモを書いているときに、次のような情報をすぐ見たいことがあります。
- 文字数
- 空白を除いた文字数
- 行数
- 見出しの数
- コードブロックの数
このくらいなら、サーバーもデータベースも必要ありません。 テキストエリアに文章を貼り付け、JavaScriptで数えて、画面に表示すれば十分です。
入れない機能も決める
最初に決めておく条件は、次のようにします。
- ファイル名は
index.html - HTML、CSS、JavaScriptを1ファイルにまとめる
- 外部ライブラリは使わない
- 入力内容は保存しない
- ブラウザで開くだけで動く
- 画面はスマホでも崩れにくくする
ここまで決めてからClaude Codeに頼むと、余計な方向に広がりにくくなります。
tomo最初の依頼で大事なのは、「何を作るか」と同じくらい「何を作らないか」を伝えることです。保存機能やログイン機能を入れない、と書くだけで作業範囲がかなり締まります。
Claude Codeへの依頼文
そのまま貼れる依頼文
新しいフォルダを作り、その中でClaude Codeを起動したら、次のように依頼します。 このまま貼って使える形にしてあります。
このフォルダに、HTMLファイル1つで動く小さなWebツールを作ってください。
作りたいものは、記事本文チェックツールです。
ユーザーが本文を貼り付けると、次の情報を画面に表示してください。
- 文字数
- 空白を除いた文字数
- 行数
- Markdownの見出し数
- Markdownのコードブロック数
条件は次の通りです。
- ファイル名は index.html にする
- HTML、CSS、JavaScriptを1ファイルにまとめる
- npm、フレームワーク、外部ライブラリは使わない
- 入力内容は保存しない
- 外部APIには接続しない
- ブラウザで直接開いて動くようにする
- PCでもスマホでも見やすいシンプルな画面にする
作業前に、まず実装方針を短く説明してください。
その方針で問題なければ、index.htmlを作成してください。
作成後は、次のことを報告してください。
- 作成したファイル名
- ブラウザで開く方法
- こちらが動作確認するときに見るポイントこの依頼文では、Claude Codeに「自由に作って」とは言っていません。 作るもの、作らないもの、確認方法を先に渡しています。
依頼文で効いているところ
とくに効いているのは、次の4つです。
HTML、CSS、JavaScriptを1ファイルにまとめるnpm、フレームワーク、外部ライブラリは使わない入力内容は保存しない作業前に、まず実装方針を短く説明してください
初心者のうちは、Claude Codeが勝手に大きな構成を作り始めると、確認が難しくなります。 最初は小さく作る。 そのための制約を、依頼文に入れておきます。
許可画面が出たら見るところ
今回の確認ポイント
Claude Codeは、ファイルを編集したり、コマンドを実行したりするときに確認を求めることがあります。 公式ドキュメントでも、ファイル編集、シェルコマンド、ネットワークアクセスのような操作では、権限設定に応じて確認が入ると説明されています。
今回のような小さなHTMLツールなら、主に見るところはシンプルです。
| 確認するもの | 見るポイント |
|---|---|
| 作成ファイル | index.html だけを作ろうとしているか |
| 編集内容 | HTML、CSS、JavaScriptが目的に合っているか |
| コマンド | 不要な npm install や外部アクセスをしようとしていないか |
| 削除操作 | 既存ファイルを消そうとしていないか |
index.html を1つ作るだけなら、基本的にパッケージのインストールは不要です。 もし npm install や外部サイトへのアクセスを求められたら、いったん止まって理由を確認したほうがいいです。
止めるときの言い方
止めるときは、次のように言えば十分です。
今回はHTMLファイル1つだけで作りたいので、npm installや外部ライブラリの利用は不要です。
index.htmlだけで動く形に方針を戻してください。Claude Codeに任せる作業でも、許可するかどうかは人間が決めます。 ここを雑に流さないことが、安全に使うための基本です。
作ったHTMLをブラウザで開いて確認する
ファイルを開く
index.html が作られたら、ブラウザで開いて確認します。 Windowsなら、エクスプローラーでファイルをダブルクリックするだけでも開けます。 ターミナルから開くなら、プロジェクトフォルダで次のように実行します。
start .\index.htmlmacOSなら、次のように開けます。
open index.htmlブラウザで開いたら、見た目のきれいさより先に、動きが合っているかを確認します。
動作を見る
- テキストエリアに文章を貼れるか
- 入力すると文字数が変わるか
- 空白を除いた文字数が別に出るか
# 見出しや## 見出しを数えているか- コードブロックを数えているか
- 画面幅を狭くしても大きく崩れないか
ここで完璧を求めすぎる必要はありません。 最初の確認では、「頼んだものがだいたい動いているか」を見ます。
直したいところを追加で頼む
修正は小さく分ける
一度で完成させようとすると、依頼文が長くなりすぎます。 最初は最低限で作り、画面を見てから直すほうが進めやすいです。
たとえば、作ったあとに次のような不満が出るかもしれません。
- 文字が小さい
- スマホで余白が狭い
- 見出し数の数え方が期待と違う
- コードブロック数が合わない
- 結果の表示が見にくい
そのときは、1回の依頼で全部直そうとせず、気になるところを絞って伝えます。
index.htmlを確認しました。
機能はだいたい動いていますが、結果表示が少し見にくいです。
次の修正だけお願いします。
- 文字数、空白を除いた文字数、行数、見出し数、コードブロック数をカード状に分ける
- 数値を少し大きく表示する
- スマホ幅では1列に並ぶようにする
外部ライブラリは使わず、index.htmlだけを編集してください。数え方を直したいときは、期待する入力例と結果を一緒に渡すと伝わりやすいです。
期待する結果を添える
コードブロック数の数え方を直してください。
次のような本文を貼った場合、コードブロック数は2になる想定です。
本文例:
説明文です。
バッククォート3つで始まるJavaScriptのコードブロック
console.log("hello");
バッククォート3つで終わる
途中の文章です。
バッククォート3つで始まるHTMLのコードブロック
<p>Hello</p>
バッククォート3つで終わる
この例でコードブロック数が2になるように、index.htmlのJavaScriptを修正してください。ただし、上のようにコードブロックを含む依頼文は、貼り方によって見づらくなることがあります。 うまく伝わらないときは、コードフェンスの部分を「バッククォート3つで囲まれた範囲」と言葉で説明しても構いません。
修正依頼を出すときも、「index.htmlだけを編集してください」と書いておくと、作業範囲を小さく保ちやすくなります。
うまくいかないときの伝え方
症状と期待結果を分ける
作ったHTMLが思った通りに動かないこともあります。 そのときに「動きません」だけだと、Claude Codeは原因を絞りにくくなります。
次の4つを伝えると、直しやすくなります。
- 何をしたか
- 何が起きたか
- 本当はどうなってほしいか
- どのファイルを直してほしいか
たとえば、こうです。
index.htmlをブラウザで開き、本文を貼り付けました。
起きていること:
- 文字数は表示されます
- 見出し数が0のまま変わりません
期待していること:
- 「# タイトル」や「## 見出し」を入力したら、見出し数に反映してほしいです
index.htmlだけを確認して、原因を説明してから修正してください。このように書くと、Claude Codeは画面の症状と期待結果を比べやすくなります。 また、「原因を説明してから修正してください」と入れておくと、何が悪かったのかも確認できます。
小さく作ると確認しやすい
自分で判断できる大きさにする
Claude Codeに作業を頼むと、思ったより早く形になります。 だからこそ、最初は小さく作るのが大事です。
いきなり多機能なアプリを頼むと、見た目は完成しているように見えても、どこを確認すればいいのか分からなくなります。 HTMLファイル1つのツールなら、確認する場所が限られます。 入力欄、結果表示、数え方、画面崩れ。 見るべき場所が少ないので、自分でも判断できます。
Claude Codeを使う練習では、きれいな完成品を一発で出すことより、次の流れを覚えるほうが大切です。
覚えておきたい流れ
- 作るものを小さく決める
- 作らないものも伝える
- 実装方針を確認する
- ファイル作成を許可する
- ブラウザで動きを見る
- 気になるところを1つずつ直す
この流れを一度経験しておくと、次にもう少し大きなものを作るときも落ち着いて進められます。
まとめ
Claude Codeで最初に何かを作るなら、HTMLファイル1つで動く小さなツールがおすすめです。 環境構築がほとんどなく、ブラウザで直接確認でき、変更内容も追いやすいからです。
大事なのは、最初から大きく作らないことです。 目的を決め、制約を伝え、作業前に方針を確認し、作られたものを自分の目で見る。 そのあとで、気になるところを小さく直していきます。
Claude Codeは、うまく頼めば作業をかなり進めてくれます。 ただし、何を許可するか、何を完成と見るかは、人間が確認します。 小さなHTMLツール作りは、その感覚をつかむ最初の練習としてちょうどいい題材です。
