HTML解体新書 輪読会 実施レポート vol.1
はじめに
こんにちは。ラクス フロントエンドチームの伊藤です。
最近スプラトゥーン3を買いました。
会社のサークルで体験させてもらって「これは買うしかない！！」となり、
1も2もやったことないですが勢いでポチりました。
ポケモンコラボのフェスも楽しみです。（水タイプを選びました！）
余談はここまでにして、
今回は 先日お話した輪読会 の実施レポートvol.1です。
書籍と読書範囲
先日の記事にも記載した通り、HTML解体新書を読んでいきます。
実施回数の都合上、Chapter1は各自で読んでもらい
Chapter2からの実施としています。
また、1回当たり25ページほど読む予定です。
今回の読書範囲は P52~P75(Chapter2-1 ~ 2-5) です。
議論・意見交換
2-1 HTMLの要素とタグの基本
学んだこと
pタグの終了タグを省略できることを知らなかった
疑問に思ったこと
その他（感想・共有など）
よく使う入れ子チートシート
ひと目でわかって便利
タグの省略はしない
書籍にもある通り、可読性・メンテナンス性を考慮して省略は否定派が多かった
省略されてたらレビューで指摘するとの声も
省略のメリットが気になる
文字数削減？
→ 調べました。ファイルサイズが変わることで読み込み速度に影響があるようです。(参考)
2-2 属性 / 2-3 URLの応用
学んだこと
td/th要素のscope属性に"auto"は指定できないが、"auto"を指定するとエラーとなり、結果としてエラー時の値である"auto"として動作する動きを初めて知った
疑問に思ったこと
なぜscope属性に"auto"を許容しないのだろうか？
少し調べてもわかりませんでした。。
その他（感想・共有など）
「ブール型属性を無効にする場合は、属性自体を省略します」→disabled="false" とかやりたくなる
数日前にハマったとの声
Vue.jsやReactのpropsのように書きたくなってしまう
2-4 要素の入れ子と内容モデル / 2-5 HTMLで扱える文字
学んだこと
インライン要素、ブロック要素という分類がもう古かったのだと知った
span要素にmarginが効かないことを説明しにくくなった
過去は「インライン要素だから」で済んだが・・・
反面、より役割が明確化され読みやすさは上がったという意見も
content model / inter-element whitespaceによって画面への改行・空白出力が決まる事は初めて知った
過去これが原因での表示崩れがあった
meta charsetが先頭の方で見つからないと、パフォーマンス劣化に影響するのは知らなかった
関連して、meta charset前にscriptタグがあると、scriptが2回実行される恐れもある模様(参考)
疑問に思ったこと／その他
特に意見は出ませんでした
おわりに
今後も隔週で輪読会を実施していきます。
次回開催は 11/14(月) になるので、それ以降にまた更新します！お楽しみに！