Boneyard で正確なスケルトンローダーを生成する
スケルトンローダーは、コンテンツが読み込まれる前に表示されるプレースホルダーで、ユーザーに対して読み込み中であることを視覚的に示すためのものです。Boneyard はスケルトンローダーの手動の計測と更新の手間を解消するためのフレームワークです。この記事では、Boneyard を使用してスケルトンローダーを簡単に実装する方法について説明します。
#React
モーダルの開閉状態を URL で管理する
モーダルの開閉状態を URL で管理することで、状態を復元したり、状態を共有できるなどのメリットがあります。この記事では、Next.js を例に URL でモーダルの開閉状態を管理する方法を紹介します。
AngularJS のチュートリアルを React にリプレイスしてみた③
それではいよいよ、AnguarJS のルーティングモジュールである `ngRoute` を置き換えましょう。この置き換えが完了したら AngularJS を完全に取り除くことができます。
型安全にクエリパラメーターを扱う nuqs
フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。ですが、クエリパラメーターの型が文字列であるため、型安全性が保証されないという課題があります。この記事では `nuqs` というライブラリを使用してクエリパラメーターを型安全に扱う方法について解説します。
【React】アクセシビリティに考慮したリストボックスを実装する
リストボックスにアクセシビリティ上求められる要件を確認した後に、React で実際に要件に従った実装をおこないます。
Ink を使って CLI アプリを React で書く
Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特徴です。Codex や Claude Code といったコーディングエージェントの CLI アプリが Ink で書かれています。
React Server Components のテスト手法
現代におけるコンポーネントのテストは Testing Library を用いてテストを行うことが一般的です。しかし、2023 年 11 月現在、Testing Library はまだ Server Components のテストを十分にサポートしていません。そのため、Server Components のテストを行うには、別の方法を用いる必要があります。この記事では、Testing Library を用いずに Server Components のテストを行う方法について説明します。
React.memo でメモ化したコンポーネントはモック関数が使えない
テストにおいて子コンポーネントをモックしたい場合には通常のテストと同様に jest.mock() を使います。しかし、React.memo() でメモ化したコンポーネントはモック自体には成功するものの、mockImplementation のようなモック関数が使えません。
スナップショットテストとアサーションテスト
この記事では、スナップショットテストとアサーションテストの違いを説明します。また、それぞれのアプローチでテストを書いたときのメリットとデメリットを見ていき、どちらのアプローチを採用すべきか考えていきます。