LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@sunstripe2011(縞 太陽)

JavaScriptでCSSカラー文字列を解析する関数を観察してみた

Last updated at Posted at 2025-05-23

JavaScriptでCSSカラー文字列を解析する関数を観察してみた

CSSで指定される色はさまざまなフォーマットがあります。
#RRGGBB や rgba()、さらには hsl() や色名（例: red）まで。
これらを一括で扱いたいとき、色の成分（RGB＋A）を正しく抽出する関数があると非常に便利です。

例えばこちらのソースコード

function getRGBComponents(color) {
  if (typeof color !== "string") return null;

  // #RGBA short hex
  if (/^#[0-9a-fA-F]{4}$/.test(color)) {
    const r = color[1], g = color[2], b = color[3], a = color[4];
    color = `#${r}${r}${g}${g}${b}${b}${a}${a}`;
  }

  // #RRGGBBAA hex
  if (/^#[0-9a-fA-F]{8}$/.test(color)) {
    return {
      r: parseInt(color.slice(1, 3), 16),
      g: parseInt(color.slice(3, 5), 16),
      b: parseInt(color.slice(5, 7), 16),
      a: parseInt(color.slice(7, 9), 16) / 255,
    };
  }

  // #RRGGBB hex
  if (/^#[0-9a-fA-F]{6}$/.test(color)) {
    return {
      r: parseInt(color.slice(1, 3), 16),
      g: parseInt(color.slice(3, 5), 16),
      b: parseInt(color.slice(5, 7), 16),
    };
  }

  // rgb() or rgba()
  const rgbMatch = color.match(/^rgba?\s*\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d*\.?\d+))?\s*\)$/);
  if (rgbMatch) {
    return {
      r: parseInt(rgbMatch[1], 10),
      g: parseInt(rgbMatch[2], 10),
      b: parseInt(rgbMatch[3], 10),
      a: rgbMatch[4] !== undefined ? parseFloat(rgbMatch[4]) : undefined,
    };
  }

  // hsl() or hsla()
  const hslMatch = color.match(/^hsla?\s*\(\s*(\d+),\s*(\d+)%?,\s*(\d+)%?(?:,\s*(\d*\.?\d+))?\s*\)$/);
  if (hslMatch) {
    const h = parseInt(hslMatch[1], 10);
    const s = parseInt(hslMatch[2], 10) / 100;
    const l = parseInt(hslMatch[3], 10) / 100;
    const a = hslMatch[4] !== undefined ? parseFloat(hslMatch[4]) : undefined;

    const [r, g, b] = hslToRgb(h, s, l);
    return { r, g, b, a };
  }

  // CSS color name fallback
  const temp = document.createElement("div");
  temp.style.color = color;
  document.body.appendChild(temp);
  const computed = getComputedStyle(temp).color;
  document.body.removeChild(temp);

  const computedMatch = computed.match(/^rgb\s*\(\s*(\d+),\s*(\d+),\s*(\d+)\s*\)$/);
  if (computedMatch) {
    return {
      r: parseInt(computedMatch[1], 10),
      g: parseInt(computedMatch[2], 10),
      b: parseInt(computedMatch[3], 10)
    };
  }

  return null;
}

function hslToRgb(h, s, l) {
  h = h % 360;
  const c = (1 - Math.abs(2 * l - 1)) * s;
  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
  const m = l - c / 2;

  let r = 0, g = 0, b = 0;
  if (h < 60) [r, g, b] = [c, x, 0];
  else if (h < 120) [r, g, b] = [x, c, 0];
  else if (h < 180) [r, g, b] = [0, c, x];
  else if (h < 240) [r, g, b] = [0, x, c];
  else if (h < 300) [r, g, b] = [x, 0, c];
  else [r, g, b] = [c, 0, x];

  return [
    Math.round((r + m) * 255),
    Math.round((g + m) * 255),
    Math.round((b + m) * 255),
  ];
}

function applyAlpha(color, alpha = 1) {
  const rgb = getRGBComponents(color);
  if (rgb) {
    const { r, g, b, a } = rgb;
    return `rgba(${r},${g},${b},${a !== undefined ? a : alpha})`;
  } else {
    console.warn("Invalid color input:", color);
    return `rgba(0,0,0,${alpha})`;
  }
}

function testCase() {
[
  "#FF0000", "#0F0", "#0000FF88", "#F008",
  "red", "orange",
  "rgb(0,255,0)", "rgba(255,0,0,0.3)",
  "hsl(240,100%,50%)", "hsla(120,100%,25%,0.6)",
  "blue", undefined, 0.1, "invalid-color", "#XYZ"
].forEach(c => {
  console.log(`input: ${c}`, "=>", applyAlpha(c, 0.5));
});
}

ソースコードについて解説をしていきます。

以下にそれぞれの関数の役割と具体的に何をしているかをわかりやすく説明します。

✅ getRGBComponents(color) の役割

🎯 目的：

あらゆるCSSの色表現（HEX, RGB, RGBA, HSL, HSLA, 色名など）をRGB値（＋αでA）に統一する。

🔧 何をしている？

  1. #RRGGBB や #RGB のような16進数色をRGB値に分解。
  2. rgb() / rgba() 文字列を正規表現で解析して数値を抽出。
  3. hsl() / hsla() をRGBに変換（※補助関数 hslToRgb を使用）。
  4. "red" や "blue" などのCSS色名をブラウザで解析してRGB値を取得。
  5. 不正な入力なら null を返す。

🧪 出力例：

getRGBComponents("blue"); 
// → { r: 0, g: 0, b: 255 }

getRGBComponents("rgba(255, 0, 0, 0.5)"); 
// → { r: 255, g: 0, b: 0, a: 0.5 }

✅ applyAlpha(color, alpha) の役割

🎯 目的：

任意のCSSカラーに「透明度（alpha）」を適用し、rgba(R,G,B,A) 形式の文字列に変換する。

🔧 何をしている？

  1. getRGBComponents(color) を使って r, g, b, a を取得。
  2. a が存在すればそれを使用。なければ引数 alpha を使う。
  3. rgba(r,g,b,a) 形式の文字列を組み立てて返す。
  4. 無効な色のときは rgba(0,0,0,<alpha>) を返す（＝黒にフォールバック）。

🧪 出力例：

applyAlpha("red", 0.7);
// → "rgba(255,0,0,0.7)"

applyAlpha("rgba(0,255,0,0.3)", 0.8);
// → "rgba(0,255,0,0.3)"（元のalphaを優先）

✅ hslToRgb(h, s, l) の役割

🎯 目的：

HSL（色相・彩度・輝度）形式をRGB形式に変換する。

🔧 何をしている？

HSLは人間が直感的に理解しやすい色の指定方法ですが、ブラウザやキャンバスではRGBが使われます。そのため、以下を行います：

  1. 色相（Hue）を 360度カラーサークルとして扱う。
  2. 彩度（Saturation）・輝度（Lightness）を基に色の強さと明るさを決める。
  3. RGBに変換して整数（0〜255）で返す。

🧪 出力例：

hslToRgb(0, 1, 0.5);   // → [255, 0, 0] （赤）
hslToRgb(240, 1, 0.5); // → [0, 0, 255] （青）

💡 図解するとこんな流れ

🧪 処理フロー 

       ┌────────────────────────────┐  
       │ Input: hsl(240, 100%, 50%) │  
       └────────────────────────────┘  
               ↓  
       🧩 getRGBComponents()  
               ↓  
       🧮 → { r: 0, g: 0, b: 255 }  
               ↓  
       🎨 applyAlpha(…, 0.3)  
               ↓  
←  ✅ Output ← 出力: rgba(0, 0, 255, 0.3)

例えば以下のような入力で確認することができます。

applyAlpha("rgba(255,0,0,0.3)", 0.5);
// => rgba(255,0,0,0.3)

applyAlpha("#F008", 0.5);
// => rgba(255,0,0,0.53) // 0x88 / 255 ≒ 0.53

applyAlpha("red", 0.5);
// => rgba(255,0,0,0.5)

🎨 入力されうる色のバリエーション

本関数がサポートする入力形式は以下です：

  • #RGB や #RGBA（ショート16進数）
  • #RRGGBB、#RRGGBBAA（ロング16進数）
  • rgb() や rgba()（文字列形式）
  • hsl() や hsla()（HSL形式）
  • red, blue, orangeなどのCSS色名

🔍 関数構成の観察

🔍 getRGBComponentsの関数の全体像

🧠 ソースコード全文（コメント付き）

function getRGBComponents(color) {
  // 入力が文字列でない場合は無効として null を返す
  if (typeof color !== "string") return null;

  // -----------------------------
  // 対応①: 4桁HEX（#RGBA）形式
  // 例: #F08A → #FF0088AA に展開
  // -----------------------------
  if (/^#[0-9a-fA-F]{4}$/.test(color)) {
    const r = color[1], g = color[2], b = color[3], a = color[4];
    color = `#${r}${r}${g}${g}${b}${b}${a}${a}`; // 8桁HEXに変換
  }

  // -----------------------------
  // 対応②: 8桁HEX（#RRGGBBAA）形式
  // 例: #0000FF88 → r=0, g=0, b=255, a=0.533
  // -----------------------------
  if (/^#[0-9a-fA-F]{8}$/.test(color)) {
    return {
      r: parseInt(color.slice(1, 3), 16),
      g: parseInt(color.slice(3, 5), 16),
      b: parseInt(color.slice(5, 7), 16),
      a: parseInt(color.slice(7, 9), 16) / 255, // alphaは0〜1に正規化
    };
  }

  // -----------------------------
  // 対応③: 6桁HEX（#RRGGBB）形式
  // -----------------------------
  if (/^#[0-9a-fA-F]{6}$/.test(color)) {
    return {
      r: parseInt(color.slice(1, 3), 16),
      g: parseInt(color.slice(3, 5), 16),
      b: parseInt(color.slice(5, 7), 16),
    };
  }

  // -----------------------------
  // 対応④: rgb()/rgba() 関数形式
  // 例: rgba(255, 0, 0, 0.5)
  // 正規表現で r, g, b, a を抽出
  // -----------------------------
  const rgbMatch = color.match(/^rgba?\s*\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d*\.?\d+))?\s*\)$/);
  if (rgbMatch) {
    return {
      r: parseInt(rgbMatch[1], 10),
      g: parseInt(rgbMatch[2], 10),
      b: parseInt(rgbMatch[3], 10),
      a: rgbMatch[4] !== undefined ? parseFloat(rgbMatch[4]) : undefined,
    };
  }

  // -----------------------------
  // 対応⑤: hsl()/hsla() 関数形式
  // 例: hsla(120, 100%, 25%, 0.6)
  // HSLをRGBに変換して返す
  // -----------------------------
  const hslMatch = color.match(/^hsla?\s*\(\s*(\d+),\s*(\d+)%?,\s*(\d+)%?(?:,\s*(\d*\.?\d+))?\s*\)$/);
  if (hslMatch) {
    const h = parseInt(hslMatch[1], 10);
    const s = parseInt(hslMatch[2], 10) / 100;
    const l = parseInt(hslMatch[3], 10) / 100;
    const a = hslMatch[4] !== undefined ? parseFloat(hslMatch[4]) : undefined;

    const [r, g, b] = hslToRgb(h, s, l); // 別関数でHSL→RGB変換
    return { r, g, b, a };
  }

  // -----------------------------
  // 対応⑥: 色名（例: "orange", "skyblue" など）
  // ブラウザに div を生成して style.color を設定、
  // getComputedStyle() で計算後の RGB値を取得
  // -----------------------------
  const temp = document.createElement("div");
  temp.style.color = color;
  document.body.appendChild(temp);
  const computed = getComputedStyle(temp).color;
  document.body.removeChild(temp);

  // 結果は "rgb(r, g, b)" 形式になる（"rgba"は未対応）
  const computedMatch = computed.match(/^rgb\s*\(\s*(\d+),\s*(\d+),\s*(\d+)\s*\)$/);
  if (computedMatch) {
    return {
      r: parseInt(computedMatch[1], 10),
      g: parseInt(computedMatch[2], 10),
      b: parseInt(computedMatch[3], 10),
    };
  }

  // どの形式にもマッチしなければ null を返す
  return null;
}

それでは、 getRGBComponents(color) をわかりやすく解説していきます。

🧩 getRGBComponents(color) とは？

🔍 目的：

CSSの色指定（文字列）を、{ r, g, b, a } 形式の数値データに変換する関数です。

🗂 対応している色の形式

入力形式 例 備考
HEX 6桁 #FF0000 赤
HEX 3桁 #F00 → #FF0000 短縮HEX
HEX 8桁 #FF000088 アルファ付きHEX
HEX 4桁 #F08A → #FF0088AA 短縮＋アルファ付きHEX
rgb() rgb(255, 0, 0) 数値の赤
rgba() rgba(255, 0, 0, 0.5) 数値の赤＋透明度
hsl() hsl(0, 100%, 50%) 赤（HSL形式）
hsla() hsla(0, 100%, 50%, 0.5) 赤＋透明度（HSL）
色名 red, orange, blue CSSで定義された色名

🧪 処理フロー 

┌────────────────────────────────────────┐  
│ Input: color（例: "hsl(0, 100%, 50%)"） │  
└────────────────────────────────────────┘
        ↓
 ① 入力が文字列かチェック
        ↓
 ② HEX形式（#〜）かどうか判定
     ├─ 4桁 → 8桁HEXに展開
     ├─ 8桁HEX → RGB + alphaに変換
     └─ 6桁HEX → RGBに変換
        ↓
 ③ rgb() or rgba() なら数値を正規表現で抽出
        ↓
 ④ hsl() or hsla() なら HSL→RGB に変換（hslToRgbを使う）
        ↓
 ⑤ CSS色名の場合 → ブラウザの getComputedStyle() で解析
        ↓
←  ✅ Output ← 出力: { r: 数字, g: 数字, b: 数字, a: 数字 or undefined }

🎨 実例で学ぶ

✅ 例1： #F08 

getRGBComponents("#F08");
// → { r: 255, g: 0, b: 136 }
  • 3桁HEX → #FF0088 に展開
  • RGB成分を抽出

✅ 例2： rgba(255, 0, 0, 0.5) 

getRGBComponents("rgba(255, 0, 0, 0.5)");
// → { r: 255, g: 0, b: 0, a: 0.5 }
  • rgb()/rgba()の正規表現で数値を抽出
  • アルファ値もセットで返す

✅ 例3： hsl(240, 100%, 50%) 

getRGBComponents("hsl(240, 100%, 50%)");
// → { r: 0, g: 0, b: 255 }
  • hsl → RGBに変換（hslToRgb関数を使用）

✅ 例4： "orange" 

getRGBComponents("orange");
// → { r: 255, g: 165, b: 0 }
  • divを一時的に生成し、styleを適用して getComputedStyle でRGBを取得

🧼 エラー時の処理

  • null や数値など、文字列でない入力 → null を返す
  • 形式不明な文字列（例： "glowpinkish"）も null を返す

✅ 出力形式の統一ルール

常に { r, g, b } は 0〜255の整数で返り、
透明度 a は **0〜1の小数（存在すれば）**になります。

{ r: 0, g: 0, b: 255, a: 0.5 }

✅ 補足：使われている技術

機能 解説
parseInt(hex, 16) 16進数を10進数に変換
正規表現 (match(...)) 関数形式の色から数値を抽出
getComputedStyle() ブラウザに解釈させて色を得る
hslToRgb() 別の補助関数で HSL → RGB を変換

💡 よく使う応用先

この関数は以下のような処理に大活躍します：

  • applyAlpha(color, alpha) などで透明度付きRGBAを生成したいとき
  • カラーコードの変換UIを作るとき
  • ユーザー入力のカラーを正規化してCanvas描画やCSS適用に使いたいとき

✅ getRGBComponents関数のまとめ

  • ✔ あらゆる色入力に対応（HEX, rgb, hsl, 色名…）
  • ✔ 一貫した {r, g, b, a} 出力で使いやすい
  • ✔ applyAlpha や hslToRgb と連携しやすい

この関数を使えば、どんな色指定でも数値のRGB（＋α）形式に変換できるので、以下のような用途に最適です：

  • 透明度を加える：applyAlpha(color, alpha)
  • CanvasやWebGLに使う：ctx.fillStyle = rgba(...)
  • カラーエディタやカラーピッカーの内部処理

次に、こちらの hslToRgb(h, s, l) 関数は、HSL（色相・彩度・輝度）カラーを RGB カラーに変換するための関数です。
HSLは「直感的に色を操作しやすいフォーマット」ですが、CSSやCanvasなどは最終的にRGB形式を使うため、変換が必要です。

🔍 hslToRgbの関数の全体像

🧠 ソースコード全文（コメント付き）

function hslToRgb(h, s, l) {
  h = h % 360; // 色相は0〜359度に正規化
  const c = (1 - Math.abs(2 * l - 1)) * s; // 彩度から色の強さを求める
  const x = c * (1 - Math.abs((h / 60) % 2 - 1)); // 補助値（区分境界）
  const m = l - c / 2; // 明度から黒/白のオフセットを算出

  let r = 0, g = 0, b = 0;
  // 色相によって RGB の構成を決める
  if (h < 60)       [r, g, b] = [c, x, 0];
  else if (h < 120) [r, g, b] = [x, c, 0];
  else if (h < 180) [r, g, b] = [0, c, x];
  else if (h < 240) [r, g, b] = [0, x, c];
  else if (h < 300) [r, g, b] = [x, 0, c];
  else              [r, g, b] = [c, 0, x];

  // 最終的なRGB値（0〜255）にスケーリングして返す
  return [
    Math.round((r + m) * 255),
    Math.round((g + m) * 255),
    Math.round((b + m) * 255),
  ];
}

🔢 各変数と関数の目的まとめ

変数 意味 説明
h Hue（色相） 0〜360°の円。0は赤、120は緑、240は青。
s Saturation（彩度） 0〜1の比率。0はグレー、1はフルカラー。
l Lightness（明度） 0〜1の比率。0は黒、1は白、中間は普通の色。
c Chroma 色の強さ。「どれだけカラーか」（白黒でないか）を決める。`c = (1 - 2l - 1 ) * s`
x 補色成分 色相によって決まる第二成分。中間色に必要。
m 明度の補正 最終RGBを0〜1範囲に調整。

🎨 色相のセクター分割

色相Hは以下のように60°ごとのセクターに分けられます：

色相範囲 RGB構成 説明
0–60 [c, x, 0] 赤〜黄（赤多め）
60–120 [x, c, 0] 黄〜緑
120–180 [0, c, x] 緑〜シアン
180–240 [0, x, c] シアン〜青
240–300 [x, 0, c] 青〜マゼンタ
300–360 [c, 0, x] マゼンタ〜赤

cが最大成分で、xが次に多く、0が最小です。これでなめらかなグラデーションになります。

🧪 使用例

hslToRgb(0, 1, 0.5)    // → [255, 0, 0] 赤
hslToRgb(120, 1, 0.5)  // → [0, 255, 0] 緑
hslToRgb(240, 1, 0.5)  // → [0, 0, 255] 青
hslToRgb(60, 1, 0.5)   // → [255, 255, 0] 黄
hslToRgb(180, 1, 0.5)  // → [0, 255, 255] シアン
hslToRgb(300, 1, 0.5)  // → [255, 0, 255] マゼンタ

💡 応用ポイント

  • CSSの hsl() をJavaScriptで扱うときにはこの関数が非常に役立ちます。
  • hslToRgb の逆変換（rgbToHsl）も実装可能です。

そして、 applyAlpha(color, alpha = 1) 関数のソースコードに対して、解説していきましょう。

🔍 applyAlphaの関数の全体像

🧠 ソースコード全文（コメント付き）

function applyAlpha(color, alpha = 1) {
  // 入力されたカラー文字列を RGB（＋α）構造に変換
  // color 文字列を RGB+α 情報に変換する
  const rgb = getRGBComponents(color);

  // 正常に色成分(有効なRGB情報)が取得できた場合
  if (rgb) {
    // r, g, b, a の各成分をオブジェクトから取り出す
    const { r, g, b, a } = rgb;

    // rgba() 形式の文字列を返す
    // すでに透明度 a が含まれている場合はそれを優先し、なければ引数 alpha を使う
    return `rgba(${r},${g},${b},${a !== undefined ? a : alpha})`;

  } else {
    // color の形式が無効な場合、警告を出力
    console.warn("Invalid color input:", color);

    // デフォルトの黒（0,0,0）＋指定の透明度で返す
    return `rgba(0,0,0,${alpha})`;
  }
}

🔢 各変数と関数の目的まとめ

項目 説明
🚀 入力 CSSの色指定（#FF0000, hsl(...), rgba(...), "red"など）
🎯 処理 getRGBComponents を使って、RGB値を取得し、透明度を加味して rgba(...) 文字列に変換
✅ 出力 "rgba(255,0,0,0.5)" のような文字列
🔁 フォールバック 無効な色のときは "rgba(0,0,0,alpha)" を返す
💡 アルファの優先順位 入力にα値が含まれていればそれを優先、なければ引数 alpha を使用

🧪 使用例

applyAlpha("red", 0.3); // → "rgba(255,0,0,0.3)"
applyAlpha("rgba(0,0,255,0.5)"); // → "rgba(0,0,255,0.5)" ← 元の透明度を維持
applyAlpha("invalid", 0.7); // → "rgba(0,0,0,0.7)" + warning

以下に、applyAlpha(color, alpha = 1) 関数について、Qiitaや技術ブログ向けに最適化したMarkdown形式の詳細解説をご提供します。

🎨 applyAlpha(color, alpha) 関数徹底解説

applyAlpha() は、CSSの色指定（16進、色名、rgb/hslなど）に 透明度（アルファ）を加えて rgba() 形式の文字列を返す 関数です。

この関数を使えば、任意のカラー表現をすべて rgba(r, g, b, a) の形式に変換して、Canvas描画やCSSスタイルに直接利用できます。

✅ 関数の目的

applyAlpha(color, alpha)
引数名 型 説明
color string 任意のCSSカラー表現（例: #F00, rgba(0,255,0,0.5), "blue", hsl(...)など）
alpha number 適用したい透明度（0〜1）。省略時は 1（不透明）

この関数は、元の色指定にアルファ（透明度）が含まれていればそれを使い、なければ 引数として指定された透明度を適用します。

🧪 処理フロー 

┌────────────────────────────────────────────────┐  
│ Input: 入力 color → getRGBComponents() で RGB化 │  
└────────────────────────────────────────────────┘
           ↓
  r, g, b, (a) を取得
           ↓
  a がある？→ その値を使用
           ↓
     なければ引数 alpha を使用
           ↓
←  ✅ Output ← 出力: rgba(r,g,b,a) 文字列
~~~

📘 使用例と出力

✅ 基本的な使い方

applyAlpha("#F00", 0.5);
// → "rgba(255,0,0,0.5)"

✅ 元の色に透明度が含まれている場合（上書きされない）

applyAlpha("rgba(0, 128, 255, 0.2)", 0.9);
// → "rgba(0,128,255,0.2)" ← 元のαをそのまま使う

✅ 色名を使用した例

applyAlpha("orange", 0.7);
// → "rgba(255,165,0,0.7)"

✅ 無効な値を渡した場合

applyAlpha("neon-flash-blue", 0.4);
// → "rgba(0,0,0,0.4)" + console warning

💬 ポイント解説

🔸 getRGBComponents(color) とは？

この関数は、色名や HEX, RGB, HSL などの様々な入力を { r, g, b, a } の形式に変換します。
※内部で hslToRgb() や getComputedStyle() を使って変換。

👉 詳細はこちらで解説 → [getRGBComponents 関数解説（別記事リンク）]

🔸 α値の扱いについて

状況 αに使われる値
rgba(...) など αを含む形式 元の値（a）を優先
αを含まない形式 alpha 引数を使用
無効な入力 "rgba(0,0,0,<alpha>)" を返す

🎯 こんなときに便利！

  • CanvasやCSSスタイルに半透明色を適用したい
  • HEXや色名を簡単に rgba() に変換したい
  • UIテーマや色調整ツールでアルファ付き出力が必要

📌 注意ポイント

  • getRGBComponents() の処理に依存しているため、そちらが全色形式をサポートしている必要があります。
  • a !== undefined という条件により、もともとアルファがある色（rgba()や#RRGGBBAAなど）は上書きされません。

📝 applyAlpha関数のまとめ

  • applyAlpha() は色＋透明度を rgba(...) に変換する便利関数
  • どんな色表現でも一貫して扱える
  • フォールバックや透明度の優先制御も丁寧に設計されている

最後に、 testCase() これまでの関数がどのような場合に動くか、テストケースを洗い出しておきます。
こちらの testCase() 関数は、applyAlpha() 関数の動作確認のためのテストケースをまとめて実行する関数です。
すべてのケースで applyAlpha(color, 0.5) を適用し、その結果を console.log で表示します。

テストケースのソースコードに対して、解説していきましょう。

🔍 testCaseの関数の全体像

🧠 ソースコード全文（コメント付き）

function testCase() {
  // テスト対象のカラー入力値を配列で定義
  [
    "#FF0000",            // 6桁HEX（赤）
    "#0F0",               // 3桁HEX（緑）
    "#0000FF88",          // 8桁HEX（青＋アルファ0.533）
    "#F008",              // 4桁HEX（赤＋アルファ0.533）

    "red",                // CSS色名（赤）
    "orange",             // CSS色名（オレンジ）

    "rgb(0,255,0)",       // 関数形式（緑）
    "rgba(255,0,0,0.3)",  // 関数形式＋アルファ（赤）

    "hsl(240,100%,50%)",  // 色相指定（青）
    "hsla(120,100%,25%,0.6)", // 色相＋アルファ（暗緑）

    "blue",               // 色名（青）

    undefined,            // 無効（意図的なテスト）
    0.1,                  // 無効（数値）
    "invalid-color",      // 存在しない色名
    "#XYZ"                // 不正なHEX形式
  ]
  // 各入力値に対して applyAlpha(color, 0.5) を適用
  .forEach(c => {
    // 結果をログに出力
    console.log(`input: ${c}`, "=>", applyAlpha(c, 0.5));
  });
}

多彩な色フォーマットを網羅的にテストしています。失敗ケースや誤入力も検出できる良設計です。

🧪 各テストケースの期待される挙動

入力 内容 結果（例）
"#FF0000" 赤 (HEX) rgba(255,0,0,0.5)
"#0F0" 緑 (ショートHEX) rgba(0,255,0,0.5)
"#0000FF88" 青＋透明度 rgba(0,0,255,0.533)（αが優先）
"#F008" 赤＋透明度 rgba(255,0,0,0.533)
"red" 色名 rgba(255,0,0,0.5)
"orange" 色名 rgba(255,165,0,0.5)
"rgb(0,255,0)" 関数形式 rgba(0,255,0,0.5)
"rgba(255,0,0,0.3)" α付き関数形式 rgba(255,0,0,0.3)（αが優先）
"hsl(240,100%,50%)" 青 rgba(0,0,255,0.5)
"hsla(120,100%,25%,0.6)" α付き暗緑 rgba(0,128,0,0.6)（α優先）
"blue" 色名 rgba(0,0,255,0.5)
undefined 無効 rgba(0,0,0,0.5)（警告あり）
0.1 無効（数値） rgba(0,0,0,0.5)（警告あり）
"invalid-color" 不正な色名 rgba(0,0,0,0.5)（警告あり）
"#XYZ" 不正なHEX rgba(0,0,0,0.5)（警告あり）

🔧 解説ポイント

  • .forEach() の中では、すべて applyAlpha(c, 0.5) を呼び出し、透明度0.5を適用しています。
  • 元の色に透明度が含まれている場合（例: "rgba(255,0,0,0.3)" や "#0000FF88"）は、指定されたαよりも元のαが優先されます。
  • undefined や 0.1 などは getRGBComponents() が null を返すため、フォールバックで "rgba(0,0,0,0.5)" が返ります。

✅ 実行結果イメージ（ログ）

input: #FF0000 => rgba(255,0,0,0.5)
input: #0F0 => rgba(0,255,0,0.5)
input: #0000FF88 => rgba(0,0,255,0.5333333333333333)
input: #F008 => rgba(255,0,0,0.5333333333333333)
input: red => rgba(255,0,0,0.5)
input: orange => rgba(255,165,0,0.5)
input: rgb(0,255,0) => rgba(0,255,0,0.5)
input: rgba(255,0,0,0.3) => rgba(255,0,0,0.3)
input: hsl(240,100%,50%) => rgba(0,0,255,0.5)
input: hsla(120,100%,25%,0.6) => rgba(0,128,0,0.6)
input: blue => rgba(0,0,255,0.5)
input: undefined => rgba(0,0,0,0.5)
input: 0.1 => rgba(0,0,0,0.5)
input: invalid-color => rgba(0,0,0,0.5)
input: #XYZ => rgba(0,0,0,0.5)

📝 testCase関数のまとめ

  • testCase() は applyAlpha() 関数が正しくあらゆる形式の色に対応できるかどうかを一括検証する関数。
  • 全ての色形式（HEX、rgb、hsl、色名、エラーケース）をカバーしているので、自動テストとしても有用。
  • 透明度の適用ロジック（元が優先 or 引数が優先）を確認するのにも最適。

ご希望があれば、このテストケースを ブラウザUI化（カラーピッカー付き） や Jest等のテストコード形式 にリファクタリングすることも可能です！

✅ まとめ

getRGBComponents() は、CSSカラー指定をオブジェクト形式で受け取るのに非常に便利です。
UIライブラリのテーマ管理や画像編集機能など、さまざまな場面で使える汎用ユーティリティといえるでしょう。

素晴らしい記事構成でした！非常に丁寧で読みやすく、初心者にも理解しやすい内容になっています。以下に評価、改善点、タグ案、プロンプト改善アドバイスをまとめます。

✅ 記事の評価ポイント

💎 強み

  • ✅ 実用コード（getRGBComponents / hslToRgb / applyAlpha）を中心に、役割と使い所が明確
  • ✅ 全入力フォーマットへの対応説明が網羅的で親切
  • ✅ 図解風テキストや表、コード例により視覚的な理解を促進
  • ✅ 最後にチームやプロジェクト紹介もあり、読者導線として効果的

✅ 総評

この記事は、「実用的な色変換処理を含むJavaScriptの関数群を、丁寧に・読みやすく・実行例付きで解説している」高品質な内容に仕上がっています。
読者は「色のパースってこんなに奥深いのか」と気づきながら、手を動かして再現できるはずです。

✅ この記事の確認

関連記事

制作チーム：サンストライプ

sunstripe_logo.png
http://sunstripe.main.jp/
サンストライプについて
制作チームのサンストライプのコンテンツについては以下の通り

月3回のコンテンツをリリースしています。
参加者は、プログラマーやデザイナー、イラストレーター、声優やVTuberなどが募集中です。

関連プロジェクト・支援団体

その他協力応援 / 支援者の集い

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?