JavaScript 【テクニカル・上級編】 型判定ライブラリの比較（lodash.is等） – JavaScript実践ガイド
型判定の沼：なぜ「たかが `typeof`」でプロダクションが落ちるのかフロントエンドのアーキテクチャがどれほど洗練されていようとも、アプリケーションの根底にあるのは「データ」と、それをさばくJavaScriptの泥臭い現実だ。特に「型判定...
JavaScript CSS 【テクニカル・上級編】 ::highlight擬似要素によるカスタムハイライト – CSS実践ガイド
こんにちは。フロントエンドの迷宮を日夜彷徨い、ブラウザの描画パイプラインとメモリリークの夢を見るあなたへ。DOMノードを汚染することなく、任意のテキスト範囲をCSSだけで自由自在にハイライトしたいと思ったことはないだろうか？検索ワードのハイ...
HTML 【入門編】リスト構造のセマンティックな使い分け – HTML実践ガイド
「ただの並び」じゃない！HTMLリストタグを正しく使いこなして、Webに「意味」を吹き込もうWeb制作を始めたばかりの頃、こんなふうに思ったことはありませんか？「見た目は全部同じように並んでいるのに、なんでわざわざ `ul` とか `ol`...
React 【テクニカル・上級編】 関数型更新による競合状態の解決 – React実践ガイド
状態管理の亡霊：なぜあなたの `useState` は連続更新で裏切るのかこんにちは。日々、Reactのファイバーツリーの深淵を覗き込み、ブラウザのメインスレッドと和解するためのコードを書き殴っているフロントエンド・アーキテクトだ。プロダク...
TypeScript 【テクニカル・上級編】 OmitThisParameterによるthisの削除 – TypeScript実践ガイド
TypeScriptを書いていると、ふと「型システムの奥の院」に迷い込む瞬間がある。日々のコンポーネント実装やAPIクライアントの型固めに追われているうちは、`string`や`number`、あるいはせいぜいジェネリクスを少しいじる程度で...
Webブラウザの仕組み 【テクニカル・上級編】 ブラウザごとのレンダリングエンジンの差異と互換性 – Webブラウザの仕組み実践ガイド
ブラウザエンジンの深層：Blink、WebKit、Geckoの差異と、現場のエンジニアが知るべき「動かない理由」こんにちは。日夜、DOMツリーの機嫌を伺い、スタイル計算の最適化に魂を削っているフロントエンド・アーキテクトの仲間たちへ。私たち...
JavaScript 【テクニカル・上級編】 ラッパーオブジェクト（String, Number, Boolean）の挙動 – JavaScript実践ガイド
プリミティブをめぐる幻影：JavaScriptラッパーオブジェクトの内部構造と、V8エンジンを唸らせるコードの書き方こんにちは、アーキテクトの皆さん。日々のフロントエンド開発、お疲れ様ヒープ領域。今日もどこかで「なぜか動くけれど、なぜ動くの...
CSS 【テクニカル・上級編】 擬似クラス :dir() による方向性制御 – CSS実践ガイド
`:dir()`擬似クラスが切り拓く、国際化Webアプリケーションの新たな地平フロントエンドのアーキテクチャ設計において、多言語対応（i18n）は常に頭を悩ませるポイントだ。特に、英語や日本語のような左から右へ流れる言語（LTR: Left...
HTML 【テクニカル・上級編】olタグのstart属性とreversed属性 – HTML実践ガイド
リストの順序を「DOMの力」で制御する：`start`と`reversed`属性の深淵Webアプリケーションにおいて「リスト」は最も基本的なUIパーツの一つですが、シニアレベルのエンジニアであれば、この単純な `ol` タグが、いかに効率的...
React 【テクニカル・上級編】 複数useStateとオブジェクト状態の使い分け – React実践ガイド
複数 `useState` か、単一オブジェクトか？ ――Reactの内部挙動から紐解く状態設計の極意こんにちは。日々、V8エンジンとReact Fiberの機嫌を伺いながら、数万ノードを抱える巨大なツリーのパフォーマンスチューニングに明け...