こんにちは！ライターのヨシダジュンです。
プログラミングにおけるエスケープという単語をご存知でしょうか。他の多くのプログラミング言語にもある概念なので、馴染みのある方も多いでしょう。この記事では、エスケープシーケンス一覧、JavaScriptで行うエスケープ処理という基本的な内容から、
- 正規表現におけるエスケープ処理
- 日本語を含むURLのエスケープ処理
- escape関数の使い方
などの応用編に関しても解説していきます。
エスケープシーケンス一覧
そもそもの話ですが、エスケープとは何なのでしょうか。プログラミングで文字列を扱っていると、必ずと言ってよいほど出くわす問題があります。それはキーボードで入力できない文字はどう表現するのか？という問題です。
代表的なものとしては改行ですね。改行を表す文字をどう表現すればよいのでしょう？そんなときに使うのがエスケープでもあります。キーボードから入力できない文字を、別の文字の組み合わせで表現するわけです。
そういったものをまとめてエスケープシーケンスと呼びます。以下がエスケープシーケンスの一覧です。
| エスケープシーケンス | 意味 |
| \b | バックスペース |
| \t | 水平タブ |
| \v | 垂直タブ (垂直方向に空白を入れる) |
| \n | 改行 |
| \r | 復帰 (同じ行の先頭に移動) |
| \f | 改ページ |
| \’ | シングルクォーテーション |
| \” | ダブルクォーテーション |
| \¥ | ¥文字 |
| \0 | NULL文字 |
エスケープ処理
では、実際にエスケープの処理について、サンプルコードを交えながら説明します。適当なHTMLファイルを準備し、その中から下記JavaScriptファイルを呼び出すように記述します。
console.log('シングルクォーテーションは\'です');
これを実行すると以下となります。
シングルクォーテーションは'です
一方、コードを以下のようにするとどうなるでしょう？
console.log('シングルクォーテーションは'です');
実行すると、今度はエラーになります。引数の「’」が文字列の終端を表す文字として認識されるため、文法エラーとなるのです。
また、以下のサンプルコードをご覧ください。
console.log('改行の文字コードは\nです');
このコードの実行結果は次のとおりです。
改行の文字コードは です
「\n」が改行を意味するためですね。そこで、以下のように変更します。
console.log('改行の文字コードは\\nです');
「\n」の前に「\」を付けることでエスケープします。これを実行すると以下のようになります。
改行の文字コードは\nです
さらに、別の例をご紹介します！
console.log('水平タブの文字コードは\tです');
実行結果は以下のとおり。
水平タブの文字コードは です
「\n」の場合と同じですね。
水平タブの文字コードを表示するためには「\t」の前に「\」を付けてエスケープすればよいです。
console.log('水平タブの文字コードは\\tです');
正規表現におけるエスケープ処理
エスケープが必要な理由とは？
正規表現がそもそも何ものかをよく知らないという方はまずは以下の記事の正規表現とは？を参考にしてください。
正規表現は特殊文字を使用して文字列の検索や置換などに利用できますが、その特殊文字をエスケープ処理しなければ正しい検索ができない場面があります。具体的な例で解説していきます。
例えば、あるURLのドメイン（http://の後の部分、例えばグーグルならhttps://www.google.co.jpの’www.google.co.jp’の部分のこと）がグーグルのものかどうか調べる処理をプログラムで書くとします。
サンプルコードは以下の通りです。
//検索したい文字列 var reg = /www.google.com/; //検索対象 var url1 = "www.google.com"; //Hitしてほしいデータ var url2 = "wwwAgoogle0com"; //本来Hitしてほしくないデータ // HitしたらTrue console.log(url1.match(reg) !== null); console.log(url2.match(reg) !== null); //これもTrue、つまりHitしたことになった！
実行結果
true true
url1は検索したい文字列と同一なので、検索結果がTrueであることは問題ありません。ですが、url2は検索したい文字に似ていますが、よく見るとドット（.)の箇所がAや0の文字になっていますので、本来は検索結果はFalse、つまりHitしてほしくないデータでした。
なぜこのようなことが起きたのでしょうか？これは検索したい文字列の指定(/www.google.com/)にあるドット(.)が普通の文字のドットと認識されず、正規表現の特殊文字として扱われたからです。
正規表現におけるドットの意味は「何らかの１文字」を表します。そのため、url2のAや0も「何らかの１文字」という条件を満たすため、Hitしたのでした。
では、どうすれば正しくドットという文字をドットそのものの文字だけ条件を満たすようにできるのか。そこで登場するのがこれまでご紹介してきたエスケープ処理です。
ドットの文字にバックスラッシュ(\)を付けることで、正規表現の特殊文字ではなく、ドットそのものを検索するようにプログラムに指示することができます。実際に改善したプログラムは以下の通りです。
//検索したい文字列。ドットにバックスラッシュを追加 var reg = /www\.google\.com/; //検索対象 var url1 = "www.google.com"; //Hitしてほしいデータ var url2 = "wwwAgoogle0com"; //本来Hitしてほしくないデータ // HitしたらTrue console.log(url1.match(reg) !== null); console.log(url2.match(reg) !== null);
実行結果
true false
今度はurl2がFalse、つまりHitしなかったという期待した結果を得ることができました。このように正規表現の特殊文字を含む文字列を検索したり置換する場合にはバックスラッシュでエスケープする必要があることを覚えておいてください。
また、文字列の連結を行うような場合では、改行を挿入する際にエスケープ処理をよく使うので、次の記事でその活用事例や使い方を参考にしてみてください！
自作関数でエスケープ処理を行う
正規表現で検索や置換をするたびに、特殊文字を気にしてエスケープ処理を行うことが手間である場合は、自分でその処理を行う関数を作り、必要な場面でその関数を利用するという手もあります。
以下、サンプルコードです。
const myEscape = function (str) {
return str
.replace(/\'/g, "\\'")
.replace(/\"/g, '\\"')
.replace(/\//g, '\\/');
};
const hoge = "2020/06/25'木'";
console.log(myEscape(hoge));
myEscape関数は文字列strを引数として受け取り、その文字の中に「\」「’」「”」「/」が存在していれば、replace関数を使ってエスケープシーケンスに置換します。
そして、置換後の文字列strを「return」することで、最終的にエスケープされた文字列を取得することが出来るというわけです。
実行すると次のように表示されます。
2020\/06\/25\'木\'
これは簡単な例ですが、ソースコードを文字列hogeに代入し、hogeに含まれる特殊な文字をエスケープシーケンスに置換しています。
日本語を含むURLのエスケープ処理
日本語文字は、そのままではURLとして使えません。そのため、日本語文字をURLとして使うためには、URLで使える文字列にエンコードする必要があります。そこでencodeURIComponent関数があります。
encodeURIComponent関数は、URLを構成する部分文字列に対して使う関数です。
encodeURIComponent(“http://sample.com/ほげ”);
実行結果
http%3A%2F%2Fsample.com%2F%E3%81%BB%E3%81%92
このように、日本語や「:」「/」などがエンコードされているのが分かります。
escape関数とは
escape関数は文字列をエンコードするために使います。日本語などの文字列をURLに渡すと問題が発生する場合があります。
そのような場合には、escape関数を使って文字列をエンコードする必要があります。また、escape関数でエンコードした文字列をデコードするためには、unescape関数を使います。
escape関数の使い方
escape関数で文字列をエンコードする方法
ここでは、escape関数で文字列をエンコードする方法を解説します。escape関数は引数にエンコードする文字列を指定します。次のプログラムで確認してみましょう。
var str = escape("samurai");
console.log(str);
str = escape("さむらい");
console.log(str);
実行結果：
samurai %u3055%u3080%u3089%u3044
このようにして、日本語の文字列がエンコードされることが確認できました。
unescape関数で文字列をデコードする方法
ここでは、unescape関数で文字列をデコードする方法を解説します。unescape関数は引数にデコードする文字列を指定します。次のプログラムで確認してみましょう。
var str = escape("さむらい");
console.log(str);
str = unescape(str);
console.log(str);
実行結果：
%u3055%u3080%u3089%u3044 さむらい
このようにして、文字列をデコードすることができました。
まとめ
今回は、JavaScriptにおけるエスケープに関することをまとめました。Webアプリケーションやブラウザでの表示においては、文字列を扱うことも多いですが、そういったときに特定の文字をエスケープしなければいけないケースは必ずと言ってよいほど出てくるでしょう。
そんな場面でも「うまく動かない！」とはまることなく、エスケープに関する基礎を抑えておきましょう。
