HTML解体新書輪読会実施レポート vol.1

2022年11月7日 09:35

はじめに

こんにちは。ラクスフロントエンドチームの伊藤です。
最近スプラトゥーン3を買いました。
会社のサークルで体験させてもらって「これは買うしかない！！」となり、
1も2もやったことないですが勢いでポチりました。
ポケモンコラボのフェスも楽しみです。（水タイプを選びました！）

余談はここまでにして、
今回は 先日お話した輪読会 の実施レポートvol.1です。

先日の記事にも記載した通り、HTML解体新書を読んでいきます。

実施回数の都合上、Chapter1は各自で読んでもらい
Chapter2からの実施としています。
また、1回当たり25ページほど読む予定です。

今回の読書範囲は P52~P75(Chapter2-1 ~ 2-5) です。

学んだこと
- pタグの終了タグを省略できることを知らなかった
疑問に思ったこと
- DOCTYPE難しい気にする機会はない？
  - HTML5以上ではとりあえず"<!DOCTYPE html>"を書いておけばOK(参考① / 参考②)
  - 逆に書かないとCSSの解釈が変わる可能性がある
その他（感想・共有など）
- よく使う入れ子チートシート
  - https://yoshikawaweb.com/element/
  - ひと目でわかって便利
- タグの省略はしない
  - 書籍にもある通り、可読性・メンテナンス性を考慮して省略は否定派が多かった
  - 省略されてたらレビューで指摘するとの声も
  - 省略のメリットが気になる
    - 文字数削減？
    - → 調べました。ファイルサイズが変わることで読み込み速度に影響があるようです。(参考)

学んだこと
- td/th要素のscope属性に"auto"は指定できないが、"auto"を指定するとエラーとなり、結果としてエラー時の値である"auto"として動作する動きを初めて知った
疑問に思ったこと
- なぜscope属性に"auto"を許容しないのだろうか？
  - 少し調べてもわかりませんでした。。
その他（感想・共有など）
- 「ブール型属性を無効にする場合は、属性自体を省略します」→disabled="false" とかやりたくなる
  - 数日前にハマったとの声
  - Vue.jsやReactのpropsのように書きたくなってしまう

学んだこと
- インライン要素、ブロック要素という分類がもう古かったのだと知った
  - span要素にmarginが効かないことを説明しにくくなった
    - 過去は「インライン要素だから」で済んだが・・・
  - 反面、より役割が明確化され読みやすさは上がったという意見も
- content model / inter-element whitespaceによって画面への改行・空白出力が決まる事は初めて知った
  - 過去これが原因での表示崩れがあった
- meta charsetが先頭の方で見つからないと、パフォーマンス劣化に影響するのは知らなかった
  - 関連して、meta charset前にscriptタグがあると、scriptが2回実行される恐れもある模様(参考)
- 疑問に思ったこと／その他
  - 特に意見は出ませんでした

今後も隔週で輪読会を実施していきます。
次回開催は 11/14(月) になるので、それ以降にまた更新します！お楽しみに！

この記事が気に入ったらサポートをしてみませんか？