JavaScriptで16進数をマスター！7つのサンプルコードと使い方

はじめに
●JavaScriptと16進数とは
- ○16進数の基本
●16進数の使い方
●16進数の応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptで16進数を使いこなす方法が身につくでしょう。

7つのサンプルコードを通じて、16進数の使い方、注意点、カスタマイズ方法を初心者にもわかりやすく解説します。

●JavaScriptと16進数とは

16進数は、0～9の数字とA～Fのアルファベットを組み合わせた数値表現で、特にコンピュータ分野で広く使われています。

JavaScriptでも16進数はよく利用されるため、その扱い方を理解しておくことは重要です。

○16進数の基本

16進数は、10進数と同じように数値を表現する方法ですが、基数が16になるため、0～9の数字とA～Fのアルファベットで表されます。

例えば、10進数で15を表す場合、16進数ではFになります。

●16進数の使い方

JavaScriptで16進数を扱う方法はいくつかありますが、ここでは4つの基本的な使い方をサンプルコードとともに紹介します。

○サンプルコード1：10進数を16進数に変換する

このコードでは、10進数の数値を16進数に変換する方法を紹介します。

この例では、10進数の255を16進数に変換しています。

const decNum = 255;
const hexNum = decNum.toString(16);
console.log(hexNum); // 出力: "ff"

○サンプルコード2：16進数を10進数に変換する

このコードでは、16進数の数値を10進数に変換する方法を紹介します。

この例では、16進数の”ff”を10進数に変換しています。

const hexNum = "ff";
const decNum = parseInt(hexNum, 16);
console.log(decNum); // 出力: 255

○サンプルコード3：16進数カラーコードをRGBに変換する

このコードでは、16進数のカラーコードをRGB形式に変換する方法を紹介します。

この例では、16進数の”#ff0000″をRGB形式に変換しています。

function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return { r, g, b };
}

const hexColor = "#ff0000";
const rgbColor = hexToRgb(hexColor);
console.log(rgbColor); // 出力: { r: 255, g: 0, b: 0 }

○サンプルコード4：RGBカラーコードを16進数に変換する

このコードでは、RGB形式のカラーコードを16進数に変換する方法を紹介しています。

この例では、RGB形式の{ r: 255, g: 0, b: 0 }を16進数に変換しています。

function rgbToHex(r, g, b) {
  const hexR = r.toString(16).padStart(2, "0");
  const hexG = g.toString(16).padStart(2, "0");
  const hexB = b.toString(16).padStart(2, "0");
  return "#" + hexR + hexG + hexB;
}

const rgbColor = { r: 255, g: 0, b: 0 };
const hexColor = rgbToHex(rgbColor.r, rgbColor.g, rgbColor.b);
console.log(hexColor); // 出力: "#ff0000"

●16進数の応用例

16進数は、さまざまな応用例があります。

ここでは、乱数生成、計算、暗号化・復号化についてサンプルコードとともに解説します。

○サンプルコード5：16進数で乱数を生成する

このコードでは、16進数で表現された乱数を生成する方法を紹介しています。

この例では、16進数で8桁の乱数を生成しています。

function generateRandomHex(length) {
  const characters = "0123456789abcdef";
  let result = "";
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * characters.length);
    result += characters.charAt(randomIndex);
  }
  return result;
}

const randomHex = generateRandomHex(8);
console.log(randomHex); // 例: "1a2b3c4d"

○サンプルコード6：16進数の計算を行う

このコードでは、16進数同士の加算を行う方法を紹介しています。

この例では、16進数の”1a”と”0f”を加算しています。

function hexAddition(hex1, hex2) {
  const dec1 = parseInt(hex1, 16);
  const dec2 = parseInt(hex2, 16);
  const sum = dec1 + dec2;
  return sum.toString(16);
}

const hex1 = "1a";
const hex2 = "0f";
const hexSum = hexAddition(hex1, hex2);
console.log(hexSum); // 出力: "29"

○サンプルコード7：16進数を利用した暗号化・復号化

このコードでは、16進数を利用して文字列を暗号化および復号化する方法を紹介しています。

この例では、”Hello, world!”という文字列を暗号化して、その後復号化しています。

function encrypt(text) {
  let encryptedText = "";
  for (let i = 0; i < text.length; i++) {
    encryptedText += text.charCodeAt(i).toString(16);
  }
  return encryptedText;
}

function decrypt(encryptedText) {
  let decryptedText = "";
  for (let i = 0; i < encryptedText.length; i += 2) {
    decryptedText += String.fromCharCode(parseInt(encryptedText.slice(i, i + 2), 16));
  }
  return decryptedText;
}

const originalText = "Hello, world!";
const encryptedText = encrypt(originalText);
console.log(encryptedText); // 例: "48656c6c6f2c20776f726c64"
const decryptedText = decrypt(encryptedText);
console.log(decryptedText); // 出力: "Hello, world!"