UI - わかっちウォッチ

Reactベースの再利用可能なUIコンポーネント実装。Toast通知、比較機能、モーダル、フォームなど、実践的なコンポーネント設計とベストプラクティスを紹介します。

2026年5月30日

「BEFORE」と「AFTER」の画像比較スライダーを操作する男性キャラクターのイラスト。Reactコンポーネント、アクセシビリティ（A11y）、タッチ・キーボード対応といった、記事で解説する機能が図示されている。はじ […]

2026年2月5日

Reactで複数選択比較機能を実装する方法を徹底解説。useStateを使った選択状態管理、Setと配列の組み合わせパターン、モーダルのアクセシビリティ（フォーカストラップ）対応まで、実践的なコード例と共に紹介します。

2026年1月30日

Reactで重大度別の色分け、自動消去タイマー、アクセシビリティ対応のToast通知システムを実装する方法を完全解説。useRefでタイマー管理、重複防止、後方互換性維持の実装コード付きで紹介。初心者でも安心のステップバイステップガイド。

2026年1月12日

Next.jsのnext/fontでNoto Sans JP（日本語フォント）をセルフホスティングする方法を解説。Google Fonts依存を解消し、CSPとパフォーマンスを改善する具体的な設定手順を紹介します。