アウトプットする気力がなかなか起きず、気がついたら前回の記事から １０ヶ月近く経ってしまいました。。。 ここ最近ようやく１冊をやり切る気力が戻ってきたので、読書感想からまた記事を徐々に出して行こうと思います。

「武器になる HTML」というHTML だけの本を練習問題含め読み終えました。 初学者向け扱いと書かれていますが、JS(TS)を中心に書くフロントエンドエンジニアこそ読むべきだと個人的には感じました。

私について

レベルの参考のために最初に自分のスペックを最初に記載しておきます。

• フロントエンドエンジニア 3 年半くらい
• 主に TS / JS（JSX 含む）でロジックを書く側
• マークアップはあまり得意ではない
  • ページを真っ白な状態から 1 ページをマークアップした経験は数えられるほどしかない
  • またマークアップすると、すぐにdiv / spanだらけのコードになってしまう
  • 非レスポンシブサイトの修正は出来るが、レスポンシブ対応になると様々なデバイスに対応することになるのでレイアウトをよく崩してしまうタイプ

本で学ぶこと

この本が他の HTML 本と決定的に違うのは本当に HTML だけを学ぶ点です。この手の本は必ず CSS とセットで学習することになるのですが、本書では敢えて HTML だけを学ぶルートをとっています。 そのことによって以下の内容も一緒に学ぶことができます。本の文字サイズも大きく、先生と教え子の会話を見ながら進めることになるため非常に取り組みやすい体裁がとられています。

1. セマンティックな HTML の組み方
2. ページの正規化と SEO 対応

これらの点について詳しく紹介します。

1. セマンティックな HTML の組み方

本書を一周してまず驚いたのが本書で記載するコードにはなんとdiv / span要素が全く使われていないことです。全く言及がないわけではないですが、終盤にようやくコラムで装飾用の要素という説明程度で留められています。前述どおり多用しまくっていた自分には衝撃でした。

本書では少しずつ要素が紹介されていくのですが、div / span要素はむしろ控えめにし役割にあった適切な要素を使えば、構造に沿ったマークアップが出来ることを 1 冊通じて教えてくれます。登場する要素の紹介も読みやすい見出しになっており見ごたえがあります。

個人的に特に印象に残った場面があります。

教え子が「文字が大きいので小さめの hn 要素を使ってしまいました！」というシーンです。実際の階層を無視して見た目のために要素を指定しちゃうんですよね。ちゃんと階層に沿った要素を使うよう諭されるのですが、React といったフレームワーク全盛の今だからこそ気をつけないといけないように感じます。 この手のパターンだとリンクのところにbutton要素をおいてしまうケースが真っ先に思いつきます。フレームワークのonClickでルーター呼び出してページ遷移させてしまえるからですね。さらに Figma とかでデザインシステムを見るとボタンとリンクは共通コンポーネントに設定されているケースが多いのもこの流れを推し進めてしまっているかと思います。ただしこれだと「外部タブで開く」など本来持つはずの機能を潰してしまうことになります。また読み上げソフトの利用者にもただのボタンと認識されてしまいます。

こうならないためにも「見た目に惑わされず、本来の役割を優先してマークアップする」心構えを一層持ちたいなと感じました。

2. ページの正規化と SEO 対応

本書を語る上で、こちらの存在も外せません。 初学者向けの本では SEO 対応が若干紹介される程度でしか見たことがなかったため、しっかりページが割かれていることに非常に驚きました。練習問題にもしっかり対応が入っています。 一般公開するサイトを運営するとわかるのですが、この２つの対応は検索結果などページ共有に影響してくるのでめちゃくちゃ重要なんですよね。。。初学者の頃にこの本に出会いたかった。。。

Web 標準で明確に決まっている仕様ではないため MDN にも専用のページがなくアクセスしづらい情報なので上手くまとめられていて助かりました（Web ページはクローズドなサイトが多数派と聞くので、これは仕方がないと思います）。日本語でこれらのキーワードを検索すると、「〇〇とは？」系の記事ばかり出てきて悲しくなりました。

本でやらないこと

上記で何度か言及している通り CSS は見た目を装飾するものという言及だけにとどまっています。

そのため、Web 開発を始めたばかりの方は本書を読む前にProgate の HTML & CSS コースあたりでどんな形で Web ページが作れるのかを知ったほうがいいかもしれません。HTML だけだとどうしても見た目がおぼつかなくなってしまうため、親しみにくいからです（そう思うとモバイルアプリは標準の画面パーツだけでイカした見た目を作れるからすごい…その分独自の見た目を作ろうとすると結構たいへんですが）。

なお、本書を読んだ後は「これだけで基本がしっかり身につく HTML/CSS&Web デザイン 1 冊目の本」を読んで CSS を勉強すると良いでしょう。自分は残念ながら読んだことはないのですが、HTML の登場範囲が本書で学べる箇所とかぶること、アニメーションも含めた CSS を学べるので勧めておきます。アニメーションは登場頻度こそ少ないものの覚えて置くと結構便利なので。 時間があったら今度読んでみようかな。

その後は「プロの「引き出し」を増やす　 HTML+CSS コーディングの強化書」を読めばマークアップは十分かなと。ちなみに「プロの〜」は本書と並行して読んでおり、そろそろ感想もまとまりつつあるので近々記事を出す予定である。HTML を深堀りたい場合は MDN や「HTML 解体新書」も選択肢に入ってきます。

本書を読まないのと読むで、これらの本の印象は大分違ったものになると思います。

後書き

もしこの本が気になったらぜひ著者のこちらの記事も合わせて読んで頂きたいです。 HTML の重要性を伝えたいという思いがとにかくこちらに伝わってくる良記事です。

https://shibajuku.net/bukininaru-html/

記事の最後にぼそっと書かれていますが、本書で組んだ HTML のマークアップをいかに CSS で装飾を攻めていくかの過程がすごく見たいので是非続編として CSS 本の執筆をお願いしたいところです。 あっ本書を読んでこのサイトのマークアップを修正したことは内緒で。