uhyohyo.net

JavaScript初級者から中級者になろう

六章第一回 XML・XHTMLとは

このページの最終更新日:

六章では、DOMにおけるXMLとXHTMLの扱いについて解説していきます。そこで、まずXML・XHTMLとは何かということを解説していきます。

XML

Extensible Markup Language(XML)は、HTMLと同じようにタグを使ってさまざまなデータを表すことができる仕組みです。

さまざまなデータとは、本当になんでもいいのです。XMLによってつくられたデータは、さまざまなことに利用されます。例えば、プログラムがデータを保存するのに使ったりされます。ただ、最近はデータフォーマットとしてはより軽量なJSONに役目を奪われている感があります。

XMLでは、自分でタグ名や属性名を決められます。具体的なXML文書の例を示します。


<?xml version="1.0" ?>
<users>
  <ユーザー>
    <名前>Aさん</名前>
    <年齢>23</年齢>
  </ユーザー>
  <ユーザー>
    <名前>Bさん</名前>
    <年齢>100</年齢>
  </ユーザー>
</users>

まず一見して違和感を覚えるのは、タグ名が日本語であるものがあるということですね。前述のようにXMLではタグ名も自由に決めることができるので、このように日本語も可能です。とはいっても、やはり普通に半角英数字で書くということのほうが多いと思います。そのほうが国際的ですしね。

最初の行の<?xml version="1.0" ?>は、XMLでは書くことになっているもので、この文書がXMLであることを表すものです。XML文書には、これが必要です。

次に、この文書全体は<users> 〜 </users>で囲われています。このように、文書全体を囲う要素をルート要素などといいます。HTMLでもルート要素はありましたね。全体が<html> 〜 </html>で囲まれているから、html要素がルート要素だといえますね。

そして、そのなかには<ユーザー> 〜 </ユーザー>の組が2つあります。実は今回例としたこの文書は、ユーザーの一覧を例にしたものでした。

XMLでデータをつくると、このような階層構造(木構造)を簡単に表現できます。今回の場合、

users
  • ユーザー
    • 名前
    • 年齢
  • ユーザー
    • 名前
    • 年齢

という木構造になっていて、usersがユーザーのリストで、それぞれのユーザーは名前と年齢というデータを持っているということは簡単に分かります。

人間が見た目にも分かりやすいというのも利点のひとつかもしれません。

ここで、「users」「ユーザー」「名前」「年齢」というタグ名は誰が決めたのでしょうか。今回に限って言えば筆者、一般にそのプログラムで使うデータを作る場合、そのプログラムを作った人が、そのXMLをどんな構造にするか、どんなタグ名を使うかということも決めます。有名になったりすると、複数のプログラムで共通の書き方が使われるかもしれません。広く普及してスタンダードになったものもたくさんあります。そうなると、標準化されて別の名前が付けられたりします。例えばSVGという画像フォーマットがありますが、その中身はXMLファイルです。XMLでこう書いたらこういう画像になる、というルールが決められてそれが標準となったので、いまSVGとして広く知られています。

また、どのような構造にするかも決めます。今回の場合ルート要素がusersで、usersの子はいくつかのユーザー要素で、それぞれのユーザー要素は名前と年齢を持つ、ということになります。

構造がしっかりと決まっていれば、プログラムからそれを読み込むのも容易でしょう。

DOMでXMLを扱う

DOMでは、HTMLだけでなくXMLも扱えます。つまり、こんな感じです。ここで、何らかの方法で上のXML文書を表すDocumentを手に入れたとして、それがxmlDocumentに入っているとします。


var users = xmlDocument.documentElement;	//documentElementはルート要素だから、今回の場合users要素のノードになります。このノードというのも、HTMLを扱うときのノードと同じ概念です。
users.getElementsByTagName('ユーザー');		//usersが持つユーザー要素のリストを返します。2つのユーザー要素がありますね。

xmlDocumentを実際に取得する方法をここでは書いていないため、実際に実行できるサンプルではないので理解しにくいかもしれませんが、こんな感じでXMLも扱えます。

1行目のdocumentElementというのは、三章第五回で出てきました。あるDocumentのルート要素を得るものです。

XHTML

また、XHTMLというものがあります。もともとHTMLはXMLとは似ていても少し違うものでしたが、そこで、HTMLをXML文書の一種として書けるようにしたものを作りました。それがXHTMLです。したがって、XHTMLは、XMLとしても通用するということになります。

ただし、XHTMLは一時期鳴り物入りで登場したものの、あまり普及しませんでした。代わりにHTML5が台頭したため、XHTMLは廃れてしまいました。なのでXHTMLの説明をしても仕方ないかもしれませんが、書いてしまったのでここで紹介しておきます。

HTMLとの相違点

基本はHTMLと同じですが、XMLの厳密な仕様に対応させるために、多少の相違点が生まれます。

例えば、要素名や属性名は小文字にするということです。HTMLでは<HTML> 〜 </HTML><html> 〜 </html>は同じものとして扱われましたが、そういうわけにはいかなくなります。

というのも、そもそもXMLが大文字と小文字を区別するからこのようなことになっています。「HTML」と「html」を違うものとして扱うXMLにあわせるためには、「大文字と小文字どちらでもOK」というわけにはいかなくなったのです。

そこで、XHTMLでは全て小文字に統一されました。厳密にXHTMLを解釈した場合、タグ名が大文字の場合、「こんなタグ知らない」といわれて正しく表示されないということになります。

また、もうひとつ大きな違いがあります。それは、終了タグが絶対に必要だということです。

HTMLでは、終了タグは省略可能なものがあり、例えば


<ul>
  <li>あああ</li>
  <li>いいい</li>
  <li>ううう</li>
</ul>

というリストがあった場合、li要素の終了タグは

<ul>
  <li>あああ
  <li>いいい
  <li>ううう
</ul>

のように省略ができました。しかし、XHTMLではこれらの省略は認められません。そもそもXMLにはHTMLとは異なり終了タグの省略という仕様がないからです。

そもそもXMLは自分で要素名を決められる汎用的な仕様だから、あらかじめタグ名によってこのタグは省略可能だとかそういうことは決められませんね。

また、これは、もともと終了タグがないタグも例外ではありません。

例えば、HTMLでは終了タグがない<img src="aaa.gif" alt="aaa">のようなものにも終了タグが必要です。どうすればいいかというと、imgは「中身がない要素」として扱い、

<img src="aaa.gif" alt="aaa"></img>

のように開始タグの直後に終了タグを置きます。

ただ、このように中身が何もない場合、次のような省略記法が許されています。

<img src="aaa.gif" alt="aaa" />

開始タグと終了タグがひとつになり、もともとのHTMLの書き方に近くなりました。これはどんなタグでも同じです。XHTMLは廃れましたが、これの影響を受けてHTMLなのに<br />のように書かれているサイトがたまに見られます。HTMLではこのような記法をする必要はありませんが、一応許容されています。

ついでに、style要素やscript要素を書くときにも注意が必要です。style要素やscript要素の中身を次のようにしないといけません。


<script type="text/javascript"><![CDATA[
  var aaa = 123;
  console.log(aaa*2);
]]></script>

script要素の中身の全体が<![CDATA[ 〜 ]]>で囲まれています。これで囲んだ部分はCDATAセクションといって、style要素やscript要素の中身は普通これにします(絶対というわけではありませんが)。

一応、これら以外でもCDATAセクションは使えます。これの意味ですが、CDATAセクションの中では特別な意味を持つ文字も記述できることになっています。つまり、< >などはタグを記述するのに使われる記号だから、普通&lt; &gt;のように書く必要がありますが、CDATAセクションの中ではこれらはそのまま書くことが出来ます。だから、


<script type="text/javascript"><![CDATA[
  var a = 10;
  if(a < 5){
    ...
  }else if(a > 15){
    ...
  }
]]></script>

のように書くことが出来ます。script要素の中に<>という記号が登場している点に注意してください。

厳密に考えれば、<>はタグを書くための記号なので、タグ以外でこれを使うのは文法的におかしいはずです。これはHTMLでは許容されていますが、XML(およびXHTML)では許容されていません。そこで、これらの記号を書くことができるCDATAセクションを使うわけです。

CDATAセクション内には<>なども書けますが、、例外として]]>は直接書けません。CDATAセクションの終わりだと解釈されてしまうからですね。

ちなみに、逆に言うと、CDATAセクションを使わない場合上のscript要素は次のように書く必要があります。


<script type="text/javascript">
  var a = 10;
  if(a &lt; 5){
    ...
  }else if(a &gt; 15){
    ...
  }
</script>

今回はXMLやXHTMLについて解説しました。次回はXML特有の事情と、それのDOMにおける扱い方を解説します。