JavaScriptでエスケープ処理を実践してみよう

JavaScriptを学習していてときどき目にする「エスケープ」について、理解できていますか?

JavaScriptでは、ブラウザ上や開発者ツールのコンソール上に、文字列を出力する機能が備えられています。

しかし、どのように改行させればよいのか分からなかったり、ある特定の文字だけ出力されなかったりした経験はありませんか?これらは、エスケープ処理を適切に実施することで解決できます。

今回は、文字列処理を使いなすために覚えておきたい、エスケープ処理の方法を解説していきます。エスケープ処理が理解できれば、今までよりも複雑な文字列処理を実装できるようになるので、スキル向上のためにぜひお役立てください。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


エスケープ処理とは?

エスケープ処理とは、エスケープシーケンスと呼ばれる特別な記号を使って、今までとは異なる機能を文字に対して与えることを意味します。

エスケープ処理は、文字列を画面に出力する以外の特殊な処理を行いたい場合に利用することが多いです。また、プログラミング言語にとって特別な扱いとなっている文字を、文字列として解釈し画面に出力したいときにも、エスケープ処理を行うことで解決できます。

JavaScriptではさまざまなエスケープ処理が用意されています。代表的なエスケープ処理を、以下の表に示しました。それぞれどのような機能が備えられているか、実際にコーディングして確認してみましょう。

エスケープ処理意味・機能
\bバックスペース
\f改ページ
\n改行
\r復帰
\t水平タブ
\v垂直タブ
\\バックスラッシュ
\’シングルクォート
\”ダブルクオート
\0NULL文字

なぜエスケープ処理が必要なのか?

そもそも、なぜエスケープ処理が必要になるのかについてですが、それは、プログラミング言語において特別な意味を持つ文字を画面出力するためです。

JavaScriptで文字列を取り扱うときは、プログラムを解釈するブラウザに対して、「これは文字列ですよ」と解釈させるために、シングルクオートダブルクオートで対象の文字列を囲みます。

つまり、シングルクオートやダブルクオートは、JavaScriptにおいて単なる文字ではなく、特別な意味が込められた文字として扱われます。

特別扱いされている以上、文字そのもの自身を画面に出力する文字列として解釈させることはできません。この問題を解決するために、エスケープ処理が用いられます。

他にも、文字列の検索で利用される正規表現と呼ばれる記法においても、ドットやプラスなどの記号は特殊な文字として解釈されます。文字列の中からドットが含まれているか検索したいときは、ドットを検索対象文字として解釈させたいため、エスケープ処理が必要不可欠です。

また、エスケープ処理を適切に行わないと、プログラムの誤作動を起こしてしまう原因になります。その最たる例として、SQLインジェクションと呼ばれる攻撃方法が存在します。

SQLインジェクションは、ウェブページのテキストボックスで、SQLのプログラムを入力・送信することで、データベースから機密情報などを抜き取ったり削除したりする攻撃方法のことを指します。

SQLにおいて特別な意味を持つ記号が入力されたときに、エスケープ処理を実施しておかないと、アプリケーションはユーザーからの入力値を、SQLのクエリであると勘違いしてしまうことで発生してしまいます。

以上のことから、セキュリティ対策の一環として、エスケープ処理を実施することは非常に重要であると言えます。

エスケープ処理を実装してみよう

エスケープ処理の必要性について説明したところで、ここからは具体的な実装方法を例を挙げて説明していきましょう。

1つ目は、改行処理です。

JavaScriptでは、ブラウザに搭載されている開発者ツールのコンソール上に、文字列を出力する機能を込めた、console.log()メソッドが用意されています。

console.log()メソッドは、出力したい文字列を引数として渡せば実行できますが、コンソール上で改行させながら出力させるには、改行処理専用のエスケープ処理を実施しなければなりません。

JavaScriptを利用して改行処理をするには、引数に「\n」という文字列を渡します。バックスラッシュがエスケープシーケンスで、nは「new line」の頭文字です。通常「n」だけを引数に渡せば「n」がそのまま出力されますが、バックスラッシュをくっつけることで「改行する」という別の意味が与えられます。

試しに、改行処理を含んだ文字列出力を処理するプログラムを実行してみましょう。以下のサンプルコードを保存し、実行してみてください。

console.log("古池や\n蛙飛びこむ\n水の音");

Google chromeで実行した場合、開発者ツールのコンソール上には以下のスクリーンショットのように、3行で出力されることが分かります。

次に、シングルクオート・ダブルクオート・バックスラッシュをコンソール上に出力してみましょう。

この3文字は、JavaScriptにとって特殊な意味を持つ記号で、console.log()メソッドにそのまま突っ込んでも出力することは不可能です。そこで、エスケープ処理の一手間を加えます。

記述方法は改行と同じく、バックスラッシュと記号を組み合わせて、それを引数に渡せば良いだけです。以下のサンプルコードの通りに、コーディングしてみましょう。

console.log("シングルクオートを表示します → \'");
console.log("ダブルクオートを表示します → \"");
console.log("バックスラッシュを表示します → \\");

Google chromeの開発者ツールでは、以下のように出力されます。エスケープ処理を適切に実施したことで、シングルクオート、ダブルクオート、バックスラッシュ、いずれも文字として表示されていることが分かります。

escape関数を使ってみよう

JavaScriptには、escape関数と呼ばれる機能が搭載されています。ここからは、escape関数の利用方法について解説していきます。

escape関数とは?

escape関数とは、かな文字や漢字といったマルチバイト文字をエスケープ処理し、16進数に置換した文字列を生み出す機能を持つ、JavaScriptの関数です。

escape関数は、主にURLの文字列を取り扱うときに使うことが多く、日本語が含まれるURLを本来の正しい表記である16進数の表記にエンコードするために使われます。

ただし、escape関数は、非推奨な機能ではないものの、将来的には削除される可能性があるため、余程のことが無い限りは、使用しないほうが無難です。

escape関数の使い方

escape関数の引数は、エンコードしたい文字列です。引数に渡す文字列によって、出力される文字列にどのような違いがあるのか、以下のサンプルコードで確認してみましょう。

let escape_str_1 = escape("aA1");
let escape_str_2 = escape("あア一");

console.log(escape_str_1);
console.log(escape_str_2);

コンソール上の表示結果は、以下の通りです。

「aA1」を引数にした場合はそのまま出力されるのに対して、「あア一」を引数にした場合はそのまま出力されず、文字と数字の羅列が出力されていることが分かります。

しかし、ランダムにエンコードしているわけではありません。これも、パーセント記号をエスケープシーケンスとしたエスケープ処理によって、生成された16進数文字列が出力されているのです。

例えば「u3042」は、Unicodeにおいて「あ」を意味する16進数であり、パーセント記号と組み合わせることで、プログラムが「あ」を解釈できるようにしています。同様に「u30A2」は「ア」、「u4E00」は漢数字の「一」を意味します。

unescape関数の使い方

escape関数は、かな文字や漢字から16進数文字列を生成しますが、その逆の処理を施すのがunescape関数です。

unescape関数は、エスケープ処理された16進数の文字列を引数に渡すことで、対応するかな文字や漢字などのマルチバイト文字を戻り値として返します。以下のサンプルコードで、挙動を確認してみましょう。

let unescape_str_1 = unescape("%u3044");
let unescape_str_2 = unescape("%u30A4");
let unescape_str_3 = unescape("%u4E03");

console.log(unescape_str_1);
console.log(unescape_str_2);
console.log(unescape_str_3);

コンソール上には、以下のように表示されます。「u3043」「u30A4」「u4E03」をそれぞれUnicodeで解釈すると「い」「イ」「七」に該当しており、unescape関数にかけることで正しく文字列が返されていることが分かります。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascriptを使ってエスケープ処理を実装する方法について解説してきましたがいかがでしたか?

Javascriptには様々なエスケープシーケンスが用意されており、今回ご紹介したものはそのほんの一部に過ぎません。

ただし、これら全てを完璧に暗記する必要は全くなく、「ああ、この文字はエスケープしないとちゃんと表示されないな」くらいを頭の片隅に置いておき、いざという時にそれを引き出せるようにしておけば大丈夫です。

エスケープ処理は、Webアプリケーションのセキュリティにも関わる技術になりますので、今回の記事でしっかりとマスターしておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。