Tips

【やれば簡単!】JavaScriptでURLのエンコードとデコードを行う方法

  • このエントリーをはてなブックマークに追加

コーディングをしていると「encoding=”UTF-8″」みたいなのを見かけた方は多いと思います。

「そういうもん」と教わることが一般的ですが、そんなに難しいものではありません。

実際に軽く手を動かしてみるだけで「何だこんなことか」となるはずなので共有です。

また動画もあるので適宜使ってください。

URLのエンコード、デコードとは?

そもそも難しく感じさせているのが「エンコード」「デコード」という単語です。

単語の意味が分からないと途端に難しく感じますよね。

まず以下のURLをご覧ください。

https://lorem-co-ltd.com/テスト/

URLの中に「日本語」が混じっていますよね。

僕ら日本人としては当たり前に見えるのですが、プログラムの世界ではURLに日本語を直接入れるのはコンピューターが困ってしまうことがあるんです。

そのためコンピューターが理解しやすい「英語」「数字」「記号」に変換する必要があり、その作業を「URLのエンコード」と言います。

またエンコードしたURLを元に戻すことを「URLのデコード」と言います。

以上のことを知っておけば何も心配いりません、この記事もここで終わって良いくらいですw

JavaScriptでURLをエンコードする方法

さてJavaScriptでは以下のような書き方をすればURLのエンコードをすることができます。

const result1 = encodeURI("https://lorem-co-ltd.com/テスト/");
console.log(result1);
// https://lorem-co-ltd.com/%E3%83%86%E3%82%B9%E3%83%88と出力される

こちらの結果は「https://lorem-co-ltd.com/%E3%83%86%E3%82%B9%E3%83%88/」となります。

「テスト」の部分だけが別の記号や英語に置き換わっていますね。

ネットサーフィンをしているとURLがすごく長ったらしい感じになっているのを見た事が1回はあると思います。

実は文字の変換をやっていたんですね。

またエンコードには以下のような書き方をするときもあります。

const result2 = encodeURIComponent("https://lorem-co-ltd.com/テスト/");
console.log(result2);
// https%3A%2F%2Florem-co-ltd.com%2F%E3%83%86%E3%82%B9%E3%83%88%2Fと出力される

こちらの結果は「https%3A%2F%2Florem-co-ltd.com%2F%E3%83%86%E3%82%B9%E3%83%88%2F」となります。

先ほどと違って「/」「:」などの記号も別の記号に置き換わっていますね。

encodeURIとencodeURIComponentは変換する対象が違うためです。

どちらも適材適所でして、

「URLの中の一部だけを変換したい」

「変換したURLは再度クリックする必要がないとき」

などでencodeURIComponentの方を使うことが多いです。

JavaScriptでURLをデコードする方法

それではエンコードしたURLを元に戻してみましょう。

こちらもJavaScriptで関数が用意されていて以下のように書きます。

const result3 = decodeURI("https://lorem-co-ltd.com/%E3%83%86%E3%82%B9%E3%83%88");
console.log(result3);
// https://lorem-co-ltd.com/テスト/と出力される

「https://lorem-co-ltd.com/テスト/」という元の日本語に戻ります。

ちなみにencodeURIComponentでエンコードしたURLでは使うことができません。

試しにencodeURIComponentでエンコードされていたURLをdecodeURIで変換してみます。

const result3 = decodeURI("https%3A%2F%2Florem-co-ltd.com%2F%E3%83%86%E3%82%B9%E3%83%88%2F");
console.log(result3);
// https%3A%2F%2Florem-co-ltd.com%2Fテスト%2Fと出力される

「https%3A%2F%2Florem-co-ltd.com%2Fテスト%2F」となって出力されます。

encodeURIComponentでエンコードされたURLはdecodeURIComponentという関数で以下のようにします。

const result4 = decodeURIComponent("https%3A%2F%2Florem-co-ltd.com%2F%E3%83%86%E3%82%B9%E3%83%88%2F");
console.log(result4);
// https://lorem-co-ltd.com/テスト/と出力される

「https://lorem-co-ltd.com/テスト/」と出力されるようになりました。

「エンコードした関数」によってデコードする関数は使い分けする必要があることは覚えておきましょう。

  • このエントリーをはてなブックマークに追加

コメントを残す

*