CSS 【テクニカル・上級編】 属性セレクタの基本構文 [attr] – CSS実践ガイド
属性セレクタの極北：`` がブラウザの内部構造とメモリ効率に与える影響のすべてフロントエンドのアーキテクチャを設計する際、私たちは日々、CSSのセレクタがブラウザのレンダリングエンジン（Blink, Gecko, WebKit）の内部でどの...
frontendintronational
CSS HTML 【入門編】リストマーカーのアニメーション実装 – HTML実践ガイド
リストの「点」を動かしたい！CSSアニメーションの意外な落とし穴と解決策Webサイトを作っていると、リストの「・（中黒）」や「数字」を少しオシャレに動かしたくなること、ありますよね。マウスを乗せた瞬間に、マーカーがスッと横にスライドしたり、...
React 【テクニカル・上級編】 Strict Modeにおける二重レンダリングとuseState – React実践ガイド
こんにちは。フロントエンドの現場で日々、不条理なバグや謎のパフォーマンス劣化と格闘しているエンジニアの皆さん。ローカル環境でアプリを立ち上げた瞬間、コンソールに同じログが2回出力されるのを見て、「おいおい、俺の書いたコードのどこにバグがある...
TypeScript 【テクニカル・上級編】 ReturnTypeによる戻り値型の取得 – TypeScript実践ガイド
ReturnTypeの深層：型推論の連鎖が生み出す堅牢性と、コンパイラ最適化の美学フロントエンドの規模が肥大化し、数百万行に迫るコードベースをTypeScriptで維持する現代において、型定義の「重複」はアーキテクチャの癌（がん）に等しい。...
Webブラウザの仕組み 【テクニカル・上級編】 CSSOMツリー構築とレンダリングブロッキング – Webブラウザの仕組み実践ガイド
こんにちは。フロントエンドの現場で日々、LCP（Largest Contentful Paint）の数ミリ秒に命を削っているエンジニアの皆さん。ブラウザが画面をピクセル単位で描き出すまでの裏側の舞台裏――特にHTMLのパーシングからDOM、...
JavaScript 【テクニカル・上級編】 等価演算子(==)による暗黙の型変換の罠 – JavaScript実践ガイド
抽象等価の呪縛：`==` が引き起こす暗黙の型変換という名のパンドラの箱やあ、フロントエンドの荒波を航海する同志たちよ。今日もコードレビューで「なんでこんなバグを踏むんだ…」と頭を抱えているかい？JavaScriptという言語は、その緩やか...
CSS 【テクニカル・上級編】 :placeholder-shown 擬似クラス – CSS実践ガイド
`:placeholder-shown` の深層：CSSだけで完結させるリアクティブ・フォームアーキテクチャの極意こんにちは、フロントエンド・アーキテクトの領域へようこそ。日々の開発で、input要素のプレースホルダーを制御するために、Ja...
HTML 【テクニカル・上級編】リスト構造のセマンティックな使い分け – HTML実践ガイド
なぜ今さら「リスト構造」なのか？ ―― div教からの脱却と、セマンティクスの真価フロントエンドの深淵に潜る諸兄であれば、`` や `` を「単なるスタイル付けのためのラッパー」と見なす甘美な誘惑に、一度は駆られたことがあるはずだ。「CSS...
React 【テクニカル・上級編】 派生状態（Derived State）の計算と不要なuseStateの削減 – React実践ガイド
派生状態（Derived State）というアンチパターン：なぜシニアは `useState` を削るのかこんにちは、あるいはこんばんは。日々、ReactのレンダリングパイプラインとV8エンジンのメモリ使用量に思いを馳せるフロントエンド・ア...
TypeScript 【テクニカル・上級編】 Parametersによる関数引数の抽出 – TypeScript実践ガイド
Parametersの深層：関数引数の静的抽出がもたらす、型安全なアーキテクチャの極みTypeScriptの型システムは、単なる「静的なエラーチェッカー」の枠を早々に脱ぎ捨てた。今やそれは、コンパイル時にコードの構造をメタプログラミングする...