• はじめに
• 10進数から16進数への変換
• 16進数から10進数への変換
• 大文字と小文字の違い
• エラーハンドリング
• 応用例
• まとめ

はじめに

JavaScriptでは、数値の基数（進数）を簡単に変換することができます。特に10進数（decimal）と16進数（hexadecimal）の相互変換はよく使用されます。この記事では、JavaScriptで10進数を16進数に変換する方法、逆に16進数を10進数に変換する方法、エラーハンドリング、実用例まで詳しく解説します。

10進数から16進数への変換

JavaScriptで10進数を16進数に変換するには、toString(16) を使います。

基本的な例

let decimalNumber = 255;
let hexString = decimalNumber.toString(16);
console.log(hexString); // "ff"

ゼロ埋め（0埋め）をする場合

16進数の表記で2桁以上を保証したい場合、padStart() を使います。

let decimalNumber = 5;
let hexString = decimalNumber.toString(16).padStart(2, '0');
console.log(hexString); // "05"

16進数から10進数への変換

JavaScriptで16進数を10進数に変換するには、parseInt(文字列, 基数) を使います。

基本的な例

let hexString = "ff";
let decimalNumber = parseInt(hexString, 16);
console.log(decimalNumber); // 255

「0x」付きの16進数を変換

JavaScriptでは、数値を「0x」で始めると16進数とみなされます。

let decimalNumber = 0xff;
console.log(decimalNumber); // 255

大文字と小文字の違い

JavaScriptでは、16進数のアルファベット部分（A～F）は大文字・小文字のどちらでも使用可能です。

小文字での変換

let decimalNumber = 255;
let hexString = decimalNumber.toString(16);
console.log(hexString); // "ff"

大文字での変換

let decimalNumber = 255;
let hexString = decimalNumber.toString(16).toUpperCase();
console.log(hexString); // "FF"

エラーハンドリング

変換時に無効な値が渡された場合、NaN（Not a Number）が返されることがあります。

無効な文字列を変換しようとした場合

let invalidHex = "G1"; // Gは16進数に存在しない
let decimalNumber = parseInt(invalidHex, 16);
console.log(decimalNumber); // NaN

エラーを防ぐ方法

isNaN() を使って、NaN かどうかを確認できます。

let input = "G1";
let decimalNumber = parseInt(input, 16);
if (isNaN(decimalNumber)) {
    console.log("無効な16進数です");
} else {
    console.log(decimalNumber);
}

応用例

RGBカラーの変換

RGBカラーを16進数表記に変換する例です。

function rgbToHex(r, g, b) {
    return "#" + 
        r.toString(16).padStart(2, '0') +
        g.toString(16).padStart(2, '0') +
        b.toString(16).padStart(2, '0');
}

console.log(rgbToHex(255, 99, 71)); // "#ff6347"

16進数のRGBを10進数に変換

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

console.log(hexToRgb("#ff6347")); // {r: 255, g: 99, b: 71}

数値を16進数で出力するデバッグ用関数

function debugHex(value) {
    console.log("0x" + value.toString(16).toUpperCase());
}

debugHex(255); // "0xFF"

まとめ

• JavaScriptでは toString(16) で10進数を16進数に変換できる
• parseInt(文字列, 16) で16進数を10進数に変換できる
• 大文字・小文字は区別しないが、大文字にしたい場合は toUpperCase() を使う
• 無効な入力には isNaN() を使ってエラーチェックできる
• RGB変換など、実用的なシナリオでも活用できる