【ITニュース解説】Day 3 of Complete JavaScript in 17 days | Visual Series📚✨
2025年09月18日に「Dev.to」が公開したITニュース「Day 3 of Complete JavaScript in 17 days | Visual Series📚✨」について初心者にもわかりやすく解説しています。
ITニュース概要
JavaScript学習シリーズ3日目では、算術・比較・論理など、様々な演算子の種類と使い方を網羅的に解説した。nullとundefinedの比較など、プログラミングにおける演算子の具体的な挙動や注意点について詳しく学べる。
ITニュース解説
JavaScriptにおける演算子は、プログラムの中で値や変数を操作し、さまざまな処理を実行するために不可欠な要素である。数値を計算したり、条件を比較したり、変数に値を代入したりと、あらゆるプログラミングの基礎となる。今回の解説では、JavaScriptに存在する主要な演算子の種類とその具体的な働きについて、システムエンジニアを目指す初心者が理解しやすいように掘り下げていく。
まず、最も基本的な演算子として「算術演算子」がある。これは、数学の計算を行うためのもので、「+」(加算)、「-」(減算)、「*」(乗算)、「/」(除算)といったおなじみのものが含まれる。さらに、「%」(剰余)演算子があり、これは割り算の余りを求める。例えば、10 % 3の結果は1となる。また、「**」(累乗)演算子も存在し、2 ** 3は2を3回掛ける、つまり2 * 2 * 2と同じで、結果は8となる。これらの演算子を使うことで、プログラム内で複雑な数値計算を簡単に行うことができる。
次に「代入演算子」を見てみよう。これは変数に値を割り当てるために使うもので、最も基本的なものは「=」(代入)である。例えば、let x = 10;という記述は、変数xに数値10を代入することを意味する。これに加えて、他の演算子と組み合わせた便利な形式もある。例えば、「+=」(加算代入)は、変数の現在の値に別の値を加えてその結果を変数に再代入する。x += 5;はx = x + 5;と同じ意味で、xが10であれば15になる。同様に、「-=」(減算代入)、「*=」(乗算代入)、「/=」(除算代入)、「%=」(剰余代入)、「**=」(累乗代入)といったものも存在する。これらはコードを簡潔に書く上で役立つ。
「比較演算子」は、二つの値の間にどのような関係があるかを判断するために使われる。結果はtrue(真)かfalse(偽)のいずれかとなる。代表的なものには「==」(抽象等価)と「===」(厳密等価)がある。この二つはよく混同されるが、重要な違いがある。「==」は、比較する値の型が異なる場合に、JavaScriptが自動的に型を変換(型強制)してから比較を行う。例えば、"5" == 5は文字列"5"と数値5を比較するが、JavaScriptは"5"を数値5に変換してから比較するため、結果はtrueとなる。これに対し、「===」は、値だけでなく型も厳密に比較する。型が異なれば、たとえ値が同じように見えてもfalseとなる。したがって、"5" === 5の結果はfalseとなる。この厳密等価演算子を使う方が、意図しない型変換によるバグを防ぐため、一般的には推奨される。他にも「!=」(抽象不等価)と「!==」(厳密不等価)があり、これらはそれぞれ「==」と「===」の逆の結果を返す。「>」(より大きい)、「<」(より小さい)、「>=」(以上)、「<=」(以下)も同様に、数値の大小関係を比較するために用いられる。
「論理演算子」は、複数の条件を組み合わせたり、条件を反転させたりするために使用される。「&&」(論理AND)は、両方の条件がtrueの場合にのみtrueを返す。「||」(論理OR)は、どちらか一方でもtrueであればtrueを返す。「!」(論理NOT)は、条件の結果を反転させる。trueであればfalseに、falseであればtrueにする。これらの演算子を使うことで、プログラムの処理の流れを複雑な条件に基づいて制御できるようになる。
「三項演算子」は、シンプルな条件分岐を一行で記述できる便利な演算子である。構文は条件 ? 真の場合の式 : 偽の場合の式となる。例えば、let result = (age >= 18) ? "成人" : "未成年";というコードは、ageが18以上であればresultに"成人"を代入し、そうでなければ"未成年"を代入する。if-else文の簡略版と考えると理解しやすい。
「ビット演算子」は、数値を2進数のビットパターンとして扱い、個々のビットを操作する。&(ビットAND)、|(ビットOR)、^(ビットXOR)、~(ビットNOT)、<<(左シフト)、>>(符号付き右シフト)、>>>(ゼロ埋め右シフト)といった種類がある。これは主に低レベルな操作や特定のアルゴリズムで使われることが多く、通常のアプリケーション開発ではあまり頻繁には使われないかもしれないが、存在を知っておくことは重要である。
最後に、比較的新しい「Null合体演算子」(??)がある。これは、値がnullまたはundefinedの場合にのみ、デフォルトの値を適用するために使用される。例えば、let userName = preferredName ?? "ゲスト";というコードでは、preferredNameがnullでもundefinedでもない場合はその値がuserNameに代入され、もしnullかundefinedであれば"ゲスト"が代入される。これは||(論理OR)演算子と似ているが、||がfalseや0、空文字列("")といった"falsy"な値に対してもデフォルト値を適用してしまうのに対し、??はnullとundefinedのみに反応するため、より厳密なデフォルト値の設定が可能となる。
演算子の理解を深める上で、nullとundefinedという特別な値の比較に関する挙動は、特に初心者にとって戸惑いやすい点であり、しばしば面接の質問でも取り上げられる。
まず、null == undefinedという比較はtrueを返す。これは「==」(抽象等価)が型変換を行うため、JavaScriptの内部でこれら二つの値が似たものとして扱われるからである。しかし、null === undefinedという比較はfalseを返す。これは「===」(厳密等価)が型まで含めて比較するため、nullとundefinedは異なる型を持つため、同じとはみなされないのである。
さらに興味深いのは、nullを数値と比較した場合の挙動だ。null >= 0はtrueを返す一方で、null > 0はfalseを返す。これは、比較演算子の評価過程でnullが数値に変換される際に、0として扱われるためである。nullは0と等しいかそれ以上と判断されるが、0より大きいわけではないため、このような結果になる。
一方、undefinedを数値と比較すると、異なる結果となる。undefinedが数値と比較されると、JavaScriptはundefinedを数値に変換しようとするが、有効な数値に変換できないため「NaN」(Not-a-Number)という特殊な値になる。NaNは自分自身を含め、他のいかなる値とも比較しても常にfalseとなる性質を持つため、undefined > 0やundefined == 0といった比較はすべてfalseとなる。このようなnullとundefinedの挙動の違いは、JavaScriptの型変換の仕組みを理解する上で非常に重要なポイントであり、予期せぬバグを防ぐためにも正確に把握しておく必要がある。
このように、JavaScriptの演算子は多岐にわたり、それぞれが特定の目的を持っている。これらを適切に使いこなすことで、より効率的で堅牢なプログラムを構築できるようになる。算術計算から条件分岐、高度なビット操作、そしてnullやundefinedの厳密な扱いまで、それぞれの演算子の特性を理解することは、システムエンジニアとしてJavaScriptを扱う上で避けては通れない基礎知識である。これらの演算子をマスターすることが、複雑なロジックを正確に表現し、意図した通りの処理を実現するための第一歩となるだろう。