マークアップ言語

「動く」のがプログラミング言語、「表す」のがマークアップ言語——この区別が基本です。

③ テキストファイルである

マークアップ言語はテキストファイルです。

第2章で学んだテキストファイルの性質を思い出してください。

この性質が、次のテーマで学ぶデータ交換に使える理由になります。

④ タグで囲むという仕組み

文章の一部をタグで囲むことで、その部分が何なのかを示します。

終了タグには「/」が付く——これが開始と終了を見分ける目印です。

⑤ 代表的なマークアップ言語

⑥ 3つの系譜

SGMLから、目的の違う2つが生まれたという関係です。

⑦ HTMLとXMLの違い

⑧ メタ言語とは

メタ言語とは、言語を記述するための言語です。

たとえば、

目的に合わせてタグを作れるため、「言語を作るための言語」といわれるのです。

⑨ 第3章とのつながり

第3章で学んだ半構造化データの説明を思い出してください。

> 半構造化データ……あらかじめスキーマを定義せず、データにキーやタグなどを付加することで、データ構造を柔軟に定義できるデータ。JSONやXML、YAMLなどのフォーマットで保存されることが多い

XMLは、半構造化データの代表例です。タグによって「どこに何が書いてあるか」が分かるため、機械が読み解けます。

⑩ 第3章・第7章とのつながり

XMLは、この科目の各所で登場します。

「異なるシステムの間でデータをやり取りする」という場面で、XMLは繰り返し使われています。

第2章のCSVと比べる

```

1次基本テキスト,経営情報システム,3300

```

CSVでも区切りは分かります。しかし、

XMLは「自己記述的」

XMLのファイルは、それだけ見れば何のデータか分かります。事前に「1列目はタイトル、2列目は科目」という取り決めを共有しておく必要がありません。

そのかわり、タグの分だけファイルが大きくなります。第7章で学んだRESTがJSONを選んだのも、この軽さが理由のひとつでした。

3つの言語の関係を、家系図で

```

SGML（ISOの国際規格、祖先）

├── HTML（Webページ専用）

└── XML（タグを自分で決められる）

```

なぜSGMLから2つに分かれたのか

SGMLは非常に多機能で、そのぶん複雑でした。そこで、

「多機能で複雑なものから、目的を絞った使いやすいものが生まれる」——技術の世界でよく見られる流れです。

確認してみましょう

> 次の記述の正誤を判定せよ。

> a　マークアップ言語は、文書の一部をタグとよばれる特別な文字列で囲うことにより、文章の構造や修飾情報を記述する。

> b　SGMLは、HTMLやXMLのもとになった言語である。

> c　マークアップ言語はバイナリファイルである。

解答　a：○　b：○　c：×

• c：×……マークアップ言語はテキストファイルです。この性質があるため、異なるOSやアプリケーションでも読み込むことができます。

ヘッダには、ページの題名や文字コードの指定、CSSの読み込みなど、「表示はされないが必要な情報」を書きます。

④ アンカータグとハイパーリンク

また、`<a>`と`</a>`というタグ（アンカータグ）により、Webページから別のWebページに移動すること（ネットサーフィン）を可能にし、ハイパーリンクを実現します。

たとえば、`<a href="http://www.tac-school.co.jp/kouza_chusho/">中小企業診断士講座</a>`により、Webページ上に表示された中小企業診断士講座という文字をマウスでクリックすると、hrefの後に記載された「http://www.tac-school.co.jp/kouza_chusho/」という場所に移動します。

表示される文字と、移動先のURLは別という点に注目してください。第5章のフィッシングの話で「表示されている文字列と実際の飛び先が違うことがある」と述べたのは、この仕組みによります。

⑤ CSS（Cascading Style Sheet）

Webページのレイアウトを定義する規格です。

Webページの作成にはHTMLを用いますが、HTMLはあくまでも文書構造を定義するものであり、レイアウトを規定するものとしては機能不足の面があります。

そこで、見栄えの良いレイアウトを作成するために、CSSが策定されました。

CSSを使うと、フォントの種類や形状、サイズ、背景カラーなどの設定が容易にでき、複数ページにわたって統一した表現を実現できます。

⑥ HTMLとCSSの役割分担

「何であるか」を書くのがHTML、「どう見せるか」を書くのがCSS——この分担が基本です。

⑦ なぜ分けるのか

100ページのWebサイトで、見出しの色を変えたいという場面を考えます。

この章で繰り返し見てきた「変更の影響を1か所に閉じ込める」という原則が、ここでも働いています。

⑧ CMS（Contents Management System）

CMSとは、見た目も配置も文章も画像もまとめて預かって、編集もHTMLとしての書き出しも引き受けてくれる仕組みです。

ホームページで公開したい情報が多くなるほど、Webコンテンツのページ数は増加し、そのメンテナンスは煩雑になります。

CMSを利用することによって膨大なWebページの一元管理が可能になり、ホームページの更新作業に係る負荷を軽減することができます。

⑨ CMSが解決する問題

第2章で学んだWordPressが、CMSの代表例です（オープンソースソフトウェアの一覧で「ブログ」に分類されていました）。

⑩ HTML Living Standard

WHATWG（Web Hypertext Application Technology Working Group）という団体により策定されたHTMLの標準規格です。

HTML5の継続的な更新が停止されたため、現在ではほぼ全てのWebブラウザでサポートされています。

「HTML5」という呼び方から「HTML Living Standard」へ移行したという経緯です。Living（生きている）という名前は、版を区切らず継続的に更新されるという性格を表しています。

⑪ 3つの用語をまとめる

構造・見栄え・管理——それぞれ別の層を担当しています。

③ HTMLとの違いをもう一度

eXtensible は「拡張可能な」という意味です。タグを自分で増やせる＝拡張できる、という性格が名前になっています。

④ XMLによるデータ交換

XMLはテキストファイルであり、異なるOSやアプリケーションソフトウェアで読み込むことができるため、CSV同様、異なるシステム間におけるデータ交換に用いられます。

⑤ CSVとの共通点と違い

⑥ CSVとXMLの比較（具体例）

CSV

```

10,田中,60

20,鈴木,50

```

何のデータを表しているのか不明です。

XML

```

<クラスの名簿>

<受講生>

<番号>10</番号>

<名前>田中</名前>

<得点>60</得点>

</受講生>

<受講生>

<番号>20</番号>

<名前>鈴木</名前>

<得点>50</得点>

</受講生>

</クラスの名簿>

```

データの形式・構造が明確になり、分かりやすい文書の作成が可能です。

⑦ 事前の取り決めが不要になる

XMLは利用者が自由にタグを定義できることから、送信者および受信者で事前に情報を共有せずとも、データの形式や構造を明確に示すことができます。

ここが、CSVとの決定的な違いです。

⑧ Webサービスでの利用

よってXMLは、Webサービスなど、インターネットを介した不特定多数のコンピュータ同士のデータ交換やデータ形式の標準化などに用いられます。

「不特定多数」という点が重要です。

第7章で学んだWebサービスでは、「Webアプリケーション同士が相互にXML形式のメッセージを送受信する」とありました。どこの誰が使うか分からないからこそ、自己記述的なXMLが選ばれたわけです。

⑨ XMLによるデータ交換の例

人事データベースから給与アプリケーションへデータを渡す場面を考えます。

抽出したXML

```

<人事>

<名前>小林一郎</名前>

<誕生日>1977/1/1</誕生日>

<資格>1級</資格>

</人事>

```

変換後のXML

```

<給与>

<従業員名>小林一郎</従業員名>

<生年月日>S52/1/1</生年月日>

<保有資格>1級</保有資格>

</給与>

```

⑩ この例が示すもの

システムごとに呼び方も形式も違う——この違いを吸収するのが、データ変換の役割です。

第3章で学んだETLの「T（Transform：変換）」や、データマッピング（異なるシステム間で同じ内容を示す項目同士を関連付ける）が、まさにこの作業にあたります。

⑪ XMLとJSONの現在

第7章で学んだとおり、現在のWeb APIではJSONが主流になっています。

XMLが劣っているわけではなく、用途によって使い分けられているというのが実情です。試験では、XMLの性質（独自のタグ、テキストファイル、データ交換）を押さえておけば十分です。