はじめに
今回はJavaScriptを使って、Base64エンコード・デコードを行います。
是非、参考にしてみてください。
Base64とは
Base64は、バイナリデータを文字列に変換するエンコーディング手法の一つです。
バイナリデータをASCIIの文字列で表現することにより、テキストベースでバイナリデータを安全に扱ったり、送受信したりすることが可能になります。
Base64エンコーディングは、メールの送信やウェブのURLなど、テキストのみが許可されている場面でバイナリデータを扱う際によく用いられます。
バイナリデータは、画像、音声、動画などのメディアファイル、実行可能ファイル、アーカイブ、システムやアプリケーションで内部的に用いられるデータなど、多岐に渡るファイルやデータの形式で利用されています。
一方、文字データは、アルファベット、数字、記号などの文字で構成されるデータを指します。
js-base64のインストール
Base64エンコード・デコードするJavaScriptのライブラリは色々とありますが、今回はjs-base64を利用します。
js-base64はNPMで導入することができます。
$ npm install --save js-base64importで読み込む方法は以下です。
import { Base64 } from "js-base64";CDNでも導入可能です。
その場合は、Headタグに以下のように定義します。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.5/base64.min.js"></script>
</head>
<body></body>
</html>Base64エンコード
エンコード
Base64エンコードについては、以下のコードで実現できます。
const enc = Base64.encode("Base64エンコード・デコードします");
console.log(enc);
以下のようにエンコードされた文字列を取得することができました。
QmFzZTY044Ko44Oz44Kz44O844OJ44O744OH44Kz44O844OJ44GX44G+44GZBase64エンコード時に、URLセーフな変換を行うことができます。
URLセーフとは、「+」「/」といった文字列を「-」「_」に置き換え、パディングは行われません。
以下のように第二引数を指定します。
const enc = Base64.encode("Base64エンコード・デコードします", true);
console.log(enc);「+」文字列が「-」に変わり、URLセーフな文字列になりました。
QmFzZTY044Ko44Oz44Kz44O844OJ44O744OH44Kz44O844OJ44GX44G-44GZShift JISのエンコード
UTF-8の文字列をShift JISに変換してBase64エンコードしてみます。
文字コード変換にはencoding.jsを利用します。
encoding.jsはNPMで導入することができます。
$ npm install --save encoding-japaneseimportで読み込む方法は以下です。
import Encoding from "encoding-japanese";CDNでも導入可能です。
CDNの場合は、Headタグに以下のように定義します。
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/encoding-japanese/2.0.0/encoding.min.js"
integrity="sha512-AhAMtLXTbhq+dyODjwnLcSlytykROxgUhR+gDZmRavVCNj6Gjta5l+8TqGAyLZiNsvJhh3J83ElyhU+5dS2OZw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
</head>
<body>
...
</body>
</html>
文字列をShift JISへ変換し、Base64エンコードする実装です。
// SJISへ変換
const unicodeArray = Encoding.stringToCode("Base64エンコード・デコードします");
const sjisArray = Encoding.convert(
unicodeArray,
"SJIS"
);
// Base64
const u8a = new Uint8Array(sjisArray);
const enc = Base64.fromUint8Array(u8a);
console.log(enc);以下のようにエンコードされた文字列を取得することができました。
QmFzZTY0g0eDk4NSgVuDaIFFg2aDUoFbg2iCtYLcgrc=こちらもURLセーフにすることができます。
const enc = Base64.fromUint8Array(u8a, true);Base64デコード
Base64デコードについては、以下のコードで実現できます。
デコードしたい文字列を指定します。
const dec = Base64.decode("QmFzZTY044Ko44Oz44Kz44O844OJ44O744OH44Kz44O844OJ44GX44G+44GZ");
console.log(dec);以下のようにエンコード前の文字列を取得することができました。
Base64エンコード・デコードしますShift JISでBase64エンコードされた文字列をデコードする実装です。
const u8a = Base64.toUint8Array("QmFzZTY0g0eDk4NSgVuDaIFFg2aDUoFbg2iCtYLcgrc=");
const unicodeArray = Encoding.convert(u8a, {
to: "UNICODE",
from: "SJIS",
});
const dec = Encoding.codeToString(unicodeArray);
console.log(dec);以下のようにエンコード前の文字列を取得することができました。
Base64エンコード・デコードしますチグサツール
Base64エンコード・デコードにつきまして、以下のツールでも確認ができます。
ブラウザ上で動作するため、簡単に試すことができます。
さいごに
今回はJavaScriptを使って、Base64エンコード・デコードを行いました。
是非参考にしてみてください。
コメント