Monthly Newsletter 3月号

2025年2月に投稿された記事をカテゴリごとにまとめて紹介する。HTMLやCSSの仕様変更、JavaScriptの新機能、セキュリティ、マインドセット、数学など幅広いトピックをカバーしている。

HTML

階層によってh1要素のfont-sizeがかわる歴史的背景

HTMLのh1要素のfont-sizeが階層ごとに変化する歴史的背景を解説。HTML4からHTML5、Living Standardまでの仕様の変遷や、アウトラインアルゴリズムの廃止、User Agent Stylesheetの挙動変更についてまとめている。今後はh1のfont-sizeを明示的に指定する必要性が高まることを指摘。

CSS

transform: scale()とzoomプロパティの違い

CSSのtransform: scale()とzoomプロパティの違いを整理。scale()は要素の拡大・縮小を行うがページレイアウトには影響しない。一方zoomはレイアウト全体に影響を与える。2024年にzoomがBaseline入りしたことも紹介。

position: fixedの基準を親要素にあわせる

通常、position: fixedはviewport基準だが、transformやcontainプロパティを使うことで親要素基準にできる方法を解説。contain: layoutの活用が推奨されている。

JavaScript

CanvasRenderingContext2D#fillText()を文字長に応じて自動改行する

Canvas APIのfillText()は自動改行に非対応。measureText()で文字幅を計測し、maxWidthを超えたら改行する処理の必要性と実装例を解説。

AstroでKaTeXで書いた数式をMathMLに変換して表示する

AstroとMDXで数式を扱う際、rehype-katexを使ってKaTeX記法をMathMLに変換し、HTMLに埋め込む方法を紹介。strictモードやoutputオプションの設定例も記載。

Temporalオブジェクトを使った日付・時刻操作

JavaScriptの新しいTemporalオブジェクトによる日付・時刻操作の基本を解説。従来のDateオブジェクトとの違いや、add/subtractなどのメソッドの使い方をまとめている。

scrollendイベントでスクロールの完了タイミングを検知する

scrollendイベントを使うことで、スクロール完了時のタイミングを検知できる。Infinite ScrollやLazy Loadingの最適化など、実用的なユースケースを紹介。

Security

Open Redirectionの攻撃手法と対策

Open Redirectionの代表的な攻撃手法と、リダイレクト前の確認ページ表示や入力値のバリデーションなどの対策を解説。

Header Injectionの攻撃手法と対策

Header Injectionの概要と、Set-Cookieヘッダやレスポンスボディの改ざん例、適切なバリデーションやエスケープ処理の重要性をまとめている。

Mindset

意見が合わないときは超好意的に解釈してみる

意見が合わない相手とのコミュニケーションでストレスを減らすため、相手の主張を好意的に解釈する実践法を紹介。自分の心を守ることの大切さも述べている。

オンラインコミュニケーションでのリアクションは過剰なくらいがちょうど良い

リモートワーク下でのリアクション不足が「無視」と誤解されやすい課題を指摘。意図的に拍手やサムズアップなどのリアクションを増やすことで、安心感と円滑なコミュニケーションを実現できると述べている。

Programming

Clean CodeとA Philosophy of Software Designの共通点と相違点

2冊の有名なソフトウェア設計書の対談をもとに、設計哲学やメソッドの長さ、コメント、TDDに対する考え方の違いを整理。両者とも「理解しやすいコード」を重視している点が共通している。

漏れのある抽象化の法則（The Law of Leaky Abstractions）

抽象化の限界と、基礎知識の重要性について解説。TCP/IPモデルを例に、抽象化による効率化と、隠蔽された部分の理解が必要な理由を述べている。

Mathematics

ベクトルと内積

ベクトルの定義や内積の計算方法、類似度や長さ・角度の算出、BoW（Bag-of-Words）ベクトルの例など、線形代数の基礎をわかりやすくまとめている。