JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのTextEncoderとTextDecoderとは？文字列とバイト列の相互変換をわかりやすく解説

JavaScriptでは、文字列とバイト列（バイナリデータ）を相互に変換したい場面がよくあります。そんなときに活躍するのが、TextEncoderとTextDecoderという2つの標準組み込みAPIです。本記事では、それぞれの役割と基本的な使い方を、実際に動くサンプルコードとともに解説します。

TextEncoderとは

TextEncoderは、指定した文字列をUTF-8形式に変換（エンコード）するためのオブジェクトです。encode()メソッドに文字列を渡すと、変換結果がUint8Array（符号なし8ビット整数の配列）として返されます。

TextDecoderとは

TextDecoderは、バイト列のストリームをコードポイントのストリームへ変換（デコード）するためのオブジェクトです。デフォルトではUTF-8が使われ、オプションを指定すればISO-8859-2、KOI8-R、GBKなど、さまざまな文字エンコーディングにも対応できます。

サンプルコード

以下は、JavaScriptでTextEncoderとTextDecoderを使う例です。「ENCODE STRING」ボタンで文字列をエンコードし、「Decode STRING」ボタンでバイト列をデコードして画面に表示します。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>TextDecoder and TextEncoder in Javascript</h1>
<div class="sample"></div>
<button class="Btn">ENCODE STRING</button>
<div class="result"></div>
<h3>Click on the above button to encode the above string</h3>
<div class="sample"></div>
<button class="Btn">Decode STRING</button>
<div class="result"></div>
<h3>Click on the above button to decode the above string</h3>
<script>
    let BtnEle = document.querySelectorAll(".Btn");
    let sampleEle = document.querySelectorAll(".sample");
    let resEle = document.querySelectorAll(".result");
    let str = "Hello world";
    let str1 = new Uint8Array([119, 111, 114, 108, 100]);
    sampleEle[0].innerHTML = str;
    sampleEle[1].innerHTML = str1;
    BtnEle[0].addEventListener("click", () => {
        let textEncoder = new TextEncoder();
        resEle[0].innerHTML += "Encoded String = " + textEncoder.encode(str) + "<br>";
    });
    BtnEle[1].addEventListener("click", () => {
        let textDecoder = new TextDecoder();
        resEle[1].innerHTML += "Decoded String = " + textDecoder.decode(str1) + "<br>";
    });
</script>
</body>
</html>

出力結果

上記のコードをブラウザで開くと、まず次のような初期画面が表示されます。

JavaScriptのTextEncoderとTextDecoderとは？文字列とバイト列の相互変換をわかりやすく解説

「ENCODE STRING」ボタンをクリックすると、文字列「Hello world」がUTF-8のバイト列（Uint8Array）にエンコードされて表示されます。

JavaScriptのTextEncoderとTextDecoderとは？文字列とバイト列の相互変換をわかりやすく解説

続いて「Decode STRING」ボタンをクリックすると、用意しておいたバイト列が元の文字列「world」にデコードされて表示されます。

JavaScriptのTextEncoderとTextDecoderとは？文字列とバイト列の相互変換をわかりやすく解説

まとめ

  • TextEncoder：文字列 → Uint8Array（UTF-8バイト列）への変換に使用する
  • TextDecoder：バイト列 → 文字列への変換に使用する（UTF-8をはじめ、多数のエンコーディングに対応）

どちらもモダンなブラウザやNode.js環境で標準的に利用できるAPIです。テキストデータとバイナリデータの相互変換が必要な場面、たとえばファイル操作、通信処理、文字コード変換などでぜひ活用してみてください。

  1. JavaScriptで文字列を真偽値（Boolean）に変換する方法

    JavaScriptでは、文字列が「true」というリテラルと一致するかどうかを比較演算子で判定することで、文字列を実質的に真偽値（Boolean）として扱うことができます。ここでは、==（緩い等価比較）と===（厳密等価比較）の2つの方法を使った具体例を紹介します。 サンプルコード <!DOCTYPE html> <html> <head> <style>     body {         font-family: &

  2. 【初心者向け】JavaScriptのFileとFileReaderを使ってファイルを読み込む方法

    JavaScriptにおけるFileとFileReaderとは？ JavaScriptでは、<input type=file>要素を使うことで、ユーザーにローカルファイルを選択させることができます。選択されたファイルはFileオブジェクトとして取得でき、ファイル名・サイズ・MIMEタイプなどの基本情報へアクセス可能です。 さらに、FileReaderオブジェクトを利用すれば、選択されたファイルの中身を非同期で読み込み、テキストやデータURLとして扱うことができます。 サンプルコード 以下は、JavaScriptでFileとFileReaderを使用して、ファイルの詳細情報を表示し