はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptの学習を始めたばかりの初学者の方、あるいはアロー関数の利用に慣れてきたものの、時々原因不明の構文エラーに遭遇する開発者の方を対象としています。特に、コールバック関数としてアロー関数を記述する際に陥りやすい、セミコロンにまつわる意外な落とし穴に焦点を当てます。

この記事を読むことで、JavaScriptのアロー関数におけるセミコロンの扱いの間違いがなぜエラーを引き起こすのか、そのメカニズムを深く理解できます。また、具体的なエラーの再現方法から、その原因を特定し、将来的に同様のエラーを未然に防ぐための効果的な解決策（ESLintなどの静的解析ツールの活用を含む）を身につけることができるでしょう。筆者自身も遭遇した経験があるため、その体験談を交えながら、皆さんが不必要なデバッグ時間を費やすことなく、よりスムーズな開発を進められるようサポートします。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 * JavaScriptの基本的な構文（変数宣言、関数定義など） * コールバック関数の概念 * アロー関数の基本的な使い方（() => {} や () => expression の違い）

アロー関数の基本と落とし穴の背景

JavaScript ES6（ECMAScript 2015）で導入されたアロー関数は、その簡潔な記述とthisの束縛に関する挙動の明確さから、現代のJavaScript開発において広く利用されています。特に、Array.prototype.map()やsetTimeout()などの高階関数に渡すコールバック関数として非常に便利です。

アロー関数には主に2つの記述形式があります。

  1. ブロック本体 (Block body): 複数のステートメントを実行する場合や、明示的にreturnキーワードで値を返す場合に使用します。 javascript const add = (a, b) => { const sum = a + b; return sum; }; この形式では、通常の関数ブロックと同様に、各ステートメントの終わりにセミコロンを記述します。

  2. 式本体 (Expression body): 単一の式を評価し、その結果を暗黙的に返す場合に用います。returnキーワードは不要です。 javascript const multiply = (a, b) => a * b; この形式は非常に簡潔であり、セミコロンは不要です。JavaScriptの文法上、アロー関数の式本体は「式」であり、ステートメントの終端を示すセミコロンは必要ありません。

問題が発生するのは、この「式本体」のアロー関数の中に、うっかりセミコロンを記述してしまうケースです。特に、コードエディタの自動補完や、既存のコードからコピペする際に、意図せずセミコロンが紛れ込んでしまうことがあります。このセミコロンが、JavaScriptのパーサーにとって予期しないトークンとなり、構文エラーを引き起こすのです。JavaScriptには自動セミコロン挿入（ASI: Automatic Semicolon Insertion）という仕組みがありますが、これは特定の状況でセミコロンを自動的に挿入する機能であり、今回のケースのように明示的に不適切な位置にセミコロンが書かれた場合には、エラーとして認識されます。

再現！コールバック関数におけるアロー関数とセミコロンのエラー

ここからが本記事のメインパートです。実際にどのような状況でエラーが発生し、どのようなエラーメッセージが表示されるのかを具体的に見ていきましょう。

問題のコードを再現する

まず、問題となる状況を再現してみます。ここでは、簡単な配列のmapメソッドと、自作のコールバック関数を呼び出す関数を例に挙げます。

例1：Array.prototype.mapでの誤用

Javascript

// 配列の各要素を2倍にする処理
const numbers = [1, 2, 3];

// 誤った例：アロー関数の式本体にセミコロンが混入
const doubledNumbers = numbers.map(num => num * 2;); // <= ここに注目！
console.log(doubledNumbers);

このコードを実行すると、次のようなエラーが表示されるでしょう。

SyntaxError: Unexpected token ';'
    at Object.<anonymous> (/path/to/your/file.js:5:37)

例2：カスタムのコールバック関数呼び出しでの誤用

コールバック関数を受け取って実行するシンプルな関数を定義します。

Javascript

const executeCallback = (callback) => {
  console.log("コールバックを実行します...");
  callback();
  console.log("コールバックの実行が完了しました。");
};

// 誤った例：コールバックとして渡すアロー関数の式本体にセミコロンが混入
executeCallback(() => console.log("Hello from callback!");); // <= ここに注目！

このコードを実行した場合も、同様にSyntaxErrorが発生します。

SyntaxError: Unexpected token ';'
    at Object.<anonymous> (/path/to/your/file.js:8:51)

これらのエラーは、Node.js環境やブラウザの開発者ツール（コンソール）で確認できます。

エラーの原因とJavaScriptの挙動

表示されたエラーメッセージ「SyntaxError: Unexpected token ';'」は、「予期しないトークン ;」という意味です。これは、JavaScriptのパーサーがその位置にセミコロンがあることを期待しておらず、構文的に間違っていると判断したことを示します。

なぜこのようなエラーが発生するのでしょうか？

アロー関数の式本体（num => num * 2 や () => console.log("Hello from callback!") の部分）は、単一の「式」として評価されることを期待しています。しかし、その式の終わりにセミコロンを置いてしまうと、JavaScriptのパーサーはそれを「式の一部」ではなく、「ステートメントの区切り」として解釈しようとします。

num => num * 2; のように記述された場合、パーサーはアロー関数の本体が num * 2 であると認識した後に、num * 2 の直後に続く ; を見つけます。アロー関数の式本体は、その直後にステートメントの区切り（セミコロン）を持つことを許容していません。これは、例えば const x = 10;; のように、余分なセミコロンが記述された場合のSyntaxErrorとは少し異なります。後者は空のステートメントとして解釈され、多くの場合はエラーになりません。

今回のケースは、アロー関数の「式が評価されるべき位置」に、不適切な形でセミコロンが混入してしまったため、全体としてアロー関数の構文として不正だと判断されるのです。つまり、num => (num * 2;) のように、アロー関数の本体が「式」ではなく「ステートメント」になってしまっていると解釈され、構文エラーとなるわけです。

特に、コールバック関数としてアロー関数を渡す際、そのアロー関数全体が、引数として渡される「式」である必要があります。その「式」の内部で不正なセミコロンが存在することで、引数としての式が期待される構文を満たさなくなるため、SyntaxErrorが発生するのです。

ハマった点やエラー解決の難しさ

このエラーは、一見すると非常に単純なタイプミスのように思えますが、初学者にとってはデバッグが難しい場合があります。

  1. エラーメッセージの解釈の難しさ: Unexpected token ';' というメッセージだけでは、「なぜそのセミコロンが予期しないのか」がすぐに理解できないことがあります。「セミコロンはステートメントの終わりだよね？」という認識から、「なぜここにセミコロンがあるとダメなの？」と混乱するかもしれません。
  2. 見落としやすい: 一行で記述されたアロー関数では、末尾のセミコロンが小さく、視覚的に見落としがちです。特に、コードのレビュー中に見つけるのはさらに困難な場合があります。
  3. 自動セミコロン挿入（ASI）との混同: JavaScriptには自動セミコロン挿入という機能があるため、「セミコロンがなくても動く場合がある」という知識と、「セミコロンがあることでエラーになる場合がある」という現象が矛盾しているように感じ、理解を妨げることがあります。

このようなエラーは、多くの時間を無駄にしてしまう可能性を秘めています。

解決策

幸いなことに、このエラーの解決策は非常にシンプルです。

1. セミコロンの除去（式本体の場合）

アロー関数が単一の式を返す形式である場合、その式本体の最後にセミコロンは不要です。単にセミコロンを削除するだけで、エラーは解消されます。

修正後のコード例1：Array.prototype.map

Javascript

const numbers = [1, 2, 3];
// 正しい例：セミコロンを削除
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // 出力: [2, 4, 6]

修正後のコード例2：カスタムコールバック関数

Javascript

const executeCallback = (callback) => {
  console.log("コールバックを実行します...");
  callback();
  console.log("コールバックの実行が完了しました。");
};

// 正しい例：セミコロンを削除
executeCallback(() => console.log("Hello from callback!")); // 出力: "Hello from callback!"

2. ブロック本体への変更（複数の処理や明示的なreturnが必要な場合）

もしアロー関数内で複数の処理を行いたい場合や、明示的にreturnキーワードを使いたい場合は、アロー関数をブロック本体の形式で記述します。この場合、ブロック内の各ステートメントには通常のJavaScriptのルールに従ってセミコロンを付けます。

Javascript

const numbers = [1, 2, 3];

// ブロック本体の例
const processedNumbers = numbers.map(num => {
  console.log(`Processing: ${num}`);
  return num * 2; // ここではreturnが必要
});
console.log(processedNumbers);

3. ESLintなどのリンターの活用

最も効果的な予防策は、ESLintのような静的解析ツールを開発環境に導入し、適切に設定することです。ESLintは、コードを実行する前に構文エラーやスタイル違反を検出してくれるため、このような単純なミスを早期に発見し、修正を促してくれます。

例えば、ESLintのno-unexpected-tokenルールや、JavaScriptの標準的な推奨設定を利用することで、今回の「アロー関数の式本体にセミコロンがある」という状況を警告またはエラーとして検出させることができます。多くのIDE（VS Codeなど）はESLintとの連携機能が充実しており、コードを記述中にリアルタイムで問題点を教えてくれます。

ESLintの利点: * 早期発見: コードを実行する前に問題を発見できるため、デバッグ時間を大幅に削減できます。 * コード品質の向上: 構文的なエラーだけでなく、コーディング規約に沿ったコードスタイルを維持するのに役立ちます。 * チーム開発での一貫性: チーム内で同じルールを共有することで、コードベース全体の一貫性を保つことができます。

ESLintに加えて、Prettierのようなコードフォーマッターを導入することも有効です。Prettierはコードを自動的に整形し、スタイルの一貫性を保ちます。これにより、余分なセミコロンが削除されたり、適切な位置に整形されたりすることが期待でき、人為的なミスをさらに減らすことができます。

まとめ

本記事では、JavaScriptのコールバック関数でアロー関数を使う際に発生しやすい、セミコロンによるSyntaxError: Unexpected token ';'という意外な落とし穴とその解決策を解説しました。

  • 要点1: アロー関数の「式本体」形式（例: num => num * 2）では、最後にセミコロンを記述する必要はありません。このセミコロンが、JavaScriptパーサーにとって予期しないトークンとなり、構文エラーを引き起こします。
  • 要点2: もしアロー関数内で複数の処理を行う場合や、明示的にreturnキーワードを使いたい場合は、「ブロック本体」形式（例: num => { return num * 2; }）を使用します。この場合、ブロック内の各ステートメントには通常のJavaScriptのルールに従ってセミコロンを付けます。
  • 要点3: 最も効果的な対策は、ESLintのような静的解析ツールを導入し、開発プロセスに組み込むことです。これにより、このような構文エラーをコード実行前に自動的に検出し、修正を促してくれます。

この記事を通して、皆さんがアロー関数に関するよくある落とし穴を回避し、JavaScriptコードの品質と開発効率を向上させる一助となれば幸いです。

今後は、ESLintやPrettierの具体的な設定方法や、より複雑なJavaScriptのエラーデバッグテクニックについても記事にする予定です。

参考資料