JavaScriptコードを短く書ける！５つのテクニック集

どんな言語にもある次の悩み、

少しでもコードを短く書きたい
ムダな処理を１行でも減らしたい
JavaScriptコードを短くしたい

そのためのJavaScriptテクニックを紹介します。

ただしスペース・空白の削除だったり、
変数名を短くする幼稚なテクではありません。

もっと本質的で汎用性の高い書き方です。

このページの目次

１．複数の返り値をまとめて受け取る
２．オブジェクトのキーに変数名を使用する
３．関数型プログラミングを意識する
４．普通の関数をアロー関数に置き換える
５．コードをobfuscatorなどで難読化
コードを短く書ける手法のまとめ

１．複数の返り値をまとめて受け取る

たとえば配列を返す関数があるとします。

▼ このようなコードを考えてみる

/**
 * aをbで割った商と余りを同時に返す
 **/
function divmod(a, b){
  return [Math.floor(a/b), a%b];
}

/// 71を11で割った商と余りは…
const result = divmod(71,11);
const div = result[0];
const mod = result[1];

console.log('商 : ', div);
  /// => 商 : 6
console.log('余 : ', mod);
  /// => 余 : 5

/**

* aをbで割った商と余りを同時に返す

**/

function divmod(a, b){

return [Math.floor(a/b), a%b];

}

/// 71を11で割った商と余りは…

const result = divmod(71,11);

const div = result[0];

const mod = result[1];

console.log('商 : ', div);

/// => 商 : 6

console.log('余 : ', mod);

/// => 余 : 5

なんかムダに長ったらしい気がします。

複数の返り値を一度に受け取れたら、
分かりやすくてコードも短くできますね。

それにはつぎで紹介したテクニックが使えます。

▼ JavaScriptで関数から複数返り値を受け取る

PisukeCode - Web開発まとめ

JavaScriptで関数から複数返り値を返す＆受け取るには

https://pisuke-code.com/js-multiple-values-from-func

JavaScriptで関数を作るとき・・・１つ以上の返り値を返したり、呼出し元で複数返り値を受け取ったり、こういった複数返り値の扱いについて。コード例とかと一緒にまとめました。関数の柔軟性を高めるのはもちろん、外部ライブラリなどを使う時にも役立つ知識です。複数の返り値は Object を使えば返せる複数返り値を返したい場合。通常は Object を使うことが多いですね。※ オブジェクト、連想配列とも呼ばれるもの知らない人は少ないですが、キーと値をペアにできるデータ型のことです。▼ Objectの作成コード例var obj = { y:...

▼ 上記コードを短く書き直すとこうなる

/// 71を11で割った商と余りは…
const [div,mod] = divmod(71,11);

console.log('商 : ', div);
  /// => 商 : 6
console.log('余 : ', mod);
  /// => 余 : 5

/// 71を11で割った商と余りは…

const [div,mod] = divmod(71,11);

console.log('商 : ', div);

/// => 商 : 6

console.log('余 : ', mod);

/// => 余 : 5

なんと３行だったコードが１行に。

これは割とよく使うテクなので汎用性が高いです。

あと可読性も少しだけ高まるかもしれません。

２．オブジェクトのキーに変数名を使用する

これもコード最適化に役立つ記法です。

あるオブジェクトを作るとする
そのキー名と変数名が同じなら
変数名だけでキー:値のセットができる

説明だとやはり分かりにくいと思うので…

具体的なコードを提示します。

▼ 初めに次のコードを考えてみる

/// ３次元座標の各要素
const x=1, y =2, z=3;

/// 座標をオブジェクトとして表す
const coord = {x:x, y:y, z:z};

console.log('coord : ', coord);
  /// => {x: 1, y: 2, z: 3}

/// ３次元座標の各要素

const x=1, y =2, z=3;

/// 座標をオブジェクトとして表す

const coord = {x:x, y:y, z:z};

console.log('coord : ', coord);

/// => {x: 1, y: 2, z: 3}

上記コードの {x:x, y:y, z:z} の部分、
なんか冗長でムダが多い書き方になってます。

こういうキー名と変数名が一致してる場合、
変数名だけでキー・値の両方をセットできます。

▼ つまりは下記のような書き方ができる

/// ３次元座標の各要素
const x=1, y =2, z=3;

/// 座標をオブジェクトとして表す
const coord = {x, y, z};

console.log('coord : ', coord);
  /// => {x: 1, y: 2, z: 3}

/// ３次元座標の各要素

const x=1, y =2, z=3;

/// 座標をオブジェクトとして表す

const coord = {x, y, z};

console.log('coord : ', coord);

/// => {x: 1, y: 2, z: 3}

この書き方はとても便利ですね。

もちろんキー名と変数名が一致しない時は使えませんが、一致してるなら {x, y, z} のように記述可能です。変数名が長いほど効力発揮します。

これもコードを短くするのに役立つ

３．関数型プログラミングを意識する

世の中には２つのプログラミングがあります。

▼ この２つが存在している

関数型プログラミング
手続き型プログラミング

▼ 関数型には次の利点がある

関数型プログラミングは簡潔な関数の組み合わせでプログラミングします。個々の関数は独立しており、実行中の処理の影響を受けません。そのため、コード全体がシンプルで人が見て分かりやすく、保守性や再利用性に優れています。

引用元　：　https://it-trend.jp/development_tools/article/32-0053

JavaScriptでは両方が使えるんですが、
コードを短くする点でも関数型が推奨されます。

▼ 手続き型のコード例（長い）

/**
 * [赤、緑、青]の配列を引数にとる。
 * それを16進数のコードに変換して返す。
 **/
function rgbToHex(rgb){
  let hex = '#';
  for(let i=0; i<rgb.length; ++i){
    const v = rgb[i];
    hex += v.toString(16).padStart(2, '0');
  }
  return hex;
}

const hex = rgbToHex([0, 172, 238]);
console.log('hex : ', hex);
  /// => hex : #00acee

/**

* [赤、緑、青]の配列を引数にとる。

* それを16進数のコードに変換して返す。

**/

function rgbToHex(rgb){

let hex = '#';

for(let i=0; i<rgb.length; ++i){

const v = rgb[i];

hex += v.toString(16).padStart(2, '0');

}

return hex;

}

const hex = rgbToHex([0, 172, 238]);

console.log('hex : ', hex);

/// => hex : #00acee

このコードが手続き型です。

見てわかるように配列をforループで回し、各要素を１つの結果（ここでは #00acee のような色コード）にまとめるような処理をしてます。

読みにくく長くなるのが欠点です。

それを関数型で書くとこうなります。

▼ 手続き型のコード例（短い）

/**
 * [赤、緑、青]の配列を引数にとる。
 * それを16進数のコードに変換して返す。
 **/
function rgbToHex(rgb){
  return rgb.reduce((p,c)=>{
    return p+c.toString(16).padStart(2,'0');
  }, '#');
}

const hex = rgbToHex([0, 172, 238]);
console.log('hex : ', hex);
  /// => hex : #00acee

/**

* [赤、緑、青]の配列を引数にとる。

* それを16進数のコードに変換して返す。

**/

function rgbToHex(rgb){

return rgb.reduce((p,c)=>{

return p+c.toString(16).padStart(2,'0');

}, '#');

}

const hex = rgbToHex([0, 172, 238]);

console.log('hex : ', hex);

/// => hex : #00acee

関数型はこういう感じ

このコードではArray.reduce()を使うことで、forループを使わないで同じ処理を実行できてます。簡素な関数の組み合わせでプログラミングすることを意識すべし。

ちなみにArray.reduce()の詳細は次からどうぞ

PisukeCode - Web開発まとめ

JavaScript配列への reduce() の使いどころ・実用例をいくつか紹介

https://pisuke-code.com/js-examples-of-array-reduce-usage

JavaScriptの配列には reduce() があります。▼ Array.reduceメソッドのMDNでの解説reduce() メソッドは、配列のそれぞれの要素に対して、順番通りに、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。引用元　：　https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceこの説明にもあるように・・・「直前の要素における計算結果の返値」...

JavaScriptでは配列・オブジェクトから直呼びできる関数（例 : Array.reduce() , Array.map(), Object.entries() ）があり、それを組み合わせるとコードを短くできます。

関数型に慣れていくことが大事です。

４．普通の関数をアロー関数に置き換える

JavaScriptでは関数定義に function を使います。

でもアロー関数を使う方が圧倒的に楽です。

例えば昔は次のような書き方が多かったです。

▼ ボタンにコールバック登録のコード例

const $btn = document.getElementById('hoge');

$btn.onclick = function(e){
  console.log('clicked');
};

const $btn = document.getElementById('hoge');

$btn.onclick = function(e){

console.log('clicked');

};

これでもいいけど、アロー関数はさらに短いです。

▼ アロー関数に置き換えたコード例

const $btn = document.getElementById('hoge');

$btn.onclick = (e)=>{
  console.log('clicked');
};

const $btn = document.getElementById('hoge');

$btn.onclick = (e)=>{

console.log('clicked');

};

▼ アロー関数とは何か？制約など

アロー関数式は、従来の関数式の簡潔な代替構文ですが、制限があり、すべての場面で使用することができるわけではできません。アロー関数と従来の関数には違いがあり、また制限もあります。

引用元　：　https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

単純に ()=>{...} のような代替構文です。

ただし上記説明のように従来関数式とイコールではありません。例えば this、arguments、super への結びつけがないなど制約があることに注意です。

ただしコールバック関数などの処理なら、
アロー関数で問題なく置き換えができます。

使える場面なら積極的にアロー関数を使うべき