【初心者向け】今日からイキれる！JavaScriptコーディング小技集

プログラミングの主な目的は「コンテンツの実現」ですが、それもある程度上達すると、コーディングでイキり出したい願望が出てくる方もいるのではないでしょうか。

今回は、使えば周りに「おっ」と思わせるような、すぐに使えるJavaScriptコーディングの小技をご紹介します。

【前提】乱用には要注意

この記事を読むにあたって、初心者の方に気を付けてほしいのが、「小技は乱用するものではない」ということです。紹介する小技の中には、それを使わない方がコードが読みやすくなったり、処理が軽くなったりするケースもあります。

タイトルにもあるように、あくまでも”イキれる”小技集なので、仕事・業務のコーディングで使う場合には十分注意を払ってください。

1．変数の一括宣言

JavaScriptでは、複数の変数をまとめて宣言することができます。
例えば、以下のような形で変数を宣言したいとしましょう。

let number;
let flag;
let text;

後々の処理で扱う変数を、このような形で前もって複数宣言することは、度々見られます。（本来はオブジェクトで管理すべきですが…）

実は、このように同じスコープの変数を複数宣言する場合は、以下のように記述することが可能です。

// 先ほどのコードと同じ処理
let number, flag, text;

元の方法だと、いちいち「let」でスコープの定義をしていましたが、その記述を省略することができていますね。変数を一回でまとめて宣言できるので、冗長なコードを簡略化できるのがポイントです。この小技は、実務でも度々使われています。

ただし、以下のようなコードには応用できません。

// 変数の宣言と初期値の代入
let number = 0;

// スコープの定義がバラバラ
let number;
var flag;
let text;

2．文字列に値を埋め込む

JavaScriptは動的型付け言語なので、様々なデータを合体させて一つの文字列を構成する処理も頻出します。
例えば、以下のような感じですね。

let number = Math.random();
console.log("生成した乱数は、【" + number + "】です。");

// 本当はこう書く方が良い
console.log("生成した乱数は、【" + String(number) + "】です。");

numberに代入された乱数の値を、コンソールに文字列として出力するコードです。

ただ、パッと見た感じだと”【” + number +”】”と書かれている部分が、少しばかり見にくいですよね。

実は、上記の記述は、以下のようにもっと可読性の高い書き方で表すことができます。

console.log(`生成した乱数は、${number}です。`);

上のコードを実行すると、同じように値を文字列の中に埋め込むことができますよね。

JavaScriptにおいて、文字列は本来“ダブルクオーテーション”や‘シングルクォーテーション’で囲むことで表しますが、
バックティック（“）を使うと、テンプレートリテラルと呼ばれる特殊な文字列を扱うことが可能となります。

テンプレートリテラルは、改行コードを省略できたり、色々と面白い使い方ができる文字列なので、使いこなせるとカッコいいかもしれません。

テンプレートリテラル / MDN

3．if文の省略

JavaScriptに限らず、ほとんど言語ではif文が実装されており、プログラミングの基本とも言える存在となっています。
例えば、以下のような形で、条件に合った場合だけ実行する処理が書けますよね。

let number = 0;

// numberの値が0なら「OK」と出力
if(number == 0){
    console.log("ok");
}

上のif文は、以下のようにif文を省略し、一行で記述することが可能です。

number == 0 && console.log("ok");

非常にスマートな記述になりましたね。

ただ、この方法では、以下のようにelseを使った条件式には対応できません。

if(number == 0){
    // numberの値が0なら「OK」と出力
    console.log("ok");
}else{
    // 0でない場合は「no」と出力
    console.log("no");
}

elseにも対応させる場合には、三項演算子と呼ばれる記述を応用します。愚直に記述するなら、以下のような形で表すことが可能です。

// (条件式) ? (合っていた場合の処理) : (違った場合の処理);
number == 0 ? console.log("ok") : console.log("no");

合計4行も書いていたコードを、1行にキレイに収めることができました。

上級者向けのテクニックですが、実は通常のif文と使い分けるような場面が度々あるので、覚えておいて損はないでしょう。

4．オブジェクトの記述を省略

JavaScriptでは、JSON形式の元にもなったオブジェクトを使い、データを管理する手法はよく用いられます。

例えば、以下のような形です。

let number = 1;
let string = "Stringです";

let obj = {
    // キー：値
    "number": number,
    "string": string
}

objという名前で変数を定義し、その中にJSON形式のデータを格納しています。

しかし、上記のように事前に用意した変数と同じ名前でキーを設定し、その値に変数を入れるようなコードは、何だか二度手間のように感じますね。

JavaScriptでは、そんなコードを以下のように省略して記述できる方法も提供しています。

let number = 1;
let string = "Stringです";

// オブジェクトの定義
let obj = {number, string}


/* 下と同じ */
let obj = {
    "number": 1,
    "string": "Stringです"
}

オブジェクトのプロパティに直接変数を入れていくことで、それらがオブジェクトのデータとして記憶されるわけですね。

基本的には便利な記述ですが、変数名とオブジェクトのキーの名前を分けたい場合には向いていないので、それほど使う機会はないかもしれません。

まとめ

今回紹介したJavaScriptの小技は、どれもよく見かけるものばかりです。もちろん、ここで紹介した小技を習得するのも良いですが、実はあまり使われていないような小技も非常に多くあります。余裕がある方はそれらも勉強して真のJavaScriptマスターになり、イキっていくのがおすすめです。