azukiazusa.dev
commonjs では `__dirname` と `__filename` でファイルのパスを取得できますが ES Modules では使えません。 今まで同等の API が存在していなかったのですが、Node.js v20.11.0 で `import.meta.dirname` と `import.meta.filename` が追加されました。

Node.js esm の dirname と filename

Mock Service Worke（MSW） v2 では　Web 標準の Fetch API をサポートしました。

MSW v2 では　Web 標準の Fetch API をサポート

すべての文字列を受け入れつつ、特定の文字列のみを補完候補に表示させたい場合があります。例えば、CSS の色を指定するプロパティの値には、カラーコードで指定する `#000000` や `#ffffff` などの文字列を受け入れつつ、`red` や `blue` などの特定の文字列を指定します。

TypeScript で任意の文字列を受け取りつつエディタの補完を効かせる型

プリミティブな UI を構築するとき、button や input などの HTML 要素をラップしたコンポーネントを作成することがあります。このようなコンポーネントでは、HTML 要素の Props に加えて、コンポーネント固有の Props を定義することが多いです。

React でコンポーネントの Props の型を取得する

Object.groupBy 静的メソッドは、ES2024 で追加された配列をグループ化する関数です。配列の各要素に対してグループ化のキーを指定することで、グループ化されたオブジェクトを返します。

配列をグループ化する Object.groupBy 静的メソッド

TailwindCSS で長いテキストを省略するときには、`truncate` クラスを使用します。しかし、`truncate` クラスは 1 行のテキストにしか対応していません。

TailwindCSS で複数行のテキストを省略するとき

tabIndex 属性は、フォーカス可能な要素を指定するための属性です。この属性自由な数値を指定できますが、これはアクセシビリティの観点から推奨されていません。

tabIndex には 0 と -1 だけを指定する

Svelte ではコンポーネントに Props を渡す際に省略記法が使えます。

Svelte の Props 省略記法

GitHub Copilot Chat を VSCode で使用していると、エディタ上で ⌘ + i を押すと inline chat が表示されます。しかし、このショートカットはコードの補完を表示するためにも使われていました。このショートカットに慣れていた人にとっては、inline chat が表示されるのは意図しない動作でしょう。

GitHub Copilot Chat の inline chat のキーボードショートカットを無効にする

`details` 要素は、開閉可能なコンテンツをマークアップするための要素です。`details` 要素に新たに `name` 属性が追加され排他的アコーディオンとして利用できるようになりました。

details 要素の name 属性による排他的アコーディオン

GitLens の使用時に、機械的にフォーマットされたコミットがあるとコードの変更履歴を確認する際に邪魔になってしまいます。この記事では、GitLens で特定のコミットを除外する方法を紹介します。

GitLens で特定のコミットを除外する

テキストの入力量に応じて自動で高さが変わる textarea をよく見かけると思います。Slack や X の入力欄がそうですね。

大きさが自動で変わる textarea を CSS だけで実現