あるページの中で重要ではない付随的なデータの取得を待たずに、重要なデータの取得が完了したタイミングでページを表示させたい場合があります。例えば、ブログの記事のページを遷移する場合、ユーザーにとって記事のコンテンツは重要なデータですが、それに付随するコメントやいいねの数はそれほど重要ではないので、それらのデータの取得を待つ必要がありません。 この記事では React Router の loaderを使用して重要なデータの完了のみを待機する方法を試してみます。

タブとは、ページ内でコンテンツを切り替えるために使用する UI です。タブ初期表示ではいずれか一つのタブパネルが表示されており、関連するタブがアクティブなスタイルで表示されます。それぞれのタブには関連するタブパネルがあり、タブを選択することで表示されるタブパネルがタブに関連するものに切り替わります。

アコーディオンは見出しであるヘッダーとコンテンツであるパネルから構成された UI が垂直に積み重ねられたセットです。ユーザーはヘッダーをクリックすることで、ヘッダーに関連付けられたパネルの表示・非表示を切り替えることができます。 アコーディオンは1つのページ内で複数のセクションのコンテンツを表示する際に、スクロールを減らすためによく　使用されます。例えば、「よくある質問」のようなページで使われていることを見たことがあるかと思います

リストボックスにアクセシビリティ上求められる要件を確認した後に、React で実際に要件に従った実装をおこないます。

Qwik City は Qwik のメタフレームワークです。React における Next.js、Vue.js における Nuxt.js のような関係と同等です。

イベントのバブリングとは、ある要素で発生したイベントがその親要素まで伝播することです。React でポータルを使用した場合、DOM ツリー状親子関係でなかったとしても、React ツリー上親子関係であればイベントがバブリングされます。

React において不要な再レンダリングを避けるためのいくつかのパターンを紹介します

beforeunload イベントをテストする方法を紹介します

:focus-within は CSS の擬似クラスであり、その要素または子孫要素にフォーカスがある場合に一致します。

ダイアログをアクセシビルに実装するための要件を確認しましょう。

ユーザーが入力した情報をそのまま表示するとクロスサイトスクリプティング（XSS）脆弱性につながる問題があることはよく知られています文字列の無害化はこのようにライブラリの実装に頼っている状況でしたが、WING により Sanitizer API という仕様が策定されました。Sanitizer API により外部ライブラリの依存無しで XSS の対策が可能となります。

Hono は TypeScript/JavaScript のシンプルな Web フレームワークです。Hono という名前は日本語の「炎」に由来します。 Hono の特徴としては以下の点が挙げられています。 - ウルトラファスト - 依存関係なし - ミドルウェア - TypeScript - マルチプラットフォーム