日本語の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
<!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)
}
)
この様にエンコードすればURLを日本語で表示させることが出来ます。
ちなみにencodeURIとencodeURIComponentの違いはエスケープしない文字列の違いです。
encodeURIComponentは以下の文字も全てエスケープします。
/ ? & = + : @ $ ; , #
以上が「JSで日本語URLをエンコードして使用可能にする方法」でした。
