JavaScriptで10進数を16進数に変換する方法をわかりやすく解説

JavaScriptでは、数値クラスが持つ toString メソッドを使うことで、10進数の数値を簡単に16進数の文字列へ変換できます。toString メソッドは基数（base）を引数として受け取るため、基数に「16」を指定すれば、その数値を16進数表記の文字列として取得できます。

toStringメソッドで10進数から16進数へ変換する例

console.log(Number(255).toString(16))
console.log(Number(17).toString(16))

出力結果

ff
11

このように、255 は ff、17 は 11 という16進数の文字列に変換されます。

parseInt関数で16進数から10進数へ戻す方法

変換した16進数を再び10進数に戻したい場合は、JavaScript標準の parseInt 関数を使用します。この関数は次のようなシグネチャを持っています。

parseInt(string, radix);

各パラメータの意味は以下のとおりです。

string ― 解析対象となる値です。この引数が文字列でない場合は、ToString 抽象操作によって文字列に変換されます。また、先頭の空白文字は無視されます。

radix ― 文字列の基数（数学における記数法の底）を表す、2から36までの整数です。16進数を解析する場合は「16」を指定します。

つまり、このメソッドを使えば、2進数から36進数までの任意の基数で表された文字列を整数へ変換できます。

parseInt関数で16進数を10進数に変換する例

console.log(parseInt("ff", 16))
console.log(parseInt("11", 16))

出力結果

255
17

このように、toString(16) と parseInt(str, 16) を組み合わせることで、10進数と16進数を相互に自由に変換できます。カラーコードの処理やデータのエンコード・デコードなど、実務でもよく使われるテクニックなので、ぜひ覚えておきましょう。