JSで日本語URLをエンコードして使用可能にする方法

日本語のURLはそのままでは扱うことが出来ません。
日本語のURLを使用したい場合はエンコードと言われる処理を行う必要があります。

今回はその日本語URLをエンコードする方法を紹介して、日本語URLを使用可能にする方法を解説します。

難易度（MAX10)

★★★☆☆☆☆☆☆☆

JSで文字列をエンコードする方法

JavaScriptで文字列をエンコードする方法は以下のメソッドを使用すれば簡単に可能です。

メソッド	意味
encodeURI	文字列をエンコードする
encodeURIComponent	文字列をエンコードする

const A = encodeURI('http://example.com/テスト.html')
const B = encodeURIComponent('http://example.com/テスト.html')
console.log(A)
console.log(B)

上記の場合「テスト」とのカタカナ（日本語）がエンコードされ使用可能なURLに変換されています。

以下の例文はオリジナルのページにあるテキストエリアに入力した文字列をTwitterのTweet時のURLに変換して、そのまま入力したテキストをツイートする様にリンクさせたシステムです。

HTML/CSS/JS

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <script src="test.js" defer ></script>
    <title>JSテスト</title>
    <link rel="icon" href="">
    <meta name="description" content="">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <header class="header"></header>
      <nav class="left"></nav>
      <main>
        <h2>ツイートするテキストを入れて下さい</h2>
        <textarea id="tweettTextarea"></textarea>
        <button id="tweetButton">ツイートする</button>
      </main>
      <aside class="right"></aside>
      <footer class="footer"></footer>
    </div>
  </body>
</html>

CSS

body {
  width: 800px;
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template:
    "header header header" 100px
    "left center right" 1fr
    "footer footer footer" 100px/
    100px 1fr 100px ;
}
 
header {
  grid-area: header;
}
 
nav {
  grid-area: left;
}
 
main {
  grid-area: center;
  padding: 20px;
  background-color: brown;
  background-image:url(img/haikei.jpg);
  background-size: cover;
}
 
aside {
  grid-area: right;
}
 
footer {
  grid-area: footer;
}
@media screen and (max-width: 1000px){
  body{
    grid-template: 
    "header" 0px
    "center" 1fr
    "left"
    "right"
    "footer" 0px
    ;
  }
}
textarea {
  width: 97%;
  height: 250px;
  margin: 5px;
}
h2{
  font-size: 25px;
  font-weight: bold;
  text-align: center;
}
button {
  background-color: aqua;
  cursor: pointer;
  border: none;
}

JavaScript

document.querySelector('#tweetButton').addEventListener('click' ,
() => {
    let tweeText = document.querySelector('#tweettTextarea').value;
    tweeText += ' #JavaScript';
    const encode = encodeURIComponent(tweeText);
    const tweetURL = `https://twitter.com/intent/tweet?text=${encode}`;
    window.open(tweetURL)
}
)