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

この記事は、Node.jsやJavaScriptを使った開発で、頻繁に遭遇する「二項演算子が予期されます」（Inappropriate or unexpected operator）というエラーメッセージに悩んでいるプログラマーの方々を対象としています。特に、JavaScriptの構文に慣れていない方や、複雑な条件分岐・演算を記述する際にこのエラーに直面しやすいでしょう。

この記事を読むことで、以下のことがわかるようになります。

  • 「二項演算子が予期されます」エラーが発生する主な原因。
  • 具体的なコード例を元にした、エラーの特定方法。
  • エラーを回避するための正しいJavaScriptの構文と書き方。
  • デバッグに役立つ考え方とテクニック。

このエラーは、一見些細な構文ミスから発生することが多いですが、解決できれば開発効率が格段に向上します。ぜひ最後までお読みいただき、スムーズな開発にお役立てください。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

  • JavaScriptの基本的な文法（変数宣言、関数、if文など）
  • Node.jsの基本的な実行方法

「二項演算子が予期されます」エラーの正体とは？

このエラーメッセージ「二項演算子が予期されます」は、JavaScriptのパーサー（コードを解釈するプログラム）が、本来演算子（+、-、*、/、==、===、&&、||など）が来るべき場所で、それ以外の予期しないトークン（単語や記号）を見つけたことを示しています。

具体的には、以下のような状況が考えられます。

  • 演算子の誤用: 演算子を2つ連続して記述してしまったり、演算子の前後に必要なオペランド（演算対象）が欠けている場合。
  • 括弧の誤用: 演算子の優先順位を操作するための括弧が、不適切に使用されている場合。
  • キーワードや変数名の誤用: 演算子として解釈されるべきでないキーワードや変数名が、演算子のような文脈で使われている場合。
  • セミコロンの欠落や誤用: 文の区切りを示すセミコロン（;）が不適切に配置されていることで、パーサーがコードの区切りを誤認識し、次の行のコードを演算子と勘違いしてしまう。
  • 条件式での誤り: if文や三項演算子（? :）などの条件式において、比較演算子や論理演算子の使い方が間違っている場合。

このエラーは、エラーが発生した行やその周辺に原因があることが多いですが、時には数行前のコードの構文ミスが原因で、後続のコードでこのエラーとして現れることもあります。

具体的なエラーパターンとその解決策

ここでは、「二項演算子が予期されます」エラーが発生しやすい具体的なコードパターンと、それぞれの解決策を詳細に解説します。

パターン1：比較演算子や論理演算子の誤用

条件分岐などで、比較演算子（==, ===, >, <, >=, <=) や論理演算子（&&, ||, !) を間違った方法で使用した場合に発生しやすいエラーです。

例1：代入演算子 = を比較演算子 == と間違える

Javascript

// エラーになるコード
let count = 0;
if (count = 5) { // ここを == にすべき
  console.log("count is 5");
}

解説: if文の中では、条件が真（true）か偽（false）かを判定するために比較演算子を使用する必要があります。しかし、ここでは代入演算子 = が使用されています。count = 5 という式は count に 5 を代入し、その代入された値 5 が返されます。JavaScriptでは 0 以外の数値は真と評価されるため、このコードは意図せず常に true となり、「count is 5」と出力されます。

しかし、JavaScriptの厳密な構文解析や、特定の開発環境・リンターの設定によっては、この = が「二項演算子が予期されます」というエラーを引き起こすことがあります。特に、二項演算子として = の前に何か、後に何かを期待しているのに、それが不完全な場合などに発生する可能性があります。

解決策: 代入演算子 = を比較演算子 == または === に修正します。

Javascript

// 解決策
let count = 0;
if (count === 5) { // === で厳密な比較を行う
  console.log("count is 5");
}

例2：論理演算子の前後にオペランドがない

Javascript

// エラーになるコード
if (userLoggedIn && ) { // && の後にオペランドがない
  // ...
}

解説: 論理AND演算子 && は、その前後の両方に評価対象（オペランド）が必要です。この例では、&& の後にオペランドがありません。パーサーは && の後に演算子、あるいは式を期待しますが、何も見つからないためエラーとなります。

解決策: && の後に適切な条件式を追加します。

Javascript

// 解決策
let userLoggedIn = true;
let isAdmin = true;

if (userLoggedIn && isAdmin) {
  console.log("User is logged in and is an admin.");
}

例3：三項演算子の誤用

Javascript

// エラーになるコード
let result = (score > 50) ? "Pass" : ; // : の後にオペランドがない

解説: 三項演算子 ? : は、条件式、真の場合の値、偽の場合の値の3つの要素で構成されます。この例では、偽の場合の値が欠落しています。

解決策: : の後に、条件が偽だった場合に返される値を指定します。

Javascript

// 解決策
let score = 70;
let result = (score > 50) ? "Pass" : "Fail";
console.log(result); // "Pass"

パターン2：演算子の連続使用や誤った位置

演算子を意図せず連続して記述してしまったり、演算子を置くべきでない場所に置いてしまうことで発生します。

例1：加算演算子 + を連続して使用

Javascript

// エラーになるコード
let value = 10;
let result = value + + 5; // + が連続している

解説: このコードは、10 + (+5) という意図で書かれた可能性があります。JavaScriptでは単項プラス演算子（+5のように単独で数値の前に置かれる +）は有効ですが、二項演算子としての + の直後にさらに + が続く場合、パーサーは文脈を正しく解釈できず、「二項演算子が予期されます」と判断することがあります。これは、value + の後に続く + が、新しい二項演算子の開始と見なされ、そのオペランドが期待されるのに、次のトークンが 5 で演算子ではないため、エラーとなるケースです。

解決策: 単項プラス演算子であることを明確にするか、不要であれば削除します。

Javascript

// 解決策1：単項プラスを明示
let value = 10;
let result = value + (+5); // ()で囲むことで単項プラスを明確に
console.log(result); // 15

// 解決策2：不要な単項プラスを削除 (この場合はこちらが一般的)
let value = 10;
let result = value + 5;
console.log(result); // 15

例2：演算子の前にオペランドがない

Javascript

// エラーになるコード
let greeting = "Hello" +; // 演算子の前にオペランドがない

解説: 加算演算子 + は、その両側に演算対象（オペランド）が必要です。この例では + の前に greeting というオペランドがありますが、+ の後に演算対象がありません。パーサーは + を二項演算子として認識し、その右側にオペランドを期待しますが、何も見つからないためエラーとなります。

解決策: + の後に演算対象を追加します。

Javascript

// 解決策
let greeting = "Hello";
let name = "World";
let message = greeting + " " + name;
console.log(message); // "Hello World"

パターン3：JavaScriptのES6以降の構文（アロー関数など）との混同

アロー関数（=>）や分割代入など、比較的新しいJavaScriptの構文を誤って使用した場合にも、このエラーが発生することがあります。

例1：アロー関数で => を演算子と勘違い

Javascript

// エラーになるコード
const add = (a, b) => {
  return a + b;
};

// 以下のコードでエラーが発生する可能性
const result = add(2, 3) > 4 && ; // add(2,3)の結果は5

解説: 上記コードの && の後にオペランドがないことが原因ですが、アロー関数 => 自体は演算子ではありません。しかし、=> がコード中に現れることで、開発者が演算子との区別を曖昧にし、結果として演算子の誤用につながることがあります。

解決策: アロー関数の構文を正しく理解し、演算子の誤用を避けます。上記の例では、&& の後にオペランドがないことが問題なので、それを修正します。

Javascript

// 解決策
const add = (a, b) => {
  return a + b;
};

const result = add(2, 3); // 5
if (result > 4 && result === 5) {
  console.log("Result is greater than 4 and is 5.");
}

パターン4：デバッグ中のコードやコメントアウトのミス

デバッグのために一時的にコードをコメントアウトしたり、コードの一部を削除したりする際に、誤って構文を壊してしまうことがあります。

例1：コメントアウトの不備

Javascript

// エラーになるコード
let x = 10;
// let y = 5;
let z = x +; // コメントアウトのせいで、x + の後ろに本来来るべきオペランドが認識されない

解説: この例では、let y = 5; がコメントアウトされていますが、これは直接「二項演算子が予期されます」エラーの原因にはなりません。しかし、もし // let z = x + y; のように、演算子の後に来るべきオペランド（y）を含む行をコメントアウトした結果、x + の行が中途半端な状態になってしまうと、エラーの原因になり得ます。

より直接的な例としては、以下のようなケースです。

Javascript

// エラーになるコード
let a = 10;
let b = /*
  (エラーになるコードの断片)
  a +
*/ 5;

解説: ブロックコメント /* ... */ の中に、構文的に不正なコード（例：二項演算子の途中）が含まれている場合、コメントの終了 */ が現れるまでの間、パーサーはその不正なコードを解釈しようとします。もしコメントの途中で演算子の構文が不完全だと、パーサーはコメントの終了後も期待される構文の断片を探し続けるため、エラーが発生することがあります。

解決策: コメントアウトする際は、コメントブロック全体が構文的に問題ないことを確認します。特に、コードの途中でブロックコメントを終了させずに、複数行にわたるコメントを不適切に配置しないように注意します。

Javascript

// 解決策：ブロックコメントを正しく閉じる
let a = 10;
let b = /*
  (コメントアウトされたコード)
  a + b; // など
*/ 5; // ブロックコメントの後に正しく値を代入

// または、単純にコメントアウトする行を分ける
let a = 10;
// let y = 5;
let z = a + 5; // y を使わない場合は、このように直接書く

ハマった点やエラー解決のヒント

  • エラーメッセージをよく読む: 「二項演算子が予期されます」というメッセージは、演算子に関連する問題であることを示唆しています。
  • エラーが発生した行とその前後を確認する: ほとんどの場合、エラーの原因はその行、あるいはその直前・直後の行にあります。
  • コードを小さく分割してテストする: 複雑なコードでエラーが発生した場合、コードを小さな単位に分割し、どの部分でエラーが発生するかを特定します。
  • IDEの構文ハイライトとエラー検出機能を活用する: 多くの開発環境（VS Codeなど）は、リアルタイムで構文エラーをハイチライトしてくれます。これを頼りに、怪しい箇所を修正しましょう。
  • リンター（ESLintなど）を導入する: リンターは、コードの品質やスタイルをチェックし、潜在的なバグや構文エラーを検出してくれます。エラーを未然に防ぐのに非常に有効です。

まとめ

本記事では、Node.jsやJavaScript開発で遭遇しやすい「二項演算子が予期されます」エラーについて、その原因と具体的な解決策を解説しました。

  • エラーの根本原因は、JavaScriptのパーサーが、演算子が来るべき場所で予期しないトークンを見つけたこと。
  • 主な発生原因としては、比較演算子・論理演算子の誤用、演算子の連続使用や位置ミス、不適切な括弧の使用、コメントアウトのミスなどが挙げられます。
  • 解決策は、コードの構文を正確に理解し、演算子の前後には必ずオペランドが存在することを確認すること。
  • デバッグのヒントとして、エラーメッセージの読解、コードの分割、IDEやリンターの活用が有効です。

このエラーに遭遇した際に、この記事で紹介したパターンと解決策が、皆様の開発効率向上の一助となれば幸いです。次回は、より高度なJavaScriptのデバッグテクニックについて解説する予定です。

参考資料