JavaScript 【テクニカル・上級編】 String.prototype.match()と正規表現の基本 – JavaScript実践ガイド
こんにちは。フロントエンドの現場で日々、JavaScriptエンジンとメモリのせめぎ合いに興じているチーフアーキテクトだ。今回は、JavaScriptの文字列操作の中でも、一歩間違えるとパフォーマンスのボトルネックになり、セキュリティ上のリ...
frontendintronational
JavaScript CSS 【テクニカル・上級編】 only-child疑似クラスの条件 – CSS実践ガイド
孤高のセレクタ、`:only-child`の深淵。DOMの孤独を検知するアーキテクチャフロントエンドの現場で長年CSSを書いていると、「親要素の中に子要素が1つしかない時だけ、特別なレイアウトを適用したい」という要件に幾度となく直面する。こ...
HTML 【実務・中級編】dl/dt/ddを用いたグリッドレイアウトの実装 – HTML実践ガイド
dl/dt/ddで「理想のグリッド」を組む。モダンCSS時代の記述リスト活用術フロントエンドの世界に入ってしばらく経つと、誰もが一度は悩みますよね。「定義リスト（dl）って、結局どう使うのが正解なんだ？」と。かつては「dlはIE時代の遺物」...
React 【テクニカル・上級編】 副作用関数内部での条件分岐 – React実践ガイド
副作用関数の中での「if文」――その誘惑と、アーキテクトが直面する現実こんにちは。日夜、再レンダリングの嵐とメモリーリークの荒波を航海しているフロントエンド・アーキテクトの皆さん。Reactのコードレビューをしていて、もっとも頭が痛くなる瞬...
TypeScript 【テクニカル・上級編】 ReadonlyArrayによる配列の不変性 – TypeScript実践ガイド
配列の「見かけ上の不変性」に殺されないために：`ReadonlyArray` と型システムの深層こんにちは。日夜、V8エンジンの機嫌を取りながら、巨大なフロントエンド・アーキテクチャの要塞を築いているチーフアーキテクトだ。お前たちのコードベ...
Webブラウザの仕組み 【テクニカル・上級編】 レイアウト（リフロー）の仕組み – Webブラウザの仕組み実践ガイド
レイアウト（リフロー）の深層：ブラウザエンジンを沈没させないためのアーキテクチャ設計こんにちは。日々、ピクセルとメモリの狭間で格闘しているフロントエンド・ギークの皆さん。ブラウザが画面を一枚描画するまでに、内部でどれほどのドラマが繰り広げら...
JavaScript 【テクニカル・上級編】 String.prototype.localeCompare()による文字列比較 – JavaScript実践ガイド
localeCompare()という名の「深淵」：JavaScriptで真に国際化対応した文字列ソートを実装するアーキテクチャこんにちは。日々、V8エンジンのガベージコレクションの挙動やDOMの再描画パイプラインに思いを馳せるフロントエンド...
CSS 【テクニカル・上級編】 last-of-type疑似クラスの仕様 – CSS実践ガイド
CSSの仕様書をめくるのが好きでたまらない夜というものがある。特に、セレクタの特異性（Specificity）やDOMツリーの走査アルゴリズムの深淵に思いを馳せるとき、私たちは単なる「スタイリングの記述」を超えて、ブラウザという名の極限まで...
HTML 【入門編】dl/dt/ddを用いたグリッドレイアウトの実装 – HTML実践ガイド
「dl・dt・dd」って実はすごい！CSS Gridでスマートなリストを作ろうWeb制作を始めたばかりの頃、``や``はよく使うけれど、「`dl`とか`dt`、`dd`って何に使えばいいの？」と迷うことはありませんか？実はこの3つのタグ、「...
React 【テクニカル・上級編】 外部システムとの同期 – React実践ガイド
外部システムとReactの境界線：useEffectによる同期の作法とアーキテクチャこんにちは。日々、数百万人が行き交う巨大なReactツリーの底で、メモリリークと再レンダリングの嵐と戦っているフロントエンド・アーキテクトです。Reactを...