TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLエスケープとURLデコードの違いを現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLエスケープとURLデコードの違いを現役エンジニアが解説【初心者向け】

初心者向けにHTMLエスケープとURLデコードの違いについて解説しています。HTMLにおけるエスケープ処理の例、エンコードとデコードの仕組み、実行例について説明します。それぞれの書き方を覚えましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTMLエスケープとURLデコードの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

エスケープとURLデコードの違いについて詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

HTMLエスケープとは

HTMLでは以下の文字を特殊文字と呼びます。

  • >
  • <
  • “
  • ‘
  • &

これらはHTMLの文法で使われている文字であるため、HTML上にそのまま記述することができません。そこで上記の文字を別の文字で表現する「文字参照」と呼ばれる手法が使われいます。HTMLをエスケープとした場合、通常はこの文字参照を指します。サンプルコードで確認してみましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample</title>
</head>
<body>
  <h2>"冷やし中華"始めました</h2>
  上記のHTMLは<br>
  &lt;h2&gt;&quot;冷やし中華&quot;始めました&lt;/h2&gt;<br>
  と記述しています。
</body>
</html>

実行結果は以下のようになります。

 

[PR] Webデザインで副業する方法とは

URLデコードとは

Webサイトを表すURLにも使用できない文字があります。具体的にはひらがなや漢字などは使用できません。それらを使用できる文字に変換することを「URLエンコード」と呼びます。

またURLエンコードした文字列をもとの文字列に戻す方法を「URLデコード」と呼びます。ブラウザのコンソールで実行して試してみましょう。

const uri = 'https://mozilla.org/?x=こんにちは！';
const enc = encodeURI(uri);
console.log(enc);
console.log(decodeURI(enc));

実行結果は以下のようになります。上がエンコードされたURL、下がデコードされたURLとなります。

https://mozilla.org/?x=%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%EF%BC%81
https://mozilla.org/?x=こんにちは！

 

HTMLエスケープとURLデコードの違いについて

特殊文字をHTMLエスケープする方法について、詳しくは以下の記事も参考にしてください。

MDN – HTMLを始めよう

URLエンコードについて、詳しくは以下の記事も参考にしてください。

MDN – encodeURI()

MDN – decodeURI()

 

まとめ

今回の記事ではHTMLエスケープとHTMLデコードの違いについて学習しました。

 

監修してくれたメンター

太田和樹（おおたかずき）

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

【初心者向け】HTMLの習得におすすめの本6選

これからプログラミングを始めてみたい、自分でサイトを作ってみたいという方は、まずHTMLを理解しなければなりません。初心者が独学で始める上で参考になるのが「本」...
HTML

HTMLでbodyタグにonLoad属性を使う方法を現役エンジニアが解説【初心者向け】

HTMLでbodyタグにonLoad属性を使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLのコードを効率良く整理する方法を現役デザイナーが解説【初心者向け】

HTMLのコードを効率良く整理する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそ...
HTML

HTMLで特殊文字を使って縦線を表示する方法を現役エンジニアが解説【初心者向け】

HTMLで特殊文字を使って縦線を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTML5でdfnタグを使って用語を定義する方法を現役デザイナーが解説【初心者向け】

HTML5でdfnタグを使って用語を定義する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

アンケートなどに役立つ！HTMLでチェックボックスを作成する方法【初心者向け】

HTMLでチェックボックスを作成する方法
webページでよく見かけるチェックボックス。自分で作成するとなると一見難しそうですが、実はHTMLで簡単に書くことがで...
HTML

あわせてよく読まれている記事

PHPのエスケープ処理について現役エンジニアが解説【初心者向け】

PHPのエスケープ処理について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次HTMLエスケープとはURLデコードとはHTMLエスケープとURLデコードの違いについてまとめ監修してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPでダブルクォーテーションを表示しようとしたらエラーがでます。どうしたらいいですか？ ソースコード： <?php echo "私は"りんご"が好きです"; ?> エラー画面： PHP Parse error: syntax error, unexpected identifier "りんご", expecting "," or ";" in /workspace/Main.php on line 2 田島悠介 PHPでのダブルクォーテーションは「文字列の始まりや終了」を表す特別な意味がある記号だから、そのままでは表示できないんだ。 ダブルクォーテーションのような、特別な記号の働きをなくすエスケープ処理が必要だね。 大石ゆかり エスケープ？何の処理ですか？ 田島悠介 エスケープ処理をすると機能を無効にしたり、違う機能をさせたりできるんだ。 「エスケープ」の英語には「脱出する」という意味があるから、本来の機能から「脱出」させるのがエスケープ処理と覚えるのもいいね。 大石ゆかり そういえば、スマホのゲームに「エスケープ」ってタイトルが付いたゲームがありましたけど脱出ゲームでしたね。 田島悠介 プログラミング言語でのエスケープ処理には特殊記号を表示することと、HTMLタグなどの命令を無効にする2つの役割があるんだよ。 大石ゆかり そうなんですね。その「エスケープ処理」について教えてください！ 田島悠介 じゃあ、特殊記号を表示させる方法から見ていこうか。   この記事は、エスケープ処理の概要や、PHPプログラムでエスケープ処理を行う方法について解説しています。PHPを使用した開発にまだ慣れていないという方でも、理解できる内容になっています。 エスケープ処理とは エスケープ処理とは、特殊記号（あるいはタグなどの命令）で行われる処理を回避して単なる文字として表示したり、逆に普通の文字に改行などの特別な機能を持たせます。 たとえば、「”」（ダブルクォーテーション）をPHPのコードから文字列として表示させたい場合、通常なら「”」は文字列の始まりか終わりを指す特殊記号なのでPHPでは表示ができません。 特殊記号を表示するには、バックスラッシュ(\)または円記号に続けて特殊記号を記述します。 バックスラッシュのようなエスケープ処理に使う文字をエスケープ文字といいます。 エスケープ処理には特殊記号を表示させるだけでなく、HTMLコードやJavaScriptの命令を無効化して安全に表示する使い方もあります。 このようなエスケープ処理はPHPに限らず、他のプログラム言語でも共通に存在する処理です。 ※バックスラッシュ(\)を入力しても円記号(¥)がそのまま表示される場合もありますが、PHPでは円記号はバックスラッシュと同じ役割です。 ※ダブルクォーテーションをWebページ上に表示するには、HTMLの特殊文字コード「&quot;」を使う方法もあります。   バックスラッシュの入力方法について Windowsで標準的なキーボード配列の場合、バックスラッシュ(\)は日本語キーボードだとバックスペースキーの左側のキー（キーボードの刻印は「¥」）を押すか、右下にある「\」キー（日本語かな表記だと「ろ」の刻印のキー）を押します。 ※Windowsでは使用しているアプリやフォント（書体）により、バックスラッシュが円記号で表示される場合があります。 ※バックスラッシュの入力はPHPの命令と同じように漢字入力オフ（漢字が入力できない状態）で入力してください。 ※URLで使われるスラッシュ(/)と、エスケープ文字のバックスラッシュ(\)は違う記号なので注意してください。   またMacの場合だと、「option」キーを押しながら右上の「¥」キーを押すだけで、半角のバックスラッシュが入力できます。 【参考】文字列の囲み方 PHPで文字列を囲むには、(“)ダブルクォーテーションで囲む方法と(‘)シングルクォーテーションで囲む方法があります。 (“)ダブルクォーテーションを文字列の中で使用する場合、(‘)シングルクォーテーションで囲んで「’私は”りんご”が好きです’」のように指定します。 違う記号で囲む方法は、コードの中で文字列を囲む記号が統一できないので、エスケープ処理をするのがおすすめです。   特殊記号を表示する PHPでダブルクォーテーションを含んだ文字列をバックスラッシュでエスケープして表示します。 サンプルコード ダブルクォーテーションを含んだ「私は”りんご”が好きです」という文章を表示します。 ソースコード <?php echo "私は\"りんご\"が好きです"; ?> 実行結果 解説 上記のプログラムでは、「”」の前にバックスラッシュ(\)を使用して「”」を単に文字として扱うようにしています。 このようにダブルクォーテーションのような特別な意味を持つ文字の前に「\」のエスケープ文字を使用して「文字列の開始と終了」という特別な効果を打ち消す処理がエスケープ処理です。   エスケープシーケンス 上記のように、特殊な記号を文字として出力するためにエスケープ文字を使用した文字の組み合わせをエスケープシーケンスといいます。 エスケープシーケンスを使用することで、文字列の途中で「改行」したり「タブ」を挿入したりといった特殊な処理を行うことも可能です。 エスケープシーケンスを有効にするにはダブルクォーテーションで文字列を囲みます。 以下は、主なエスケープシーケンスの一覧です。 \n 改行 \’ シングルクォーテーション(‘) \” ダブルクォーテーション(“) \¥ 円記号 \$ ドル記号 \t 水平タブ \\ バックスラッシュ ※PHPの他のエスケープシーケンスについて、詳しくは公式のドキュメント「エスケープシーケンス」をご覧ください。 ※エスケープシーケンスが含まれた文字列をシングルクォーテーションで囲むと、「\’」「\\」以外のエスケープシーケンスは機能せずエスケープ文字が表示されてしまいます。   エスケープシーケンスを使った例 それでは、実際にエスケープシーケンスを使用する例を見ていきましょう。 サンプルコード エスケープシーケンスを使った例として、以下の記号の表示をしてみましょう。 (‘)シングルクォーテーション 改行 タブ ドル記号 バックスラッシュ ソースコード //preタグで通常のテキストとして表示 echo "<pre>"; // ダブルクォーテーションの表示 echo 'PHPの文字列は「"」か「\'」で囲みます。'; // 改行 echo "\n"; echo "\nりんご\nみかん\nれもん\n"; echo "\n"; // タブ echo "1\t2\t3\n"; echo "りんご\tみかん\tれもん\n"; echo "\n"; // ドル記号 echo "りんごの価格：\$1\n"; echo "\n"; //バックスラッシュ echo "PHPで改行するには「\\n」と記述します"; //preタグの終わり echo "</pre>"; 実行結果 解説 2行目のpreタグは出力した改行などをHTML表示でも反映させるためのタグです。 5行目では文字列をシングルクォーテーションで囲っているのでダブルクォーテーション(“)はそのまま表示でき、シングルクォーテーションはエスケープシーケンスで表示します。 8から10行目でエスケープシーケンス「\n」により文字列の途中で改行しています。 13と14行目は文字をそろえる時に便利なタブ文字「\t」（一定間隔の空白を空ける文字）を入力しているので、数字とフルーツの名前がそろっています。 18行目は変数名などで使われるドル記号($)をエスケープして表示しています。 また22行目にあるように、バックスラッシュ（または円記号）自身を表示するときは「\\」と記述します。 ※シングルクォーテーションで文字列を囲ったときに機能するエスケープシーケンスは、「\’」と「\\」だけです。   [PR] Webデザインで副業する方法とはHTMLタグのエスケープ(htmlspecialchars) エスケープ処理の中にはHTMLタグを無効化する処理も含まれます。 たとえば、エスケープ処理をしていないフォームに「<script>alert(‘Hello!’)</scprit>」と入力すると、入力された文字を表示するときにアラート画面を表示するJavaScriptがそのまま実行されてしまう可能性があります。 エスケープ処理を行うとタグで使われるHTMLの命令であるHTMLエンティティに変換されるので「<」や「>」などの記号は単なる文字として表示する「&lt;」「&gt;」に変わります。 PHPでHTMLタグをエスケープ処理するにはhtmlspecialchars関数を使います。 ※HTMLエンティティとは、アンパサンド(&)で始まりセミコロン(;)で終わる記号を表示するHTMLの命令を表す文字です。たとえばコピーライトの記号「©」を表示させるHTMLエンティティは「&copy;」です。 ※エスケープ処理する関数は、他に特殊記号なども変換できるhtmlentities関数やタグを取り除くstrip_tags関数などもあります。   書式 エスケープ処理された文字 = htmlspecialchars( 対象文字列 ); htmlspecialchars関数の第1引数には、エスケープ処理したい文字列を指定します。 ※第2引数は省略できますが、ダブルクォーテーションなどを変換するかどうかなどの変換パターンを指定します。詳しくは公式ドキュメント「PHP: htmlspecialchars – Manual」のパラメータflagsの項目をご覧ください。 ※第3引数も省略できて、文字を変換するときの文字コードを指定します。   サンプルコード HTMLタグを含んだ文字列「<b>太字</b><br>」をhtmlspecialchars関数でエスケープ処理して、HTMLタグとして認識されない文字（HTMLエンティティ）に変換します。 ソースコード <?php //HTMLタグをそのまま表示（太字になる） $tag = "<b>太字</b><br>"; echo $tag; //HTMLタグをエスケープして表示（HTMLエンティティに変換される） $tag_escape = htmlspecialchars($tag); echo $tag_escape; ?> 実行結果 解説 変数 $tagを表示すると、HTMLタグが有効なので<b>タグが有効になり太字で表示され<br>タグで改行されます。 htmlspecialchars関数にエスケープ処理したい変数 $tagを渡します。 エスケープ処理されて「<」「>」の記号がHTMLエンティティに変換され、変数 $tagの文字列は「&lt;b&gt;太字&lt;/b&gt;&lt;br&gt;」になります。 エスケープ処理された変数 $tag_escapeを表示するとHTMLエンティティに変換されているので、太字にも改行にもならず単なる文字として表示されます。   まとめ バックスラッシュ(\)に続けて記述されたエスケープシーケンスを使用することで、特別な効果を持つ「’」や「$」を文字として出力したり、改行やタブのような特殊な処理を行えます。 HTMLタグを無効にするhtmlspecialchars関数でエスケープ処理することで安全な表示が行えます。 エスケープ処理は実務でもよく使いますし、PHP以外のプログラム言語でも使用する処理です。 エスケープ処理とは何か、その使用方法について確実にマスターして実際の開発に役立てましょう。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   PHPを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのPHP/Laravelコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、PHP/Laravelを使ったWebアプリケーション開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
PHP

JavaScriptでHTMLのエスケープ処理を行う方法を現役エンジニアが解説【初心者向け】

JavaScriptでHTMLのエスケープ処理を行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   目次 エスケープ処理とは エスケープ処理が必要になる状況 HTMLのエスケープ処理を行う方法 実際に書いてみよう まとめ エスケープ処理とは エスケープ処理とは、そのままでは意図した文字列を表現できない場合に使用する、代替文字列処理のことです。 通常、JavaScriptからHTML画面に文字列を表示させる場合、「こんにちは」という文字はそのまま画面に「こんにちは」と表示されます。ところが、ある特殊な状況で「<p>こんにちは</p>」と表示させようとした場合、画面にそのまま文字列を表示させることができないケースがあります。 このような場合、<p>の代わりに次のような文字列を入力すると、HTMLデコードにより<p>に変換されます。 HTMLタグ文字列のエスケープ処理例 ( JavaScript ) &lt;p&gt;  // HTMLデコード時に、<p>に変換される [PR] Webデザインで副業する方法とはエスケープ処理が必要になる状況 JavaScirptからのHTML要素の追加処理 JavaScriptで生成したHTMLコードを動的に画面表示する場合に、HTMLコードのエスケープが必要になる場合があります。 例えば、以下のようにjQueryのappendメソッドを使うことで、画面に<p>タグのDOMを動的に追加し、文字列を表示させることができます。 JavaScript ( jQueryを利用 ) $("#divArea").append('<p id="pdom">こんにちは</p>'); HTML   <p class="title">Hello TechAcademy !</p>   <div id="divArea"></div> 画面表示1 この時、appendの引数で指定した<p id=”pdom”>は画面上でpタグとして扱われ、「こんにちは」の文字列はp要素として画面表示されます。 ところが、次のようなコードでHTMLにDOMを追加すると、意図しない画面表示となります。 JavaScript ( jQueryを利用 ) $("#divArea").append('<p id="pdom">こんにちは、<p>タグの解説をします。</p>'); 画面表示2 同じ方式で画面に<p>という文字列を表示させようとしても、<p>はHTMLタグとしてDOMに変換されてしまうため、画面表示させることができません。 このような時に、HTMLエスケープ処理が必要となります。 JavaScriptとHTMLは別々のファイルでコーディングするのが通常ですが、SPAのようにAjaxを多用するアプリケーションの場合は、APIから動的に取得したデータをJavaScript側で生成したDOMにセットした後、HTMLに追加して動的に画面表示させるため、JavaScript側でのHTMLエスケープが必要になるんですね。 エスケープ処理が必要にならない状況 JavaScript側から単に画面に文字列を表示させたい場合、エスケープ処理は必要ありません。 例えば、このような場合です。 JavaScript ( jQueryを利用 ) $("#area2").text("<p>タグの解説をします"); HTML <div id="area2"></div> 画面表示3 このようにDOM操作時においても、多くの場合エスケープ処理を必要としませんのでご安心ください。 本記事では、JavaScript側からHTMLのDOM要素を生成して追加レンダリングするという特殊な状況を前提としています。   大石ゆかり JavaScriptなのに、HTMLエスケープが必要な理由がわかりました。 田島悠介 エスケープ処理を使うケースは少ないけど、覚えておくと便利だよ。 HTMLのエスケープ処理を行う方法 HTMLの仕様で定められた特殊な文字列で<p>などの文字列を置き換えることにより、エスケープ処理を行うことができます。この特殊な文字列は「エスケープシーケンス」と呼ばれています。 代表的なHTMLエスケープシーケンス この３つを使うだけで、DOM追加時のエスケープ処理としては十分でしょう。 エスケープ対象コード エスケープシーケンス 説明 < &lt; タグ構成記号の左側部分 > &gt; タグ構成記号の右側部分 “ &quot; ダブルクォーテーション HTMLエスケープシーケンス利用例 JavaScriptから追加したDOM要素で「こんにちは、<p>タグの解説をします」と表示できるようなコードを見てみましょう。 JavaScript ( jQueryを利用 ) $("#divArea").append('<p id="pdom">こんにちは、&lt;p&gt;タグの解説をします</p>'); HTML   <p class="title">Hello TechAcademy !</p>   <div id="divArea"></div> 画面表示4 <p>タグのDOMを動的追加しながら、同時にDOM内にセットした<p>の文字列表示に成功しています。 実際に書いてみよう 今回の解説で登場した、画面を表示・操作可能なサンプルプログラムをご紹介します。実際に動かして、エスケープ処理を成功させてみましょう。 画面にはボタンが2つ用意してあり、「DOMを追加」ボタンを押下するとHTMLエスケープが必要なDOM追加処理が実行できるようになっています。 また、「既存DOMを操作」のボタンを押下すると、HTMLエスケープが不要な場合の操作を検証することができます。 HTML <!DOCTYPE html> <html>   <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sample.css"> <title>HelloTechAcademy</title> </head> <body> <p class="title">Hello TechAcademy !</p> <div
JavaScript

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

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行目   [PR] Webデザインで副業する方法とは実際にエスケープ処理（エスケープシーケンス）を書いてみよう シングルクォートの中にシングルクォートを表示 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(文字列) 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サイトの表現の幅を広げたいという方はぜひご覧ください。
JavaScript

JavaScriptでJSONのエスケープを行う方法を現役エンジニアが解説【初心者向け】

JavaScriptでJSONのエスケープを行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。 田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JSONのエスケープを行う方法について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 JSONとは エスケープ処理の必要性 JavaScriptでJSONのエスケープを行う方法 まとめ JSONとは JSONはJavaScript Object Notationの略で、JavaScriptのオブジェクトをベースにしたデータのフォーマットです。 そのため、JSONのフォーマットとJavaScriptのオブジェクトはよく似た形をしています。 下記はJSONデータの例です。 { "name": "テックアカデミージュニア", "age": 15, "langulage": "JavaScript" } JSONのフォーマットでおさえておきたいポイントを2つ紹介します。 文字列は”（ダブルクォート）で囲う JavaScriptでは’（シングルクォート）でも囲えますが、JSONは”（ダブルクォート）のみです。 プロパティ名は必ず”（ダブルクォート）で囲う 値は数値や配列の場合などに”（ダブルクォート）で囲わないことがありますが、プロパティ名は”（ダブルクォート）で囲う必要があります。 そのほかJSONの仕様については、情報通信システムの標準化団体であるEcmaインターナショナルから出ているJSONデータのpdfで確認できます。 [PR] Webデザインで副業する方法とはエスケープ処理の必要性 エスケープ処理とは、構文に影響を及ぼすような文字を影響がでない別の文字に置き換えることです。 例えばJSONの場合、文字列を”（ダブルクォート）で囲いますが、下記のように途中に”がある場合、どこからどこまでが文字列かわからなくなり、構文エラーになります。 "テックアカデミー"ジュニア " エスケープは直前に\（バックスラッシュ）を使いおこないます。/（スラッシュ）と間違えないように注意してください。 先程の文字列をエスケープする場合は下記のようになります。 "テックアカデミー\"ジュニア " 他にエスケープが必要な文字は下記になります。 “（ダブルクォート） \（バックスラッシュ） U+0000からU+001Fまでの制御文字 制御文字とは、改行とかタブなどのことです。 制御文字を表示できるエディタもありますが、基本的には表示はされずに動作する文字になります。 JavaScriptでJSONのエスケープを行う方法 JavaScriptのオブジェクトをどこかのネットワークに送るような場合に、データの形式にJSONフォーマットが指定されるケースが増えています。 JavaScriptのオブジェクトをJSONフォーマットに変換する場合は、JSON.stringifyメソッドを使います。また、JSON.stringifyメソッドを使うとエスケープが必要な文字がエスケープされます。 下記にJavaScriptのオブジェクトを用意しました。 { "name": `2020"1/1 あいう えお かき\くけ\\こ` } プロパティ名はnameとしています。 値はJavaScriptの文字列に、`（バッククォート）を使いテンプレート文字列として、下記の5つのエスケープ対象の文字を含んでいます。 「2020」の後の”（ダブルクォート） 「あいう」の後のタブ文字（テキスト上は見えませんがタブによるスペースができています） 「えお」の後の改行文字（テキスト上は見えませんが改行されています） 「かき」の後の\（バックスラッシュ） 「くけ」の後の\\（バックスラッシュ2つ） このJavaScriptのオブジェクトをJSON.stringifyを使ってJSON文字列に変換してみます。 let jsonString = JSON.stringify( { "name": `2020"1/1 あいう えお かき\くけ\\こ` }); jsonStringという変数にJSON文字列が格納されました。格納されたJSON文字列は下記になります。 '{"name":"2020\\"1/1 あいう\\tえお\\nかきくけ\\\\こ"}' 格納された結果から、エスケープされた文字を確認します。 「2020」の後の”（ダブルクォート）は、前に\\がついてエスケープされています。 「あいう」の後のタブ文字は、\\tにエスケープされています。 「えお」の後の改行文字は、\\nにエスケープされています。 「かき」の後の\（バックスラッシュ）は、消えています。これは、\（バックスラッシュ）がJavaScriptのエスケープ文字であるためJSONに変換される前になくなるためです 「くけ」の後の\\は、\\\\にエスケープされています。これは、\（バックスラッシュ）がJavaScriptのエスケープ文字であるため、JSONのエスケープで\（バックスラッシュ）が再度付与されるためです。 ちなみに、「1」の後の/（スラッシュ）はエスケープしても良い文字ですが、必須ではありません。 scriptタグを使うような場合など必要な場合だけエスケープしてください。 まとめ JSONデータの扱いとエスケープについて紹介しました。 JSONの構文チェックができるサイトもたくさんあるので、構文の確認をする場合に使ってみてください。JSONLintは構文の確認ができるサイトの1つです。 監修してくれたメンター 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。 大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

strstr関数の使い方！PHPで文字列を検索する方法【初心者向け】

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。 文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。 すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。 目次HTMLエスケープとはURLデコードとはHTMLエスケープとURLデコードの違いについてまとめ監修してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPで文字を探すプログラムを作りたいんですけど、どうすればいいんでしょうか。 田島悠介 どうして文字を探したいのかな？ 何かの文字で区切っているから？それとも文字の位置を探したい？ 大石ゆかり ええと、文字を探す方法がそんなにいろいろあるんですか？ 田島悠介 そうなんだ。PHPではいろんな文字列の検索方法があるよ。 まずは、区切り文字で検索する方法から見てみよう！   区切り文字で分けて検索 – strstr関数 strstr関数は対象の文字列から検索文字列を探し、見つかったら検索文字列から対象の文字列の最後までを返します。 区切る文字列を境にして文字列を取得したいときに使えます。 構文 検索対象の一部分の文字列 = strstr(検索対象の文字列, 検索文字列, [検索文字列より前の部分を取得するか]) 第1引数は検索文字を探し出す対象の文字列です。 第2引数は検索する文字列です。 検索文字列が半角のアルファベットの場合は、大文字小文字を区別して検索されます。 第3引数は省略でき、検索文字より前の部分を返したい場合にtrueを指定しますが、標準ではfalseつまり検索文字より後の部分を取得します。 戻り値は検索文字列が検索対象の文字列から見つかったときに、検索文字列を含む文字から検索対象の文字列の最後までの文字列を返します。 たとえば、「dog&cat」の文字列から「&」を検索した場合、「&cat」が戻り値として返ります。 ただし第3引数にtrueが指定されている場合は、検索文字を含まない前の部分を返します。 もし検索文字が見つからなかったときはfalseを返します。 ※ある文字列中に別の文字列が存在するかどうかを確認したいだけならstrpos関数またはstr_contains関数（PHPの新しいバージョン8で使用可能)を使います。 ※大文字小文字を区別しないで検索したい場合は「stristr関数」を使うことで実現できます。   strstr関数の使い方 strstr関数を使ってある文字列で区切った文字列の分割をしてみましょう。 ソースコード フルネーム「山田 太郎」を半角スペースで姓と名に分けて出力するプログラムです。 <?php //検索文字列（半角スペース） $search = ' '; //対象文字列（空白で区切られたフルネーム） $target = '山田 太郎'; echo "対象文字列：$target<br>"; //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); //空白を削除（「 太郎」->「太郎」） $firstName = trim($firstName); //姓の取得（空白より前） $lastName = strstr($target, $search, true); //検索結果はあるか if($firstName != false || $lastName != false){ //姓名の出力 echo "姓：$lastName<br>"; echo "名：$firstName"; } else { echo "文字が見つかりませんでした。"; } ?> ※ダブルクォーテーションで変数を囲うと、“$変数名”で変数の値を展開して出力できます。変数の展開について詳しくは公式ドキュメント「変数のパース」をご覧ください。 ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。 表示結果 解説 //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); 検索対象の文字列（$target）から検索文字（$search）が見つかったところより後ろの文字列を取得します。 検索対象の文字列
PHP

PHPでフォームからデータを受け取る方法（GETとPOST）

プログラミング初心者向けに、PHPの基礎を紹介する記事です。 今回は、フォームからデータを受け取る方法について解説します。 最初にフォームの送信方法とPHPでの受け取り方に関しての説明をします。 その後、実際に動くコードを作成してデータの送受信を試していきます。 フォームでのデータのやりとりはWebサイトなどでは基本なので、ぜひ覚えておきましょう。   目次 GETとPOSTとは HTMLのフォーム 送信されるデータ フォームデータの受け取り方 受信データのバリデーション 実際にコードを書いてみよう 開発環境はXAMPPを使っています。   GETとPOSTとは PHPにおけるデータの受け取り方には、GETリクエスト と POSTリクエスト を使う2通りの方法があります。 POSTリクエストはフォームからHTTP通信により送信され、送信データはリクエストの本体に含まれます。 GETリクエストはフォームやリンクからHTTP通信により同じように送信されますが、送信データはURLの最後に？に続いて　パラメータ名=値という形式で付加されます。     大石ゆかり フォームを使ってデータを送信できるんですね。 田島悠介 そうなんだ。フォームから送ったデータを、PHPで取得できるんだよ。 大石ゆかり いろいろなところで使われてそうですね。 田島悠介 そうだね。後、フォームじゃないんだけどURLの最後に?p=2とか/p2/もGETでデータを送ってることになるんだ。 多くは何ページ目とかに使われるね。HTMLでフォームを作って送信してみよう！ [PR] Webデザインで副業する方法とはHTMLのフォーム サーバにデータを送信するためには、HTMLのフォームを使います。 GETリクエストのフォーム フォームの構造は次のようなコードです。 <form action = “index.php” method = “GET”> <input type = “text” name =“comment/“><br/> <input type = “submit” value =“送信/“> </form> formタグのaction属性に送信先のURLを指定します。 送信方法はデフォルトでGETリクエストですが、method属性で POSTかGETに指定できます。 formタグ内の inputタグの値が送信するデータです。 この時、name属性がリクエストパラメータ名になり、value属性の値やテキストボックスに入力された値がそのパラメータの値です。 上のコードでは、フォームのデータは、commentというパラメータ名で入力値とのペアで送られ、送信方法はGETリクエストになり、送り先は index.php です。 POSTリクエストのフォーム POSTリクエストにしたい場合は、次のようにform要素のmethod属性をPOSTに変更するだけです。 <form action = “index.php” method = “POST”> <input type = “text” name =“comment/“><br/> <input type = “submit” value =“送信/“> </form> 送信されるデータ ここでは、例としてcommentという名前属性のinput要素に hogehogeという文字を入力して送信するとしましょう。 GETリクエストのデータ データがURLの一部として含まれてサーバに送られます。 送信先は index.phpとすると、URL全体は次のようになります。 http://index.php?comment=hogehoge ここで注目していただきたいのは、後に付けた?comment=hogehogeの部分です。 GETリクエストのデータは基本的には、 ? の後に パラメータ名=値のペアの形式で送られます。 複数のデータの場合は、間を & でつなげます。 http://index.php?comment=hogehoge&title=hello このURLで送られるのは、 comment=hogehogeとtitle=helloという２つのデータ（パラメータ名=値のペア）です。     フォームデータの受け取り方 GETリクエストで送信したデータを受け取る GETリクエストで送信したデータは、グローバル変数である $_GET に連想配列という形で入っています。 そこで、PHPでデータを受け取るときは、この　$_GET を使います。 先ほどの例では、comment=hogehogeというデータが送られましたが、$_GETには、[‘comment’ => ‘hogehoge’] という連想配列で保存されます。 $_GETからデータを受け取るには、受け取りたいinput要素の name属性
PHP

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLエスケープとURLデコードの違いを現役エンジニアが解説【初心者向け】