JavaScriptでエスケープ処理を行う方法【初心者向け】

初心者向けにJavaScriptでエスケープ処理を行う方法について解説しています。セキュリティ対策のためにも知っておきたい技術で、エスケープ処理の一覧や書き方を紹介しています。実際に書いてみて理解してみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで書くエスケープ処理を行う方法について解説しています。

セキュリティ対策のためにも知っておきたい知識なので、書き方を覚えておきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

エスケープ処理(エスケープシーケンス)とは

エスケープ処理(エスケープシーケンス)とは、JavaScriptで特殊な文字を入力する際に¥(円マーク)か\(バックスラッシュ)を前につけて表示する方法です。

¥(円マーク)か\(バックスラッシュ)のどちらかというところですが、基本的には同じキーです。

設定されているフォントによって¥を押したら、\(バックスラッシュ)で表示される環境もありますし、¥のまま表示される環境もあります。

 

現在では、UTF環境が一般的だということもあり、¥のキーを押すことで、\(バックスラッシュ)で表示されます。

また、日本語キーボードでは¥キーですが、英語キーボードでは\(バックスラッシュ)キーを使用します。

何故、英語キーボードでは¥ではなく、\(バックスラッシュ)かというと、そもそも英語キーボードを使用する国の通貨が¥(日本円)では無いためです。

 

エスケープ処理(エスケープシーケンス)一覧

使用文字 エスケープシーケンス後の意味
\b バックスペース
\t 水平タブ
\v 垂直タブ
\n 改行
\r 復帰
\f 改ページ
\’ シングルクオーテーション
\” ダブルクオーテーション
¥文字
\0 NULL文字
\xXX Latin-1文字(XXは16進数)
\uXXXX Unicode文字(XXXXは16進数)

 

エスケープ処理の書き方

例えば、”1行目2行目”という文字列をデベロッパーツールのconsoleに表示してみましょう。

まずは、開業せずにそのまま表示します。

プログラム

console.log("1行目2行目");

表示結果

1行目2行目

 

次に、改行キーであるEnterを押して次のようなコードで実行してみましょう。

すると次のように文法エラーになってしまいます。

プログラム

console.log("1行目

2行目");

表示結果

Uncaught SyntaxError: Invalid or unexpected token

 

人間の目から見ると1行目と2行目の間には改行が入っていますが、コンピューターから見ると改行はなく、単に文法に間違いが有るように見えているようです。

そこで、エスケープ処理(エスケープシーケンス)を使用してみます。

すると表示結果のように、1行目と2行目の間に改行が入った状態で表示されます。

エスケープ処理(エスケープシーケンス)を行わないと、改行を表示することができませんでした。

プログラム

console.log("1行目\n2行目");

表示結果

1行目

2行目

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際にエスケープ処理(エスケープシーケンス)を書いてみよう

シングルクォートの中にシングルクォートを表示

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

 

まとめ

人間の目からすれば、エスケープ処理(エスケープシーケンス)せずに書いても動く方が便利だと思えるかもしれません。

しかし、コンピューターにとっては、エスケープ処理(エスケープシーケンス)を行わないと、意図する処理を行ってくれません。

したがって、エスケープ処理(エスケープシーケンス)を理解することで、意図する処理ができるようになります。

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。