Webブラウザの仕組み 【テクニカル・上級編】 CSSOMツリーの構築とスタイル解決 – Webブラウザの仕組み実践ガイド
CSSOMという名の「目に見えない巨大な重荷」：スタイル解決の裏側と、ブラウザを窒息させないためのアーキテクチャこんにちは。日々、プロファイラを開きレイアウトシフトの波形に一喜一憂しているような、フロントエンドの深淵を愛するギークの皆さん。...
frontendintronational
Webブラウザの仕組み JavaScript 【テクニカル・上級編】 lengthプロパティによる文字数取得 – JavaScript実践ガイド
JavaScriptの `length` は、なぜ「文字数」を数えられないのか？ ―― サロゲートペアの闇と文字列アーキテクチャの真実こんにちは。日夜V8エンジンのメモリ効率やDOMの再描画コストに頭を悩ませているフロントエンド・アーキテク...
CSS 【テクニカル・上級編】 :optional 疑似クラス – CSS実践ガイド
フロントエンドの戦場において、フォームのバリデーションは常にエンジニアの頭を悩ませる魔境だ。`required`属性がついた要素をスタイリングすることは、もはや呼吸をするのと同じくらい日常茶飯事だろう。しかし、その裏側に隠された「逆側」の存...
HTML 【テクニカル・上級編】リストの印刷時（@media print）のスタイル制御 – HTML実践ガイド
印刷という「レガシー」を制する：リスト要素のCSS制御に見るレンダリングの深淵Webアプリケーションのフロントエンドエンジニアが、往々にして「最後」に回すのが印刷用スタイルの最適化だ。画面上のピクセルパーフェクトなUIには心血を注ぐのに、ブ...
React 【テクニカル・上級編】 RecoilのAtomとSelectorの概念 – React実践ガイド
RecoilのAtomとSelectorが描く、Reactの状態管理とメモ化の美学こんにちは。日夜、DOMのツリー構造と再描画の最適化に魂を燃やしているフロントエンド・アーキテククトだ。近年のReactエコシステムは、Server Comp...
TypeScript 【テクニカル・上級編】 Module Augmentationによる外部モジュールの拡張 – TypeScript実践ガイド
Module Augmentationの真髄：外部パッケージの型をハックし、大規模プロダクトの境界線を制圧するこんにちは。フロントエンドの現場で日々、TypeScriptの型システムと格闘しているアーキテクトの皆さん。「動くけれど、型定義が...
Webブラウザの仕組み 【テクニカル・上級編】 スクリプト実行によるパーサーブロッキング – Webブラウザの仕組み実践ガイド
パーサーブロッキングの深層：なぜあの `` はレンダリングを殺すのかブラウザの内部アーキテクチャ、特にBlinkやWebKitといったモダンなレンダリングエンジンの腹の底を覗いたことはあるだろうか？ URLを叩き、サーバーからHTMLバイト...
JavaScript 【テクニカル・上級編】 タグ付きテンプレートリテラル – JavaScript実践ガイド
タグ付きテンプレートリテラル：文字列補間の裏側を完全に支配する高度なアーキテクチャこんにちは。フロントエンドの現場で日々、JavaScriptエンジンとメモリの最適化に頭を悩ませているチーフアーキテクトだ。君たちは普段、何気なくバッククォー...
CSS 【テクニカル・上級編】 :required 疑似クラス – CSS実践ガイド
CSSの進化は、時として私たちフロントエンドエンジニアの「JavaScriptへの過剰な依存」を優しく、しかし容赦なく剥ぎ取ってくれる。その最たる例が `:required` 疑似クラスだ。単なる「必須項目の入力欄に赤いアスタリスクを付ける...
HTML 【実務・中級編】リストの印刷時（@media print）のスタイル制御 – HTML実践ガイド
画面の「見たまま」を印刷するな。リスト要素で学ぶ、プロの印刷用CSS設計Webサイト制作の現場で、意外と見落とされがちなのが「印刷用スタイル（`@media print`）」の最適化です。「印刷なんて今どき……」と思うかもしれない。しかし、...