より早くより短く！知っていると便利なJavaScriptのショートハンド

CSSプロパティでよく聞くショートハンド、複数のプロパティをまとめて一つのプロパティで指定できる便利なコードですが、JavaScriptにも特定のコードを短い記述で実現するショートハンドが存在します。
cssプロパティと同じく利用されることが一般的になっているものもありますが、今回はそんなJavaScriptのショートハンドについて紹介します。

JavaScriptのショートハンド

配列をまとめる

通常

let a = new Array();
a[0] = “test00”;
a[1] = “test01”;
a[2] = “test02”;

ショートハンド

let a = [“test00”, “test01”, “test02”];

配列をまとめて指定できるショートハンドです。1つずつ指定するのが通常ですがまとめて指定することで、タイピングの労力を大幅に短縮できます。

値の存在確認（if文）

通常

if (testJavaScript === true)

ショートハンド

if (testJavaScript)

いわゆる通常のif文の判定です。代入演算子を省略してショートハンド化することができます。
trueではないときのコードも、if (!testJavaScript)で実現できます。

三項演算子（if else 文）

通常

var x = 20;
var testJS;
if (x > 10) {
    testJS = 'large';
} else {
    testJS = 'small';
}

ショートハンド

var testJS = x > 10 ? 'large' : 'small';

if else 文を1行に収めたショートハンドです。？や:をつかうことで実現しています。

算術演算子

通常

plusNum = plusNum + 1;
minusNum = minusNum - 1;
timesNum = timesNum * 10;

ショートハンド

plusNum++;
minusNum—;
timesNum*=10;

足し算や引き算、掛け算は、同じ値を参照する場合であればショートハンドでシンプルに記述することができます。

for文

通常

for (let i = 0; i < testJS.length; i++) {
　　testNum++;
}

ショートハンド

for (let index in testJS) {
　　testNum++; 
}

for文での繰り返し処理のショートハンドです。上記の算術演算子のショートハンドである++が利用されています。

まとめ

JavaScriptのショートハンドについて紹介しました。webサイト制作ではプラグインやパッケージされたjsに頼らず、ちょっとした動きをその場で実装する必要が発生したりします。そういった場合にこれらを知っているとちょっとしたjsでもその実装コストをうんと軽くすることができます。うまく活用してより省コストなコーディングを実現しましょう。