JavaScriptで「’変数名/関数名’ is not defined」というエラーが出る原因と対処法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで「'変数名/関数名' is not defined」というエラーが出る原因と対処法について現役エンジニアが解説しています。変数や関数が定義されていないというエラーなのですが、スペルミスからスコープの範囲外、定義し忘れなどがあります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptで「’変数名/関数名’ is not defined」というエラーが出る原因と対処法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで「’変数名/関数名’ is not defined」というエラーが出る原因と対処法について詳しく説明していくね!

大石ゆかり

お願いします!

 

「’変数名/関数名’ is not defined」とは

「’変数名/関数名’ is not defined」とは、その変数もしくは関数が定義されていないという意味になります。定義されていない変数もしくは関数は、参照したり呼び出したりすることができません。

また、このエラーが発生する行より下のコードは実行されず、処理が止まってしまいます。

エラーが出る原因

エラーが出る原因は、大きく分けて3つあります。

1つ目は、変数もしくは関数を宣言していないからです。宣言されていない変数もしくは関数を参照したり呼び出したりしようとするとエラーになります。

const a = 1
console.log(b)

JavaScriptで変数が定義されていないために起こる、変数名/関数名 is not definedエラーの例

const c = () => {}
d()

JavaScriptで関数が定義されていないために起こる、変数名/関数名 is not definedエラーの例

2つ目は、変数もしくは関数が参照することのできるスコープ内にないからです。変数も関数もスコープの範囲外からは参照したり呼び出したりすることができません。

const e = () => {
  const f = 3
}
console.log(f)

JavaScriptで変数を定義しているが、有効なスコープの範囲外のために起こる、is not definedエラーの例

const g = () => {
  const h = () => {}
}
h()

JavaScriptで関数を定義しているが、有効なスコープの範囲外のために起こる、is not definedエラーの例

3つ目は、スペルミスをしているからです。変数も関数も名称で判別するので、単純なスペルミスでもこのエラーが発生します。

const test = 1
console.log(text)

JavaScriptで変数を定義しているが、スペルミスのために起こる、is not definedエラーの例

const sample = () => {}
simple()

JavaScriptで関数を定義しているが、スペルスミスのために起こる、is not definedエラーの例

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

エラーを出さないための対処法

エラーを出さないための対処法を、それぞれ考えてみます。

1つ目は、変数もしくは関数を参照したり呼び出したりするコードを記述するときは、その変数もしくは関数が宣言されているかどうかを確認することです。

2つ目は、変数もしくは関数が参照することのできるスコープ内にあるかどうかを確認することです。

3つ目は、宣言した変数もしくは関数から名称をコピー&ペーストすることです。

とにかく動くようにしたいという場合は次のような逃げ道もあります。変数を参照したり、関数を呼び出す前にif文でチェックを入れる方法です。チェックにはtypeof演算子を使います。

const a = 1
if (typeof b !== 'undefined') console.log(b)
const c = () => {}
if (typeof d !== 'undefined') d()

 

筆者プロフィール

メンター久保田さん

Webシステム開発が中心のシステムエンジニア。

HTML、CSS、JavaScript(React、Vue.js)、PHP、Javaが守備範囲。最初に選ぶポケモンは炎タイプ。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。