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(文字列)
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
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サイトの表現の幅を広げたいという方はぜひご覧ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
