先生と生徒の会話形式で理解しよう

生徒

「JavaScriptの関数を書いているときにエラーがよく出るんですが、どう直せばいいかわかりません。何かよくあるエラーとその直し方を教えてください。」

先生

「はい、関数を書くときに初心者がよく間違えるエラーは決まっています。今日はそれらのエラーの種類と、どんなときに起きてどうやって解決するかをわかりやすく説明しますね。」

生徒

「お願いします！エラーが怖くなくなりたいです。」

先生

「では、具体的に見ていきましょう！」

1. 「関数が定義されていません」というエラー

エラー内容：「ReferenceError: ○○ is not defined」

意味は、「○○という関数が見つかりません」ということです。つまり、関数の名前を間違えたり、関数がまだ書かれていないのに呼び出そうとしたときに起こります。

解決法：

関数の名前を正しく書いているか確認する
関数が呼び出される前に、必ず関数が定義されていることを確認する


// 間違い例
sayHello();

function sayHelo() {  // 名前が間違っている
  console.log("こんにちは！");
}

// 正しい例
function sayHello() {
  console.log("こんにちは！");
}
sayHello();

2. 「関数の呼び出しに () を付け忘れる」

エラーにはならないこともありますが、意図した動きにならず混乱します。関数を呼び出すときは、必ず()を付けてください。

例えば、sayHelloと書くと「関数そのもの」を指し、sayHello()と書くと「関数を実行」します。

解決法：関数を呼ぶときは必ず()をつけることを意識しましょう。


function sayHello() {
  console.log("こんにちは！");
}

sayHello;   // 何も起きない（関数を実行していない）
sayHello(); // こんにちは！ と表示される

3. 「引数の数が合わない」問題

関数には必要な「引数（ひきすう）」という入力がある場合があります。呼ぶときに引数を入れ忘れたり、逆に多く入れすぎると、思った結果にならないことがあります。

解決法：関数の定義に合わせて、必要な数の引数を渡しましょう。


function greet(name) {
  console.log("こんにちは、" + name + "さん！");
}

greet();         // こんにちは、undefinedさん！と表示される（引数がないため）
greet("たろう"); // こんにちは、たろうさん！と正しく表示される

引数が足りないと、undefined（未定義）になることがあります。

4. 「関数の中で変数を使うときのエラー」

関数の中で変数を使うとき、その変数がどこで定義されているかが重要です。変数が見つからないとエラーになります。

解決法：関数の中で使う変数は、関数の中で宣言するか、外側で正しく宣言されているか確認してください。


// エラー例
function showMessage() {
  console.log(message);  // messageが見つからない
}

showMessage();

// 正しい例
const message = "こんにちは！";
function showMessage() {
  console.log(message);  // こんにちは！と表示される
}
showMessage();

5. 「return文がない、または間違っている」

関数の戻り値を使いたいとき、return文が必要です。これがないと、関数はundefinedを返します。

解決法：計算や結果を返したい関数にはreturnを書きましょう。


// 間違い例
function add(a, b) {
  a + b;  // 計算しても返していない
}

console.log(add(2, 3)); // undefinedと表示される

// 正しい例
function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // 5と表示される

6. 「関数名の重複」

同じ名前の関数を複数作ると、最後に書いた関数だけが使われます。これで意図しない動作になることがあります。

解決法：関数の名前はユニーク（重複しない）ようにしましょう。


// 間違い例
function greet() {
  console.log("こんにちは！");
}
function greet() {
  console.log("やあ！");
}

greet(); // やあ！ と表示される（最初のgreetは無視される）

7. 「関数のスコープ（範囲）問題」

関数内で定義した変数は、その関数の外からは見えません。これを「スコープ」と呼びます。外から見えない変数にアクセスしようとするとエラーになります。

解決法：関数の外で使いたい変数は、関数の外で宣言しましょう。


function test() {
  const secret = "秘密の言葉";
}
console.log(secret); // ReferenceError: secret is not defined

この場合、secretはtest関数の中だけで使える変数なので、外からは見えません。

8. 関数のエラーを防ぐために気をつけるポイント

関数名や変数名は正確に書く
関数を呼ぶときは()を忘れない
引数の数を合わす
関数の中で使う変数はスコープを意識する
必要ならreturn文を忘れずに書く
関数名は重複しないようにする

これらのポイントを押さえると、関数でのエラーがグッと減ります。

9. エラーを見つけたらどうする？

エラーが出たときは、まずエラーメッセージをよく読みましょう。エラーには何が問題かヒントが書かれています。インターネットでエラーメッセージを検索すると、同じ問題を経験した人の解決方法が見つかることも多いです。

また、コードを少しずつコメントアウトして動く部分を確認したり、小さい関数単位で動作を確認するのも効果的です。

JavaScriptの関数でよくあるエラーとその解決法まとめ