TypeScript 【テクニカル・上級編】 infer キーワード – TypeScript実践ガイド
条件エンティティの魔術師：`infer`キーワードと型パズルの極北こんにちは。フロントエンドの現場で日々、TypeScriptの型チェッカーをいかに調教し、コンパイルタイムの無駄なオーバーヘッドを削ぎ落とすかに全人生を賭けているチーフアーキ...
frontendintronational
TypeScript Webブラウザの仕組み 【テクニカル・上級編】 ロングタスクとメインスレッドのブロッキング – Webブラウザの仕組み実践ガイド
メインスレッドの独占者：50msの壁を越え、ブラウザの呼吸を取り戻す技術ブラウザのメインスレッドは、Webフロントエンドエンジニアにとっての「リビングルーム」であり、同時に最も過密な「単線の中央駅」だ。JavaScriptの実行、スタイル計...
JavaScript 【テクニカル・上級編】 タグ付きユニオン（判別共用体）の模倣 – JavaScript実践ガイド
タグ付きユニオンでJavaScriptの動的型付けの荒波を乗りこなす：実務で使える堅牢な型安全パターンこんにちは、フロントエンドの現場を渡り歩いてきたチーフアーキテクトの私だ。日々のコードレビューで、こんな状態のオブジェクトに遭遇して頭を抱...
CSS 【テクニカル・上級編】 ::cue-region 擬似要素による字幕領域の制御 – CSS実践ガイド
こんにちは。ブラウザの描画パイプラインと、仕様書の端っこにひっそりと書かれたマイナーな仕様を愛してやまないフロントエンド・アーキテクタの私だ。日夜、大規模なWebアプリケーションのパフォーマンスチューニングに明け暮れていると、「いかに不要な...
HTML 【テクニカル・上級編】記述リスト(dl)のレイアウトパターン – HTML実践ガイド
記述リスト（dl）の再評価：Flexbox/Gridで紐解くCSSアーキテクチャの極意多くのフロントエンドエンジニアにとって、``（Description List）は「なんとなく意味論的に正しいから使う」という、お守りのような存在かもしれ...
React 【テクニカル・上級編】 useStateの基本構文と初期化 – React実践ガイド
こんにちは。フロントエンドの現場で日々、コンポーネントのライフサイクルとメモリの細波に耳を澄ませているチーフアーキテクトだ。今回は、Reactにおけるすべての状態管理の原点であり、同時に最も誤解されやすいプリミティブである `useStat...
TypeScript 【テクニカル・上級編】 InstanceType – TypeScript実践ガイド
InstanceTypeの深層：型システムとランダムアクセスが交差する領域こんにちは、チーフアーキテクトの私だ。日夜、膨大なコンポーネントツリーとリアクティブな状態管理の海を泳ぎ、TypeScriptの型チェッカーの悲鳴を聞きながらコードを...
Webブラウザの仕組み 【テクニカル・上級編】 requestAnimationFrameとレンダリング同期 – Webブラウザの仕組み実践ガイド
requestAnimationFrameの深層：ブラウザの描画パイプラインと同期するアーキテクチャブラウザのレンダリングエンジン（Blink, WebKit, Gecko）の内部挙動を愛してやまないエンジニア諸君なら、画面がカクつく瞬間に...
JavaScript 【テクニカル・上級編】 Symbol.hasInstanceによるinstanceofのカスタマイズ – JavaScript実践ガイド
はじめに：なぜ、我々は今 `Symbol.hasInstance` なのかフロントエンドの規模が肥大化し、TypeScriptによる静的型付けが当たり前になった現代においても、Runtime（実行時）のJavaScriptエンジンは依然とし...
CSS 【テクニカル・上級編】 ::cue 擬似要素による字幕のスタイリング – CSS実践ガイド
やあ。フロントエンドの最前線で、毎日のようにブラウザのレンダリングパイプラインと格闘している君なら、DOMのツリー構造やCSSOMの構築コストには人一倍敏感なはずだ。CSSのセレクタ一つ、プロパティ一つが、いかにペイントやコンポジットの処理...