TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLで特殊文字のエスケープ処理を行う方法【初心者向け】
HTML

HTMLで特殊文字のエスケープ処理を行う方法【初心者向け】

初心者向けにHTMLで特殊文字のエスケープ処理を行う方法について解説しています。ブラウザ上では何が起きてるか分からないかもしれないですが、サイトのセキュリティ的にも大事な部分なので、ぜひ実際に書いて慣れていきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLで特殊文字をエスケープする方法についてテックアカデミーのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説しています。

目次

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

 

特殊文字とは

特殊文字とは、<>や”といったHTMLを書く際に使う記号や、©や£のような通常の文字とは異なる特別な文字のことを指します。

 

エスケープとは

エスケープとは、HTML上で特殊文字を期待通りに表示するために施す処理のことです。

特殊文字に指定されている文字は、割り当てられている記号を記述することで表示できます。

 

例えば、<は&lt;であったり、©は&copy;など、特殊文字には必ず該当する記号が割り当たっています。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

主なエスケープ文字一覧

シングルクォーテーションのみ、数値表現でコードを表示しています。

記号 コード 意味
< &lt; 小なり
> &gt; 大なり
‘ &#39;
シングルクォーテーション
“ &quot;
ダブルクォーテーション
& &amp;
アンパサンド（アンド）
&nbsp; 空白
¥ &yen; 日本円
¢ &cent; セント
£ &pound; ポンド
¦ &brvbar; 縦破線
© &copy; コピーライト
® &reg; 登録商標
° &deg; 気温を表す度
± &plusmn; プラスマイナス
× &times; 掛け算の乗算
÷ &divide; 割り算の除算
µ &micro; マイクロ
· &middot; 中点
§ &sect; セクション
« &laquo; 左引用
» &raquo; 右引用
² &sup2; 上付き2
³ &sup3; 上付き3
¹ &sup1; 上付き1
¼ &frac14; 4分の1
½ &frac12; 2分の1
¾ &frac34; 4分の3

 

エスケープしない危険性

エスケープしないと、「意図しない挙動」が発生する危険性があります。

例えば、メールフォームなどで情報を送信するページを作ったとします。

 

この時、メールフォームにエスケープ処理を施さないことで、クロスサイトスクリプティング（XSS）という攻撃の標的にされることがあります。

具体的に次のような攻撃を受けます。

  • セッションハイジャック
  • XSS（クロスサイトスクリプティング）

これら2つの攻撃について解説します。

 

セッションハイジャック

セッションハイジャックとは、何らかの方法でセッションが乗っ取られることを指します。

セッションが乗っ取られることにより、ユーザーの権限を使われて不正な操作をされたり、ユーザーの個人情報・重要情報が盗まれる場合があります。

つまり、「なりすまし」による不正アクセスが可能になります。

セッションハイジャックの対策にもエスケープ処理が有効です。

 

XSS（クロスサイトスクリプティング）

XSS（クロスサイトスクリプティング）とは、サイトにスクリプトを埋め込み実行することです。

XSSの対策にもエスケープ処理が有効です。

 

実際に書いてみよう

HTML上で特殊文字を扱う処理の使用例を見ていきましょう。

HTML

<html>
  <head>
    <title></title>
    <meta charset="utf-8" />
  </head>
  <body>
    <strong>この文字列は太くなります。</strong>
    <br />
    &lt;strong&gt;この文字は太くなりません。&lt;/strong&gt;
    <br />

    <h1>よく使う特殊記号</h1>

    &amp;(アンパサンド)
    <br />
    &lt;(小なり)
    <br />
    &gt;(大なり)
    <br />
    &quot;(ダブルクォーテーション)
    <br />
    &#39;（シングルクォーテーション）
    &nbsp;（空白）
    <br />
    &copy;（コピーライト）
  </body>
</html>

 

表示結果

 

解説

次のコードはHTMLでstrongタグが適用されるため、太字で表示されます。

<strong>この文字列は太くなります。</strong>

 

次のコードはエスケープ処理されるため、strongが文字列で表示されるだけで、太字にはなりません。

もし、このコードがサーバを攻撃するようなコードだったとしても、エスケープ処理することで安全になります。

&lt;strong&gt;この文字は太くなりません。&lt;/strong&gt;

 

次のコードでは、エスケープ処理をすることで、以下の結果が表示されます。

&amp;(アンパサンド)
&lt;(小なり)
&gt;(大なり)
&quot;(ダブルクォーテーション)
&#39;（シングルクォーテーション）
&nbsp;（空白）
&copy;（コピーライト）

 

実行結果

それぞれの特殊記号が正常に表示されていることがわかります。

 

以上、特殊文字をエスケープする処理の流れを解説しました。

特殊文字をブラウザ上に表示させたい場合は、参考にしてみてください。

 

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

執筆してくれたメンター

中本賢吾（なかもとけんご）
アジマッチ有限会社　代表取締役社長

開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。WordPressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。

 

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

記事を検索

関連するキーワード

関連する記事

HTMLとCSSでランキングリストをデザインする方法を現役エンジニアが解説【初心者向け】

HTMLとCSSでランキングリストをデザインする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
HTML

HTMLのキャッシュを無効にする方法を現役エンジニアが解説【初心者向け】

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

HTMLでCache-Controlを使用する方法を現役エンジニアが解説【初心者向け】

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

HTMLでtext-alignをcenterにする方法を現役エンジニアが解説【初心者向け】

HTMLでtext-alignをcenterにする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
HTML

HTMLの書き出しコーディングが不要なデザインツールSTUDIOの使い方を現役エンジニアが解説【初心者向け】

HTMLの書き出しコーディングが不要なデザインツールSTUDIOの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心...
HTML

HTMLでiframeを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLでiframeタグを使う方法について解説します。...
HTML

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

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

JavaScriptで書くエスケープ処理を行う方法について解説しています。 セキュリティ対策のためにも知っておきたい知識なので、書き方を覚えておきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   エスケープ処理(エスケープシーケンス)とは エスケープ処理（エスケープシーケンス）とは、JavaScriptで特殊な文字を入力する際に￥（円マーク）か（バックスラッシュ）を前につけて表示する方法です。 ￥（円マーク）か（バックスラッシュ）のどちらかというところですが、基本的には同じキーです。 設定されているフォントによって￥を押したら、（バックスラッシュ）で表示される環境もありますし、￥のまま表示される環境もあります。   現在では、UTF環境が一般的だということもあり、￥のキーを押すことで、（バックスラッシュ）で表示されます。 また、日本語キーボードでは￥キーですが、英語キーボードでは（バックスラッシュ）キーを使用します。 何故、英語キーボードでは￥ではなく、（バックスラッシュ）かというと、そもそも英語キーボードを使用する国の通貨が￥（日本円）では無いためです。   エスケープ処理（エスケープシーケンス）一覧 使用文字 エスケープシーケンス後の意味 b バックスペース t 水平タブ v 垂直タブ n 改行 r 復帰 f 改ページ ‘ シングルクオーテーション “ ダブルクオーテーション ¥ ¥文字 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] HTML/CSSで挫折しない学習方法を動画で公開中実際にエスケープ処理（エスケープシーケンス）を書いてみよう シングルクォートの中にシングルクォートを表示 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サイトの表現の幅を広げたいという方はぜひご覧ください。
JavaScript

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] HTML/CSSで挫折しない学習方法を動画で公開中エスケープ処理が必要になる状況 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

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

この記事では、Javaでエスケープ処理を行う方法について解説します。 実際にプログラムを書いて説明しているので、ぜひ理解しておきましょう。   そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 エスケープ処理を行う方法について詳しく説明していくね！ 大石ゆかり お願いします！   エスケープシーケンスとは Javaでは「”（＝ダブルクォーテーション）」で囲んだ内容を文字列とみなしますが、例えばこの「”」という記号そのものを出力したい場合どうすれば良いでしょうか？ 単純に「System.out.println(“””);」と書いてもエラーになってしまいます。これは、2番目の「”」が文字列の内容ではなく、終端を表す記号とみなされてしまうからです。 この問題を解消するために使用するのが「エスケープシーケンス」です。 上記の「”」の例であれば、「System.out.println(“””);」とします。この「”」というのがエスケープシーケンスです。この2文字で「”」という記号を表しています。 Javaでは「”」以外にも、改行やtab等、そのままでは文字列として扱えないものがあり、それぞれに対して「エスケープシーケンス」が用意されています。 （例）改行→「n」、tab→「t」   エスケープ処理とは プログラム内で使用できない文字を、代替の文字に置き換えることをエスケープ処理と言います。 前述のエスケープシーケンスを使用した文字の置換もエスケープ処理のひとつです。 エスケープシーケンスはJavaの制約に基づくものですが、仕様上の理由により独自の制限を設けたい場合もあります。 例えばJavaが出力したファイルを他のプログラムが読み込む様なシステムの場合、相手側プログラムの仕様に合わせてJava側が出力内容にエスケープ処理を施す必要があったりします。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう 下記のサンプルプログラムはエスケープシーケンスを使用して改行（n）とタブ（t）を出力します。 ひとつの文字列の中に改行とタブを連結して出力しています。 ソースコード package escapetest; public class EscapeSample { public static void main(String[] args) { EscapeSample escapeSample = new EscapeSample(); escapeSample.print(); } private void print() { StringBuilder sBuilder = new StringBuilder(); String h1 = "大見出し"; String h2 = "中見出し";
Java

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

PHPのエスケープ処理について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPのエスケープ処理について詳しく説明していくね！ 大石ゆかり お願いします！ この記事は、エスケープ処理の概要や、PHPプログラムでエスケープ処理を行う方法について解説しています。PHPを使用した開発にまだ慣れていないという方でも理解できる内容となっています。 目次 エスケープ処理とは 文字列をエスケープする方法 実際に書いてみよう まとめ   エスケープ処理とは エスケープ処理とは、普通に記述するだけでは出力することの出来ない文字を出力させたり、文字列の途中で「改行する」などの特殊な処理を行うために特殊な文字を組みあわせて、その処理を実現することをいいます。 このエスケープ処理はPHPに限らず、他のプログラム言語でも共通に存在する処理です。 [PR] HTML/CSSで挫折しない学習方法を動画で公開中文字列をエスケープする方法 例えば、下記のようなPHPプログラムを実行するとエラーが発生します。 サンプルコード： <?php echo "私は"りんご"が好きです" ?> 実行結果： PHP Parse error: syntax error, unexpected 'りんご' (T_STRING), expecting ';' or ',' in /workspace/Main.php on line 2/pre> エラーの原因は、文字列の開始と終了を表す引用符「”」の中に、「りんご」を括るために「”」使用しているためです。 PHPでは、「”」は文字列の開始と終了を表す引用符として使われるように登録されているために、「”」の中に、「”」を記述すると構文エラーとなります。「”」を単に文字として扱いたい場合は、エスケープ処理を行う必要があります。 それでは、エスケープ処理を行って、「”」を単に「りんご」という文字列を括る文字として出力します。 サンプルコード： <?php echo "私は"りんご"が好きです" ?> 実行結果： 私は"りんご"が好きです 上記のプログラムでは、「”」の前に「（バックスラッシュ）」を使用して「”」を単に文字として扱うようにしています。 このように、「”」のように特別な意味を持つ文字の前に「」のようなエスケープ文字を使用して「文字列の開始と終了」という特別な効果を打ち消す処理がエスケープ処理です。 上記プログラムでは、エスケープ文字に「」を使用していますが、「¥（円記号）」も「」と同じ効果を持ちます。「」と「¥」の関係ですが、言語環境やフォントの種類によって表示が異なるだけで、同じ意味合いを持ちます。 エスケープシーケンス 上記のように「”」を文字として出力するためにエスケープ文字「」を使用した場合の「”」のような組み合わせをエスケープシーケンスといいます。 エスケープシーケンスを使用することで、文字列の途中で「改行」したり「タブ」を挿入したりといった特殊な処理を行うことも可能です。 以下は、主なエスケープシーケンスの一覽です。 エスケープシーケンス一覽： n 改行 r キャリッジリターン t 水平タブ v 垂直タブ f 改ページ ‘ シングルコーテーション(文字として扱う) “ ダブルコーテーション(文字として扱う) ¥ 円記号(文字として扱う) $  ドル記号   実際に書いてみよう それでは、実際に上記のエスケープシーケンスを使用する例を見ていきましょう。   サンプルコード： <?php // シングルコーテーション echo '私は'みかん'が好きです'; echo "nn"; // 改行 echo "りんごnみかんnれもんn"; echo "n"; // タブ echo "りんごtみかんtれもんn"; echo "n"; // ドル記号 echo "りんごの価格：$1"; ?>   実行結果： 私は'みかん'が好きです りんご みかん れもん りんご みかん れもん りんごの価格：$1   エスケープシーケンスを使用することで、特別な効果を持つ「’」や「$」を文字として出力したり、「n」や「t」のような特殊な処理を行えることが確認できると思います。 まとめ 以上、エスケープ処理の概要や使用方法について解説しました。 エスケープ処理は、実務でもよく使いますし、PHP以外のプログラム言語でも使用する処理です。エスケープ処理とは何か、その使用方法について確実にマスターして実際の開発に役立てましょう。 筆者プロフィール 平野大輝（ひらのだいき） スキル：PHP・Java・JavaScriptを用いて様々なアプリを開発するWebエンジニア。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できるオンラインブートキャンプPHP/Laravel講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
PHP

HTMLでpreタグを使ってエスケープ処理する方法を現役デザイナーが解説【初心者向け】

HTMLでpreタグを使ってエスケープ処理する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 preタグを使ってエスケープ処理する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 preタグについて preタグを使うメリットとよく使われるケース エスケープ処理した文字列を表示する方法 preタグを使ってエスケープ処理してみよう   preタグについて preタグとは、改行や半角スペースをそのまま反映させることができるものになります。preタグの「pre」は「preformatted text」の略になります。日本語では「整形済テキスト」という意味です。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中preタグを使うメリットとよく使われるケース HTMLでは通常、改行や半角スペースを挿入してもページのプレビューには反映されません。しかしながらこのpreタグを利用すれば改行や半角スペースを挿入することができます。 ページにプログラムのコードや詩などを掲載する上で必須のタグとなります。   エスケープ処理した文字列を表示する方法 preタグを用いて文字列をエスケープするためには以下のように記述します。 <pre>エスケープテキスト</pre>   preタグを使ってエスケープ処理してみよう 実際に、preタグを用いてエスケープ処理をしてみましょう。まずは、詩を掲載する場合の例です。 <pre> 雨ニモマケズ 風ニモマケズ 雪ニモ夏ノ暑サニモマケヌ 丈夫ナカラダヲモチ 慾ハナク 決シテ瞋ラズ イツモシズカニワラッテイル </pre> このように 、詩をpreタグで囲むことでエスケープすることができます。次に、プログラムのコードを掲載したい場合の例です。   <pre> <code> function Hello() {   console.log("Hello"); } Hello(); </code> </pre>   監修してくれたメンター 夛田武広 Vue.jsをメインにJavaScriptフレームワークのプロジェクトに携わる。 また、サーバーサイドもRubyやPHPを中心に得意としております。 TechAchademyではフロントエンド、Webアプリケーションコースを担当。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

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

Javaの正規表現のエスケープ処理について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。   田島悠介 今回は、Javaに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 正規表現のエスケープ処理について詳しく説明していくね！ 大石ゆかり お願いします！   目次 正規表現のルールとは Javaで正規表現を扱う方法 エスケープ処理とは 正規表現のエスケープ処理を実装してみよう まとめ   正規表現のルールとは 正規表現とは文字列のパターンを一つの形式でまとめて表現するために使うものです。郵便番号や電話番号などを表すことができ任意の文字列から特定の文字列を取得したり、一致しているかを判定したりする際に使います。 正規表現を作成する時には以下のルールがあります。 以下に示す特殊文字を使用する 特殊文字以外の文字は、その文字自体を照合する 大カッコ([])で囲まれた文字セットは、そのセット内の任意の文字を照合する 1文字の正規表現を表します。例えば[abc]と記述すればaもしくはbもしくはcと一致することを表します 正規表現の特殊文字及び記号には以下のようなものがあります。 特殊文字及び記号 記号の説明 . 任意の1文字。改行文字は除く。 * 直前の1文字の0回以上の繰り返しと一致 ^ 行の先頭 $ 行の末尾 [ ] カッコ内の任意の1文字と一致。「-」で範囲指定可。 [^ ] カッコ内の任意の1文字と不一致。「-」で範囲指定可。 + 直前の文字の1個以上の繰り返しと一致 ? 直前の文字が0個または1個の場合に一致 { } カッコ内の数値の繰り返しと一致 | 直前、直後どちらかのパターンに一致   [PR] HTML/CSSで挫折しない学習方法を動画で公開中Javaで正規表現を扱う方法 Javaで正規表現を使うためには以下のように記述します。 Pattern Patternの変数 = Pattern.compile(正規表現); Matcher Matcherの変数 = Patternの変数.matcher(比較対象文字列); java.util.regexパッケージにあるPatternクラスとMatherクラスを使うことで正規表現を使って処理をすることができます。 最初にPatternクラスをcompileクラスの引数に正規表現を設定することで正規表現を使用する準備をします。 次に先ほど作成したPatternクラスのオブジェクトからmatcherメソッドを呼び出し、引数として正規表現を使って調べたい文字列を設定します。戻り値としてMatcherクラスのオブジェクトを返すためMatherクラスの変数を用意しておきます。 matcherメソッドを使うことで文字列を正規表現に一致する部分に分けることができるため一つの文字列の中に複数正規表現に一致する場合でも調べることができます。   エスケープ処理とは 特殊文字を使うことで正規表現を表すことができます。しかし、特殊文字を正規表現としてではなく、文字として表したい時にはエスケープ処理をする必要があります。 エスケープ処理は以下のようにします。 特殊文字 「」を前に付けることで正規表現としての特殊文字ではなく、普通の文字として扱うことができます。しかし実際には「」は文字列において特殊な意味を持つため「」に対してもエスケープ処理が必要になるため \特殊文字 という形で記述します。   正規表現のエスケープ処理を実装してみよう では正規表現のエスケープ処理を実装してみましょう ソース import java.io.IOException; import java.io.IOException; import java.util.regex.Matcher; import java.util.regex.Pattern; public class MainClass { public static void main(String[] args) throws IOException { String str01 = "\..."; String str02 = ".da.fb.rd"; Pattern p = Pattern.compile(str01); Matcher m =
Java

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

名村卓
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLで特殊文字のエスケープ処理を行う方法【初心者向け】