Webブラウザの仕組み 【テクニカル・上級編】 レイアウト（リフロー）の仕組み – Webブラウザの仕組み実践ガイド
レイアウト（リフロー）の深層：ブラウザエンジンを沈没させないためのアーキテクチャ設計こんにちは。日々、ピクセルとメモリの狭間で格闘しているフロントエンド・ギークの皆さん。ブラウザが画面を一枚描画するまでに、内部でどれほどのドラマが繰り広げら...
frontendintronational
Webブラウザの仕組み JavaScript 【テクニカル・上級編】 String.prototype.localeCompare()による文字列比較 – JavaScript実践ガイド
localeCompare()という名の「深淵」：JavaScriptで真に国際化対応した文字列ソートを実装するアーキテクチャこんにちは。日々、V8エンジンのガベージコレクションの挙動やDOMの再描画パイプラインに思いを馳せるフロントエンド...
CSS 【テクニカル・上級編】 last-of-type疑似クラスの仕様 – CSS実践ガイド
CSSの仕様書をめくるのが好きでたまらない夜というものがある。特に、セレクタの特異性（Specificity）やDOMツリーの走査アルゴリズムの深淵に思いを馳せるとき、私たちは単なる「スタイリングの記述」を超えて、ブラウザという名の極限まで...
HTML 【入門編】dl/dt/ddを用いたグリッドレイアウトの実装 – HTML実践ガイド
「dl・dt・dd」って実はすごい！CSS Gridでスマートなリストを作ろうWeb制作を始めたばかりの頃、``や``はよく使うけれど、「`dl`とか`dt`、`dd`って何に使えばいいの？」と迷うことはありませんか？実はこの3つのタグ、「...
React 【テクニカル・上級編】 外部システムとの同期 – React実践ガイド
外部システムとReactの境界線：useEffectによる同期の作法とアーキテクチャこんにちは。日々、数百万人が行き交う巨大なReactツリーの底で、メモリリークと再レンダリングの嵐と戦っているフロントエンド・アーキテクトです。Reactを...
TypeScript 【テクニカル・上級編】 Readonlyによる読み取り専用化 – TypeScript実践ガイド
フロントエンドの規模が肥大化するにつれて、我々が直面する最大の敵は「どこで誰が書き換えたか分からないミュータブルな状態」だ。Reduxの古いリデューサーの亡霊に怯える日々は終わったはずだが、コンポーネントのローカルステートや、API層から吸...
Webブラウザの仕組み 【テクニカル・上級編】 レンダーツリーの構築 – Webブラウザの仕組み実践ガイド
伝説的アーキテクトが語る：レンダーツリー構築の深淵と、DOM/CSSOMマリアージュの最適化やあ、エンジニア仲間よ。日々のフロントエンド開発、ご苦労様だ。フレームワークのバージョンアップや、Viteの爆速なビルド時間に酔いしれるのもいいが、...
JavaScript 【テクニカル・上級編】 String.prototype.toLowerCase()の挙動とロケール対応 – JavaScript実践ガイド
`String.prototype.toLowerCase()` の深淵：ロケールの罠と、V8エンジンが隠すパフォーマンスの真実こんにちは、アーキテクトの皆さん。日々のコードレビューやパフォーマンスプロファイリングで、文字列操作に潜む「見え...
CSS 【テクニカル・上級編】 first-of-type疑似クラスの仕様 – CSS実践ガイド
こんにちは。フロントエンドの迷宮で日々CSSの挙動とブラウザエンジンの機嫌取りに明け暮れているチーフアーキテクトだ。今回は、CSSセレクタの中でも「分かっているつもりで最も事故を生み出す罠」の一つ、`:first-of-type` 疑似クラ...
HTML 【テクニカル・上級編】liタグのdisplayプロパティとレイアウトへの影響 – HTML実践ガイド
リストの「本質」を殺さずにレイアウトをハックする：`display: list-item` との決別、あるいは再構築フロントエンドの世界において、`` や `` といったリスト要素は、HTMLのセマンティクスにおける「聖域」のような存在です...