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

【JavaScript】URLエンコード・デコード (UTF-8/SJIS)【encoding.js】

【JavaScript】URLエンコード・デコード (UTF-8/SJIS)【encoding.js】 JavaScript

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

スポンサーリンク

はじめに

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

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

URLエンコードとは

URLエンコードは、URLに含めることができない特殊文字を「%」記号と16進数で表現する方法です。
これにより、安全にウェブ上で情報の送受信が可能になります。

例えば半角スペースは「%20」、アンパサンド「&」は「%26」に置き換えられます。

URLは特定の文字しか含められないため、クエリパラメータなどで特殊文字を使用する場合はURLエンコードが必要です。

URLデコードとは

URLデコードは、エンコードされたURLを元の形式に戻すことです。

URLデコードは基本的にエンコードの逆の作業を行います。
エンコード時に特殊文字が「%」記号に続く2つの16進数文字に変換されていますので、デコード時にはこれを元の特殊文字に戻します。

多くのプログラミング言語には、デコードするための関数が用意されています。

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>

URLエンコード

URLエンコードについては、以下のコードで実現できます。
エンコードしたい文字列を指定します。

const encArray = Encoding.stringToCode("URLエンコード・デコード");
const enc = Encoding.urlEncode(encArray);
console.log(enc);

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

URL%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89%E3%83%BB%E3%83%87%E3%82%B3%E3%83%BC%E3%83%89

UTF-8の文字列をShift JISに変換してURLエンコードする実装です。

const encArray = Encoding.stringToCode("URLエンコード・デコード");
// Shift JISへ変換
const sjisArray = Encoding.convert(encArray, "SJIS");
const enc = Encoding.urlEncode(sjisArray);
console.log(enc);

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

URL%83G%83%93%83R%81%5B%83h%81E%83f%83R%81%5B%83h

URLデコード

UTF-8の文字列のURLデコードについては、以下のコードで実現できます。
デコードしたい文字列を指定します。

const dec = Encoding.urlDecode(
    "URL%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89%E3%83%BB%E3%83%87%E3%82%B3%E3%83%BC%E3%83%89"
);
const decArray = Encoding.codeToString(dec);
const utfArray = Encoding.convert(decArray, {
    to: "UNICODE",
    from: "UTF8",
});
console.log(utfArray);

UTF-8へ変換しています。

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

URLエンコード・デコード

Shift JISでURLエンコードされた文字列をデコードする実装です。

const dec = Encoding.urlDecode(
    "URL%83G%83%93%83R%81%5B%83h%81E%83f%83R%81%5B%83h"
);
const decArray = Encoding.codeToString(dec);
const sjisArray = Encoding.convert(decArray, {
    to: "UNICODE",
    from: "SJIS",
});
console.log(sjisArray);

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

URLエンコード・デコード

デコードを行った後に、文字コードの変換をしています。

チグサツール

URLエンコード・デコードにつきまして、以下のツールでも確認ができます。

URLエンコード・デコード
便利なツールを公開

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

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

さいごに

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

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

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

千草をフォローする

個人開発

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

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

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

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

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

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

コメント

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