読み込み中...

JavaScriptの論理和代入演算子(||=)で条件処理を簡略化する10の方法

JavaScriptの論理和代入演算子(||=) JS
この記事は約13分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●論理和代入演算子(||=)とは？

プログラミングをしていると、条件分岐の処理を書くシーンがよくありますよね。

例えば、変数にデフォルト値を設定したり、nullチェックをしたりする場面です。

でも、そのたびにif文を使っていると、コードが長くなってしまい、可読性が下がってしまうんです。

そんな時に活躍するのが、JavaScriptの論理和代入演算子(||=)です。

この演算子を使えば、条件処理を簡潔に記述できるんですよ。

論理和代入演算子は、左辺の値がfalseの場合に、右辺の値を代入するという動作をします。

例えば、次のようなコードがあるとします。

let x;
if (x === undefined || x === null) {
  x = 10;
}

これは、変数xがundefinedまたはnullの場合に、xに10を代入するという処理ですね。

でも、論理和代入演算子を使えば、もっとスッキリと書けるんです。

let x;
x ||= 10;

たったこれだけ！左辺のxがfalseの場合(undefinedやnullの場合)、右辺の10が代入されます。

すごく簡潔で読みやすいコードになりましたね。

○論理和代入演算子の基本的な使い方

論理和代入演算子(||=)の基本的な使い方を見ていきましょう。

論理和代入演算子は、次のような構文で使用します。

変数 ||= 値;

左辺の変数がtruthyな値(falsyではない値)の場合、代入は行われません。

falsyな値とは、false、0、””(空文字)、null、undefined、NaNのことを指します。

一方、左辺の変数がfalsyな値の場合、右辺の値が代入されます。

○サンプルコード1：デフォルト値の設定

では、実際のコードを見ていきましょう。

よくあるのが、関数の引数にデフォルト値を設定する場面です。

function greet(name) {
  name ||= "Guest";
  console.log(`Hello, ${name}!`);
}

greet("John"); // Hello, John!
greet();      // Hello, Guest!

この例では、greet関数の引数nameにデフォルト値を設定しています。

引数が渡されなかった場合(undefinedの場合)、”Guest”が代入されます。

実行結果を見ると、引数を渡した場合は”Hello, John!”、引数を渡さなかった場合は”Hello, Guest!”と出力されていますね。

論理和代入演算子を使うことで、簡潔にデフォルト値を設定できました。

●条件処理の簡略化

さて、論理和代入演算子の基本的な使い方はわかっていただけたと思います。

実際のプログラミングでは、条件処理を簡略化するために論理和代入演算子がよく使われています。

例えば、変数がnullやundefined、空文字だった場合にデフォルト値を設定したいというシーンは多いですよね。

そんな時、論理和代入演算子を使えば、スッキリと書けちゃうんです。

○サンプルコード2：nullチェック

まずはnullチェックから見ていきましょう。

次のようなコードを考えてみます。

let value = null;
if (value === null) {
  value = 10;
}
console.log(value); // 10

ここでは、valueがnullの場合に10を代入しています。

論理和代入演算子を使えば、もっとシンプルに書けます。

let value = null;
value ||= 10;
console.log(value); // 10

valueがnullの場合、右辺の10が代入されるので、console.logでは10が出力されます。

条件分岐が1行で書けるので、とても読みやすいコードになりましたね。

○サンプルコード3：空文字チェック

続いて、空文字チェックを見てみましょう。空文字(“”)もfalsyな値の1つです。

let message = "";
if (message === "") {
  message = "Hello, world!";
}
console.log(message); // Hello, world!

この例では、messageが空文字の場合に”Hello, world!”を代入しています。

論理和代入演算子を使うと、以下のように書けます。

let message = "";
message ||= "Hello, world!";
console.log(message); // Hello, world!

messageが空文字の場合、右辺の”Hello, world!”が代入されます。

とてもスッキリと書けて、可読性が高いコードになりました。

○サンプルコード4：undefined チェック

undefinedチェックにも論理和代入演算子が使えます。

undefinedもfalsyな値ですからね。

let count;
if (count === undefined) {
  count = 0;
}
console.log(count); // 0

この例では、countがundefinedの場合に0を代入しています。

論理和代入演算子を使えば、次のようになります。

let count;
count ||= 0;
console.log(count); // 0

countがundefinedの場合、右辺の0が代入されます。

シンプルで読みやすいコードになりましたね。

○サンプルコード5：falsyな値のチェック

論理和代入演算子は、falsyな値全般に対して使えます。

falsyな値には、false、0、””、null、undefined、NaNが含まれます。

let value = false;
value ||= true;
console.log(value); // true

let num = 0;
num ||= 10;
console.log(num); // 10

let str = "";
str ||= "default";
console.log(str); // default

このように、左辺がfalsyな値の場合、右辺の値が代入されます。

falsyな値のチェックが1行で書けるので、コードがスッキリしますね。

●よくあるエラーと対処法

論理和代入演算子を使っていると、時々エラーに遭遇することがあります。

特に初心者の方は、エラーメッセージを見てもどこが間違っているのかわからず、困ってしまうことが多いですよね。

そこで、よくあるエラーとその対処法を見ていきましょう。

エラーが出た時の対処法を知っておくと、スムーズにデバッグができて、コーディングがはかどります。

○ReferenceError: x is not defined

まずは、”ReferenceError: x is not defined”というエラーです。

これは、変数xが定義されていない時に発生します。

x ||= 10;
console.log(x);

このコードを実行すると、”ReferenceError: x is not defined”というエラーが出ます。

変数xを定義していないのに、いきなり論理和代入演算子を使っているからですね。

エラーを解決するには、変数xを事前に定義しておく必要があります。

let x;
x ||= 10;
console.log(x); // 10

このように、変数xをlet x;のように定義しておけば、エラーは発生しません。

変数の定義を忘れずに行うことが大切ですね。

○TypeError: Cannot read properties of undefined

次は、”TypeError: Cannot read properties of undefined”というエラーを見てみましょう。

これは、undefinedのプロパティを読み取ろうとした時に発生します。

let obj;
obj.value ||= 10;
console.log(obj.value);

このコードでは、objがundefinedの状態で、obj.valueにアクセスしようとしています。

そのため、”TypeError: Cannot read properties of undefined”というエラーが出ます。

エラーを解決するには、objを事前にオブジェクトとして初期化しておく必要があります。

let obj = {};
obj.value ||= 10;
console.log(obj.value); // 10

このように、let obj = {};のようにオブジェクトを初期化しておけば、エラーは発生しません。

undefinedのプロパティにアクセスしないように注意しましょう。

○論理和代入演算子の優先順位に注意

最後に、論理和代入演算子の優先順位について注意点を説明します。

論理和代入演算子は、他の演算子と組み合わせて使う時に、優先順位に気をつける必要があります。

let x = 5;
x + 10 ||= 20;
console.log(x); // 5

このコードでは、x + 10 ||= 20という式を使っています。

しかし、実行結果はxが5のままです。なぜでしょうか？

実は、論理和代入演算子は、加算演算子(+)よりも優先順位が低いのです。

そのため、x + 10が先に評価されて15になり、その後に15 ||= 20が評価されます。

15はtruthyな値なので、代入は行われません。

正しく動作させるためには、括弧を使って優先順位を明示する必要があります。

let x = 5;
(x + 10) ||= 20;
console.log(x); // 20

このように、(x + 10)のように括弧で囲めば、意図した通りに動作します。

論理和代入演算子を使う時は、優先順位に注意して、必要に応じて括弧を使いましょう。

●論理和代入演算子の応用例

さて、ここまで論理和代入演算子の基本的な使い方やよくあるエラーについて見てきましたが、実際のプロジェクトではもっと応用的な使い方ができるんですよ。

論理和代入演算子を使いこなすことで、コードの可読性や保守性が格段に上がります。

では、具体的にどんな応用例があるのか、サンプルコードを交えながら見ていきましょう。

○サンプルコード6：オブジェクトのプロパティ設定

オブジェクトのプロパティを設定する時にも、論理和代入演算子が使えます。

let config = { width: 800, height: 600 };
config.width ||= 1024;
config.height ||= 768;
console.log(config); // { width: 800, height: 600 }

この例では、configオブジェクトのwidthとheightプロパティに対して、論理和代入演算子を使っています。

widthとheightには初期値が設定されているので、論理和代入演算子の右辺の値は代入されません。

つまり、configオブジェクトは{ width: 800, height: 600 }のままです。

一方、初期値が設定されていないプロパティに対しては、論理和代入演算子を使ってデフォルト値を設定することができます。

let config = { width: 800 };
config.width ||= 1024;
config.height ||= 768;
console.log(config); // { width: 800, height: 768 }

この例では、heightプロパティには初期値が設定されていないので、論理和代入演算子の右辺の値である768が代入されます。

このように、オブジェクトのプロパティ設定にも論理和代入演算子が活用できるんです。

○サンプルコード7：関数の引数のデフォルト値

関数の引数にデフォルト値を設定する時にも、論理和代入演算子が使えます。

function greet(name) {
  name ||= "Guest";
  console.log(`Hello, ${name}!`);
}

greet("John"); // Hello, John!
greet();      // Hello, Guest!

この例では、greet関数の引数nameに対して、論理和代入演算子を使ってデフォルト値を設定しています。

引数が渡された場合は、論理和代入演算子の左辺の値がtruthyなので、右辺の値は代入されません。

一方、引数が渡されなかった場合は、左辺の値がfalsyなので、右辺の値である”Guest”が代入されます。

このように、関数の引数のデフォルト値設定にも論理和代入演算子が便利に使えますね。

○サンプルコード8：配列の要素の存在チェック

配列の要素の存在チェックにも、論理和代入演算子が使えます。

let colors = ["red", "green", "blue"];
colors[3] ||= "yellow";
console.log(colors); // ["red", "green", "blue", "yellow"]

この例では、colors配列の4番目の要素(インデックス3)に対して、論理和代入演算子を使っています。

colors[3]は未定義なので、falsyな値です。そのため、論理和代入演算子の右辺の値である”yellow”が代入されます。

このように、配列の要素の存在チェックと初期値の設定を同時に行うことができるんですよ。

○サンプルコード9：コンフィグオブジェクトのマージ

コンフィグオブジェクトをマージする時にも、論理和代入演算子が使えます。

let defaultConfig = { width: 800, height: 600, color: "white" };
let userConfig = { width: 1024, fontSize: 16 };

let finalConfig = {};
for (let key in defaultConfig) {
  finalConfig[key] ||= userConfig[key];
}
console.log(finalConfig); // { width: 1024, height: 600, color: "white", fontSize: 16 }

この例では、defaultConfigオブジェクトとuserConfigオブジェクトをマージして、finalConfigオブジェクトを作っています。

for…in文を使って、defaultConfigオブジェクトのプロパティをループ処理しています。

そして、論理和代入演算子を使って、userConfigオブジェクトの同名のプロパティがあればそれを代入し、なければdefaultConfigの値を使うようにしています。

このように、コンフィグオブジェクトのマージにも論理和代入演算子が活用できます。

○サンプルコード10：ログ出力の制御

最後に、ログ出力の制御に論理和代入演算子を使う例を見てみましょう。

let debug = true;
// ...
debug &&= console.log("デバッグログ");

この例では、debugフラグがtrueの時だけ、console.logでデバッグログを出力するようにしています。

論理和代入演算子の左辺のdebugがtrueの時だけ、右辺のconsole.log(“デバッグログ”)が実行されます。

これにより、デバッグログの出力を簡単に制御することができます。

まとめ

この記事では、JavaScriptの論理和代入演算子(||=)について、基本的な使い方から応用例まで幅広く解説してきました。

サンプルコードを交えながら、初心者にもわかりやすく、ストーリー性を持たせて説明しましたね。

論理和代入演算子を使いこなすことで、条件処理を簡潔に記述でき、コードの可読性や保守性が向上します。

実際のプロジェクトでも、ここで学んだ知識を活かして、積極的に論理和代入演算子を活用していきましょう。