TAGS :,

CSSのプロパティがまとめられるようにJavaScriptにも処理方法を省略して書くことができるショートハンドといわれる短縮記法があります。

ショートハンドを使うことで複数行にわたる処理を一行で記述することができたりメリットがいろいろありますが、ここではそんなJavaScriptのショートハンドでとくによく使うif文の短縮記述方法について紹介してみます。

if

まず、基本となる「if」文のショートハンドから。

下記のif文を例とします。

◆ 通常
if (AAA > BBB){
    CCC = true;
}

これを短縮させるには、「if」の代わりに「?」を使って記述します。

◆ ショートハンド
(AAA > BBB) ? CCC = true;

ショートハンドにした際の「条件」と「処理」の構成は以下のとおりです。

条件 ? 処理 ;

if else

「if」と合わせて「else」で条件分岐をする際は次のようになります。

◆ 通常
if (AAA > BBB){
    CCC = true;
} else {
    DDD = true;
}

これを短縮させるには、「else」の代わりに「:」を使って記述します。

◆ ショートハンド
(AAA > BBB) ? CCC = true : DDD = true;

ショートハンドにした際の「条件」と「処理」の構成は以下のとおりです。

条件 ? 処理 : 処理 ;

if else-if

条件分岐をする際に「else if」を使用する場合は次のようになります。

◆ 通常
if (AAA > BBB){
    CCC = true;
} else if(CCC > DDD) {
    EEE = true;
}

これを短縮させるには、「else」の代わりの「:」の後に追加の条件をいれて「?」を記述します。

◆ ショートハンド
(AAA > BBB) ? CCC = true : (CCC > DDD) ? EEE = true;

ショートハンドにした際の「条件」と「処理」の構成は以下のとおりです。

条件 ? 処理 : 条件 ? 処理 ;

if else-if else

「else if」の後に「else」をつける場合は次のようになります。

◆ 通常
if (AAA > BBB){
    CCC = true;
} else if(CCC > DDD) {
    EEE = true;
} else {
    FFF = true;
}

これを短縮させるには、追加条件の「?」の後に「else」の「:」を記述します。

◆ ショートハンド
(AAA > BBB) ? CCC = true : (CCC > DDD) ? EEE = true : FFF = true;

ショートハンドにした際の「条件」と「処理」の構成は以下のとおりです。

条件 ? 処理 : 条件 ? 処理 : 処理;

複数処理

処理が複数にわたる場合のショートハンドは次のようになります。

◆ 通常
if (AAA > BBB){
    CCC = true;
    DDD = true;
    EEE = true;
}

これを短縮させるには、処理を「&」でつないで複数の処理をまとめます。

◆ ショートハンド
(AAA > BBB) ? CCC = true & DDD = true & EEE = true;

ショートハンドにした際の「条件」と「処理」の構成は以下のとおりです。

条件 ? 処理 & 処理 & 処理;

以上がif文をショートハンドで記述する方法のいろいろでした。

スクリプトをショートハンドで記述することで、コードをすっきりさせるだけでなく、ファイルサイズの軽減にもつながります。

JavaScriptでif文をショートハンドで記述する際にぜひ。