アーカイブ

「HTML解体新書」​HTMLの​これからと​向き合う​ための​本

GitHub Edit Page
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。

アイキャッチ：「HTML解体新書」HTMLのこれからと向き合うための本

「HTML の前提についてはざっと知った、ステップアップできる HTML の勉強がしたい」「人に勧められる HTML にまつわる書籍はあるだろうか」「令和で HTML を学ぶならこの 1 冊、というものがほしい」―――そうした人々のニーズを叶えてくれる書籍が販売された。

その名も「HTML 解体新書」だ。

本ブログ記事は、レビュアーとして関わり本書を読んだ＠okuto_oyamaによる感想と、HTML のこれからについて考えていることをまとめたものである。

本の内容については、著者によるブログ記事にまとまってあるのでそちらを参考にしてもらいたい。

書籍「HTML 解体新書」、満を持してついに登場 - 弁護士ドットコム株式会社 Creators’ blog

まだまだ HTML について知らないことがあった

私が HTML について始めて触れたのは、とあるブログサービスの HTML 編集機能からだ。その頃は HTML の仕様というものを知る由もなく、どういったタグを使うと画面上にどのように表示されるのかを試しながら知るだけだった。

より HTML と真剣に向き合うようになったのはマークアップエンジニアとして受託開発で仕事をし始めた 2015 年 9 月からである。

HTML については独学であったところをレビューで指摘されたり、HTML チェッカーを使用することで 1 つずつタグの重要性を理解していった。その後Japan Accessibility Conferenceでアクセシビリティについて学び、HTML を正しく書くことがあらゆる人の恩恵になることを知って、どんどん好きになっていった。

その後クラウドワークスに転職して、フロントエンド開発全般における技術的負債の解消活動をするようになった現在でも HTML は構文エラーなく書くように意識したり社内コーディングチェック書の策定に関わったり、markuplint の導入1など HTML とは様々な形で付き合い続けている。

そういった関わりをもっていても、HTML 解体新書を眺めていると HTML のマークアップルールや仕様についてまだ知らなかったことが多かったのだと気付かされたのだ。

HTML 要素の属性で廃止となった部分についてや、特に文字参照や「2-8 HTML の細かい構文ルール」については、ほとんど知らないことばかりだった。コラムも読み応えがあるものばかりである。

HTML 解体新書では、ルールとして守らないといけない理由や、誤ったマークアップ例について紹介してくれる。こういった知らなかったことを学べるだけでなく、ばらばらであったチーム内の HTML に関する認識そろえにも一役買ってくれるはずだ。

HTML を勉強する機会はどこにあるのか

HTML 解体新書の書籍紹介では以下のように書かれている。

Web 制作の初心者に向けた「HTML5+CSS3 でサイトを作ろう」といった内容の書籍は多数出版されています。しかし、それらを卒業し、2 冊目となるような、より深く「HTML」を学習できる書籍はあまりありません。

私はふと疑問に感じたことがある。それはHTML がどういうものだと認知されているのか。そして、HTML を「勉強する」機会はあるのかと。

たとえば <h1> といったセクションにおける見出しにまつわる要素。HTML 文書の構造を決めるための大切な要素ではある。しかしこの要素をスタイル目的、すなわち文字の太さや大きさのために使用する、といった誤った使い方をされているのをたまに見かける。

こうした誤りは HTML で使用される各要素がどういった意図をもって、どういう用途で使用されているのかを知っていれば起きない問題である。そして起きた問題は訂正されていくべきである。

だが、それを訂正できる機会はあるだろうか。軌道修正はどこでされるのだろうか。

またフロントエンド開発においては、サーバー言語によるテンプレートエンジンや React や Vue.js、Svelte 等を活用して HTML を書くことがある。これらは開発効率性を上げるために活用していければと思っているのだが、一方で HTML そのものと向き合うことから離れているように感じる。

過去出版された神崎正英先生の「ユニバーサル HTML/XHTML」では単に HTML の話のみだけでなく、情報をどう表現していくか、Web にまつわる周辺技術についても紹介している。情報設計については今でも学ぶべき点が多い書籍ではあるのだが、現代の Web 開発において古くなってしまった内容もいくつか見受けられる。

ユニバーサル HTML/XHTML | 神崎 正英 |本 | 通販 | Amazon

近年こうした HTML を対象とした技術書がなかったことで、HTML を議論することから離れていってしまったのではないか、と私は思っている（あくまで 1 つの要因として）。

HTML 解体新書はそうした問題に一石を投じる、改めて HTML の重要性を見直すきっかけを与えてくれる書籍になるのではないかと期待している。

生きている仕様との橋渡しとして

かつて HTML の仕様は W3C と WHATWG というそれぞれの団体で並立して存在していた状態だった。その後二転三転あり現在は WHATWG の仕様として一本化された。

W3C 発行の HTML がすべて廃止された日 | フロントエンド Blog | ミツエーリンクス

WHATWG が策定する仕様は「Living Standard」という常に変更される可能性を持つもので、GitHubで仕様にまつわる議論や変更点など確認できるようになっている。

仕様がその名の通り「Living Standard」であることを実感したのは、3 月 24 日に hidden 値が真偽値から列挙型への変更されたことがあげられる。初版発行時点でさっそく仕様との差分ができてしまったのだ。

Proposal: beforematch event and hidden=until-found attribute · Issue #6040 · whatwg/html

※日本語での解説記事：HTML の hidden 属性が列挙型に変更され hidden=“until-found” が追加

Web 開発に従事している限り、こうした変化は起こりうるものとして言語仕様とブラウザ上でどう扱われるかということを常に確認できるようにしておく必要がある。それはこの業界に携わる皆の責務である。

しかしそれはあくまでも理想としての話だ。そもそも日々のフロントエンド開発を続けていく中で言語仕様をウォッチし続けられている人はあなたの周りにどれくらいいるだろうか2。

本書の帯には「『仕様書を読め！』と上司に言われたら、真っ先に読む本！」と書かれている。*こういった上司が本当に存在するかは置いておくが、*仕様を読むことをいきなり要求されることはハードルとしてとても高い。私も HTML 仕様書の読み方について人に教えられる自信がない。

HTML 解体新書では、第 1 章「技術情報との関わり方」にて仕様の読み方・付き合い方についても解説している。HTML 解体新書出版記念イベントにて著者である太田さんは「この本は（仕様との）橋渡しである」と称されていた。まさにそのとおりだと感じた。

私が知る限り、ここまで懇切丁寧な本はないと思っている。仕様書を読むことが不慣れだったり、苦手意識をもっている人にも読んでもらいたい。

HTML を発展させたいから、WAI-ARIA も使いたい

最近は各企業でアクセシビリティの重要性が高まりつつあり、フロントエンド開発でもそれを意識した実装をできることが 1 つの差別化となってきている。

出版記念イベントにて「隙あらばアクセシビリティの話が入っている」と話されていたが、実際に各 HTML 要素についての「アクセシビリティ上の注意点」が書かれている。この要素はアクセシビリティの観点でどういった影響を与えるのかが一緒に学べる形となっている3。

また関連する技術としての WAI-ARIA についても、どういった属性があるのか、実践としてどういった形で書くのかがまとめられている。アクセシブルな UI 実装に不安を覚えている人は、ぜひ参照してもらいたい。

話は変わるのだが、私は以前社外の勉強会にて「HTML の限界」について感じたことを発表した。

HTML だけで UI を作る限界、あるいは無理なくユースケースと向き合っていくためには - Google スライド

Web 上で表現されるものが静的な情報サイトなだけではなく、アプリケーションとしての可能性も見いだされるようになってきた現在、HTML ですべてを表現することの難しさを感じてきている。そうした現状を見て私はWAI-ARIA に委ねてみる可能性もあるのではないかと説いた。

見出しコンポーネントから汎用性を考える

HTML 解体新書の帯にも紹介されているように「WAI-ARIA のポイントは WAI-ARIA を使わないこと！」とあるように、下手に WAI-ARIA を使うことはアクセシブルであることを損ねてしまう。

これは紛れもない事実だが、一方で汎用性のあるコンポーネント設計をする際に純粋な HTML 要素を設置すると、文書内での使われ方に矛盾が生じたり変更しづらくなる可能性がある。

<template>
  <h2>{{ headingText }}</h2>
</template>

Vue.js において、このような見出しコンポーネントがあるときに、<h2> の用途だけで使うのを徹底してもらえればそれでよい。しかしそれと同時に汎用性に欠けるコンポーネントでもある。

<script setup lang="ts">
  import { computed, defineProps } from 'vue';

  interface Props {
    headlineLevel: 1 | 2 | 3 | 4 | 5 | 6;
    headlineText: string;
  }
  const props = defineProps<Props>();

  const headlineTag = computed(() => `h${props.headlineLevel}`);
  const headingText = computed(() => props.headlineText);
</script>

<template>
  <component :is="headlineTag"> {{ headingText }} </component>
</template>

ここからより汎用性を高めたい場合、上記例のような記述が可能である。HTML としての確からしさを保証しつつ、汎用的なコンポーネントとして使えるようになった。

WAI-ARIA を使用して UI としての責務を分割する

私はそこからより発展させて、WAI-ARIA と併せて実装することを提案したい。

<template>
  <div role="heading" :aria-label="headlineLevel">{{ headingText }}</div>
</template>

先にこの手法の欠点についてを紹介する。

一方で利点もある。

こうした利点を活かしたものがHeadless UIだと私は解釈している。

WAI-ARIA は HTML によって表現しきれない部分を補う存在である。HTML だけで完結できる状況ならば、それを使うに越したことはない。

ただ、そこを超えた新たなアクセシブルなユースケースを模索していくためにも WAI-ARIA の発展に寄与していきたいと思っている。そのことが HTML の進化に繋がっていくことを期待しているからだ。

おわりに

HTML 解体新書は、とある界隈において「ジャスティス本」として期待されていた本で、5 年もの歳月を経てついに販売された。

私も最初はいち読者として心待ちにしていたが、太田さんにお声がけいただきレビュアーとして参加した。出版記念イベントでも座談会メンバーとして登壇させてもらい、この本に関わった人たちの熱意についても知ることができた。

著者であるもんどさん、太田さんの二人にはこの本を書き上げてくれたこと、そしてレビュアーとして貴重な経験をさせてもらったことに改めて感謝申し上げたい。

HTML 解体新書をきっかけに、国内における HTML や Web 開発にまつわる議論がより盛り上がってくれることを願ってこの記事の結びとする。

HTML 解体新書-仕様から紐解く本格入門 | 太田 良典, 中村 直樹 |本 | 通販 | Amazon

※電子書籍（PDF）版はボーンデジタル社サイトからお買い求めできます。

脚注

  1. markuplint をプロダクトに導入してみた - クラウドワークス エンジニアブログ ↩

  2. 偶然にも私の周囲の人はそういう人が多いのだが、珍しい状態だと思いたい。 ↩

  3. MDN Web Docs にも「アクセシビリティの考慮」セクションでまとめられている。 ↩

  4. 仕様上は可能であっても、主要ブラウザおよび支援技術でサポートされていない場合がある。詳しくはアクセシビリティ サポーテッド（AS）情報を参照されたし。 ↩

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
トップへ戻る