こんにちは、WEBの佐野です。
今回はJavaScriptのショートハンドについて紹介したいと思います。

ショートハンドはプログラムを簡略化した書き方のことで、学習を始めたての人だと知らない人も多いんじゃないでしょうか。

細かいショートハンドは多くありますが、こういった新しい発見をすると

とか勉強のモチベーションにも繋がります。

ここでは個人的に使用頻度が高く、覚えておくと便利なものを3つ紹介するのでぜひ覚えてもらえたらと思います。

変数宣言

プログラムをする上で必ず書くことになる変数宣言です。
1つ1つは小さいものですが、使うことが多いものなのでしっかり覚えて時短を目指しましょう！

通常

// 複数の変数を作成
let a;
let b = "test";

// オブジェクトを作成
let c = new Object();
let c2 = new Object({"name":"yamada", "age":25});

// 配列を作成
let d = new Array();
let d2 = new Array("リンゴ", "バナナ");

ショートハンド

// 複数の変数を作成
let a, b = "test";  // console => a:undefined b:test
let a2 = b2 = "test";  // console => a2:test b2:test

// オブジェクトを作成
let c = {};
let c2 = {"name":"yamada", "age":25};

// 配列を作成
let d = [];
let d2 = ["リンゴ", "バナナ", "メロン"];

関数宣言

“function”から始まる関数宣言にもショートハンドがあります。
細かい違いは多くありますが、目にすることも多いものなので覚えておくと何かと便利です。

通常

function display_alert(arg){
  alert(arg);
}
display_alert("アラートを表示します");

ショートハンド

display_alert = (arg) => {
  alert(arg);
}
display_alert("アラートを表示します");

ショートハンドの方はアロー関数と呼ばれる書式です。
細かい違いについては下記のサイトが解説してくれているので、少し難しいかもしれませんが一度読んでおくことをオススメします。

個人的に一番注意したい違いは、コールできる場所が変わることです。

少し難しい話になりますが、JavaScriptには処理が開始される時点で使える関数と、使えない関数があります。
アロー関数は後者で、実行できるタイミングはコードが読み込まれた後になります。
なのでコード上、アロー関数よりも上で関数をコールすると[is not defined]として関数が見つからないとエラーが出てしまうので注意しましょう。

IF文

プログラムの基本とも言えるif文ですが、かなり省略して書くことができます。
目にする機会も多いので覚えておきましょう！

通常

let name = "sano";
if(name == "sano"){
  alert("プログラマー");
}else{
  alert("デザイナー");
}

ショートハンド

let name = "sano";
(name == "sano")? alert("プログラマー"): alert("デザイナー");

// 分岐後の値を変数に入れる使い方
let job = (name == "sano")? "WEBプログラマー": "デザイナー";

// ()も省略できる
let job2 = name == "sano"? "WEBプログラマー": "デザイナー";

通常の書き方だと単純なif文でも5行は使うことになるので、どうしてもコードが長くなってしまいます。
しかしショートハンドを使うことで1行になり、スッキリしたことで可読性も高まります。

いかがだったでしょうか。
今回は初歩的なショートハンドの紹介でしたが、調べてみると他にもたくさんあるので面白いと思います。
コードは短ければ良いってものでもありませんが、少しでも参考なれば嬉しいです。