クラウドワークス エンジニアブログ

日本最大級のクラウドソーシング「クラウドワークス」の開発の裏側をお届けするエンジニアブログ

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

HTML フロントエンド 書評

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

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

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

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

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

creators.bengo4.com

まだまだ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開発において古くなってしまった内容もいくつか見受けられる。

www.amazon.co.jp

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

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

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

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

www.mitsue.co.jp

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

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

github.com

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

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

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

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

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

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

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

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

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

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

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

docs.google.com

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>

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

  • WAI-ARIA上のルールを守らねばならない
    • 属性によっては併用して使えないパターンもある
  • マシンリーダブル観点で共通の情報として保証できるかの確かさがない
    • スクリーンリーダーで読み上げてくれない場合もある4
  • HTML要素だけで保証できるネイティブな挙動を考慮しないといけない

一方で利点もある。

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

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

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

おわりに

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

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

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

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

www.amazon.co.jp

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

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

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

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

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

© 2016 CrowdWorks, Inc., All rights reserved.