学習を始めて最初にぶつかる壁のひとつが、これです。

参考にした記事のコードをそのまま書いたのに、エラーが出て動かない。

このとき多くの人は「自分の写し間違いだ」と思って、記事とコードを何度も見比べます。1文字ずつ確認して、スペルも記号も合っている。それでも動かない。ここで「やっぱり自分には向いていないのかも」と感じてしまいがちなところです。

でも、写し間違いではないことが少なくありません。

原因は、その記事が書かれた時点と、今あなたが入れたものの時点が違う、というだけだったりします。

同じことを書いているのに、書き方だけが変わっています

プログラミングで使う道具（ライブラリやフレームワークと呼ばれます）は、数ヶ月ごとに更新されます。更新のときに、書き方そのものが変わることがあります。

以前は、こう書けました。

import { A } from "some-library"

今の版では、こう書きます。

import { A } from "some-library/react"

（※実際のライブラリ名ではなく、説明のための例です）

やろうとしていることは、どちらもまったく同じです。置き場所の名前だけが変わっています。

このとき出るのは、だいたいこういうエラーです。

Attempted import error: 'A' is not exported from 'some-library'.

「そのライブラリは見つかったけれど、その中に A という名前は無い」と言われています。

記事は間違っていません。あなたの写し方も間違っていません。前提にしている時点が違うだけです。

そして厄介なのは、エラーメッセージがそれを教えてくれないことです。「無い」としか言ってくれないので、初めての人には「自分が何か間違えた」としか読めません。

ズレがどこにあるかは、上から順に3か所たどると分かります

コードをいじる前に、この順番でたどってください。

1つめ：package.json の dependencies

プロジェクトのフォルダの中にある package.json というファイルに、使っている道具とその版が書いてあります。

"dependencies": {
  "next": "16.3.0",
  "some-library": "3.0.0"
}

（some-library は、さきほどと同じく説明のための名前です）

この数字が、あなたの環境の「今」です。

⚠️ ここで、そもそも目的のライブラリが一覧に載っていないなら、話は別です。それは版のズレではなく、単にインストールし忘れています。まずそこを見てください。

2つめ：ターミナルで node -v

土台そのものの版です。これは package.json の engines という欄（あれば）や、記事の中に「Node 20以上」のように書かれている条件と突き合わせます。ここが食い違っていると、コードが正しくても動かないことがあります。

3つめ：参考にした記事の公開日

記事の上か下に日付が書いてあります。Next.js のような主要なものだと大きな更新が年に1〜2回来ることもあるので、1〜2年前の記事でも書き方が変わっている可能性を疑っていい、という目安になります。

上から見ていくと、「入れ忘れなのか」「版がズレているのか」「そもそも土台が違うのか」が切り分けられます。

AIに聞くときは、たどった結果をそのまま渡す

3か所たどったら、それをそのまま渡すだけです。

Next.js 16.3.0 の環境です。
2023年5月公開の記事を参考にして下記のコードを書いたところ、
Attempted import error: 'A' is not exported from 'some-library' が出ました。
参考にした記事の書き方が、今のバージョンでも有効かどうかを判断してください。

「直してください」ではなく「まず有効かどうかを判断してください」と頼むのがコツです。

⚠️ ただし、AIの知識にも時点があります。学習した時期より新しい版については、自信ありげに古い答えを返してくることがあります。返ってきた答えは、そのライブラリの公式のリリースノートや移行ガイド（Migration Guide）で一度裏を取ってください。ここを飛ばすと、古い情報を古い情報で直すことになります。

大事なのは、どちらの時点に合わせるかを決めること

ズレているとわかったあと、進み方は2つあります。ここを決めないまま手を動かすと、記事の書き方と今の書き方が混ざって、直しにくい状態になりがちです。

A. 今の版に合わせて書き直す（基本はこちら）

これから先も今の版で作っていくので、ここで合わせておくほうが後がラクです。記事は「やりたいことの説明」として読み、コードは今の版の書き方に置き換えます。公式の移行ガイドがあれば、たいてい対応表が載っています。

B. 記事の版に落とす

どうしてもその記事の手順を最後まで通したいときだけ。ただし、その版に合わせて他のライブラリも巻き戻す必要が出てくることがあり、初学者のうちは深追いしないほうが安全です。

学習中は基本的にAでいいです。そして、記事のとおりにできないこと自体は失敗ではありません。むしろ「この記事は今の版と違う」と判断できた時点で、そのまま書き写すだけの段階から一歩抜けています。

情報の時点を疑う目は、コード以外でも効きます

「今読んでいるこの情報は、いつの前提で書かれたものか」

これはプログラミングに限りません。調べものでも、AIから返ってきた答えでも同じです。情報そのものだけでなく、その情報が立っている前提まで含めて読めるようになると、判断の精度が変わります。

プログラミングを学ぶ過程で身につくのは、書き方だけではありません。AIが出したものも、いつの前提で言っているのかを確かめられる目が一緒に育ちます。学習の副産物としては、かなり大きいと思っています。

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

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全20セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

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