JavaScriptでUTF-8へ変換する方法：TextEncoderとBufferの使い分け

2026年5月27日

ファイル操作

現代のウェブ開発において、文字コードの扱いは避けて通れない重要なテーマの一つです。

特にJavaScriptで多言語対応や外部APIとの通信を行う際、UTF-8への変換は必須のスキルとなります。

かつてのJavaScript環境では、文字コード変換に外部ライブラリを頼るケースが多く見られました。

しかし現在は、ブラウザ標準のAPIやNode.jsの組み込み機能によって、非常に効率的な変換が可能になっています。

本記事では、JavaScriptで文字列をUTF-8に変換する際の主要な手法である「TextEncoder」と「Buffer」について、それぞれの特徴と具体的な使い分けを詳しく解説します。

目次 [ close ]

UTF-8変換が必要になる背景

JavaScriptの内部では、文字列は基本的にUTF-16という形式で管理されています。

一方で、インターネット上のデータのやり取りやファイルの保存形式としては、UTF-8が世界標準のデファクトスタンダードとして広く普及しています。

例えば、ブラウザからFetch APIを使用してバイナリデータを送信する場合や、サーバーサイドでファイルを書き出す場合には、UTF-16からUTF-8への変換が必要です。

この変換を正しく行わないと、マルチバイト文字である日本語が文字化けしたり、バイナリデータとして正しく解釈されなかったりするトラブルが発生します。

2026年現在のモダンな開発環境では、ブラウザでもサーバー（Node.js/Bun/Deno）でも共通して使えるAPIが増えており、環境に依存しない実装が求められています。

標準API：TextEncoderを利用した変換

ブラウザ環境で最も推奨されるのが、TextEncoder APIを使用する方法です。

TextEncoderは、文字列を入力として受け取り、その文字列をUTF-8でエンコードしたバイト配列を返します。

TextEncoderの基本的な使い方

TextEncoderはインスタンス化して使用する非常にシンプルなAPIです。

以下のコードは、日本語の文字列をUTF-8のUint8Arrayに変換する例です。

JavaScript

// TextEncoderのインスタンスを作成
const encoder = new TextEncoder();

// 変換したい文字列を定義
const text = "こんにちは、JavaScript";

// encodeメソッドを使用してUTF-8のバイト配列に変換
const uint8Array = encoder.encode(text);

// 結果を確認
console.log(uint8Array);
console.log("バイト長:", uint8Array.length);

実行結果

Uint8Array(27) [
  227, 129, 147, 227, 130, 147, 227, 129, 171, 227, 129, 161, 227, 129, 175,  44, 
   74,  97, 118,  97,  83,  99, 114, 105, 112, 116
]
バイト長: 27

TextEncoderは、デフォルトでUTF-8のみをサポートしている点が特徴です。

他のエンコーディングを指定することはできませんが、Webの標準仕様に沿っているため、特殊な用途を除けばこれで十分です。

TextEncoderのメリット

TextEncoderを使用する最大の利点は、ウェブ標準であるため環境を選ばないことです。

Chrome、Edge、Safari、Firefoxなどの主要ブラウザはもちろん、Node.js環境でもグローバルオブジェクトとして利用可能です。

また、返り値がUint8Arrayであるため、WebAssemblyとのデータのやり取りや、Canvas APIでのピクセル操作など、他のバイナリ操作APIとの親和性が非常に高いのも魅力です。

Node.js環境：Bufferを利用した変換

サーバーサイドJavaScriptの代表格であるNode.jsでは、伝統的にBufferオブジェクトが文字コード変換を担ってきました。

BufferはNode.js特有のクラスであり、バイナリデータを高速かつ柔軟に扱うために設計されています。

Buffer.fromによる変換

Bufferを使用して文字列をUTF-8に変換するには、Buffer.from()メソッドを使用します。

第二引数にエンコーディング形式（デフォルトが’utf8’）を指定することで、直感的に変換が行えます。

JavaScript

// Node.js環境でのBufferを使用した変換
const text = "JavaScriptの文字コード変換";

// 文字列からUTF-8のBufferを作成
const buf = Buffer.from(text, 'utf8');

// 結果の出力
console.log(buf);
console.log("サイズ（バイト）:", buf.length);

// 16進数文字列として表示
console.log(buf.toString('hex'));

実行結果

<Buffer 4a 61 76 61 53 63 72 69 70 74 e3 81 ae e6 96 87 e5 ad 97 e3 82 b3 e3 83 bc e3 83 89 e5 a4 89 e6 8f db>
サイズ（バイト）: 35
4a617661536372697074e381aee69687e5ad97e382b3e383bce3838de5a489e68fdb

Node.jsのBufferは、Uint8Arrayを継承しているため、TextEncoderの結果と同様に扱うことも可能です。

Bufferのメリットと特徴

Bufferの強みは、UTF-8以外にも「ascii」「base64」「hex」「latin1」など、多彩なエンコーディングをサポートしている点にあります。

バイナリデータをBase64形式の文字列に変換したり、その逆を行ったりする処理がメソッド一つで完結します。

また、Node.jsのファイルシステム操作（fsモジュール）やネットワーク通信（netモジュール）では、Bufferが標準のデータ型として採用されています。

そのため、サーバーサイドに特化したロジックを書く場合には、Bufferを利用した方がコードが簡潔になる傾向があります。

TextEncoderとBufferの徹底比較

どちらの機能を使うべきか迷った際のために、主要な項目の違いを以下の表にまとめました。

比較項目	TextEncoder	Buffer (Node.js)
主な実行環境	ブラウザ / Node.js / Deno / Bun	Node.js / Bun
対応エンコード	UTF-8 のみ	UTF-8 / Base64 / Hex / ASCII等
返り値の型	Uint8Array	Buffer (Uint8Arrayのサブクラス)
標準化の状況	WHATWG Living Standard	Node.js 独自仕様

基本的には、ユニバーサルなJavaScript（フロント・バック両方で動くコード）を目指すならTextEncoderが最適です。

一方で、Node.js専用のツールや、Base64への変換が頻繁に発生するバックエンド処理ではBufferが優位となります。

実践的な応用：巨大なデータのUTF-8変換

数百メガバイトを超えるような巨大な文字列を一度にUTF-8へ変換する場合、メモリ消費量が問題となることがあります。

そのようなケースでは、一括変換ではなくストリーム処理を検討する必要があります。

TextEncoderStreamの活用

モダンなブラウザやNode.jsでは、TextEncoderStreamというAPIが利用可能です。

これを利用すると、流れてくる文字列データを順次UTF-8のバイナリデータとして変換し、パイプライン経由で転送できます。

JavaScript

// ストリームを利用した変換例
const textStream = new ReadableStream({
  start(controller) {
    controller.enqueue("巨大なデータを");
    controller.enqueue("分割して送信します。");
    controller.close();
  }
});

// TextEncoderStreamをパイプで繋ぐ
const byteStream = textStream.pipeThrough(new TextEncoderStream());

// 変換されたチャンクを読み取る
const reader = byteStream.getReader();
async function read() {
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    console.log("変換されたチャンク:", value);
  }
}
read();

ストリーム処理を導入することで、メモリ負荷を最小限に抑えながら変換処理を完結させることができます。

これはクラウドネイティブな環境や、リソースが制限されたエッジコンピューティングにおいて非常に有効なテクニックです。

パフォーマンスに関する留意点

高頻度で変換を行うループ処理などでは、インスタンスの生成コストにも注目すべきです。

new TextEncoder()をループの中で毎回呼び出すのではなく、一度作成したインスタンスを再利用するようにしましょう。

また、ごく短い文字列の変換においては、TextEncoderよりもBufferの方がNode.js上では高速な場合もあります。

しかし、近年のJavaScriptエンジンの最適化により、その差は実務上無視できるレベルまで縮まっています。

パフォーマンスを極限まで追求する必要がない限り、コードの可読性と互換性を優先して選択することをお勧めします。

よくあるエラーとトラブルシューティング

UTF-8変換時に遭遇しやすい問題の一つに、サロゲートペアの扱いや不正な文字列入力があります。

TextEncoderは不正なサロゲートペア（不完全な絵文字など）を検出すると、自動的に置換文字（U+FFFD）に置き換えて処理を継続します。

これにより、プログラムがクラッシュすることなく安全に変換を行えるようになっています。

もし厳密なバリデーションが必要な場合は、変換前に文字列が正当な形式であるかをチェックするロジックを別途組み込む必要があります。

また、Node.jsでBufferを使用する際、new Buffer()というコンストラクタは現在非推奨（Deprecated）となっている点に注意してください。

セキュリティ上の理由から、必ずBuffer.from()やBuffer.alloc()を使用するようにしましょう。

まとめ

JavaScriptにおけるUTF-8変換は、今や標準APIであるTextEncoderによって極めてシンプルになりました。

ブラウザ環境やフルスタックなフレームワークを利用している場合は、TextEncoderを選択するのが現在のベストプラクティスです。

一方で、Node.jsを用いたサーバーサイド開発では、既存のライブラリとの兼ね合いや多機能性を考慮してBufferを活用するシーンも依然として多くあります。

それぞれの特徴を正しく理解し、実行環境や用途に合わせて最適なツールを選択することで、文字化けのリスクを抑えた堅牢なプログラムを構築できるようになります。

文字コードの世界は奥が深いものですが、今回紹介した標準機能を使いこなすことが、モダンなJavaScriptエンジニアへの第一歩となるでしょう。