JavaScriptでのHexカラーからRGBAへの変換方法

方法1: 正規表現を使用する方法

function hexToRGBA(hex) {
  // Hexカラーコードを正規表現で分解
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  // 分解した値を10進数に変換してRGBA形式で返す
  return result ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, 1)` : null;
}
// 使用例
const hexColor = "#ff0000";
const rgbaColor = hexToRGBA(hexColor);
console.log(rgbaColor); // 結果: "rgba(255, 0, 0, 1)"

方法2: parseIntを使用する方法

function hexToRGBA(hex) {
  // Hexカラーコードを10進数に変換
  const red = parseInt(hex.slice(1, 3), 16);
  const green = parseInt(hex.slice(3, 5), 16);
  const blue = parseInt(hex.slice(5, 7), 16);
  // RGBA形式で返す
  return `rgba(${red}, ${green}, ${blue}, 1)`;
}
// 使用例
const hexColor = "#00ff00";
const rgbaColor = hexToRGBA(hexColor);
console.log(rgbaColor); // 結果: "rgba(0, 255, 0, 1)"

方法3: ES6の分割代入を使用する方法

function hexToRGBA(hex) {
  // Hexカラーコードを10進数に変換
  const [, red, green, blue] = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  // RGBA形式で返す
  return `rgba(${parseInt(red, 16)}, ${parseInt(green, 16)}, ${parseInt(blue, 16)}, 1)`;
}
// 使用例
const hexColor = "#0000ff";
const rgbaColor = hexToRGBA(hexColor);
console.log(rgbaColor); // 結果: "rgba(0, 0, 255, 1)"

これらの方法を使用して、HexカラーコードをRGBA形式に変換することができます。選択した方法によってコードを実装してください。