JavaScript

オプショナルチェーン演算子（ ?. ）で条件分岐をすっきりさせる

2024-07-16
3分で読了
更新: 2025-12-14

目次

古い書き方

例えば、下記のような条件分岐があるとします。僕の世代では慣れ親しんだ書き方です。

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」というのですが、日本語訳が「オプショナルチェイニング」ではなくて「オプショナルチェーン」なのが気になるところです（どうでもいい）。

この記事をシェア

関連記事