2018.08.13

コーディング

より早くより短く!知っていると便利な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でもその実装コストをうんと軽くすることができます。うまく活用してより省コストなコーディングを実現しましょう。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する