JavaScriptによるSJIS変換およびBASE64変換完全ガイド💻

はじめに (対象読者・この記事でわかること)

この記事は、Web開発者やJavaScriptを学んでいる方、特に文字コード変換に興味がある方を対象としています。日本語の文字列をSJIS形式に変換したり、データをBASE64形式でエンコード/デコードしたりする必要がある開発者に役立つ内容です。

この記事を読むことで、JavaScriptを使ったSJIS変換の方法やBASE64エンコード/デコードの実装方法がわかります。また、これらの技術を組み合わせた実用的なアプリケーションの作成方法も学べます。ブラウザ環境とNode.js環境の両方での実装例を紹介し、実際の開発で直面する問題への解決策も提供します。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

前提となる知識1: JavaScriptの基本的な知識（変数、関数、オブジェクトなど） 前提となる知識2: 文字コードとエンコーディングの基本的な理解（UTF-8、SJISなど）

SJIS変換とBASE64エンコードの概要と背景

SJIS（Shift_JIS）は、日本語の文字を扱うための文字コードの一つで、特にWindows環境や一部の古いシステムで広く利用されています。一方、BASE64はバイナリデータをテキスト形式で安全に扱うためのエンコーディング方式で、メール添付やデータ転送などで頻繁に使用されます。

現代のWeb開発では、UTF-8が標準として広く採用されていますが、レガシーシステムとの連携や特定のAPIと通信する際にはSJIS形式のデータを扱う必要が生じることがあります。また、ファイルのアップロードやバイナリデータの処理ではBASE64エンコードが不可欠です。

JavaScriptは、ブラウザ環境だけでなくNode.jsを使えばサーバーサイドでも動作するため、クライアントサイドとサーバーサイドの両方で文字コード変換やデータエンコードを統一的に処理できます。この記事では、JavaScriptを使ってこれらの変換を効果的に実現する方法を解説します。

JavaScriptによるSJIS変換とBASE64変換の具体的な実装方法

SJIS変換の実装方法

ブラウザ環境とNode.js環境では、SJIS変換の実装方法が異なります。それぞれの環境での実装方法を解説します。

ブラウザ環境でのSJIS変換

ブラウザ環境では、SJIS変換ライブラリを使用するのが一般的です。ここでは「encoding-japanese」というライブラリを使用した方法を紹介します。

まず、HTMLファイルにライブラリを追加します：

Html

<script src="https://cdn.jsdelivr.net/npm/encoding-japanese@0.7.0/encoding.min.js"></script>

次に、文字列をSJISに変換するJavaScriptコードは以下のようになります：

Javascript

// UTF-8文字列をSJISに変換
function convertToSJIS(utf8String) {
  const utf8Array = Encoding.stringToCode(utf8String); // UTF-8文字列をUint8Arrayに変換
  const sjisArray = Encoding.convert(utf8Array, {to: 'SJIS', from: 'UTF8'}); // SJISに変換
  return Encoding.codeToString(sjisArray); // Uint8Arrayを文字列に変換
}

// 使用例
const utf8Text = "こんにちは、世界！";
const sjisText = convertToSJIS(utf8Text);
console.log(sjisText);

このコードでは、encoding-javascriptライブラリのstringToCodeメソッドで文字列をUint8Arrayに変換し、convertメソッドでSJISに変換した後、codeToStringメソッドで文字列に戻しています。

Node.js環境でのSJIS変換

Node.js環境では、「iconv-lite」というライブラリを使用してSJIS変換を行います。まず、ライブラリをインストールします：

Bash

npm install iconv-lite

次に、文字列をSJISに変換するコードは以下のようになります：

Javascript

const iconv = require('iconv-lite');

// UTF-8文字列をSJISに変換
function convertToSJIS(utf8String) {
  const buffer = iconv.encode(utf8String, 'Shift_JIS');
  return buffer;
}

// 使用例
const utf8Text = "こんにちは、世界！";
const sjisBuffer = convertToSJIS(utf8Text);
console.log(sjisBuffer); // Bufferオブジェクトとして出力

Node.jsでは、変換結果がBufferオブジェクトとして返されます。これをファイルに書き込む場合や他のシステムに送信する場合には、このBufferオブジェクトをそのまま使用できます。

BASE64エンコード/デコードの実装方法

BASE64エンコード/デコードは、JavaScriptの組み込み機能で簡単に行えます。ブラウザ環境とNode.js環境の両方で実装方法を解説します。

ブラウザ環境でのBASE64エンコード/デコード

ブラウザ環境では、btoaとatob関数を使ってBASE64エンコード/デコードが簡単に行えます。

Javascript

// UTF-8文字列をBASE64にエンコード
function encodeToBase64(utf8String) {
  // UTF-8文字列をUint8Arrayに変換
  const encoder = new TextEncoder();
  const utf8Array = encoder.encode(utf8String);
  // Uint8Arrayを文字列に変換
  const binaryString = Array.from(utf8Array, byte => String.fromCharCode(byte)).join('');
  // BASE64にエンコード
  return btoa(binaryString);
}

// BASE64をUTF-8文字列にデコード
function decodeFromBase64(base64String) {
  // BASE64をバイナリ文字列にデコード
  const binaryString = atob(base64String);
  // バイナリ文字列をUint8Arrayに変換
  const utf8Array = new Uint8Array(Array.from(binaryString, char => char.charCodeAt(0)));
  // Uint8ArrayをUTF-8文字列に変換
  const decoder = new TextDecoder();
  return decoder.decode(utf8Array);
}

// 使用例
const text = "こんにちは、世界！";
const base64 = encodeToBase64(text);
console.log("BASE64エンコード:", base64);

const decodedText = decodeFromBase64(base64);
console.log("デコードしたテキスト:", decodedText);

上記のコードでは、TextEncoderとTextDecoder APIを使用して文字列とUint8Arrayの相互変換を行い、btoaとatob関数でBASE64エンコード/デコードを実現しています。

Node.js環境でのBASE64エンコード/デコード

Node.js環境では、Bufferオブジェクトの機能を使って簡単にBASE64エンコード/デコードができます。

Javascript

// UTF-8文字列をBASE64にエンコード
function encodeToBase64(utf8String) {
  return Buffer.from(utf8String).toString('base64');
}

// BASE64をUTF-8文字列にデコード
function decodeFromBase64(base64String) {
  return Buffer.from(base64String, 'base64').toString('utf8');
}

// 使用例
const text = "こんにちは、世界！";
const base64 = encodeToBase64(text);
console.log("BASE64エンコード:", base64);

const decodedText = decodeFromBase64(base64);
console.log("デコードしたテキスト:", decodedText);

Node.jsでは、BufferオブジェクトのtoStringメソッドに'base64'を指定するだけでBASE64エンコードができ、Buffer.fromメソッドにBASE64文字列と'base64'エンコーディングを指定することでデコードが簡単に行えます。

SJISとBASE64を組み合わせた実装

実際のアプリケーション開発では、SJIS変換とBASE64エンコードを組み合わせて使用することがよくあります。ここでは、ブラウザ環境とNode.js環境の両方でSJIS変換とBASE64エンコードを組み合わせた実装例を紹介します。

ブラウザ環境での組み合わせ実装

Javascript

// UTF-8文字列をSJISに変換してBASE64にエンコード
function convertToSJISAndBase64(utf8String) {
  // 1. UTF-8文字列をSJISに変換
  const utf8Array = Encoding.stringToCode(utf8String);
  const sjisArray = Encoding.convert(utf8Array, {to: 'SJIS', from: 'UTF8'});

  // 2. SJISのUint8ArrayをBASE64にエンコード
  const binaryString = Array.from(sjisArray, byte => String.fromCharCode(byte)).join('');
  return btoa(binaryString);
}

// BASE64をデコードしてSJISからUTF-8に変換
function decodeFromBase64AndConvertToUTF8(base64String) {
  // 1. BASE64をバイナリ文字列にデコード
  const binaryString = atob(base64String);

  // 2. バイナリ文字列をUint8Arrayに変換
  const sjisArray = new Uint8Array(Array.from(binaryString, char => char.charCodeAt(0)));

  // 3. SJISをUTF-8に変換
  const utf8Array = Encoding.convert(sjisArray, {to: 'UTF8', from: 'SJIS'});
  return Encoding.codeToString(utf8Array);
}

// 使用例
const originalText = "こんにちは、世界！";
const sjisBase64 = convertToSJISAndBase64(originalText);
console.log("SJIS→BASE64変換:", sjisBase64);

const restoredText = decodeFromBase64AndConvertToUTF8(sjisBase64);
console.log("復元したテキスト:", restoredText);

Node.js環境での組み合わせ実装

Javascript

const iconv = require('iconv-lite');

// UTF-8文字列をSJISに変換してBASE64にエンコード
function convertToSJISAndBase64(utf8String) {
  // 1. UTF-8文字列をSJISに変換
  const sjisBuffer = iconv.encode(utf8String, 'Shift_JIS');

  // 2. SJISのBufferをBASE64にエンコード
  return sjisBuffer.toString('base64');
}

// BASE64をデコードしてSJISからUTF-8に変換
function decodeFromBase64AndConvertToUTF8(base64String) {
  // 1. BASE64をデコード
  const sjisBuffer = Buffer.from(base64String, 'base64');

  // 2. SJISをUTF-8に変換
  return iconv.decode(sjisBuffer, 'Shift_JIS');
}

// 使用例
const originalText = "こんにちは、世界！";
const sjisBase64 = convertToSJISAndBase64(originalText);
console.log("SJIS→BASE64変換:", sjisBase64);

const restoredText = decodeFromBase64AndConvertToUTF8(sjisBase64);
console.log("復元したテキスト:", restoredText);

実際のアプリケーションでの使用例

ここでは、SJIS変換とBASE64エンコードを組み合わせた実用的なアプリケーションの例として、CSVファイルをSJIS形式で生成・ダウンロードする機能を実装してみましょう。

ブラウザ環境でのCSVファイル生成・ダウンロード

Html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SJIS CSVファイル生成</title>
  <script src="https://cdn.jsdelivr.net/npm/encoding-japanese@0.7.0/encoding.min.js"></script>
</head>
<body>
  <h1>SJIS CSVファイル生成</h1>
  <button id="downloadBtn">CSVファイルをダウンロード</button>

  <script>
    // ダウンロードボタンにイベントリスナーを追加
    document.getElementById('downloadBtn').addEventListener('click', function() {
      // CSVデータを作成
      const csvData = [
        ['名前', '年齢', '職業'],
        ['田中太郎', '30', 'エンジニア'],
        ['佐藤花子', '25', 'デザイナー'],
        ['鈴木一郎', '40', 'マネージャー']
      ];

      // 配列をCSV形式の文字列に変換
      let csvString = '';
      csvData.forEach(row => {
        csvString += row.join(',') + '\n';
      });

      // UTF-8文字列をSJISに変換してBASE64にエンコード
      const utf8Array = Encoding.stringToCode(csvString);
      const sjisArray = Encoding.convert(utf8Array, {to: 'SJIS', from: 'UTF8'});
      const binaryString = Array.from(sjisArray, byte => String.fromCharCode(byte)).join('');
      const base64 = btoa(binaryString);

      // ダウンロードリンクを作成
      const blob = new Blob(['\ufeff' + base64], { type: 'application/octet-stream' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'data.csv';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>

Node.js環境でのCSVファイル生成

Javascript

const iconv = require('iconv-lite');
const fs = require('fs');

// CSVデータを作成
const csvData = [
  ['名前', '年齢', '職業'],
  ['田中太郎', '30', 'エンジニア'],
  ['佐藤花子', '25', 'デザイナー'],
  ['鈴木一郎', '40', 'マネージャー']
];

// 配列をCSV形式の文字列に変換
let csvString = '';
csvData.forEach(row => {
  csvString += row.join(',') + '\n';
});

// UTF-8文字列をSJISに変換してファイルに書き込み
const sjisBuffer = iconv.encode(csvString, 'Shift_JIS');
fs.writeFileSync('output.csv', sjisBuffer);

console.log('CSVファイルが生成されました: output.csv');

ハマった点やエラー解決

SJIS変換とBASE64エンコードを実装する際に、よく遭遇する問題とその解決方法を紹介します。

問題1: ブラウザでbtoaが非ASCII文字に対応していない

現象: btoa関数は、ASCII文字（0-127番目の文字）しか扱えず、日本語のようなマルチバイト文字を直接渡すとエラーが発生します。

解決策: 文字列をUint8Arrayに変換してからBASE64エンコードする必要があります。前述のencodeToBase64関数のように、TextEncoder APIを使って文字列をUint8Arrayに変換してから処理を行います。

問題2: Node.jsでShift_JISのファイル名を扱う際の文字化け

現象: Node.jsでShift_JISのファイル名を持つファイルを処理する際に、ファイル名が文字化けすることがあります。

解決策: iconv-liteのextendNodeメソッドを使ってNode.jsのBufferを拡張する必要があります。

Javascript

const iconv = require('iconv-lite');
iconv.extendNodeEncodings(); // Node.jsのエンコーディングを拡張

// これでShift_JISのファイル名も正しく扱えるようになる
const sjisFilename = iconv.encode('日本語ファイル名.csv', 'Shift_JIS');
fs.writeFileSync(sjisFilename, 'テストデータ');

問題3: SJIS変換時に特定の文字が正しく変換されない

現象: SJIS変換時に、特定の記号や特殊文字が正しく変換されないことがあります。

解決策: 変換前に文字列を正規化するか、対応するライブラリのオプションを調整します。encoding-javascriptを使用している場合は、convertメソッドのオプションでtypeを指定します。

Javascript

// 特殊文字を正規化
function normalizeString(str) {
  return str
    .replace(/〜/g, 'ー')  // 全角チルドを長音符に置換
    .replace(/（/g, '(')   // 全角括弧を半角に置換
    .replace(/）/g, ')');
}

// 正規化してから変換
const normalizedString = normalizeString(utf8String);
const sjisArray = Encoding.convert(Encoding.stringToCode(normalizedString), {
  to: 'SJIS', 
  from: 'UTF8',
  type: 'string'  // 文字列として扱う
});

問題4: BASE64デコード時のパディング問題

現象: BASE64文字列の末尾にパディング（'='）がない場合や、不正な長さの場合にデコードに失敗します。

解決策: デコード前にBASE64文字列のパディングを正規化します。

Javascript

// BASE64文字列のパディングを正規化
function normalizeBase64(base64String) {
  // パディングを追加
  const padLength = (4 - base64String.length % 4) % 4;
  return base64String + '='.repeat(padLength);
}

// 正規化してからデコード
const normalizedBase64 = normalizeBase64(base64String);
const decodedText = Buffer.from(normalizedBase64, 'base64').toString('utf8');

まとめ

本記事では、JavaScriptによるSJIS変換およびBASE64変換の実装方法について解説しました。

• 要点1: ブラウザ環境ではencoding-javascriptライブラリ、Node.js環境ではiconv-liteライブラリを使ってSJIS変換を実装できる
• 要点2: BASE64エンコード/デコードは、ブラウザではbtoa/atob関数、Node.jsではBufferオブジェクトの機能を使って簡単に行える
• 要点3: SJIS変換とBASE64エンコードを組み合わせることで、日本語を含むバイナリデータの安全な取り扱いが可能になる

この記事を通して、読者はJavaScriptでSJIS変換とBASE64変換を実装する方法を学び、実際のアプリケーション開発で活用できるようになったことでしょう。特に、レガシーシステムとの連携やCSVファイルの生成・ダウンロードといった実用的な場面でこれらの技術は役立ちます。

今後は、これらの技術を応用して、ファイルアップロード機能や外部APIとの連携、エンコーディング変換を必要とする他のユースケースについても記事にする予定です。

参考資料

参考にした記事、ドキュメント、書籍など：

• encoding-javascript公式ドキュメント
• iconv-lite公式ドキュメント
• MDN Web Docs - btoa(), atob()
• MDN Web Docs - TextEncoder, TextDecoder
• Node.js公式ドキュメント - Buffer