中級① 開発環境を本格化する（CLAUDE.md・スキル・MCP）

中級編へようこそ！初級編で作った my-app を、ここから“使われるサービス”に育てていきます。その前に今日は、開発の相棒であるAIの仕事環境を整えます。プロの現場ではこれをハーネス（harness：馬具・装備）構築と呼びます——AIが実力を出せるように装備を着せる、という意味です。

STEP1：なぜ毎回説明し直しているのか？

AIとの会話は、新しいチャットを開くたびに記憶がリセットされます。「このアプリはNext.jsで、Supabaseでログインがあって…」と毎回説明するのは面倒だし、説明し忘れるとズレた提案をされる。そこで登場するのが CLAUDE.md——リポジトリの一番上に置く、AIが作業前に毎回自動で読むメモです。

CLAUDE.md

AIへの申し送りノート。プロジェクトの説明・約束ごとを書いておくと、毎回読んでから作業してくれる。

スキル

よく頼む定型作業を“1コマンド”にまとめたもの。/コマンド名 で呼び出せる。

MCP

AIに外部の道具（DB・デザインツール等）をつなぐ差し込み口。無料講座のMCPの回の実物。

STEP2：CLAUDE.mdをAI自身に書かせる

中身は自分で書いてもいいのですが、プロジェクトを一番知っているのはAI自身。リポジトリを読ませて書かせるのが手っ取り早いです。

このリポジトリの内容を調べて、CLAUDE.md を作って。入れてほしい内容：①このアプリが何か（ひとこと）②技術構成（Next.js App Router / Tailwind / Supabase）③コードの約束ごと（文字列はダブルクォーテーション、コメントは日本語、デザインの方針）④よくある作業の手順（mainに反映したらVercelが自動デプロイ、環境変数の変更後はRedeploy）⑤絶対にやってはいけないこと（service_roleキーをコードに書かない、RLSを無効にしない）。まず計画を見せて。

できあがったCLAUDE.mdを自分でも読んでみてください。「うちのアプリの取扱説明書」になっているはず。違うところがあれば「⑤に〇〇も足して」と直せばOK。あなたの“こだわり”が増えるたびに、ここに追記していきます。

STEP3：効果を確かめる

新しいチャットを開いて、何の説明もせずに「メモ一覧の見た目をもう少し整えて」とだけ頼んでみてください。以前なら「どのファイルですか？」となりがちだった場面で、技術構成もデザイン方針も分かった上で動いてくれるはず。毎回の説明が要らなくなる＝指示が短くなる＝ズレが減る。これがハーネスの効果です。

STEP4：定型作業を“スキル”にする

初級⑥でやった「公開前チェック」、毎回長い文章を打つのは大変ですよね。ああいう何度も頼む定型作業は、スキル（カスタムコマンド）にしてしまいます。

Claude Codeのスキルとして .claude/skills/release-check/SKILL.md を作って。内容：このアプリの公開前チェック一式（秘密情報がコードに混ざっていないか・スマホ表示・変な入力で壊れないか・SupabaseのRLS漏れ・ビルドが通るか）を実行して、結果を報告する。mainに反映して。

次からは /release-check と打つだけで、フルセットの点検が走ります。「新しいページを作るときの手順」「リリースノートを書く」など、自分がよく頼むことをどんどんスキル化していくと、開発がどんどん速くなります。

STEP5：MCPは“使いたくなったら”でOK

もう1つの装備がMCP。AIがSupabaseのテーブルを直接見たり、Figmaのデザインを読んだりできるようになる道具の差し込み口です。Claude Codeの設定画面（コネクタ／MCP）から追加できます。ただし無料講座でも学んだとおり、MCPはAIに“手”を与えるもの。提供元が信頼できる公式のものだけを、必要になったときに入れる——今日は場所と注意点だけ覚えておけば十分です。

おさらい：今日使った“言葉”

ハーネス構築

AIが実力を出せるように装備（メモ・コマンド・道具）を整えること。

CLAUDE.md

毎回自動で読まれる申し送りノート。こだわりが増えたら追記。

スキル

定型作業の1コマンド化。/release-check のように呼ぶ。

MCP

外部道具の差し込み口。信頼できる公式のものだけ。