CSSでは、ほかのいくつかのCSSプロパティをまとめて1つのプロパティで指定することが可能な「ショートハンド」と呼ばれる短縮プロパティが存在します。
これを使うことで、Webページの製作者は記述する時間を短縮したり、CSSを読みやすくしたり、コード量を削減したりすることができます。

例えば、背景に関するショートハンドである「background」プロパティは、「background-color」や「background-position」、「background-repeat」などの関連したプロパティを同時に指定することができます。

同様に、フォント関連には「font」、各辺のマージンを一括で指定するために「margin」というように、他にもさまざまなショートハンドプロパティが存在します。

それでは、CSSとともにフロントエンドエンジニアには必須のJavaScriptでは、もっと短く書くことができないのでしょうか。

今回は、もっとシンプルに書くことができる、JavaScriptで知ってると便利なショートハンド11選をご紹介します。
特に、JavaScriptを学びたての方にとっては、様々な発見があるはずです。

JavaScriptで知ってると便利なショートハンド

code.jpg
画像引用元：stock.io

1. 配列をまとめる

ロングハンド

let a = new Array();
a[0] = “ferret 1号”;
a[1] = “ferret 2号”;
a[2] = “ferret 3号”;

ショートハンド

let a = [“ferret 1号”, “ferret 2号”, “ferret 3号”];

これは最もポピュラーな配列をまとめるプロパティです。
配列を1つずつ指定することも可能ですが、まとめて配列の中身まで指定してやれば、4行文使ったコードを1行にすっきりまとめることができます。

2. 値の有効無効チェック

ロングハンド

if (variableFerret !== null || variableFerret !== undefined || variableFerret !== '') {
　　let variableOctopus = variableFerret;
}

ショートハンド

let variableOctopus = variableFerret  || '';

フォームの値を送信するときに、空欄や無効な値であるかどうかを調べるための処理を実装するときがあります。
しかし、何度もチェックをする場合には、1行でチェックできたほうがいいですよね。
上記のショートハンドは、「短絡評価」と呼ばれることもあります。

実際、Chromeデベロッパーツールを使って処理の過程を見てみると、nullであっても、undefinedであっても、「let variableOctopus = variableFerret || ‘’;」という処理をしていることが分かります。

3. If true … else 文

ロングハンド

let senior;
if (ferretAge > 10) {
　　senior = true;
}
else {
　　senior = false;
}

ショートハンド

let senior = ferretAge > 10 ? true : false;

If文のショートハンドも有名なのでご存知の方も多いでしょう。
こうした記法で使われる「?」や「:」は三項演算子と呼ばれることがあります。

4. for文

ロングハンド

for (let i = 0; i < ferret.length; i++) {
　　ferretNum++;
}

ショートハンド

for (let index in ferret) {
  　　ferretNum++;  
}

for文での繰り返し処理では、上記のような書き方もできます。

longcode.jpg
画像引用元：stock.io

5. 算術演算子

ロングハンド

ferretNum = ferretNum + 1;
ferretAge = ferretAge - 1;
ferretBros = ferretBros * 10;

ショートハンド

ferretNum++;
ferretAge—;
ferretBros*=10;

足し算や引き算、掛け算も、同じ値を参照する場合には非常にコンパクトにまとめることができます。
これはJavaScriptに限らず、JavaやPHP、C++など、さまざまな言語で使うことができるプログラミング言語全般のショートハンドです。

6. 文字列から数値へ・数値から文字列へ

ロングハンド

var ferretSays = “12345”;
parseInt (ferretSays);

var ferretAge = 11;
ferretAge.toString();

ショートハンド

var ferretSays = “12345”;
+ferretSays;

var ferretAge = 11;
“ ”+ferretAge;

文字列から数値へ切り替えるには、通常parseInt関数を使いますが、変数の前に「+」をつけるだけで数値に切り替わります(数字の文字列であることが条件です)。
また、同様に数値から文字列への切り替えはtoStringを使いますが、半角の空白を前につければ文字列への切り替えが行われます。

7. 文字の抜き出し

ロングハンド

“ferret”.charAt(0);

ショートハンド

“ferret” [0];

文字列のn番目の文字を抜き出すときにはcharAt(n)関数を使いますが、上記のようにブラケットを使うことでも文字の抜き出しを行うことが可能です。

8. 関数の呼び出し

ロングハンド

function ferretX() {console.log('x')};
function ferretY() {console.log('y')};
let a = 3;
if (a == 3) {
　　ferretX();
} else {
　　ferretY();
}

ショートハンド

function ferretX() {console.log('x')};
function ferretY() {console.log('y')};
let a = 3;
(a==3 ? ferretX:ferretY)();

先ほどif文で見た三項演算子を関数に応用した例です。
このように、単純に真偽チェックを行う場合には、関数名を指定するやり方もあります。

simple.jpg
画像引用元：stock.io

9. ゼロの省略

ロングハンド

for (let i = 0; i < 10000; i++) {
　　ferretSays += “どうしたの？”;
}

ショートハンド

for (let i = 0; i < 1e5; i++) {
　　ferretSays += “どうしたの？”;
}

上記のコードのわずかな違いを見つけられるでしょうか。
「10000」の部分が「1e5」になっていますが、これはゼロを書かずに10の累乗を表現する方法です。

例えば「1e8」は、1のあとに8つの0が続くので、1億(＝100,000,000)と同じ意味になります。
ちなみに、「1e0」は1、「1e1」で10と定義されます。

10. 値の存在確認

ロングハンド

if (ferret === true){
　　ferretSays = “hogehoge”;
}

ショートハンド

if (ferret){
　　ferretSays = “hogehoge”;
}

ifを使って値の存在確認を行うときには、すべての演算子を取り除いて変数だけを括弧の中に入れれば大丈夫です。
同じく、ferretがtrueではない場合には、「!」を変数の前に付けます。

ロングハンド

if (ferret != true){
　　ferretSays = “foobar”;
}

ショートハンド

if (!ferret){
　　ferretSays = “foobar”;
}

11. 小数点以下の切り捨て

ロングハンド

if (Math.floor(3.7) === 3){
　　return ferret;
}

ショートハンド

if (~~3.7 === 3){
　　return ferret;
}

小数点以下の切り捨てには、通常Math.floor()関数を使います。
しかし、ビット否定演算子「~」を2つ重ねて使うことで、同様に小数点以下の切り捨て処理を行います。

まとめ

JavaScriptの手引書は基本に忠実に書かれているので、ショートハンドが紹介されないこともあります。
しかし、実用的にプログラミングを行うのであれば、上記のようなショートハンドを知っていた方がコード構築の時間が短縮できるうえに、ファイル容量も節約できます。

どれもささいなことかもしれませんが、積み重ねて使っていくことが大切です。
ぜひ、現場で使えそうなものから取り入れてみてください。