JavaScript 【テクニカル・上級編】 等価演算子(==)による暗黙の型変換の罠 – JavaScript実践ガイド
抽象等価の呪縛：`==` が引き起こす暗黙の型変換という名のパンドラの箱やあ、フロントエンドの荒波を航海する同志たちよ。今日もコードレビューで「なんでこんなバグを踏むんだ…」と頭を抱えているかい？JavaScriptという言語は、その緩やか...
frontendintronational
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の型システムは、単なる「静的なエラーチェッカー」の枠を早々に脱ぎ捨てた。今やそれは、コンパイル時にコードの構造をメタプログラミングする...
Webブラウザの仕組み 【テクニカル・上級編】 DOMツリー構築とスクリプトのブロッキング – Webブラウザの仕組み実践ガイド
ブラウザがDOMを築く裏側：スクリプトブロッキングという名の「永遠の立ち入り禁止」と、その回避術やあ、フロントエンドの深淵を覗く同志よ。今日も今日とて、ユーザーの指先一つで動く滑らかなWebアプリケーションの裏側で、ブラウザという名の巨大な...
JavaScript 【テクニカル・上級編】 加算演算子における文字列連結と数値加算の優先順位 – JavaScript実践ガイド
加算演算子の魔力：`+` が引き起こす暗黙の型変換と、V8エンジンが裏で泣かないためのアーキテクチャ設計こんにちは。日夜、フロントエンドのパフォーマンスチューニングとメモリプロファイリングに明け暮れるチーフアーキテクトの私だ。さて、Java...
CSS 【テクニカル・上級編】 :fullscreen 擬似クラス – CSS実践ガイド
こんにちは。フロントエンドの現場で日々、CSSの不可解な挙動やブラウザの気まぐれなレンダリングパイプラインと格闘しているエンジニアなら、一度は「フルスクリーンAPI」の沼にハマったことがあるはずだ。モーダル、動画プレイヤー、ビジュアライザー...
HTML 【実務・中級編】リスト構造のセマンティックな使い分け – HTML実践ガイド
なぜ今さら「リストタグ」の話をするのか？――Webの骨格を正すセマンティクスの本質現場でコードレビューをしていると、未だに「とりあえず`div`と`span`で組んで、CSSで整える」という実装に出くわすことがあります。一見、見た目さえ合っ...
React 【テクニカル・上級編】 flushSyncによるバッチ処理の強制解除 – React実践ガイド
こんにちは。普段からReactのソースコードを覗き見しては、その巧妙なファイバー構造とスケジューリングの妙に感嘆しているフロントエンド・ギークの皆さん。今回は、React 18で導入された「状態更新のバッチング（Batching）」、そして...