AI駆動開発ガイド:Claude Code

AI駆動開発ガイド:Claude Code を中心とした開発環境構築と運用ノウハウ 共有用 / 2026年4月作成 本ドキュメントは、Claude(特に Claude Code)を用いた Web システム開発の進め方について、プロンプトとコンテキストの基礎から、記憶の仕組み、IDE 選定、ビジュアルデザインツール連携...

AI駆動開発ガイド:Claude Code を中心とした開発環境構築と運用ノウハウ 共有用 / 2026年4月作成 本ドキュメントは、Claude(特に Claude Code)を用いた Web システム開発の進め方について、プロンプトとコンテキストの基礎から、記憶の仕組み、IDE 選定、ビジュアルデザインツール連携、バイブコーディング時代の品質担保までを体系的にまとめたものです。React + TypeScript スタックを想定しています。 --- 目次 プロンプトとコンテキストの違い CLAUDE.md とは何か、どう書くか Claude Code の記憶モデルと差戻し削減の運用 Claude Code は IDE ではない(CLI + 拡張という構造) OpenAI Codex との比較 Auto memory の可視性・保存場所・共有範囲 Auto memory を機能させる書き方 デザイン・コード・動作確認を統合するツール(詳細) VS Code と Cursor のメモリ・体感比較 VS Code と WebStorm の選び方 バイブコーディング時代の静的解析と AI チェックの役割 --- プロンプトとコンテキストの違い 基本定義 プロンプト(Prompt):AI に対する「指示・依頼」そのもの。「何をしてほしいか」を伝える命令文 コンテキスト(Context):その指示を遂行するために AI が参照する「背景情報・前提知識」。役割設定、過去の会話、参考資料、ルールなど周辺情報すべて 料理で例えると、プロンプトは「オーダー」、コンテキストは「厨房の設備・冷蔵庫の中身・お客様のアレルギー情報・店のレシピ集」に相当します。 技術的な区別 厳密には、LLM の内部では両者は区別されず、すべて「コンテキストウィンドウ」に入ります。プロンプトはコンテキストの一部であり、開発者が意図的に分けて管理しているだけです。 Claude 利用場面別の使い分け Claude.ai(チャット画面)の場合 プロンプト → チャット入力欄の依頼文 コンテキスト → Projec...