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. ある日付が週末か平日かを調べる
単純な剰余オペランドを使うことで、JavaScriptではある日が週末にあたるかどうかを簡単にチェックすることができます。
const isWeekend = (date) => date.getDay() % 6 == 0;
これを平日かどうかのチェックに変更したい場合は、最後の比較を逆にすればよいのです。
const isWeekday = (date) => date.getDay() % 6 !== 0;
次のコードでは、今日が週末であるかどうかをチェックしています。
console.log(isWeekend(new Date()));
変数 isWeekday
と isWeekend
を別々に定義する代わりに、 NOT
オペランドを使用して、以下のように if-then-else
文を記述することも可能です。
if(!isWeekend(new Date())) {
console.log("Today falls on a weekday.") { if(!isWeekend(new Date())) { {今日は平日です。
} else {
console.log("Today falls on a weekend.");
}
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. 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を生成する
もしあなたがアプリケーションを使用している人々から統計やデータを収集したい場合(例えばクッキーを生成することによって)、侵襲的でなくこれを行う最善の方法の1つは、普遍的にユニークな識別子(UUID)を生成することです。JavaScriptにはRFC4122に準拠したUUIDを簡単に生成する方法がありません(Node.jsにはuuid
というnpmパッケージがあり、この機能をすぐに使うことができますが)。
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)).*Math.ceil(Math.abs(old - recent) / (1000 \* 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.Math.floor(Math.random() \* (high - low + 1)) + low;
これをテストするのは簡単です。
console.log(rangeRandom(400, 20000));
Frequently Asked Questions
1. なぜクッキーにUUIDを使うのですか?
クッキーはその性質上侵入的で、ユーザーのマシン上のスペースを占有するので、データを収集するためにこれらの手段を使うときは、できるだけ効率的で非侵襲的であることを目指すべきでしょう。UUIDを使用すると、2つの利点があります。まず、識別子の長さが128ビットであるため、クライアントベースのストレージに占めるスペースを最小限に抑えることができます。次に、ユーザーの個人情報に依存しない。
2. Node.jsでダークモードを検出すると、「window is not defined」というエラーが発生します。どうすればいいですか?
Node.jsはJavaScriptのような本質的なクライアントとサーバーの関係を持っていないので、クライアントサイドモジュールを呼び出すことができません。この記事のダークモード検出のワンライナーは、特にブラウザベースのJavaScriptのためのものです。
3. このコードはすべてのブラウザーに対応しますか?
JavaScriptのコードは、普遍的に機能することを前提としたインタプリタを使用しています。理論的にはすべてのブラウザで動作しますが、特に非常に古いソフトウェアでは、コードの解釈方法が若干異なる場合があります。ここで紹介するワンライナーの場合、どのブラウザで実行しても同じ結果が得られるはずです。ただし、Pale MoonやInternet Explorerなどのブラウザや、現在活発に開発されている2000年代前半のブラウザでは、一般的なJavaScriptで使用する機能が動作しない可能性があることに注意してください。
画像引用元:髭の生えた素敵な男性の横顔 by 123RF