【プログラミング】HTMLとXMLの構造を理解すれば腹落ちする【アドバイス】

HTMLとXMLって似たような感じだけど何が違うんだろう?
解説記事はたくさんあるけど、イマイチ理解できないなあ。

この記事はこんな疑問にお答えします。

本記事の内容
・HTMLとXMLって何?
・データの構造と照らし合わせると理解しやすい。
・実際の扱われ方はどうなんだろう。

■HTMLとXMLって何?

HTMLとXMLって似ているけど、どう違うのか理解しづらいと思います。

HTML:Hyper Text Markup Language
XML :eXtensible Markup Language

HTMLとは、みなさんご存知のようにホームページなどを表示する時に使われている言語です。

XMLとは、最近で言えばAPIでデータの受け渡しをする時に利用されていたりする言語です。

API:Application Programming Interface
プログラム同士がデータなどを受け渡しする際の決められたインターフェイスの仕様のこと

どちらもMarkup Language となっているので、同じ特徴を持っています。

それはタグ(<>〇〇</>:大なり小なりの記号で囲ったもの)と呼ばれる記号を使っていることです。

この内容の詳細な解説はあちこちにありますので、ググってみてください。

ここではその詳細な解説をしてもしようがないので、実務的な観点から押さえておくべき点を解説していきます。

■データの構造と照らし合わせると理解しやすい。

HTMLやXMLを理解する際に押さえておくべきポイントは、タグで囲まれた部分を常に一つのセットとして見ることです。

タグの中にさらにタグがある場合は、入れ子になっていると思ってください。

システムやプログラミングの経験がある方はわかると思いますが、データの構造と同じだと思えばよいのです。

システムやプログラミングを知らない方は、エクセルの表はわかりますよね。
ちょうどあの行と列の関係です。

システムの世界では、データの一つ一つをレコードと呼んでいます。

エクセルでいう行のことです。

レコードにはたくさんの項目が入っています。

エクセルでいう列のことです。

      項目  項目  項目  項目
      番号  氏名  住所  電話番号
レコード   1  佐藤  東京都 03-

こんなイメージです。

このレコードをMarkup で表現したものがXML だと思ってください。

こんな感じです。

<data>
 <no.>1</no.>
 <name>佐藤</name>
 <address>東京都</address>
 <tel>03-</tel>
</data>

通常システム毎にデータの受け渡しをする場合、そのシステム固有のファイルレイアウトで表現していて一般的な決まった形にはなっていないことがほとんどです。

APIはその仕様を統一し外部に公開することで、広く外部の人でもシステムを利用できるようにしようとするものです。

HTMLはその仕組みをホームページなどのWebブラウザで表示するように特化した形になっているもの、と理解してください。

そう理解すると、かなり頭の中が整理されます。

書籍やインターネットで解説されているHTMLやXMLは専門的な言葉で解説されていて、システムやプログラミングを知らない人は、「???」ではないかと思います。

間違いではないんですが、初心者や知らない人にはあまり優しいとは言えないですよね。

■実際の扱われ方はどうなんだろう。

PHPというプログラミング言語では、以下のような感じでデータを扱います。

$namae = $data->name

データの中の氏名を名前という変数(変数というのは一時的に処理するための入れ物です)に入れている処理です。

タグの中の入れ子になっている個所を指定してあげる感じです。

※わかりやすくするため、前後の処理や正しさを無視しています。

結局、プログラミングの中では、すべてが識別できるようにしておかないと処理ができないので、HTMLやXMLという仕様でルール化されているのです。

そうわかれば、難しくはないですよね。

こうサラッと書いてあると、なんだ当たり前のことじゃないかと思われるかもしれませんが、僕はこの理解に至るまで相当な時間を要しました。

一度ストンと腹落ちすれば理解が進むのですが、そこに至るまでは悩んで苦しんで長時間のたうち回りました。

こういう説明を先輩や書籍で教えてほしかったなあと記事を書いていて改めて思いました。

スポンサードサーチ

よくわかるHTML5+CSS3の教科書【第3版】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です