知っておくべきJavaScript/Node.jsの便利なワンライナー9選

Webやアプリケーションが複雑化するにつれ、JavaScriptとNode.jsは開発者のスキルセットにおいて不可欠な存在になりつつあります。コードの質を高め、開発中のストレスを最小限に抑えるために、シンプルなタスクを素早く処理できる関数をコードの冒頭で定義しておくのがおすすめです。

なお、JavaScriptはJavaとは別物です。両者の違いについては、こちらの記事も参考にしてください。

1. 配列の値をシャッフルする

トランプのカードをシャッフルするように、JavaScriptではこのワンライナーを使えば配列内の値を何度でも自由にシャッフルできます。

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());

トランプの例えにならって、52個の値をシャッフルしたい場合は次のように書きます。

let myarray = Array.from({length:52},(v,k)=>k+1);
 
console.log(shuffleArray(myarray));

コンソールにはランダムに入れ替わった値が出力されるはずです。

2. 日付が週末か平日かを判定する

剰余演算子（%）を使えば、ある日が週末に該当するかどうかを簡単に判定できます。

const isWeekend = (date) => date.getDay() % 6 == 0;

逆に、平日かどうかをチェックしたい場合は、最後の比較を反転させるだけです。

const isWeekday = (date) => date.getDay() % 6 !== 0;

次のコードでは、今日が週末かどうかを判定しています。

console.log(isWeekend(new Date()));

isWeekdayとisWeekendを別々に定義する代わりに、if-then-else文の中でNOT演算子を使い、どちらか一方だけを定義して使い分けることもできます。

if(!isWeekend(new Date())) {
    console.log("今日は平日です。");
 
} else {
    console.log("今日は週末です。");
}

3. 数値を特定の小数点以下の桁数で切り捨てる

ユーザーに表示する数値はできるだけシンプルであるべきです。桁数の多い数字の羅列ほど、サイトやアプリの見栄えを損なうものはありません。重要度の低い小数点以下を切り捨てて表示するには、次の便利な定義を使いましょう。

const decimalFormat = (n, places) => ~~(Math.pow(10, places) * n) / Math.pow(10, places);

テストとして、小数点以下が非常に長い数値を定義し、この関数を呼び出して小数第2位まで切り捨ててみます。

let deciwow = 299.39542014592
 
console.log(decimalFormat(deciwow, 2));

結果はずっと見やすくなるはずです。

4. 温度を変換する

JavaScriptには摂氏と華氏を変換する標準的な方法が用意されていませんが、シンプルなワンライナーを2つ書けば、独自の変換ルールを作れます。

摂氏から華氏への変換：

const cToF = (celsius) => celsius * 9/5 + 32;

華氏から摂氏への変換：

const fToC = (fahrenheit) => (fahrenheit - 32) * 5/9;

たとえば気温が摂氏マイナス2度だったとしましょう。摂氏から華氏への変換ワンライナーを使えば、アメリカ在住の人にとってこの温度がどう感じられるかがわかります。

cToF(-2);

この式の結果は華氏28.4度となります。

5. ダークモードが有効かどうかを判定する

表示するコンテンツをユーザーのカラースキーム設定に合わせたい場合、JavaScriptにはダークモード使用の有無を検出する仕組みがあり、それに応じて配色を調整できます。記述方法は少し複雑ですが、次のワンライナーで簡潔に書けます。

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

この変数を使った判定の例はこちらです。

if (isDarkMode) {
    console.log("この画面はダークモードです。");
} else {
    console.log("この画面はダークモードではありません。");
}

注意点として、このコードはブラウザ上のJavaScriptでのみ動作します。Node.jsはwindowオブジェクトをサポートしていないためです。

6. 数値配列の平均値を求める

データセットを扱う際、JavaScriptの配列には便利な関数が用意されており、すべての値の合計を計算し、それを要素数で割るという一連の処理を1行でエレガントに実行できます。

const getAverage = (arr) => arr.reduce((a, b) => a + b, 0) / arr.length;

ここではデータセットを作成し、その平均値をコンソールに出力してみます。

let dataset = [2, 14, 88, 204, 1515, 1294, 12, 144];
 
console.log(getAverage(dataset));

このコードを実行すると、出力は409.125になるはずです。

7. UUIDを生成する

アプリケーションの利用者から統計情報やデータを収集したい場合（Cookieの生成など）、侵入的にならずに済む最良の方法の一つが、UUID（汎用一意識別子）の生成です。JavaScriptにはRFC4122準拠のUUIDを簡単に生成する方法が組み込まれていません（ただしNode.jsには、この機能をすぐに使えるuuid npmパッケージがあります）。

JavaScriptでは、次の1行の式で新しくUUIDを生成できます。

const genUUID = (a) => (a ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16) : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, genUUID));

実際に出力をテストしてみましょう。

console.log(genUUID());

8. 2つの日付間の日数を求める

ある値の経過期間を調べる場合（ユーザーアカウントの年齢など）、特定の時点から何日が経過したかを計算する必要があります。それを実現するシンプルなワンライナーがこちらです。

const ageDays = (old, recent) => Math.ceil(Math.abs(old - recent) / (1000 * 60 * 60 * 24));

使用例として、2012年12月28日にアカウントを作成したユーザーの利用期間を調べる場面を想定し、その日付と今日の日付の間の日数を取得してみます。

console.log(ageDays(new Date('2012-12-28'), new Date()));

執筆時点では、結果は3298日となるはずです。

9. 指定した範囲内の乱数を生成する

単に乱数を生成するだけでは不十分なケースもあります。生成条件に範囲の制限を設けたいこともあるでしょう。このワンライナーを使えば、指定した範囲内の数値を生成できます。

const rangeRandom = (low, high) => Math.floor(Math.random() * (high - low + 1)) + low;

テストは簡単です。

console.log(rangeRandom(400, 20000));

よくある質問

1. CookieにUUIDを使う理由は？

Cookieは本質的にユーザーのマシン上のスペースを占有するため、データ収集の際はできるだけ効率的かつ非侵襲的な方法を選ぶべきです。UUIDを使うことには2つのメリットがあります。第一に、識別子の長さが128ビットしかないため、クライアント側ストレージの占有容量を最小限に抑えられます。第二に、ユーザーの個人情報に依存しないためです。

2. Node.jsでダークモードを検出しようとすると「window is not defined」エラーが出ます。どうすればいいですか？

Node.jsはJavaScriptのようなクライアント・サーバー関係を持たないため、クライアントサイドのモジュールを呼び出すことができません。本記事で紹介したダークモード検出のワンライナーは、ブラウザ上で動作するJavaScript専用のものです。

3. このコードはすべてのブラウザで共通して動作しますか？

JavaScriptのコードは、本来あらゆる環境で動作するはずのインタープリターによって実行されます。理論上はすべてのブラウザで機能しますが、特に古いソフトウェアでは解釈の仕方が多少異なる場合があります。ここで紹介したワンライナーはいずれも、ユーザーがどのブラウザで実行しても同じ結果を返すはずです。ただし、Pale MoonやInternet Explorer、2000年代初期のブラウザなどでは、JavaScriptの一部の機能が動作しない可能性がある点には留意してください。