HTML 【テクニカル・上級編】記述リスト(dl)のレイアウトパターン – HTML実践ガイド
記述リスト（dl）の再評価：Flexbox/Gridで紐解くCSSアーキテクチャの極意多くのフロントエンドエンジニアにとって、``（Description List）は「なんとなく意味論的に正しいから使う」という、お守りのような存在かもしれ...
frontendintronational
HTML 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のセレクタ一つ、プロパティ一つが、いかにペイントやコンポジットの処理...
HTML 【実務・中級編】記述リスト(dl)のレイアウトパターン – HTML実践ガイド
記述リスト `` を「ただの装飾」で終わらせない。モダンCSSで操るレイアウトの正解現場でコードレビューをしていると、未だに「用語と説明」を表現するのに `` や `` を使って力技で整えているケースに出くわします。HTMLのセマンティクス...
Propsによるデータの受け渡し（チルドレン属性、コンポーネントへの型付け） 【テクニカル・上級編】 React Strict ModeとPropsのライフサイクル – React実践ガイド
React Strict ModeとPropsのライフサイクル：二重レンダリングの深淵と、シリアル化不可能な世界での生存戦略こんにちは。日夜、コンポーネントの再描画カウントとプロファイラの炎上マークに目を光らせているフロントエンド・アーキテ...
TypeScript 【テクニカル・上級編】 ReturnType – TypeScript実践ガイド
ReturnTypeの深層：型レベルメタプログラミングと堅牢なフロントエンド・アーキテクチャこんにちは。フロントエンドのコードベースが巨大化し、ビルド時間が数分を突破する頃にようやく「型システムの本気」に気づく、そんな型の迷宮を愛するエンジ...
Webブラウザの仕組み 【テクニカル・上級編】 ペイントフラッシングとレンダリングデバッグ – Webブラウザの仕組み実践ガイド
ペイントフラッシングと戦う夜：ブラウザの描画パイプラインをねじ伏せる技術フロントエンドのパフォーマンスチューニングにおいて、私たちは長らく「JavaScriptの実行時間を削ること」ばかりに囚われてきた。`requestAnimationF...