HTML 【入門編】リストアイテムの選択状態管理 – HTML実践ガイド
リストを選択する、という「魔法」。aria-selectedでアクセシブルなUIを作ろうこんにちは！Webの世界へようこそ。HTMLを書き始めたばかりの頃って、「タグは覚えたけど、これってどう動かせばいいの？」と迷子になってしまうこと、あり...
frontendintronational
HTML React 【テクニカル・上級編】 useReducerとuseContextの組み合わせによるグローバル状態管理 – React実践ガイド
Reduxは本当に必要か？ `useReducer` と `useContext` が織りなす、バニラReactの極限グローバル状態管理アーキテクチャこんにちは。日々、Reactのレンダリングツリーの最適化とメモリプロファイルの削減に命を燃...
TypeScript 【テクニカル・上級編】 Conditional Typesの基本構造 (T extends U ? X : Y) – TypeScript実践ガイド
TypeScriptの型システムは、もはや単なる「エディターの補完をリッチにするお化粧」ではない。コンパイル時（正確にはtscの型チェックフェーズ）に作動する、チューリング完全な純粋関数型言語だ。その中でも、`T extends U ? X...
Webブラウザの仕組み 【テクニカル・上級編】 スクリプトによるパースブロックの挙動 – Webブラウザの仕組み実践ガイド
ブラウザの心臓部を止めろ：スクリプトによるパースブロックの深層と、限界を超えた非同期制御フロントエンドエンジニアなら誰もが一度は「なぜか画面の描画がもたつく」「インタラクションが遅延する」という壁にぶつかったことがあるはずだ。Lightho...
JavaScript 【テクニカル・上級編】 /** @type {Type} */ による型キャスト – JavaScript実践ガイド
ぬるい型安全からの脱却：JSDoc型キャストが大規模JSアーキテクチャの命を救う理由JavaScriptの柔軟性は、時にプロダクトを殺す。動的型付けの身軽さに酔いしれ、気づけば`undefined is not a function`の亡霊...
CSS 【テクニカル・上級編】 :focus-within 疑似クラス – CSS実践ガイド
CSSの進化の歴史を振り返るとき、私たちは常に「DOMツリーの構造的な限界」と戦ってきた。親要素のスタイルを変化させるために、かつてはどれほどのJavaScriptのイベントリスナーが乱立し、無駄な再描画（リペイント／リフロー）を引き起こし...
HTML 【テクニカル・上級編】リストが空の場合のUIパターン – HTML実践ガイド
リストの「空」をどう扱うか：Empty Stateとアクセシビリティの深層Webアプリケーションのフロントエンドにおいて、最も軽視されがちなのが「リストが空である状態（Empty State）」の設計です。APIから返ってきたデータが空配列...
React 【テクニカル・上級編】 useContextの再レンダリング問題と最適化手法 – React実践ガイド
Context再レンダリング地獄からの脱出：Reactアーキテクトが直伝する、極限のパフォーマンス最適化こんにちは。日々、巨大なReactアプリケーションのパフォーマンスプロファイリングとコードレビューに明け暮れるチーフアーキテクトの私だ。...
TypeScript 【テクニカル・上級編】 Mapped TypesにおけるKey Remapping (as句) – TypeScript実践ガイド
Mapped Typesの`as`句：型レベルの魔術でドメインモデルを極限まで硬くするこんにちは。日々、複雑怪奇なフロントエンドの型パズルと格闘しているフロントエンド・アーキテクトの皆さん。TypeScriptの型システムは、もはや単なる「...
Webブラウザの仕組み 【テクニカル・上級編】 ペイントとラスタライズの仕組み – Webブラウザの仕組み実践ガイド
ペイントとラスタライズの深層：ピクセルへと至るロードマップこんにちは。日夜、ブラウザのメインスレッドとコンポジターの挙動に目を光らせているフロントエンド・アーキテクチャの住人なら、一度は「なぜこの単純なアニメーションがカクつくのか」と頭を抱...