AIと一緒に開発していると、画面に赤い英語のエラーがドン！と出て、心臓がヒヤッとする瞬間があります。でも大丈夫です。あの英語は「あなたを責める言葉」ではなく、「ここを直せば動くよ」というAIとあなたへのヒントなんです。意味さえ分かれば、むしろ味方になります。しかもエラーの種類は無限にあるわけではなく、未経験のうちに出会うものはだいたい決まっています。今日はその中でも頻出のエラーを、実際に画面に出る英文つきで「図鑑」として紹介します。一度「これはあのパターンだ」と分かれば、次からは落ち着いて対処できるようになります。

まずは軽い3つ（出て当たり前です）

'handleClick' is not defined
「その名前、私は知らないよ？」という意味です。ほとんどがスペルミスか、変数・関数を作る前に使っているケース。たとえばhanldeClickのように1文字打ち間違えているだけ、ということも本当によくあります。エラー文に出ている名前と、自分が書いた名前を大文字小文字まで見比べれば直ります。

SyntaxError: Unexpected token
「文の書き方（文法）が途中で壊れています」という合図。犯人はたいてい括弧やカンマの閉じ忘れ、あるいは1個多い閉じ括弧です。エラーが指す行だけでなく、その少し上まで{ }や( )の数が合っているかを見直してみてください。ここはAIに全文を貼ると一瞬で場所を当ててくれます。

Port 3000 is already in use
これはミスですらありません。「さっき起動したサーバーがまだ生きています」というだけの状態です。前に開いたターミナルを閉じるか、そのまま別ポートで起動し直せばOK。焦らず「あ、二重起動しちゃったな」くらいの気持ちで大丈夫です。

じっくり1つ：Module not found: Can't resolve 'xxx'

未経験がいちばん多く踏むのがこれです。

何が起きてる？
「xxxという部品を読み込もうとしたけど、見つかりませんでした」という意味です。原因は大きく2つ。①importのパスやファイル名が間違っている、②そのライブラリをまだインストールしていない、のどちらか。

どう直す？
xxxが自分で作ったファイルの名前なら、パスの綴りと置き場所を確認します（./components/Buttonのように、階層がずれているだけのことが多いです）。逆に見覚えのない外部ライブラリの名前なら、まだPCに入っていないだけなのでnpm install xxxでインストールすれば解決することがほとんどです。

そのままAIに貼れる聞き方（1行）
「Module not found: Can't resolve 'xxx'というエラーが出ました。原因の候補と直し方を、初心者向けに1つずつ教えてください」

こう頼むと、AIが「パスの問題か・未インストールか」を切り分けて案内してくれます。

エラーは「失敗」ではなく「ヒント」です

ちなみにHydration failedのような一見難しいエラーも、意味さえ分類できれば怖くありません。大事なのは、英語で身構えて手が止まるのをやめること。エラー文を読む→意味を分類する→AIに正確に渡す。この流れ自体が、プログラミングの力と、AIに的確に頼む力を同時に育ててくれます。むしろエラーが出たときこそ、あなたが実際にコードを動かして前に進んでいる証拠です。何も出ずに止まっているより、ずっといい状態なんです。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全20セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から学習を始められます。エラーの読み方も、AIへの頼み方も、手を動かしながら身につきます。

  • まずは無料で試したい方へ：教材の無料体験版があります（最初の数セッション分・プラン詳細をご覧ください）
  • 今日から本気で始める（教材完全版＋月5,500円・チャットで質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge