HTML 【入門編】list-style-typeの拡張と@counter-style – HTML実践ガイド
こんにちは！フロントエンドの世界へようこそ。HTMLでリストを作るとき、``タグや``タグを使いますよね。でも、いざデザインを当てようとすると「この黒丸（●）や数字（1, 2, 3）以外のマークにはできないの？」と悩んだことはありませんか？...
frontendintronational
HTML React 【テクニカル・上級編】 useEffectの基本構文と実行タイミング – React実践ガイド
こんにちは。フロントエンドの現場で数々の泥臭いパフォーマンスチューニングとバグの温床を鎮火してきたチーフアーキテクトだ。今日もコードレビューをしていて、「とりあえず `useEffect` の依存配列に `` を入れておけば警告は消えるけど...
TypeScript 【テクニカル・上級編】 Extractによるユニオン型の抽出 – TypeScript実践ガイド
現場の型安全を極限まで高める：`Extract`でユニオン型を支配するアーキテクチャこんにちは。日々、複雑怪奇なレガシーコードと最新のフロントエンド仕様の狭間で、TypeScriptの型システムをいじくり回しているチーフアーキテクトだ。お前...
Webブラウザの仕組み 【テクニカル・上級編】 画像デコードとネイティブLazy Loading – Webブラウザの仕組み実践ガイド
画像デコードとネイティブLazy Loadingの深層：メインスレッドを救い、レンダリングパイプラインを極限まで最適化する方法こんにちは。日夜、ブラウザのレンダリングパイプラインとメモリ消費の最適化に頭を悩ませているフロントエンド・アーキテ...
JavaScript 【テクニカル・上級編】 String.prototype.startsWith() – JavaScript実践ガイド
こんにちは。フロントエンドの現場を渡り歩いていると、「たかが文字列判定、されど文字列判定」という壁に何度もぶつかります。特に、数万件のDOM要素を監視したり、リアルタイムで入力される巨大なログストリームを処理したりするアーキテクチャにおいて...
CSS 【テクニカル・上級編】 is関数型疑似クラス – CSS実践ガイド
`:is()` 関数型疑似クラス：詳細度と爆発的セレクタの呪縛からフロントエンドを解放するアーキテクチャこんにちは。日夜ブラウザのレンダリングパイプラインとCSSの詳細度（Specificity）の計算式に頭を悩ませている、コードの最適化フ...
HTML 【テクニカル・上級編】Radix UIにおけるリストコンポーネントの設計思想 – HTML実践ガイド
Radix UIとセマンティックHTML：リスト構造の「極致」を実装する多くのフロントエンドエンジニアが、`ul`や`li`を単なる「見た目のためのレイアウト要素」だと誤解している。しかし、Webのアクセシビリティを突き詰め、ブラウザのレン...
React 【テクニカル・上級編】 状態管理ロジックのテスト戦略 – React実践ガイド
こんにちは。フロントエンドの現場を渡り歩いていると、「なぜかテストが不安定」「状態の更新が非同期の波に飲まれてレースコンディションを起こしている」「モックの山でテストコードが本体より肥大化している」といった悲鳴を、優秀なエンジニアからさえも...
TypeScript 【テクニカル・上級編】 Excludeによるユニオン型の絞り込み – TypeScript実践ガイド
Excludeの真実：ユニオン型を外科手術のように操る型アーキテクチャこんにちは。日々、複雑怪奇な型パズルと格闘しているフロントエンド・スペシャリストの皆さん。TypeScriptの型システムは、単なる「JavaScriptのエラー探知機」...
Webブラウザの仕組み 【テクニカル・上級編】 フォント読み込み戦略（font-display） – Webブラウザの仕組み実践ガイド
こんにちは。フロントエンドのアーキテクチャを極めようと日夜ブラウザの内部挙動と格闘しているエンジニアの皆さん。今回は、Webフロントエンドにおける「フォント読み込み戦略、特に `font-display` プロパティ」の深層について、ブラウ...