tabIndex には 0 と -1 だけを指定する
tabIndex 属性は、フォーカス可能な要素を指定するための属性です。この属性自由な数値を指定できますが、これはアクセシビリティの観点から推奨されていません。
azukiazusa のテックブログ2
Web フロントエンド要素多めの技術ブログです。週に1度更新されます。
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
Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する
Next.js の Server Actions でフォームを作成する際に、どのような方法でバリデーションを行い、エラーメッセージを表示する際にどのような手段が考えられるでしょうか。プログレッシブエンハンスメントの恩恵を受けるために、サーバ
GitLens で特定のコミットを除外する
GitLens の使用時に、機械的にフォーマットされたコミットがあるとコードの変更履歴を確認する際に邪魔になってしまいます。この記事では、GitLens で特定のコミットを除外する方法を紹介します。
JavaScript なしでインタラクションを追加する Invokers
Invokers は JavaScript なしでインタラクションを追加するための提案です。`` 要素に `invoketarget` 属性を指定することで、値として指定した id を持つ `` などの要素の開閉状態を切り替えることが可能と
URL が有効かどうかを判定する `URL.canParse()` メソッド
`URL.canParse()` メソッドは与えられた URL 文字列が有効であるかどうかを判定します。URL 文字列が有効であれば `true` を、無効であれば `false` を返します。これは URL コンストラクターを用いた `t
:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う
ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力す
focusgroup で矢印キーによるフォーカスナビゲーションを実装する
カスタム UI ウィジェットを実装する際には、ウィジェットのロールに応じたキーボード操作によるフォーカスナビゲーションを実装することが求められています。従来このようなキーボード操作は JavaScript を用いて実装する必要がありました。
`<details>` 要素の `name` 属性による排他的なアコーディオンの実装
`` 要素の `name` 属性を利用してグループ化することにより、排他的なアコーディオンを JavaScript なしで実装できます。
よりカスタマイズ可能なセレクトボックスを実現する `selectlist` 要素
`` 要素は、デザインをカスタマイズできなかった従来の `` 要素の問題を解決するために Open UI グループにより提案されている要素です。`` の構成要素の多くはスロットとして提供されていて、高いカスタマイズ性を備えているのが特徴です
`history.replaceState()` にはブラウザによって呼び出し回数制限がある
`history.replaceState()` は、ブラウザの履歴を変更するための API です。使用例としてユーザーのアクションによる UI の状態の変更に合わせて、URL のクエリパラメータを変更することが挙げられます。この API
モーダルの開閉状態を URL で管理する
モーダルの開閉状態を URL で管理することで、状態を復元したり、状態を共有できるなどのメリットがあります。この記事では、Next.js を例に URL でモーダルの開閉状態を管理する方法を紹介します。
Bun の Web フレームワーク ElysiaJS のチュートリアル
ElysiaJS は Bun の Web フレームワークです。高いパフォーマンスと、シンプルな API や厳格な型チェックにより生産性に優れているという特徴があります。また柔軟性が高く、多くのプラグインを組み合わせて利用できます。この記事で
Bun workspace で始めるモノレポ生活
Bun では `package.json` の `workspaces` を使用することでモノレポの管理が可能です。この記事では Bun によるモノレポを試してみます。
Bun のマクロを使ってフィーチャートグルを実装する
Bun にはマクロはビルド時に実行される関数です。関数が返す値がインラインにバンドルファイルに埋め込まれます。マクロには、実行してインライン化した後に、デッドコードを削除するという特徴があります。この機能を使ってフィーチャートグルを実装して
Bun の Plugins で CSV ファイルを直接 import する
Bun の Plugins API を使用することで、任意の拡張子のファイルのサポートを追加できます。例えば Bun の公式の動画では、Plugins API を使用して Rust ファイル（.rs）を直接 import できる仕組みも作れ
OpenTelemetry Collector の Connector を使ってログをメトリックに変換する
OpenTelemetry には、メトリック、トレース、ログの 3 つの形式があります。これらの形式はそれぞれ別のパイプラインで処理されます。ある形式のデータを別の形式に変換し、あたかも 1 つのパイプライン上でデータを処理したい場合に C
最小限のコードで動く最も汚いコードから始める
コードを書く際の重要な要点は、読みやすく他人に理解される「良いコード」を書くことです。しかし、完璧を目指して最初から書こうとすると行き詰まります。代わりに、荒削りながらも動くコードを作成し、徐々にリファクタリングして完成度を高めます。型エラ
OpenTelemetry を使用して Node.js アプリケーションを計装する
OpenTelemetry は Observability のフレームワークであり、トレース・メトリクス・ログなどのテレメトリーデータを作成、管理するためのツールキットです。OpenTelemetry はベンダーに依存しない形で標準化された
await は Promise 以外のオブジェクトでも値を取り出せる
await キーワードは `then()` という名前のメソッドを持つオブジェクトに対して使用できます。このようなオブジェクトを thenable object と呼びます。await キーワードが Promise オブジェクトではなく t
【React】メモ化したコンポーネントに children を渡すと効果がなくなる
React.memo は Props が変更されないかぎり、コンポーネントを再レンダリングしないようにする関数です。この関数はコンポーネントの余分なレンダリングを防ぎ、パフォーマンスを向上させる目的で使用されます。しかし、React.mem
アニメーションの無効設定は prefers-reduced-motion に任せるか、アプリケーションの設定で制御するか
prefers-reduced-motion とは、ユーザーの環境設定によって余計な動きを抑制することを要求したことを検出するメディアクエリです。この設定は各 OS ごとに設定できます。ユーザーがアニメーションを無効にできることは、アクセシ
【書評】RustとWebAssemblyによるゲーム開発は Rust 開発における設計を学べる良書
本のタイトルは「Rust と WebAssembly によるゲーム開発」となっていますが、反して WebAssembly についての話題はほとんど出てきません。主に Rust における開発の設計についての話題が中心となっています。