JavaScriptでエンコードを学ぶ

これはなに

今更ながらエンコードってなに??ってなったのでJavaScriptで試しながら学んでみた。
これはその時のメモを備忘録的にまとめたもの。

エンコードとは

データを他の形式へ変換すること。
ポイントは、意味を変えずに形式を変換する点。

参考: エンコードとは

身近なエンコード例

Google 検索で日本語を打ち込んで検索するとエンコードされる。
これは URL はアルファベットのみが許可されおり、日本語を含めることができないからである。
そのため日本語を入れると、アルファベットの組み合わせに変換（URL エンコード）される。

参考: URL エンコードとは

JavaScript でエンコードする

TextEncoder

概要

文字列を UTF-8 形式のバイト配列（Uint8Array）にエンコードするための Web API。

参考: UTF-8 とは

早速使ってみる。

const encoded = new TextEncoder().encode("あ");

console.log(encoded); // 227,129,130

const decoded = new TextDecoder().decode(encoded);

console.log(decoded); // あ

使い所

• ネットワーク通信：テキストデータをバイナリ形式で送信するため
• ファイル操作：テキストデータをバイナリファイルとして保存するため
• 暗号化：テキストデータを暗号化アルゴリズムに入力するため

今回は暗号化の一例として JavaScript で SHA-256 を生成する例を取り上げる。

SHA-256 の生成

SHA-256 を生成するコードは次のように書ける。

参考: SHA-256とは

async function sha256(message: string): Promise<string> {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);

  const hashBuffer = await crypto.subtle.digest("SHA-256", data);

  // Uint8Arrayを使用してバッファをバイト配列に変換
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  const hashHex = hashArray
    .map((b) => b.toString(16).padStart(2, "0"))
    .join("");

  return hashHex;
}

hello を SHA-256 に変換して出力すると次のようになる。

const input = "hello";
sha256(input).then((v) => {
    console.log(v); // 2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824
});

まとめ

ほかにもURIのエンコードをやってくれるencodeURI()ってのもあった。
エンコードについて勉強してると文字コードの話も出てきたのでいつかまとめたい。