はじめに
この実験では、JavaScriptを使ってhsl()
カラー文字列の明度を変更する方法を探ります。文字列操作、配列メソッド、数学関数を活用することで、明度値を変更しながら、それが0
から100
の有効な範囲内に収まるようにする方法を学びます。このスキルは、ユーザーインタラクションに基づく動的な色操作が必要なWebアプリケーションを開発する際に役立ちます。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、JavaScriptを使ってhsl()
カラー文字列の明度を変更する方法を探ります。文字列操作、配列メソッド、数学関数を活用することで、明度値を変更しながら、それが0
から100
の有効な範囲内に収まるようにする方法を学びます。このスキルは、ユーザーインタラクションに基づく動的な色操作が必要なWebアプリケーションを開発する際に役立ちます。
hsl()
カラー文字列の明度値を変更するには、次の手順に従います。
ターミナル/SSH を開き、コーディングの練習を始めるために node
と入力します。
String.prototype.match()
を使用して、hsl()
文字列から数値を持つ 3 つの文字列を含む配列を取得します。
Array.prototype.map()
を Number
と組み合わせて使用して、文字列を数値の配列に変換します。
Math.max()
と Math.min()
を使用して、明度値が有効な範囲(0
から 100
の間)に収まることを確認します。
テンプレートリテラルを使用して、更新された明度値を持つ新しい hsl()
文字列を作成します。
これらの手順を実装するコードの例を次に示します。
const changeLightness = (delta, hslStr) => {
const [hue, saturation, lightness] = hslStr.match(/\d+/g).map(Number);
const newLightness = Math.max(
0,
Math.min(100, lightness + parseFloat(delta))
);
return `hsl(${hue}, ${saturation}%, ${newLightness}%)`;
};
その後、デルタ値と hsl()
文字列を渡して changeLightness()
関数を呼び出すことで、更新された明度値を持つ新しい hsl()
文字列を取得できます。たとえば:
changeLightness(10, "hsl(330, 50%, 50%)"); // 'hsl(330, 50%, 60%)'
changeLightness(-10, "hsl(330, 50%, 50%)"); // 'hsl(330, 50%, 40%)'
おめでとうございます! あなたは「色の明度を変更する」実験を完了しました。 あなたのスキルを向上させるために、LabExでさらに実験を行って練習してください。