JavaScript
TypeScript の配列型 string[] は「string の要素がいくつでも入る」という意味で、要素数や各位置の型につ...
document.querySelector はジェネリクス引数を使うと、戻り値に null が残ります。 この null をど...
document.querySelector や document.getElementById は、戻り値の型が実際の要素より...
TypeScript の型アサーション(as)は、コンパイラに対して「この値はこの型だ」と開発者が宣言する構文です。型推論では解...
配列は `for...of` で回せます。Map も Set も同じ構文で回せます。内部のデータ構造がまったく異なるのに、同じ方...
DOM 操作を繰り返していると、目に見えないところでテキストノードが断片化していきます。一つの段落に見えるテキストが内部的には複...
あるモジュールの状態が変わったとき、それを知りたいモジュールに通知する。この仕組みを実現するパターンとして Observer と...
ボタンを押したら何かが実行される。その「何か」を関数に直接書いてしまうのは簡単ですが、操作の取り消し(Undo)や再実行(Red...
ボタンを押したら何かが実行される。その「何か」を関数に直接書いてしまうのは簡単ですが、操作の取り消し(Undo)や再実行(Red...
ブラウザ上でテキストをドラッグして選択する操作は日常的に行われていますが、この選択範囲をプログラムから制御できることはあまり知ら...
DOM から要素を削除しても、その要素に紐づいたイベントリスナーやタイマー、外部リソースへの参照が残っていると、ガベージコレクタ...
DOM のノードは特定のドキュメントに所属しています。あるドキュメントのノードを別のドキュメントで使おうとすると、そのままでは動...
要素のサイズを取得するプロパティとして offsetWidth / offsetHeight と clientWidth / c...
ある要素がブラウザのビューポート上でどこに表示されているか、どれくらいの大きさかを正確に知りたい場面は頻繁にあります。ツールチッ...
本番環境にデプロイされる JavaScript は、ミニファイやバンドルによって元のソースコードとはまったく異なる姿になっていま...
既存のクラスやモジュールを使いたいのに、インターフェースが合わなくて使えない。開発の現場では、こうした場面に頻繁に遭遇します。A...
Vite は開発時の高速さで知られるフロントエンドビルドツールですが、本番ビルドには内部で Rollup を使っています。開発サ...
Rollup は JavaScript のモジュールバンドラですが、実際のプロジェクトでは CSS や JSON といった非 J...
JavaScript のバンドルツールにおいて、使われていないコードを最終出力から取り除く技術を Tree Shaking と呼...
Promise の真価は `.then()` をチェーンすることで発揮される。複数の非同期処理を順番に実行したいとき、コールバッ...
Promise は ES2015 で導入された非同期処理の仕組みだ。「将来のある時点で結果が決まる処理」をオブジェクトとして扱え...
コールバック関数は非同期処理の基本だが、処理が連鎖すると深いネストが生まれる。この状態は「コールバック地獄(Callback H...
JavaScript では、関数を別の関数に引数として渡すことができる。この「引数として渡される関数」をコールバック関数と呼ぶ。...
npm パッケージを公開する際、ES Modules(ESM)と CommonJS(CJS)の両方に対応させることで、より多くの...