2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ennagara128

未経験がAI駆動開発で最初に出会うエラーメッセージ5選 — 意味・直し方・そのままAIに貼れる聞き方

2
Posted at

Next.js（App Router）を Claude Code と一緒に触りはじめた未経験者が、最初の数日でほぼ必ず遭遇する英語のエラーメッセージを5つ集めました。

エラーは「失敗」ではありません。プログラムが「ここが噛み合っていないよ」とあなたと AI に教えてくれるヒントです。英語だとつい身構えますが、意味と直し方さえ知っていれば、どれも「あー、またこれね」で済むようになります。実際、下の5つは出て当たり前。むしろ出ないほうが珍しいくらいです。

各エラーを ①実際のエラー全文 → ②いつ出るか → ③何を言っているか（原因）→ ④直し方 → ⑤そのまま AI に貼れる聞き方1行 の型で並べました。図鑑として、詰まったときに該当箇所だけ引けます。

1. Module not found: Can't resolve 'xxx'

①エラー全文

Module not found: Can't resolve 'react-icons'

  1 | import { FaGithub } from 'react-icons/fa'
    |                          ^

②いつ出るか

import を書いた直後、保存した瞬間に画面が赤くなる。

③何を言っているか（原因）

「react-icons っていうモジュール、探したけど見つからないよ」という意味です。原因はだいたい次の2つ。

  • インストールし忘れ（npm install していない外部ライブラリを import した）
  • パスのタイプミス（自作ファイルを ./components/Button と書くべきところを ./component/Button にした等）

④直し方

外部ライブラリなら、ターミナルでインストールする。

npm install react-icons

自作ファイルなら、import のパスと実際のファイル名・場所が一致しているか確認する。大文字小文字も区別されます（Button.tsx を button で import すると Mac では通っても本番で落ちることがある）。

⑤そのまま AI に貼れる聞き方1行

「Module not found: Can't resolve 'react-icons'」というエラーが、import { FaGithub } from 'react-icons/fa' の行で出ました。インストール漏れかパスミスか切り分けて直し方を教えてください。

2. ReferenceError: xxx is not defined / undefined is not a function

①エラー全文

ReferenceError: userName is not defined

TypeError: user.getName is not a function

②いつ出るか

書いたはずの変数や関数を使った瞬間。ブラウザのコンソールや画面のオーバーレイに出る。

③何を言っているか（原因）

  • is not defined = 「その名前の変数、どこにも用意されてないよ」。宣言し忘れ か スペルミス が大半（userName を usreName と書いた等）。
  • is not a function = 「それ、関数じゃないから () で呼べないよ」。名前は合っていても中身が想定と違う（undefined だった、オブジェクトだった）ときに出ます。

④直し方

まずスペルを疑う。宣言側と使用側で1文字ずつ見比べる。エディタの補完（候補が出るか）でも気づけます。is not a function は、呼ぶ前に console.log(user) で中身を出し、本当にその関数を持っているか確認するのが早いです。

⑤そのまま AI に貼れる聞き方1行

「ReferenceError: userName is not defined」が出ました。userName は◯行目で使っていますが宣言が見当たりません。スペルミスか宣言漏れかを含めて原因と直し方を教えてください。

3. SyntaxError: Unexpected token

①エラー全文

Error: Unexpected token, expected "," (12:4)

  10 |   const user = {
  11 |     name: "Taro"
> 12 |     age: 20
     |     ^

②いつ出るか

保存した瞬間、コンパイルすら通らずビルドが止まる。

③何を言っているか（原因）

「文法が途中でおかしくなっているよ」という意味。9割は 括弧・カンマ・引用符の閉じ忘れ／付け忘れです。上の例なら name: "Taro" の後ろにカンマ , が抜けています。

エラーが指す行（12:4 は12行目4文字目）は「おかしいと気づいた場所」なので、本当の原因はその1〜2行手前にあることがよくあります。ここが初心者のハマりどころ。

④直し方

指摘された行の直前を重点的に見る。VS Code なら対応する括弧をクリックするとペアがハイライトされるので、閉じ忘れを見つけやすいです。Prettier などの自動整形を入れておくと、崩れた瞬間に見た目で気づけます。

const user = {
  name: "Taro",  // ← カンマを追加
  age: 20,
}

⑤そのまま AI に貼れる聞き方1行

「Unexpected token, expected ","（12:4）」が出ました。該当箇所の前後5行を貼るので、閉じ忘れやカンマ抜けがどこか指摘して直してください。

4. Hydration failed / Text content does not match

①エラー全文

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Text content did not match. Server: "12:00:00" Client: "12:00:01"

②いつ出るか

Next.js で、日付・時刻・ランダム値などを画面に出したときや、window・localStorage をコンポーネントの本体で直接触ったとき。

③何を言っているか（原因）

Next.js は サーバー側で一度 HTML を作り、ブラウザ側でもう一度組み立てて突き合わせます（これが hydration）。このとき両者の中身が食い違うと出るエラーです。

  • new Date() で現在時刻を出す → サーバーとブラウザで数ミリ秒ずれる
  • Math.random() を表示 → 毎回変わる
  • サーバーに存在しない window / localStorage を本体で参照

つまり「サーバーとブラウザで結果が変わるもの」を、そのまま描画すると起きます。

④直し方

「ブラウザだけで実行したい処理」は useEffect の中に入れる。useEffect はブラウザ側でしか動かないので、サーバーとの食い違いが起きません。

'use client'
import { useEffect, useState } from 'react'

export function Clock() {
  const [now, setNow] = useState<string | null>(null)
  useEffect(() => {
    setNow(new Date().toLocaleTimeString())
  }, [])
  return <p>{now ?? '読み込み中...'}</p>
}

⑤そのまま AI に貼れる聞き方1行

Next.js で「Hydration failed / Text content did not match」が出ました。◯◯コンポーネントで new Date() を表示しています。サーバーとブラウザの差が原因だと思うので、useEffect を使った直し方を教えてください。

5. Error: Port 3000 is already in use

①エラー全文

⚠ Port 3000 is in use, trying 3001 instead.

Error: listen EADDRINUSE: address already in use :::3000

②いつ出るか

npm run dev でサーバーを起動しようとしたとき。前のサーバーを止めきれていない状態で再起動すると出る。

③何を言っているか（原因）

「3000番の入り口、もう別のサーバーが使ってるよ」という意味です。ターミナルを閉じ忘れた、Ctrl + C で止めたつもりが残っていた、など。コードのバグではありません。ここで慌てないのが大事。

④直し方

一番簡単なのは残っているプロセスを止めること。Mac / Linux なら、

lsof -ti:3000 | xargs kill

3001番で起動してよければそのまま使ってもOK（http://localhost:3001 を開く）。ポートを指定して起動することもできます。

npm run dev -- -p 3001

⑤そのまま AI に貼れる聞き方1行

「Port 3000 is already in use（EADDRINUSE）」で npm run dev が起動できません。前のサーバーが残っているようです。Mac 前提で、残っているプロセスを止めて 3000 番で起動し直す手順を教えてください。

おまけ: localStorage is not defined

Next.js で localStorage is not defined が出るのも定番です。これは4番の hydration と同じ根っこで、サーバー側には localStorage（ブラウザの保存領域）が存在しないのに本体で触ってしまうのが原因。対処も同じく、useEffect の中に移すか 'use client' を付けて読み書きします。「サーバーにブラウザ専用のものを求めない」と覚えておくと、この系統のエラーはまとめて見通せます。

まとめ

5つに共通するのは、エラー文の英語は「何が・どこで・どう噛み合っていないか」を毎回律儀に教えてくれているということです。全部を読めなくても、Module not found（見つからない）／not defined（用意されてない）／Unexpected token（文法崩れ）／Hydration（サーバーとブラウザの食い違い）／Port in use（入り口が埋まってる）と、最初の数語の意味だけ覚えれば当たりがつきます。

そして詰まったら、上の「⑤聞き方1行」のように エラー全文＋何をしていたか を添えて AI に貼る。これだけで返ってくる答えの精度がまるで変わります。エラーは怖い壁ではなく、あなたと AI の共通言語です。

Qiita 読者の方には基礎的な内容だったと思います。もし周りに「独学で Next.js を触りはじめて英語エラーで固まっている」初心者の方がいれば、この記事や下の教材を紹介・社内研修の入り口として使ってもらえたら嬉しいです。

未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を、全20セッションで体系化した教材を運営しています。プログラミングと「AIと協働するスキル」が同時に身につく設計です。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?