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

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

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

 

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

 

 

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

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

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

エラーが出る原因

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

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

const a = 1
console.log(b)

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

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

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

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

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

const test = 1
console.log(text)

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

[PR] フロントエンドで副業する学習方法を動画で公開中

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

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

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では、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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