ワンページの基本

このガイドでは、Claude Codeでワンページ作成のための基本的な使い方を、Web開発初心者の方にも分かりやすく解説します。Claude Codeを効率的に活用して、スムーズな開発体験を始めましょう。

Claude Codeの起動方法

Claude Codeを起動する方法は主に2つあります。どちらも簡単ですので、状況に応じて使い分けてください。

効果的な指示の出し方

Claude Codeに指示を出す方法はいくつかありますが、どの方法も覚えておくと便利です。

prompt.mdファイルを活用する方法

この方法は複雑な指示や長い指示を出す際に特におすすめです。また、漢字変換中に、間違って送信しないためにも、prompt.md で下書きをして、コピー&ペーストするのもおすすめです。

特に、Windowsは、日本語入力に難があるので、prompt.mdに書く ことをお勧めします。

「ここにビジネスの名称や、カテゴリなどを記入」のためのWebページを作ってください。

- ここにビジネスについての情報を入れる
- こだわりを入れる
- 順不同で良い
- その他、思いつく支持、要望、願望を入れる
- 依頼したいことも書いておく

直接プロンプトを入力する方法

簡単な指示の場合は、Claude Codeに直接プロンプトを入力することも可能です。

プランモードを活用する

Webサイトを構築する際、複雑な作業やタスク内容の伝達に自信がない時は「プランモード」を活用してください。プランモードを使えば、実行前に、どうするべきかをClaude Codeが考え、計画を提示してくれます。計画を修正し、再計画を繰り返し、最終的に実行させることが可能です。

プランモードは、 Shiftキー + Tabキー で切り替えることができます。

完成したページを見る方法

public フォルダの中のファイルをブラウザで開きます。あるいは、Live Serverで開きます。

作業状態の保存とバージョン管理

Claude Codeでの開発では、こまめな保存が非常に重要です。

コミットの実行

# コミットの基本的な流れ
git add .
git commit -m "機能追加: ヘッダーコンポーネントを作成"

プッシュのタイミング

Cloudflare PagesとGithubを連携させている場合は、以下の点に注意してください：

Claude Codeの終了方法

作業が完了したら、適切にClaude Codeを終了しましょう。

終了コマンド

以下のいずれかの方法で終了できます：

• exit コマンドを入力
• /exit コマンドを入力
• Ctrl+C を2回素早く実行

前回の続きから再開する方法

Claude Codeでは、前回の会話の続きから作業を再開することができます。

効率的な会話のコツ

Claude Codeをより効果的に活用するためのテクニックをご紹介します。

プランモードの活用

起動方法: Shift + Tab で選択

Claude Codeの独り言から学ぶ

Claude Codeが作業中に表示する思考プロセスや独り言を読むことで：

• 開発の知識を学習できる
• 実行している処理を理解できる
• トラブルシューティングのヒントを得られる

会話の管理テクニック

まとめ

Claude Codeの基本的な使い方をマスターすることで、効率的なWeb開発が可能になります。特に重要なポイントは：

1. こまめなコミットで作業を保存
2. prompt.mdを活用した詳細な指示
3. プランモードで正確な実行
4. 適切な会話管理で使用量を最適化

これらの基本を押さえて、Claude Codeを活用したWeb開発を楽しんでください。