TypeScript 【テクニカル・上級編】 Recordによるオブジェクト型の生成 – TypeScript実践ガイド
Record を極める：型安全な辞書構造と、実務の地雷原を華麗に回避するアーキテクチャこんにちは。フロントエンドのコードベースを日々トリアージし、型システムの向こう側にあるV8エンジンの息づかいに思いを馳せるチーフアーキテクトの私だ。さて、...
frontendintronational
TypeScript 【テクニカル・上級編】 Record
Webブラウザの仕組み 【テクニカル・上級編】 ペイントホールドとレイアウト安定性（CLS対策） – Webブラウザの仕組み実践ガイド
ペイントホールドの裏側：なぜその「画面のちらつき」は防げないのかこんにちは。日々、ブラウザのメインスレッドと果てしなき最適化の戦いを繰り広げているエンジニアの皆さん。Webアプリケーションのパフォーマンスを語るとき、私たちはどうしても「Ja...
JavaScript 【テクニカル・上級編】 String.prototype.indexOf()と検索 – JavaScript実践ガイド
こんにちは、チーフアーキテクトの私だ。日々、何百万ものユーザーが狂ったようにスワイプし、クリックし、データを流し込む巨大なSPA（シングルページアプリケーション）の荒波にもまれている君なら、一度は目にしたことがあるはずだ。「`if (str...
CSS 【テクニカル・上級編】 link疑似クラス – CSS実践ガイド
リンクの「色」ごときで消耗するな：`:link`疑似クラスの深淵と、モダンWebアーキテクチャにおける生存戦略フロントエンドの荒波をくぐり抜けてきた君なら、``タグを見た瞬間に「あぁ、アンカーね」と脳死でスタイルを当ててきた過去があるはずだ...
HTML 【入門編】Radix UIにおけるリストコンポーネントの設計思想 – HTML実践ガイド
なぜ「ただのリスト」にこだわるのか？Radix UIから学ぶアクセシブルな設計思想こんにちは！Web制作の現場に飛び込んで、「HTMLのリストタグって、``と``だけでいいんじゃないの？」と一度は思ったことはありませんか？実は、Webの世界...
React 【テクニカル・上級編】 useStateの遅延初期化（Lazy Initialization） – React実践ガイド
useStateの遅延初期化：その「重い初期値」がアプリの首を絞めている理由やあ、フロントエンドの荒波で日々コードを磨き続けている同志よ。今日も元気にDOMのツリーを構築しているかい？今回はReactの最も基本でありながら、うっかり見落とし...
TypeScript 【テクニカル・上級編】 Omitによるプロパティの除外 – TypeScript実践ガイド
チーフアーキテクトが語る、`Omit`の深層と実務上の罠こんにちは。日々、巨大なTypeScriptコードベースの型パズルと格闘しているチーフアーキテクトの私だ。フロントエンドの開発規模がメガ級に達し、ドメインモデルが複雑化するにつれて、私...
Webブラウザの仕組み 【テクニカル・上級編】 メインスレッドのブロッキングとタスク分割 – Webブラウザの仕組み実践ガイド
メインスレッドの支配者：長大なJavaScriptタスクがいかにしてレンダリングを殺し、どうやって蘇生させるかブラウザのレンダリングエンジンとJavaScriptの実行環境が、なぜ同じ「メインスレッド」という名の狭いリングの上で殴り合いを続...
JavaScript 【テクニカル・上級編】 String.prototype.includes()による判定 – JavaScript実践ガイド
こんにちは。フロントエンドの現場で日々、JavaScriptの非情なメモリリークや、V8エンジンの機嫌と格闘しているチーフアーキテクトの私だ。さて、今回は多くの開発者が「こんなの`indexOf() !== -1`の糖衣構文（シンタックスシ...
CSS 【テクニカル・上級編】 visited疑似クラス – CSS実践ガイド
`:visited`の深層：プライバシーの壁とレンダリング最適化の狭間でCSSアーキテクトが取るべき戦略フロントエンドのパフォーマンスチューニングやアクセシビリティの監査において、私たちは日々DOMの肥大化、不要な再描画（Reflow/Re...