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

生徒

「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の関数における代表的なエラーとその対策について詳しく解説してきました。プログラミングの学習を始めたばかりの頃は、どうしても画面に赤文字で表示されるエラーメッセージに身構えてしまいがちですが、実はエラーは「プログラムのどこを直せばいいか」を教えてくれる非常に親切な道標なのです。

関数の記述において特に注意すべき点は、基本的な文法のルールを徹底することです。例えば、関数の定義（function）と呼び出し（実行）の違いを明確に理解することや、引数と戻り値のデータの流れを正しく把握することが挙げられます。また、変数の有効範囲である「スコープ」についても、最初は複雑に感じるかもしれませんが、JavaScriptのコードを整理し、予期せぬ不具合を防ぐために欠かせない概念です。

関数の基本構造をおさらい

もう一度、エラーの出にくい関数の書き方を確認しておきましょう。以下のサンプルコードは、引数を受け取り、処理を行い、結果を返すという標準的な流れをまとめたものです。


// 数値を2倍にして返すシンプルな関数
function doubleNumber(value) {
  // 引数が数値かどうかチェックするガード句を入れるとより安全
  if (typeof value !== 'number') {
    return "数値を入れてください";
  }
  return value * 2;
}

// 関数の実行と結果の出力
const result = doubleNumber(10);
console.log("計算結果は: " + result);

より実践的なエラー回避テクニック

実際の開発現場では、関数の引数に「デフォルト値」を設定することで、引数の渡し忘れによるエラー（undefinedによる計算ミスなど）を防ぐ手法がよく使われます。


// 引数nameにデフォルト値「ゲスト」を設定
function welcome(name = "ゲスト") {
  console.log("ようこそ、" + name + "様！");
}

welcome();           // 引数を渡さなくても「ゲスト」が使われる
welcome("田中");     // 「田中」が使われる

このように、JavaScriptが提供している便利な機能を活用することで、エラーの発生率を大幅に下げることができます。コードを書き終えたら、一度立ち止まって「この関数に何も渡さなかったらどうなるか？」「スペルミスはないか？」とセルフチェックする習慣をつけることが、上達への近道です。

もしエラーが出たとしても、それは新しい知識を得るチャンスです。コンソールに表示されたエラーの内容を読み解き、一つずつ問題を解決していく過程こそが、エンジニアとしての実力を養ってくれます。今回学んだポイントを意識して、どんどんコードを書いていきましょう。

先生と生徒の振り返り会話

生徒

「先生、ありがとうございました！こうやってまとめてみると、エラーって自分が思っていたよりもパターンが決まっているんですね。特に関数名のスペルミスとか、カッコの付け忘れとか、意外と初歩的なところでつまづいていた気がします。」

先生

「その通りです。実はプロのプログラマーでも、ケアレスミスによるエラーは日常茶飯事なんですよ。大切なのは『エラーを出さないこと』ではなく、『出たエラーをどう読み解いて、どうやって素早く直すか』というスキルなんです。今回の記事で紹介したチェックリストは頭に入りましたか？」

生徒

「はい！まずは『is not defined』が出たら名前を確認すること、それから計算結果がおかしかったら『return』を書き忘れていないかチェックするようにします。あと、スコープの話がすごく勉強になりました。関数の中で作った変数は、外からは魔法みたいに消えて見えなくなるんですね。」

先生

「いい例えですね！その『魔法の壁』があるおかげで、大きなプログラムを作るときに、他の場所にある変数と名前がぶつからなくて済むんです。これをカプセル化といって、綺麗なコードを書くための基本になります。試しに、複数の関数を使ってデータをやり取りするコードを書いてみましょうか？」

生徒

「ぜひやってみたいです！例えば、消費税を計算する関数を作って、その結果を別の関数で表示する、みたいな感じでしょうか？」

先生

「素晴らしいアイデアですね！では、その処理をJavaScriptで表現してみましょう。HTMLの構造も意識しながら、実際に動くコードを書いてみてください。」


<div id="output"></div>


// 1. 税込み価格を計算する関数
function calculateTax(price) {
  const taxRate = 0.1;
  return price + (price * taxRate);
}

// 2. 結果を画面に表示する関数
function displayResult(amount) {
  const outputDiv = document.getElementById('output');
  outputDiv.innerText = "合計金額（税込）は " + amount + " 円です。";
}

// 3. 二つの関数を組み合わせて使う
const totalPrice = calculateTax(1000);
displayResult(totalPrice);

生徒

「なるほど！calculateTaxの戻り値を、そのままdisplayResultの引数に渡しているんですね。これならそれぞれの関数の役割がはっきりしていて、もしエラーが出てもどこに原因があるかすぐに見つけられそうです。」

先生

「その感覚が持てれば、もう初心者卒業も近いですよ。関数を小さく分けて作ることは、エラー対策の最大の武器になります。もしdisplayResultでエラーが出たら、HTML側のIDが間違っているか、引数の中身が空っぽ（undefined）なのか、と推測できますよね。」

生徒

「確かに！今までエラーが出ると『どこが悪いんだー！』ってパニックになっていましたけど、今は『まずはここを確認してみよう』っていう冷静な気持ちになれそうです。エラーメッセージが、なんだかデバッグのヒントをくれるメッセージカードみたいに思えてきました。」

先生

「いい心構えですね。JavaScriptには他にも『非同期処理』や『コールバック関数』など、もう少し複雑な関数のエラーもありますが、まずは今日の基本をしっかり定着させましょう。何度もコードを書いて、自分なりの『エラー解決の勝ちパターン』を作っていってくださいね。応援していますよ！」

生徒

「ありがとうございます！これからも楽しみながらプログラミングを続けていきます！」