自分だけのクイズを作成しよう - Quipha
スポンサーリンク

【JavaScript】Base64 エンコード・デコード(UTF-8/SJIS)【js-base64】

【JavaScript】Base64 エンコード・デコード(UTF-8/SJIS)【js-base64】 JavaScript

当サイトではアフィリエイト広告を利用しています。

スポンサーリンク

はじめに

今回はJavaScriptを使って、Base64エンコード・デコードを行います。

是非、参考にしてみてください。

Base64とは

Base64は、バイナリデータを文字列に変換するエンコーディング手法の一つです。

バイナリデータをASCIIの文字列で表現することにより、テキストベースでバイナリデータを安全に扱ったり、送受信したりすることが可能になります。
Base64エンコーディングは、メールの送信やウェブのURLなど、テキストのみが許可されている場面でバイナリデータを扱う際によく用いられます。

バイナリデータは、画像、音声、動画などのメディアファイル、実行可能ファイル、アーカイブ、システムやアプリケーションで内部的に用いられるデータなど、多岐に渡るファイルやデータの形式で利用されています。

一方、文字データは、アルファベット、数字、記号などの文字で構成されるデータを指します。

Base64はデータのエンコード・デコード手法であり、バイナリデータをテキストデータとして扱うために用いられます。

js-base64のインストール

Base64エンコード・デコードするJavaScriptのライブラリは色々とありますが、今回はjs-base64を利用します。

GitHub - dankogai/js-base64: Base64 implementation for JavaScript
Base64 implementation for JavaScript. Contribute to dankogai/js-base64 development by creating an account on GitHub.

js-base64はNPMで導入することができます。

$ npm install --save js-base64

importで読み込む方法は以下です。

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+44GZ

Base64エンコード時に、URLセーフな変換を行うことができます。
URLセーフとは、「+」「/」といった文字列を「-」「_」に置き換え、パディングは行われません。

以下のように第二引数を指定します。

const enc = Base64.encode("Base64エンコード・デコードします", true);
console.log(enc);

「+」文字列が「-」に変わり、URLセーフな文字列になりました。

QmFzZTY044Ko44Oz44Kz44O844OJ44O744OH44Kz44O844OJ44GX44G-44GZ

Shift JISのエンコード

UTF-8の文字列をShift JISに変換してBase64エンコードしてみます。

文字コード変換にはencoding.jsを利用します。
encoding.jsはNPMで導入することができます。

$ npm install --save encoding-japanese

importで読み込む方法は以下です。

import Encoding from "encoding-japanese";

CDNでも導入可能です。

encoding-japanese - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Converts character encoding. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source C...

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);

URLセーフな文字列でもデコード可能です。

以下のようにエンコード前の文字列を取得することができました。

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エンコード・デコードにつきまして、以下のツールでも確認ができます。

Base64変換 エンコード・デコード
便利なツールを公開

ブラウザ上で動作するため、簡単に試すことができます。

チグサツール Base64エンコード・デコード

さいごに

今回はJavaScriptを使って、Base64エンコード・デコードを行いました。
是非参考にしてみてください。

\オススメ/
JavaScriptプログラミング
スポンサーリンク
この記事を共有
千草をフォローする
管理人

現役のITエンジニア。
気ままにコードや技術情報をまとめています。
Webアプリ/Windows・Macアプリ/モバイルアプリ/機械学習やIoT他。
(Java, PHP, Javascript, Swift, Python, C#, 他)
個人開発:Clibor, Quipha, TXT-Crypter
Kindle本: Laravel9 実践入門, 他

千草をフォローする

個人開発

Cliborはシンプルで高機能なクリップボード履歴ソフトです。
Mac版も公開しています。

自分だけの問題集や問題を作成し、クイズを行い学習に活用しましょう。

Mac版Cliborです。
基本的な使い方は、Windows版と同じです。

麻雀の符計算をマスターしよう。

簡単にテキストを暗号・復号でき、秘密情報を守ります。

便利なツールを公開しています。
是非、活用してください!

コメント

タイトルとURLをコピーしました