この記事では、数字とアルファベットの組み合わせで構成されるランダムな 16 進カラー コードを生成する JavaScript 関数の作成方法を説明します。

この関数は実行されるたびにランダムな 16 進カラーを生成します:

function getRandomHexColor() {
    // Generate a random number between 0 and 16777215 (0xFFFFFF in decimal)
    const randomNumber = Math.floor(Math.random() * 16777215);
    // Convert the random number to a hexadecimal string and pad with leading zeros if necessary
    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor;
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

1. 乱数の生成

最初のステップでは乱数を生成する必要がありますが、それは JavaScript Math オブジェクトと Math random() メソッドを使用して簡単に行うことができます。

通常のランダム メソッドを作成すると、ランダムな 10 進数が得られます。以下の例を参照してください。

const randomValue = Math.random();
console.log(randomValue); // e.g., 0.123456789

しかし、0 から 16777215 までの乱数を生成する必要があります。「999999」やその他の 6 桁の数字ではなく、なぜ 16777215 が必要なのかと思われるかもしれません。数値 16,777,215 であるため、この 8 桁の数字を使用する必要があります。 6 桁の 16 進数のカラー コードで指定できる最大値です。

16 進カラー コードは 6 桁を使用します。各桁は 0 ～ 9 または A ～ F で、各桁に 16 個の選択肢があります。

これは、6 桁で合計 16,777,216 の異なる色を作成できることを意味します。最大の 16 進カラー コードは #FFFFFF で、10 進数の 16,777,215 に対応します。

したがって、16,777,215 までの数値を使用すると、アルファベット文字を含む色を含め、6 桁の 16 進コードで表されるすべての可能な色をカバーできます。これにより、数字や文字に関係なく、考えられるすべての色が確実に含まれるようになります。

整数を取得し、小数値を避けるために、Math.random() メソッドを Math.floor() 内にラップすることを忘れないでください。

const randomNumber = Math.floor(Math.random() * 16777215);
console.log(randomNumber); // e.g., 45326764

2.数値を16進数の文字列に変換する

function getRandomHexColor() {
    const randomNumber = Math.floor(Math.random() * 16777215);
    const randomHexColor = randomNumber.toString(16) //use the `toString(16)` method

}

次に、数値を 16 進文字列に変換する必要があります。これは、toString(16) メソッドを使用して簡単に行うことができます。

単純に乱数に対して toString(16) メソッドを使用し、引数として 16 を渡して 16 進文字列に変換します。

このメソッドにより、結果のコードには 0 から F までの数字と文字のみが含まれ、F 以降の文字は含まれなくなります。

こちらもお読みください: Next.js の Google Analytics トラッキング コード [セットアップ ガイド]

3.padStartメソッドを追加

私たちの関数はほぼ完成しました。ただし、潜在的な問題があります。生成される 16 進カラー コードの長さが 6 文字ではなく、わずか 5 文字になる場合があります。

関数が 5 文字の 16 進数のカラー コードを返す場合、その関数は無効になります。これを修正し、常に 6 文字の 16 進数のカラー コードを取得できるようにするには、padStart メソッドをコードに追加する必要があります。

padStart(6, '0') メソッドは、必要に応じて先頭にゼロを追加することで、カラー コードが常に 6 桁のコードになるようにします。

たとえば、16 進コードが A9A9A で、5 文字しか含まれていない場合、padStart(6, '0') メソッドは先頭に 0 を追加して 6 桁のカラー コードにし、結果は 0A9A9A になります。これにより、関数は常に正確に 6 文字を含む適切にフォーマットされた 16 進カラー コードを返すようになります。

4. 生成された 16 進コードを返します

最後のステップは、必要なときに簡単に使用できるように、生成されたランダムな 16 進カラー コードを返すことです。

テンプレート文字列を使用してカラーコードをラップし、先頭に # を追加したいので、この関数を使用するたびに # を手動で追加する必要がありません。

function getRandomHexColor() {

    const randomNumber = Math.floor(Math.random() * 16777215);

    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor; //return the code
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

結論

初めて JavaScript でランダム 16 進カラー ジェネレーターを作成したとき、アルファベット文字が含まれていなかったため、暗い色または鈍い色しか生成されませんでした。

コードにいくつかの変更を加えた後、最終的に望ましい結果が得られました。また、この投稿が同様の関数を作成する時間を節約できることを願っています。

新しいプロジェクトを探している、または JavaScript を使用して何かを構築したいと考えている友人とこの投稿を共有してください!

こちらもお読みください: HTML コードを削除せずに無効にする方法 [3 つの方法]