VS Code + Claude Codeの作業フロー【基本まとめ】

VS Code + Claude Codeで技術メモを書く流れの入口

この記事の位置づけ

この記事は、AI活用の入口メモです。Claude CodeはAnthropicが提供するAIコーディングアシスタントです。仕様・機能はアップデートで変わるため、最新情報は公式ドキュメントを確認してください。

ざっくり言うと

VS Code + Claude Codeを使うと、技術メモの下書き作成・修正・構成確認・リンク整理などをAIと対話しながら進められます。

書き始めるハードルが下がる・構成を整えやすい・関連リンクの漏れに気づきやすいといったメリットがあります。

基本的な流れ

1. テーマと構成を決める

まず、何について書くかを決めます。

Claude Codeに「○○について初学者向けのメモを書きたい。どんな構成が良いか」と相談することで、構成の案を得られます。

2. frontmatterを準備する

Astroなどの静的サイトではMarkdownのfrontmatterが必要です。

Claude Codeに「このメモのfrontmatterを作ってほしい。title・description・category・tags・created・updatedが必要」と指示すると、下書きを生成してもらえます。

3. 本文の下書きを作る

「この記事の本文を下書きしてほしい。以下の方針で書いてほしい」と伝え、方針を箇条書きで渡します。

方針の例:
– 初学者向けのざっくりした説明にする
– 断定を避けて確認を促す表現にする
– 用語を正確に使う
– 例や表を使って視覚的にわかりやすくする

4. 内容を確認・修正する

AIが生成した下書きをそのまま使うのではなく、自分で確認します。

確認ポイント:
– 数値・規格値が正しいか(公式資料で確認)
– 会社固有・非公開情報が含まれていないか
– 断定が強すぎる表現がないか
– 関連リンクが正しく機能するか

5. 関連リンクを整える

記事末尾に関連メモ・関連ツールのリンクを置きます。

Claude Codeに「このメモに関連するリンクはどれか、既存ファイル一覧を渡すので確認してほしい」と依頼するとリンク候補を提案してもらえます。

6. ビルド確認

Astroの場合は npm run build を実行してビルドが通ることを確認します。

使い方のコツ

  • 方針と制約を最初に伝える:「断定を避ける」「会社情報を含めない」などを最初に伝えるとAIが方針を守りやすくなります
  • 一気に完成させようとしない:構成 → 下書き → 修正 → リンク整理、と段階に分けて進める方が品質が上がります
  • AIに「確認して」と言うだけでなく、自分で確認する:数値・規格・最新情報は必ず公式ソースでチェックします

関連記事

タイトルとURLをコピーしました