azukiazusa.dev
light-dark 関数は CSS のカラー関数で、引数に 2 つのカラー値を取り、ライトモードのときには 1 つ目の値をを、ダークモードのときには 1 つ目の値を返します。 `color-scheme` プロパティの値もしくはユーザーの OS のダークモード設定によって切り替わります。

CSS: ダークモードで値を切り替える light-dark 関数

従来までは、TypeScript で関数の引数の型を絞り込んだ結果を返す場合には、ユーザー定義型ガードとして `x is string` のような形式で型ガードを定義する必要がありました。TypeScript 5.5 では自動で型の絞り込みが推論されるようになります。

TypeScript 5.5 で関数による型の絞り込みが改善される

CSS のメディアクエリで比較演算子（`<`, `>`, `<=`, `>=`）が使えます。この記法を Range Syntax と呼びます。この記法は従来の `min-width` や `max-width` といった記法と比べて、より直感的に記述できるため便利です。

CSS メディアクエリで比較演算子が使える

`AbortController` は、fetch API でリクエストをキャンセルするためのオブジェクトです。`AbortController` は複数のリクエストを 1 度にキャンセルできます。

1 つの AbortController で複数の fetch をキャンセルできる

CSS の reverse 系の値とは、`flex-direction` の `row-reverse` や `column-reverse` などのことです。これらの値は、アクセシビリティの観点からできる限り使用を避けるべきです。

CSS の reverse 系の値は可能な限り使わない

npm は install の alias として isntall が用意されているので、typo して isntall と打ってもコマンドが実行されます。

npm は isntall でもコマンドを実行できる

clsx は、複数のクラス名を結合するための軽量ライブラリです。条件によってクラスを付け替えたり、グルーピングをする際に簡潔に記述できます。

クラス名の結合をする軽量ライブラリの clsx

いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。 そこで　z-index の値に `calc(infinity)` を指定すると、絶対に最前面に表示させることができます。

CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する

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 の型を取得する