色の明度を変更する

JavaScriptJavaScriptBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、JavaScriptを使ってhsl()カラー文字列の明度を変更する方法を探ります。文字列操作、配列メソッド、数学関数を活用することで、明度値を変更しながら、それが0から100の有効な範囲内に収まるようにする方法を学びます。このスキルは、ユーザーインタラクションに基づく動的な色操作が必要なWebアプリケーションを開発する際に役立ちます。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("Template Literals") subgraph Lab Skills javascript/variables -.-> lab-28193{{"色の明度を変更する"}} javascript/data_types -.-> lab-28193{{"色の明度を変更する"}} javascript/arith_ops -.-> lab-28193{{"色の明度を変更する"}} javascript/comp_ops -.-> lab-28193{{"色の明度を変更する"}} javascript/higher_funcs -.-> lab-28193{{"色の明度を変更する"}} javascript/template_lit -.-> lab-28193{{"色の明度を変更する"}} end

HSL カラーの明度を変更する方法

hsl() カラー文字列の明度値を変更するには、次の手順に従います。

  1. ターミナル/SSH を開き、コーディングの練習を始めるために node と入力します。

  2. String.prototype.match() を使用して、hsl() 文字列から数値を持つ 3 つの文字列を含む配列を取得します。

  3. Array.prototype.map()Number と組み合わせて使用して、文字列を数値の配列に変換します。

  4. Math.max()Math.min() を使用して、明度値が有効な範囲(0 から 100 の間)に収まることを確認します。

  5. テンプレートリテラルを使用して、更新された明度値を持つ新しい 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でさらに実験を行って練習してください。