オプショナルチェーン演算子（ ?. ）で条件分岐をすっきりさせる
typeof を連続で書かずにオプショナルチェーン演算子（ ?. ）で条件分岐をすっきりさせましょうというお話です。
古い書き方
例えば、下記のような条件分岐があるとします。僕の世代では慣れ親しんだ書き方です。
if (typeof MT !== 'undefined' && typeof MT.Editor !== 'undefined' && typeof MT.Editor.TinyMCE !== 'undefined') {
// do something
}日本語で説明すると、「MT が定義されていて、かつ、MT.Editor が定義されていて、かつ、MT.Editor.TinyMCE が定義されている場合」となります。
オプショナルチェーン演算子
これをモダンな書き方に直すと以下のようにできます。
if (typeof MT !== 'undefined' && MT?.Editor?.TinyMCE) {
// do something
}この ?. というのがオプショナルチェーン演算子で、ECMAScript 2020（ES11）で導入されたものです。
これは、?. の手前の変数やプロパティが null や undefined でもエラーを発生させずに undefined を返してくれるというものです。
また、?. の後ろのプロパティが存在しない場合でも undefined を返してくれます。
少し注意が必要なのが最初の変数が null や undefined でもエラーは発生しませんが、未定義だとエラーになってしまいます。それを防ぐために最初に typeof MT !== 'undefined' を入れています。もう少し具体的に説明すると、以下の場合はエラーになりません。
let MT;
if (MT?.Editor?.TinyMCE) {
// do something
}
//------------------------------
let MT = null;
if (MT?.Editor?.TinyMCE) {
// do something
}
//------------------------------
let MT = undefined;
if (MT?.Editor?.TinyMCE) {
// do something
}
//------------------------------
let MT = [];
if (MT?.Editor?.TinyMCE) {
// do something
}
//------------------------------
let MT = '';
if (MT?.Editor?.TinyMCE) {
// do something
}
//------------------------------
let MT = 1;
if (MT?.Editor?.TinyMCE) {
// do something
}
//------------------------------
let MT = true;
if (MT?.Editor?.TinyMCE) {
// do something
}おまけ
英語だと「Optional chaining」というのですが、日本語訳が「オプショナルチェイニング」ではなくて「オプショナルチェーン」なのが気になるところです（どうでもいい）。
Published 2024-07-16
, Updated 2024-07-16
, Updated 2024-07-16
⚡️ 話題の一冊 ⚡️
