構文（文法）の暗記は、もうAIが肩代わりしてくれる時代になりました。map と forEach の違いを覚えていなくても、Claude Code に「配列を変換して新しい配列を返して」と言えば動くコードが出てきます。
ただ、毎日 Claude Code を回していて確信しているのは、「文法をAIに任せられる」ことと「AIを使いこなせる」ことは別物だということです。文法だけ任せて土台がない人は、いつまで経ってもAIの出力を検証できず、一生AI頼みから抜けられません。
ここでは、未経験者が「AIに任せる前に自分で鍛えないと差がつく」3つの土台を、Claude Code を使った具体的なやり方つきで整理します。重要なのは、この3つはコードを書く力というより「AIを使いこなす力」に直結する点です。プログラミングとAI協働スキルを同時に伸ばす軸になります。
土台1: エラーを「何が・どこで・なぜ」で切り分ける力
未経験者がやりがちなのは、エラーが出た瞬間に全文を Claude Code に丸投げすることです。これだと「AIが直した」だけが残り、自分の中に切り分けの型が育ちません。
エラーをAIに渡す前に、自分で1次切り分けをします。やることは3つだけです。
-
何が — エラーの種類（
TypeErrorなのか404なのか） - どこで — スタックトレースの一番上の自分のファイル名・行番号
-
なぜ（仮説） — その行で何が
undefined/nullになり得るか
例えばこんなエラー。
TypeError: Cannot read properties of undefined (reading 'name')
at UserCard (app/components/UserCard.tsx:8:21)
ここで「何が = undefined の .name 参照」「どこで = UserCard.tsx 8行目」「なぜ = user が渡ってきていない可能性」まで自分で言えるようにします。そのうえで Claude Code に渡すと、丸投げとは精度が変わります。
悪い例: 「エラー直して」＋エラー全文ペースト
良い例:
UserCard.tsx の8行目で TypeError: Cannot read properties of undefined (reading 'name') が出ています。
user が undefined のときに user.name を読んでいるのが原因だと考えています。
親(app/page.tsx)で user を fetch していますが、ローディング中は undefined です。
この仮説が正しいか確認したうえで、ローディング/未取得時のガードを入れる修正案を出してください。
仮説を添えると、Claude Code は「合っているか」を検証する応答を返してくれます。AIを採点者として使うには、自分の答えを先に出す必要があるわけです。
土台2: 作りたいことを言葉にして、AIが動ける要件に落とす力
これがAI協働スキルの核です。コードが書けること以上に価値が出る部分だと考えています。「いい感じのログイン画面作って」では、AIも人も動けません。
曖昧な要望を、AIが実装に移せる粒度まで分解するテンプレを用意しておくと、出力が安定します。
# 機能要件テンプレ（Claude Code に渡す前に自分で埋める）
## 何を作るか（1文）
メールアドレスとパスワードでログインする画面
## 入力 / 出力
- 入力: email(string), password(string)
- 成功時の出力: /dashboard へ遷移
- 失敗時の出力: フォーム上にエラーメッセージ表示
## 制約・前提
- Next.js (App Router) / TypeScript
- 認証は Supabase Auth を使う
- バリデーション: email形式チェック・password 8文字以上
## やらないこと（スコープ外）
- ソーシャルログイン
- パスワードリセット
## 完成の定義（受け入れ条件）
- 空欄で送信したら送信ボタンが押せない
- 認証失敗時にAPIエラーを画面に出す
「やらないこと」と「完成の定義」を書けるかが分かれ目です。ここが書けない＝自分が何を作りたいか分かっていない、ということなので、まずここで詰まる練習に価値があります。テンプレをそのまま CLAUDE.md に置いておくと、Claude Code 側も毎回この粒度を期待してくれます。
<!-- CLAUDE.md（抜粋） -->
## 機能を依頼するときのルール
新機能の依頼は必ず「入力/出力・制約・やらないこと・完成の定義」を含める。
要件が曖昧なときは実装に入る前に質問で埋めてから着手すること。
土台3: 生成コードを読んで「なぜ動くか」を説明できる力
AIが書いたコードを鵜呑みにしないための、レビューの目です。動いた瞬間に終わりにせず、自分の言葉で「なぜ動くか」を言えるかを毎回チェックします。
具体的には、生成コードに対して自分で1行ずつ意図を言ってみて、詰まった行だけ Claude Code に説明させます。
// Claude Code が生成したコード（Next.js Server Component）
export default async function Page() {
const supabase = createClient();
const { data: { user } } = await supabase.auth.getUser();
if (!user) redirect('/login'); // ← なぜここで return 不要なのか説明できる？
const posts = await getPostsByUser(user.id);
return <PostList posts={posts} />;
}
ここで「redirect() の後になぜ return を書かなくていいのか」を自分で説明できなければ、そこが理解の穴です。その行だけ狙って聞きます。
このコードの redirect('/login') の行について。
なぜ redirect の後に return や処理の中断を書かなくても、
下の getPostsByUser が実行されないのか、初心者向けに1行ずつ理由を説明してください。
（Next.js の redirect の挙動として）
ポイントは「全部説明して」と丸ごと聞かないことです。自分で説明できる部分はスキップし、穴だけ埋める。これを繰り返すと、AIの出力を読む速度と疑う精度が両方上がります。レビューを通すたびに、自分がAIに依存している箇所が可視化されていきます。
まとめ: 3つの土台は「AIを使いこなす力」そのもの
整理すると、
- エラーの1次切り分け → AIに採点させるための「自分の答え」を持つ力
- 要件への言語化 → AIが動ける指示に落とす力（協働スキルの核）
- 生成コードの説明 → AIを鵜呑みにしないレビューの目
どれも「文法を覚える」とは別の能力で、AIに任せれば任せるほど効いてきます。文法はAIに肩代わりさせていい。その分の時間を、この3つに振り向けるのが未経験者の最短ルートだと考えています。プログラミングの基礎とAI協働スキルが、同じ練習で同時に育つのが面白いところです。
未経験者向けの講座を運営しています
未経験から Next.js + Supabase + Claude Code で Webアプリを作って公開するまで を、全20セッションで体系化した教材です。Claude Code を学習パートナーにする CLAUDE.md / Skills 設計までセットで含みます。
- 無料体験版（git clone してすぐ動く・最初の数セッション分・⭐ Star もよろしくお願いします）→ https://github.com/ayies128/next-ai-camp-trial
- 教材完全版＋月5,500円〜のCTOメンタリング（全20セッション＋チャット質問し放題）→ https://menta.work/plan/20251?ref=qiita
- YouTube『AIエンジニア情報局』（AI×開発ニュースを1本5分でキャッチアップできる別運営チャンネル・無料）→ https://www.youtube.com/channel/UC1rXVD9WYsQPQEWZyd-A1KA/?ref=qiita
※ Qiita 読者の方には易しすぎる内容なので、初心者の知り合いへの紹介や社内研修の参考としてどうぞ。