Hatena::Groupbugrammer

蟲!虫!蟲!

Esehara Profile Site (by Heroku) / Github / bookable.jp (My Service)
過去の記事一覧はこちら

なにかあったら「えせはら あっと Gmail」まで送って頂ければ幸いです。
株式会社マリーチでは、Pythonやdjango、また自然言語処理を使ったお仕事を探しています

 | 

2011-11-10

[][]プログラミング初学者の為のHTMLというのを考える 10:36

初めに

 たまーに、「どのプログラミング言語を最初に勉強したらいいですか?」という意見の中に、たまーに「だったらHTMLをやればいいよ」というのを見かける。ただ、単純に「HTMLをやればいいよ」というのは誤解が多くて不味いんじゃないかな、と思ったりしたので、ちょっとメモ書き程度と、再復習もかねて、HTMLについて残しておく。

そもそも、HTMLとは何か

 HTMLの仕様自体は、W3Cの勧告文章によって定義されている。

 HTML 4.01 Specification (ja)

 W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP

 とはいえ、素直に仕様書を読んでも、HTMLとは何なのかは、よくわからない。あえて幾つか引用すると、HTMLの正式名称は「HyperText Markup Language」であり、「World Wide Webにおける出版言語」という位置づけが、HTML4には与えられている。では「Markup Language」とは何かという話になる。ざっくりとまとめてしまえば、その文章構造を規定するもの、というのが自分の理解。文章構造とは、簡単に言えば「ここは見出しですよ」とか「ここはフォームですよ」とか、そういうものの目印を作ることだ。その辺りに関しては、Wikipediaの解説がわかりやすい。

 マークアップ言語 - Wikipedia

"markup"(マークアップ)という用語は、伝統的な出版の作業過程である原稿の "marking up" から派生した。"marking up" とは、原稿用紙の余白に印刷に関する指示の記号を書き加えることである。"markup men" や校正者と呼ばれる専門家が、文章の各部分にどんなスタイル、書体、サイズを適用すべきかなどを記して組版の担当者に原稿を渡すという作業が、何世紀にもわたって行われていた。

 f:id:nisemono_san:20111110095759p:image

HTMLCSSの関係

 さて、マークアップ言語であるとして、多くの初学者はHTMLのことを「視覚的なマークアップ」の為に使う、ということが多くあるんじゃないんだろうか。それもブラウザがちゃんと表示してくれる以上、そういう使い方もあるのだけれども、この使い方は余りお薦めしない。それはCSSとの関係になる。

 About the CSS2 Specification

この標準情報(TR)は,段階スタイルシート,水準2を定義する (CSS2)。CSS2はスタイルシート言語であり,これによって,文書作成者及び利用者が,フォント,スペーシング,聴覚キューなどのスタイルを, HTML文書, XMLアプリケーションなどの構造化文書に付加することができる。文書の内容から文書の表示スタイルを分離することによって,CSS2はウェブ作成及びサイト保守を簡便化する。

 小難しく書いてあるけれども、何が言いたいのか、といえば「この箇所が見出しである」ということと、「この箇所をこのように表示してほしい」ということは別物であって、切り分けたほうがより便利になるんじゃないの?ということだと思う(たぶん)。仮に次のような、二種類の文章を仮想的に考えよう。

<font-size:16px>これは見出しですよ</font-size>
<font:Mintyo>ここから本文になります</font>
<font-size:16px>これは見出し2ですよ</font-size>
<font-size:16px>これは見出し3ですよ</font-size>

 という場合と

<h1>これは見出しですよ</h1>
<p>これは本文ですよ</p>
<h1>これは見出し2ですよ</h1>
<h1>これは見出し3ですよ</h1>

 といった場合。例えば最初の例のように、文章構造と視覚的表現を一緒くたに混ぜてしまう場合、あとで「あー、やっぱり見出しの色は赤がいいよな」と思い描いたときに、いちいちそのフォントを修正するのは面倒だし、混乱を招く。に対して、"<H1>"というタグ付けの場合は、CSSで次のように指定してあげることで、一括管理が可能になる。

h1{
    color:#F00;
}

 このように、HTMLに対して「できるだけ」視覚的なスタイルを入れないほうがいい理由というのは、理念的には「視覚スタイルは文章構造じゃないから」という理由もあるとは思うんだけど、「この部分は見出しですよ」「じゃあ見出しをどういう風に表示させようか?」といったほうが、管理もしやすいというのがある。また、ちょっと複雑な話になるけれど、HTMLは決してブラウザ上から閲覧されるだけではなく、他のさまざまなコード、アプリケーションによって切り分けされたりする。このような切り貼りというのを、Webスクレイピングと呼んだりする。

 例えば、HTMLは、タグに対してidとclassという情報を付加することが出来る。これは、簡単に言ってしまえば「これは文章構造の中でも、こういうグループ・固有の機能を持っているんですよ」ということを示すために使われる。例えば、次のように。

<a href="http://bugrammer.g.hatena.ne.jp/nisemono_san/" class="shitsite">クソみたいなページ!!</a>

 では、このようなclassやidがなぜ便利なのか、というと、スタイルシートによって、「リンクの中でも"shitsite"のclassを持つ要素はうんこ色で表現したい」という一括した指定にも使えるし、例えば「この文章の中から"クソ"と評価されているページを全部取得したいよね」といった場合、例えばclassが指定されていない場合、わざわざその文章の内容を調べなきゃいけないけれども、classやidで指定されていたら、そのclassやidにアクセスするだけで解決できる。また、スタイルシートの指定に関しても、一括でそのグループのスタイルを変更することも可能になる。このように、データ構造と視覚的なスタイルを分けることには、一定の意味がある。

f:id:nisemono_san:20111110095800p:image

HTMLDOM

 とりあえず、HTMLがその文章構造をマークアップするものだ、ということはわかったとしても、じゃあ具体的にHTMLがどういうデータ構造を持つものなのか、という話が出てくると思う。そのあたりに関しては、DOMの理解を深めたほうが早い気がする。

  DOMとは何か

 ポイントとしては、HTMLマークアップされた文章構造は、入れ子になっているということだろう。つまり、「BODYの中にあるDivのエントリの中にあるPという要素」みたいな形でアクセスすることができるということで、基本的には樹木みたいな形で理解した方がいいようだ。

 no title

f:id:nisemono_san:20111110095801p:image

DOMJavaScript

 とりあえず、なんとなーくHTMLのことに関してはうっすらわかってきたとしても、「それでもなんでそこまで文章構造にこだわるのか?」という問題がある。自分の言葉で考えると、その理由は何個かある。思いつくこととしては、上記のような、CSSとの絡みで、視覚部分を分けるという目的。もう一つは、JavaScriptで何かしらの要素を操作したいときに、その要素に対して直接的に扱えるというメリットが出てくる。この辺りに関しては、JavaScript直打ちよりも、jQueryを導入に使った方がわかりやすいかもしれない。

 「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね | かちびと.net

 CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

 JavaScriptHTMLをいじくりまわすときに、class指定や、id指定が無い場合、そこに対するアクセスが煩雑になるし、またその要素が何の目的を持つものなのかがわかりにくくなる。なので、できるだけclassやidで指定してあげたほうが、スマートになる。

初学者がHTMLから入るメリットを考える

 個人的には、一番最初の言語としてHTMLというのは、あんまりお薦めはしないんだけど、それでも初学者がHTMLから入るといい、というメリットを考えると、「如何にしてデータ構造を作るといいのか」という部分かなと思う。いわゆるキャラクターがぴょんぴょん動いたりするような動作は(できなくもないっぽいけど)、それなりに難しいけど、「こういう風にデータを書いていけば、どういう風に便利なのか」を学ぶにはいいと思う。

 あとは、できるだけ文章の内容を「プレーンテキスト」で理解するコツというか、慣れを作るのにも便利だと思う。リッチテキストだったり、あるいはワードみたいなファイル形式もあるけれども、なんだかんだいって、プレーンテキストのお世話になることのほうが多いんじゃないんだろうか。なにしろ扱いやすい。そして、そのようなプレーンテキストで作られたデータというのを解読する作業をする、という意味では、HTMLは便利だと思う。

 もう一つは、結果的にCSSJavaScriptで何か作りたい、といったときに、結果としてHTMLのことは理解しておかなくちゃいけない、という部分もある。まずはデータが作れるようになってから、そのデータをJavaScriptで動的に変化させていく、という作業はいいのではないかと思う。

実践的なHTML入門サイトをいくつか

 というわけで、間違いも多いかもしれないけれど、HTMLについて、自分が知っていることについては書いた。とすると「じゃあ実際にHTMLを書いてみたいよ」という風になると思うので、導入サイトについては、下のほうがわかりやすいかな。

 30分間HTML入門 -- ごく簡単なHTMLの説明

 yoppa org – HTML入門

 リファレンスとか

 水無月ばけらの HTML リファレンス

 HTMLクイックリファレンス

 |