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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,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] フロントエンドで副業する学習方法を動画で公開中

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

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

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サービス公開を習得できる、オンラインブートキャンプを開催しています。

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

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する