1 つの AbortController で複数の fetch をキャンセルできる
`AbortController` は、fetch API でリクエストをキャンセルするためのオブジェクトです。`AbortController` は複数のリクエストを 1 度にキャンセルできます。
azukiazusa のテックブログ2
Web フロントエンド要素多めの技術ブログです。週に1度更新されます。
CSS の reverse 系の値は可能な限り使わない
CSS の reverse 系の値とは、`flex-direction` の `row-reverse` や `column-reverse` などのことです。これらの値は、アクセシビリティの観点からできる限り使用を避けるべきです。
新しい UI テストの手法を提供するテストライブラリ SafeTest
SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。S
技術の素振りのために記事を書く
技術の素振りを、ここではある特定の言語やフレームワークに対する理解を深めるために、その技術を使って何かしらの成果物を作成することと定義します。素振りの目的としては、ドキュメントからは読み取れない Pro/Con を得ること、その技術が実際の
初心者向けの単純なルールを作る
新しい物事を始めるときは複雑な理屈は抜きにして、単純なルールが規定されていることが初心者にとって大切です。この理屈は開発時の設計やコーディングルールにも当てはまると思います。単純なルールとして lint を設定したり、コンポーネント化して複
type-safe とプログレッシブエンハンスメント、アクセシビリティヘルパーを備えたフォームライブラリ Conform
Conform は React 向けのフォームライブラリです。type-safe であること、Web 標準を利用したプログレッシブエンハンスメントや、アクセシビリティヘルパーを特徴としており、Next.js の Server Actions
フルスタック Web フレームワーク HonoX を使ってみる
HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。Hono が提供するサーバーサイドやクライアントサイドの機能を使いつつ、ファイルベースルーティングや Islands Architecture
Tailwind CSS を使う時に一緒に入れたいライブラリ
Tailwind CSS を使う上でクラス名をスッキリと書くために一緒に入れたいライブラリを紹介します
Hono で Server-Sent Events によるストリーミングを実装する
Server-Sent events（SSE）は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信、HTTP で通信するという特徴があります。この記事
npm は isntall でもコマンドを実行できる
npm は install の alias として isntall が用意されているので、typo して isntall と打ってもコマンドが実行されます。
クラス名の結合をする軽量ライブラリの clsx
clsx は、複数のクラス名を結合するための軽量ライブラリです。条件によってクラスを付け替えたり、グルーピングをする際に簡潔に記述できます。
TypeScript のような構文で OpenAPI のスキーマを定義する TypeSpec
TypeSepc は TypeScript にインスパイアされた言語で、開発者が親しみやすい構文で OpenAPI のスキーマを定義できます。モデルを使ってデータの構造を定義し、`@route` デコレーターを使って REST API のエ
CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する
いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。 そこで z-index の値に `calc(
Node.js esm の dirname と filename
commonjs では `__dirname` と `__filename` でファイルのパスを取得できますが ES Modules では使えません。 今まで同等の API が存在していなかったのですが、Node.js v20.11.0
Bun でクロスプラットフォームなシェルスクリプト
Bun の `$` を使うと、クロスプラットフォームなシェルスクリプト（Bun Shell）を書くことができます。Bun Shell は macOS (zsh)、Linux (bash)、および Windows (cmd) と OS の違い
MSW v2 では Web 標準の Fetch API をサポート
Mock Service Worke（MSW） v2 では Web 標準の Fetch API をサポートしました。
Remix の SPA モード
Remix は React のフルスタックフレームワークで、Web 標準に基づいた API で構築されていることが特徴です。Node.js のようなサーバーサイドの JavaScript 環境で動作することを前提としています。しかし、現実の
TypeScript で任意の文字列を受け取りつつエディタの補完を効かせる型
すべての文字列を受け入れつつ、特定の文字列のみを補完候補に表示させたい場合があります。例えば、CSS の色を指定するプロパティの値には、カラーコードで指定する `#000000` や `#ffffff` などの文字列を受け入れつつ、`red
React でコンポーネントの Props の型を取得する
プリミティブな UI を構築するとき、button や input などの HTML 要素をラップしたコンポーネントを作成することがあります。このようなコンポーネントでは、HTML 要素の Props に加えて、コンポーネント固有の Pro
配列をグループ化する Object.groupBy 静的メソッド
Object.groupBy 静的メソッドは、ES2024 で追加された配列をグループ化する関数です。配列の各要素に対してグループ化のキーを指定することで、グループ化されたオブジェクトを返します。
TailwindCSS で複数行のテキストを省略するとき
TailwindCSS で長いテキストを省略するときには、`truncate` クラスを使用します。しかし、`truncate` クラスは 1 行のテキストにしか対応していません。
tabIndex には 0 と -1 だけを指定する
tabIndex 属性は、フォーカス可能な要素を指定するための属性です。この属性自由な数値を指定できますが、これはアクセシビリティの観点から推奨されていません。
Svelte の Props 省略記法
Svelte ではコンポーネントに Props を渡す際に省略記法が使えます。
GitHub Copilot Chat の inline chat のキーボードショートカットを無効にする
GitHub Copilot Chat を VSCode で使用していると、エディタ上で ⌘ + i を押すと inline chat が表示されます。しかし、このショートカットはコードの補完を表示するためにも使われていました。このショート
details 要素の name 属性による排他的アコーディオン
`details` 要素は、開閉可能なコンテンツをマークアップするための要素です。`details` 要素に新たに `name` 属性が追加され排他的アコーディオンとして利用できるようになりました。
GitLens で特定のコミットを除外する
GitLens の使用時に、機械的にフォーマットされたコミットがあるとコードの変更履歴を確認する際に邪魔になってしまいます。この記事では、GitLens で特定のコミットを除外する方法を紹介します。
大きさが自動で変わる textarea を CSS だけで実現
テキストの入力量に応じて自動で高さが変わる textarea をよく見かけると思います。Slack や X の入力欄がそうですね。
TailwindCSS の data 属性
TailwindCSS v3.2 からは data 属性を使って、条件付きでスタイルを適用できます。
静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
Pagefind は、静的サイト向けの全文検索エンジンと UI ライブラリです。特定のフレームワークに依存しない JavaScript ライブラリとして実装されており、静的サイトジェネレーターで生成された HTML ファイルに対して検索機能
2023 年に読んでよかった本
年末なので 2023 年のまとめっぽい記事を書きたくなりました。今年は 1 年間でおおよそ 300 冊の本をよんだようです（そのうち 3 割ほどはラノベなのですが...）。その中でも特に印象に残った本を紹介します。
input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案
スイッチは多くのウェブサイトで使われているものの、HTML の標準要素としては存在していませんでした。そのため多くの開発者は、スイッチを実装するために独自の実装を行っていましたが、このような独自の実装はアクセシビリティの問題を引き起こす可能
OpenTelemetry Collector をカスタムビルドする
本番環境では OpenTelemetry Collector Contrib を使用せず、必要なコンポーネントのみを含むようにカスタムビルドすることが推奨されています。この記事では、OpenTelemetry Collector をカスタム
CSS だけで動くスクロールドリブンアニメーション
Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。
Storybook v8 の React Server Components サポート
Storybook v8 では `experimentalNextRSC` オプションにより React Server Components をサポートしています。しかし、このオプションは React Server Components と
MSW v2 で `HttpResponse.json()` の型がおかしいときの対処法
MSW v2 の `HttpResponse.json()` の第 2 引数の型は `Response` オブジェクトの初期化時に渡すオプションを指定できます。しかし、tsconfig.json の設定によっては、この型がおかしくなることが
React Server Components のテスト手法
現代におけるコンポーネントのテストは Testing Library を用いてテストを行うことが一般的です。しかし、2023 年 11 月現在、Testing Library はまだ Server Components のテストを十分にサポ
HTML 標準でコンボボックスを実現する `<combobox>` 要素の提案
コンボボックスとは、テキストボックスとドロップダウンリストを組み合わせた UI コンポーネントです。コンボボックスはユーザーがテキストボックスに入力した文字列に基づいて、ドロップダウンリストのアイテムをフィルタリングできます。`` 要素は、
なぜ Server Actions を使うのか
Next.js 14 の Server Actions の stable リリースに発表は大きな反響を呼びました。特に `` の `formAction` 属性内で直接 SQL クエリを実行するコードは多くの人に衝撃を与えていました。Ser
パッケージマネージャーを npm に移行するときには `npm install --package-lock-only` コマンドを使うとよい
既存のプロジェクトで npm に移行する際に `npm install --package-lock-only` を使うことで、依存パッケージのバージョンを変更することなく lock ファイルを移行できます。
Server Actions の戻り値には JSX を使える
Server Actions の戻り値には、シリアライズ可能なデータ型を返す必要があります。ドキュメントでは Server Actions の戻り値に JSX を使うことはサポートされていないと記述されていますが、実際には Server A