コーディングをしていると「encoding=”UTF-8″」みたいなのを見かけた方は多いと思います。
「そういうもん」と教わることが一般的ですが、そんなに難しいものではありません。
実際に軽く手を動かしてみるだけで「何だこんなことか」となるはずなので共有です。
また動画もあるので適宜使ってください。
URLのエンコード、デコードとは？
そもそも難しく感じさせているのが「エンコード」「デコード」という単語です。
単語の意味が分からないと途端に難しく感じますよね。
まず以下のURLをご覧ください。
URLの中に「日本語」が混じっていますよね。
僕ら日本人としては当たり前に見えるのですが、プログラムの世界ではURLに日本語を直接入れるのはコンピューターが困ってしまうことがあるんです。
そのためコンピューターが理解しやすい「英語」「数字」「記号」に変換する必要があり、その作業を「URLのエンコード」と言います。
またエンコードしたURLを元に戻すことを「URLのデコード」と言います。
以上のことを知っておけば何も心配いりません、この記事もここで終わって良いくらいですｗ
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/テスト/」と出力されるようになりました。
「エンコードした関数」によってデコードする関数は使い分けする必要があることは覚えておきましょう。