本文へスキップ
BecomeCoder

XMLコース · 第1章 XMLをはじめる · レッスン3

入れ子と木構造 ― 要素の中に要素を入れる

ブラウザで完結

導入

要素の中には、テキストだけでなく 別の要素 を入れられます。これを 入れ子(ネスト) と呼びます。入れ子を使うと、データが枝分かれした 木構造(ツリー) になり、現実の複雑な情報をそのまま表現できます。

説明

たとえば「1冊の本」を表すと、本の中に「タイトル」「著者」「価格」という要素が入った形になります。

<book>
  <title>吾輩は猫である</title>
  <author>夏目漱石</author>
  <price>500</price>
</book>

<book> の中に3つの要素が入っています。さらに、著者が複数いる場合は、要素の中に要素をもう一段入れられます。

<book>
  <title>ある本</title>
  <authors>
    <author>山田花子</author>
    <author>鈴木一郎</author>
  </authors>
</book>

このように入れ子を重ねると、データが上から下へ枝分かれしていく の形になります。いちばん外側にあって全体を包む要素を ルート要素(root element) と呼びます。上の例では <book> がルートです。

XMLの絶対ルール:ルート要素は1つだけ 1つのXML文書には、すべてを包む ルート要素がちょうど1つ 必要です。次のように要素が並列で2つあるのは違反です。

<book>...</book>
<book>...</book>   <!-- NG:ルートが2つある -->

複数の本を並べたいときは、全体を包む親(例:<books>)を作ります。

<books>
  <book><title>本A</title></book>
  <book><title>本B</title></book>
</books>

もう一つ大切なのが 入れ子の順序 です。後から開いたタグを先に閉じます。開始と終了が「かぶって」交差してはいけません。

<a><b>テキスト</b></a>   <!-- OK:内側の b を先に閉じる -->
<a><b>テキスト</a></b>   <!-- NG:a と b が交差している -->

やってみよう

身近なもの(自分のプロフィール、好きな本、料理のレシピなど)を、要素の入れ子で表す練習をしてみましょう。「全体を包むルートを1つ作り、その中に細かい要素を入れる」という感覚がつかめれば、この章は卒業です。次章では、要素に情報を追加する「属性」を学びます。

実際に動かしてみよう

下のエディタに XML を書くと、右側にその場で「整形式(well-formed)かどうかの判定」と「木構造ツリー」が表示されます(ブラウザ標準のXMLパーサを使うので、タグの閉じ忘れ・大文字小文字違い・ルート要素が2つ・入れ子の交差などは本物どおりエラーになります)。下の XPath 欄に式(例 `//title`)を入れると、一致したノードを一覧できます。本文の例を打ち込んだり書き換えたりして確かめましょう。

XML — 整形式チェック & 木構造プレビュー

書いた XML をその場で解析し、整形式(well-formed)かどうかの判定・木構造ツリー・XPath検索を表示する学習用ウィジェットを読み込みます(ブラウザ標準のXMLパーサ/XPathを使うため外部依存なし・軽量です)。
スクロールして表示された時点でも自動で読み込まれます。