JavaScriptでエスケープ処理を行う方法【初心者向け】
初心者向けにJavaScriptでエスケープ処理を行う方法について解説しています。セキュリティ対策のためにも知っておきたい技術で、エスケープ処理の一覧や書き方を紹介しています。実際に書いてみて理解してみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptで書くエスケープ処理を行う方法について解説しています。
セキュリティ対策のためにも知っておきたい知識なので、書き方を覚えておきましょう。
また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
エスケープ処理(エスケープシーケンス)とは
エスケープ処理（エスケープシーケンス）とは、JavaScriptで特殊な文字を入力する際に￥（円マーク）か（バックスラッシュ）を前につけて表示する方法です。
￥（円マーク）か\（バックスラッシュ）のどちらかというところですが、基本的には同じキーです。
設定されているフォントによって￥を押したら、\（バックスラッシュ）で表示される環境もありますし、￥のまま表示される環境もあります。
エスケープ処理（エスケープシーケンス）一覧
| 使用文字 | エスケープシーケンス後の意味 |
|---|---|
| ¥b | バックスペース |
| ¥t | 水平タブ |
| ¥v | 垂直タブ |
| ¥n | 改行 |
| ¥r | 復帰 |
| ¥f | 改ページ |
| ¥’ | シングルクオーテーション |
| ¥” | ダブルクオーテーション |
| ¥¥ | ¥文字 |
| ¥0 | NULL文字 |
| ¥xXX | Latin-1文字（XXは16進数） |
| ¥uXXXX | Unicode文字（XXXXは16進数） |
エスケープ処理の書き方
例えば、”1行目2行目”という文字列をデベロッパーツールのconsoleに表示してみましょう。
まずは、改行せずにそのまま表示します。
プログラム
console.log("1行目\n2行目");
表示結果
1行目2行目
次に、改行キーであるEnterを押して次のようなコードで実行してみましょう。
すると次のように文法エラーになってしまいます。
プログラム
console.log("1行目
2行目");
表示結果
Uncaught SyntaxError: Invalid or unexpected token
人間の目から見ると1行目と2行目の間には改行が入っていますが、コンピューターから見ると改行はなく、単に文法に間違いが有るように見えているようです。
そこで、エスケープ処理（エスケープシーケンス）を使用してみます。
すると表示結果のように、1行目と2行目の間に改行が入った状態で表示されます。
エスケープ処理（エスケープシーケンス）を行わないと、改行を表示できませんでした。
プログラム
console.log("1行目¥n2行目");表示結果
1行目 2行目
実際にエスケープ処理（エスケープシーケンス）を書いてみよう
シングルクォートの中にシングルクォートを表示
JavaScriptの文法上次のようにシングルクォートの中にシングルクォートを表示することはできません。
プログラム
console.log('Tech's academy');
表示結果
Uncaught SyntaxError: missing ) after argument list
通常はシングルクォートを文字列として使用したい場合は、次のようにダブルクオーテーションで囲む必要があります。
プログラム
console.log("Tech's academy");
表示結果
Tech's academy
この処理を、エスケープ処理（エスケープシーケンス）を使用して処理すると次のようになります。
プログラム
console.log('Tech\'s academy');
表示結果
Tech's academy
escape関数の書き方
全角文字や特殊な文字を半角文字に置き換える、というエスケープ処理を行いたい場合は、escape関数を使います。
ここで、「別な文字に置き換える」ということについて簡単に説明しておきます。
Googleなどの検索サイトで全角のキーワードで検索した時、アドレスバーには全角(日本語)のまま表示されているのに、テキストエディタに貼り付けた時には一見すると意味の分からない文字の羅列になっていて、不思議に思ったことがある方もいるかもしれません。
この「%●●」の部分が、エンコードされた文字です。
全角文字や特殊な文字が環境によって正しく処理されないことを防ぐため、いったん「%●●」のような、環境によらず正しく処理される文字に置き換えることがあります。
(文字コード表というものに従って変換されるのですが、ここでは割愛します。)
escape関数は以下のように使います。
具体的な使い方は後述します。
プログラム
escape(文字列)
escape関数によるエンコード方法
実際に、escape関数を使って、エンコードしてみましょう。
プログラム
var str = escape("Tech Academy");
console.log(str);
str = escape("テックアカデミー");
console.log(str);
表示結果
Tech%20Academy
%u30C6%u30C3%u30AF%u30A2%u30AB%u30C7%u30DF%u30FC
「Tech Academy」に含まれる半角スペースや、全角の「テックアカデミー」が、それぞれ「%●●」にエンコードされている(置き換わっている)ことがわかります。
unescape関数によるデコード方法
エンコードした文字は、元の文字に復元できます。
これをデコードといいます。
escape関数でエンコードした文字は、unescape関数でデコードできます。
実際に見てみましょう。
プログラム
var str = unescape("Tech%20Academy");
console.log(str);
str = unescape("%u30C6%u30C3%u30AF%u30A2%u30AB%u30C7%u30DF%u30FC");
console.log(str);
表示結果
Tech Academy
テックアカデミー
「%●●」が元の文字にデコードされている(置き換わっている)ことがわかります。
まとめ
今回は、エスケープ処理について解説しました。
エスケープ処理にも、シングルクォーテーション(‘)やダブルクォーテーション(“)にバックスラッシュ(\)を付ける方法や、escape関数を使う方法など、さまざまな方法があります。
用途に応じて使い分けましょう。
なお、escape関数のほかに、encodeURI関数やencodeURIComponent関数というものもありますがここでは割愛します。
詳しくはこちらのサイトをご参考ください。
人間の目からすれば、エスケープ処理（エスケープシーケンス）せずに書いても動く方が便利だと思えるかもしれません。
しかし、コンピューターにとっては、エスケープ処理（エスケープシーケンス）を行わないと、意図する処理を行ってくれません。
したがって、エスケープ処理（エスケープシーケンス）を理解することで、意図する処理ができるようになります。
また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。
プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。
