JavaScriptを学習していてときどき目にする「エスケープ」について、理解できていますか？
JavaScriptでは、ブラウザ上や開発者ツールのコンソール上に、文字列を出力する機能が備えられています。
しかし、どのように改行させればよいのか分からなかったり、ある特定の文字だけ出力されなかったりした経験はありませんか？これらは、エスケープ処理を適切に実施することで解決できます。
今回は、文字列処理を使いなすために覚えておきたい、エスケープ処理の方法を解説していきます。エスケープ処理が理解できれば、今までよりも複雑な文字列処理を実装できるようになるので、スキル向上のためにぜひお役立てください。
フリーランス案件を探すならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社Hajimari |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約28,000件 | 約3,300件 | 約4,200件 |
| 平均単価 | 68.2万円 | 72.2万円 | – |
| 最高月収 | 145万円 | 200万円 | 176万円 |
| 特徴 | ・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心 | ・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20% | ・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い |
| 紹介企業例 | ・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース | ・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など | ・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など |
| 説明記事 | |||
| 公式サイト |
転職を考えているならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社リブセンス |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約13,000件 | 約800件 ※非公開求人が多い | – ※ドラフト制のため、対象外 |
| 年齢層 | 20代：◎ 30代：〇 40代：〇 | 20代：〇 30代：〇 40代：△ | 20代：〇 30代：〇 40代：〇 |
| 特徴 | ・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績 | ・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現 | ・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる |
| 紹介企業例 | ・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など | ・DMM.com ・Money Forward ・SmartHR など | ・メルカリ ・ZOZOテクノロジーズ ・freee など |
| 説明記事 | |||
| 公式サイト |
エスケープ処理とは？
エスケープ処理とは、エスケープシーケンスと呼ばれる特別な記号を使って、今までとは異なる機能を文字に対して与えることを意味します。
エスケープ処理は、文字列を画面に出力する以外の特殊な処理を行いたい場合に利用することが多いです。また、プログラミング言語にとって特別な扱いとなっている文字を、文字列として解釈し画面に出力したいときにも、エスケープ処理を行うことで解決できます。
JavaScriptではさまざまなエスケープ処理が用意されています。代表的なエスケープ処理を、以下の表に示しました。それぞれどのような機能が備えられているか、実際にコーディングして確認してみましょう。
| エスケープ処理 | 意味・機能 |
|---|---|
| \b | バックスペース |
| \f | 改ページ |
| \n | 改行 |
| \r | 復帰 |
| \t | 水平タブ |
| \v | 垂直タブ |
| \\ | バックスラッシュ |
| \’ | シングルクォート |
| \” | ダブルクオート |
| \0 | NULL文字 |
なぜエスケープ処理が必要なのか？
そもそも、なぜエスケープ処理が必要になるのかについてですが、それは、プログラミング言語において特別な意味を持つ文字を画面出力するためです。
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アプリケーションのセキュリティにも関わる技術になりますので、今回の記事でしっかりとマスターしておいてくださいね。
このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
