Webブラウザの仕組み 【テクニカル・上級編】 コンポジット（合成）の仕組み – Webブラウザの仕組み実践ガイド
ピクセルを物理限界で回せ：ブラウザ・コンポジット（合成）の極限アーキテクチャフロントエンドの世界において、「リフロー（Reflow / Layout）とリペイント（Repaint / Paint）を避けよ」という格言は、もはや耳にタコができ...
Webブラウザの仕組み JavaScript 【テクニカル・上級編】 String.prototype.matchAll()によるイテレータ取得 – JavaScript実践ガイド
フロントエンドの世界へようこそ。チーフアーキテクトのデジタル書斎へお越しいただき感謝する。日々、フレームワークの選定やレンダリングパフォーマンスの最適化に追われる我々だが、 ultimate（極限）のパフォーマンスと堅牢性を決定づけるのは、...
CSS 【テクニカル・上級編】 only-of-type疑似クラスの条件 – CSS実践ガイド
`:only-of-type` の深淵：ブラウザエンジンの走査アルゴリズムと、モダンフロントエンドにおける暗黙の罠CSSの仕様書を眺めていると、一見便利そうでいて、その実、本番環境で意図せぬ挙動やパフォーマンスボトルネックを引き起こす「両刃...
HTML 【テクニカル・上級編】dl/dt/ddを用いたグリッドレイアウトの実装 – HTML実践ガイド
なぜ今さら `` なのか？ ― CSS Gridで解き明かす「意味論」と「レイアウト」の極致フロントエンド界隈では、ReactやVueのコンポーネント設計が喧伝されがちですが、HTMLという「データ構造の根源」を疎かにするエンジニアは、結局...
React 【テクニカル・上級編】 関数型更新による依存の削減 – React実践ガイド
---依存配列との不毛な戦いに終止符を：関数型更新（Functional Updates）が救うReactのレンダリング・アーキテクチャReactで中大規模のフロントエンド・アプリケーションを開発していると、誰もが一度は `react-ho...
TypeScript 【テクニカル・上級編】 AwaitedによるPromiseの解決型取得 – TypeScript実践ガイド
幽霊（Promise）を具現化する：`Awaited`がもたらす非同期境界の静的型安全と、V8ランタイムを見据えたアーキテクチャフロントエンドのパラダイムが「非同期データフローのオーケストレーション」へとシフトして久しい現在、我々が日々格闘...
Webブラウザの仕組み 【テクニカル・上級編】 ペイント（描画）の仕組み – Webブラウザの仕組み実践ガイド
お決まりの「リフロー（再レイアウト）を避けてリペイント（再描画）に留めよ、できればコンポジット（合成）だけで済ませよ」という、入門書に書かれているようなアドバイスに、私はいつも少しだけ苦笑してしまいます。実務における大規模・高グラフィックな...
JavaScript 【テクニカル・上級編】 String.prototype.match()と正規表現の基本 – JavaScript実践ガイド
こんにちは。フロントエンドの現場で日々、JavaScriptエンジンとメモリのせめぎ合いに興じているチーフアーキテクトだ。今回は、JavaScriptの文字列操作の中でも、一歩間違えるとパフォーマンスのボトルネックになり、セキュリティ上のリ...
CSS 【テクニカル・上級編】 only-child疑似クラスの条件 – CSS実践ガイド
孤高のセレクタ、`:only-child`の深淵。DOMの孤独を検知するアーキテクチャフロントエンドの現場で長年CSSを書いていると、「親要素の中に子要素が1つしかない時だけ、特別なレイアウトを適用したい」という要件に幾度となく直面する。こ...
HTML 【実務・中級編】dl/dt/ddを用いたグリッドレイアウトの実装 – HTML実践ガイド
dl/dt/ddで「理想のグリッド」を組む。モダンCSS時代の記述リスト活用術フロントエンドの世界に入ってしばらく経つと、誰もが一度は悩みますよね。「定義リスト（dl）って、結局どう使うのが正解なんだ？」と。かつては「dlはIE時代の遺物」...