【HTML5】今どきソースコードの見やすさ【ありがとう】

HTML5

「DIY RSS」と称してRSSを配信していないサイトの更新情報を勝手にRSS化するというのをしているんですが、今どきのサイトのソースコードに慣れてしまうと、古いソースコードがなんと見づらいことか。もちろんだからといって成果物が良くないとか、メンテナンスしづらいとかそういうことではないんですけども(中の人が慣れてるものが一番良いでしょう)、でも時代性はいかんともしがたい。


先日ソースコードを見ていた水曜どうでしょうOffice CUEのサイトは構成がクラシックなサイトです(ただしHTBのサイトは割とモダン)。テンプレートが決まっていて当たりが付けやすい反面、HTMLタグがビジュアルのための構成物として使用されているので詳しい情報を取得しようとするとどうしてもいかついDOM探索や正規表現による絞り込みが必要になってしまいます。

今どきのサイトの傾向として、

  • 細かくidやclassを付与する
  • データの内容にあったタグやプロパティを使用する

といったことが挙げられます。これらはHTML5の方針でもあります。例えばこれはNHK News Webのソース抜粋。


<h1 class="content--header-title">
<a href="/news/html/20190723/k10012005041000.html?utm_int=news_contents_news-main_001">
<em class="title">スズキ 9回裏代打逆転満塁サヨナラホームラン</em>
7月23日 16時28分
</a>
</h1>


1つの情報に1つのタグが割り当てられていて、それとクラス名やプロパティを使うことで綺麗にデータが取れます。

一方で古いソースだと、こんな感じ。


<div>
<span>スズキ | 2019年7月23日 11時00分</span>
今日も頑張りましょう
</div>


ブラウザ上の見え方が悪いということでは全くありませんが、ここから更新年月日、執筆者、件名を取得しようとすると、DOMで絞り込むのに加えて正規表現を使って必要な情報をサルベージすることになります。これが結構大変。

本当はせめてこうなっていて欲しいんですけどね……


<div>
<span>スズキ</span>
<span>|</span>
<span>2019年7月23日 11時00分</span>
<p>今日も頑張りましょう</p>
</div>


ともあれ、先ほども書きましたけどこれは良い悪いではなくて時代性。そのサイトが出来たときにはそれで普通だった手法が、時代の流れとともに変わってきて、HTML5になった現代から見ると古くさく見えるというだけでね。次のリニューアルではきっとなんらかのCMSで構築することになるでしょうし、そうしたら一斉にモダンなHTMLコードになるでしょう。知らんけど。



HTML5は素晴らしい

普段は全く感じませんけど、こうやって情報としてHTMLコードを眺めてみると、HTML5ってほんとに素晴らしいですね。そんなに簡単に方針変えないで欲しいよって昔は思ってましたけど(HTML4.01の頃とか)、今振り返ってみると、HTMLはきちんと正しい方向に進化してきたんだなあと実感します。

WHATWGが生まれてほんと良かった。

ありがとうWHATWG