web-react

web-react

目的

このスキルは、動的なウェブアプリケーションを構築するための React 19 の専門知識を提供します。フック、コンテキスト、Suspense、サーバー／クライアントコンポーネント、useActionState、コンパイラー、効率的な状態管理とデータ処理のための React Query など、高度な機能に重点を置いています。

使用する場面

• useActionState などの最新のフックや、Suspense を使用したサーバーサイドレンダリングを必要とする新規 React プロジェクトに使用します。
• ウェブアプリでデータ取得を React Query と統合する場合、特にリアルタイム更新や API とのやり取りに適用します。
• 大規模アプリケーションでサーバー／クライアントコンポーネントを使用してパフォーマンスを最適化する場合に選択します。
• Redux を使わずにグローバル状態を管理するためのコンテキストが必要な場合や、Suspense で非同期処理を扱う場合に活用します。

主な機能

• フック：useState、useEffect、useContext をローカル状態と副作用に使用し、React 19 では useActionState をフォーム状態とアクションに使用します。
• コンテキスト：コンテキストプロバイダーを作成して、テーマやユーザー認証などのデータをコンポーネント間で共有します。
• Suspense：<Suspense fallback={
  Loading...
  }> のようにコンポーネントをラップして、プロミスを処理する遅延読み込みを実現します。
• サーバー／クライアントコンポーネント：サーバー専用コードには 'use server' ディレクティブを使用し、インタラクティブな処理にはクライアントコンポーネントを使用します。
• React Query：データ取得には useQuery を使用し、更新には useMutation を使用します。レスポンスは自動的にキャッシュされます。
• コンパイラー：React 19 のコンパイラーを活用して、ビルドツールでのバンドルやツリーシェイキングなどの最適化を自動化します。
• その他：useActionState を使用してサーバーアクションでフォームを処理し、クライアント側の JavaScript を削減します。

使用パターン

• フックで状態を管理するには、次のようにインポートして使用します。

  import { useState } from 'react';
  const [count, setCount] = useState(0);
  

• コンテキストを作成して利用するには、次のようにします。

  import { createContext, useContext } from 'react';
  const ThemeContext = createContext('light');
  const App = () => useContext(ThemeContext);
  

• 遅延読み込みされるコンポーネントに Suspense を実装します。

  import { Suspense } from 'react';
  <Suspense fallback={<Spinner />}>
    <LazyComponent />
  </Suspense>
  

• データ取得に React Query を使用します。

  import { useQuery } from '@tanstack/react-query';
  const { data, isLoading } = useQuery(['key'], () => fetchData());
  

• サーバー／クライアントコンポーネントを使用する場合は、サーバー専用ロジックを含むファイルの先頭に 'use server' を記述し、その後クライアントコンポーネントにインポートします。

一般的なコマンド／API

• フック API：フォームには useActionState を呼び出します。例：const [state, action] = useActionState(formAction, initialState); ここで formAction は非同期関数です。
• Suspense API：ローディング状態には、fallback プロパティを指定した <React.Suspense> を境界として使用します。
• React Query コマンド：useQuery フックでクエリを実行し、ミューテーションには useMutation({ mutationFn: asyncFn }); を使用します。React Query の CLI：開発サーバーには npx @tanstack/query start を実行します。
• コンパイラーフラグ：React 19 のプロジェクトでは、最適化を有効にするため、Vite などのビルドツールで --react-compiler フラグを指定してコンパイラーを使用します。Webpack では、module: { rules: [{ test: /.js$/, use: 'react-compiler' }] } を追加します。
• API エンドポイント：React Query では、fetch('/api/data', { headers: { Authorization: Bearer ${process.env.REACT_APP_API_KEY} } }); のようなエンドポイントからデータを取得します。.env ファイルで環境変数を $REACT_APP_API_KEY として設定します。
• 設定形式：グローバル設定には、コード内で React Query を次のように設定します：const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 5 * 60 * 1000 } } });

統合に関する注意

• 依存関係をインストールして他のツールと統合します：npm install react react-dom @tanstack/react-query を実行し、 でアプリをラップします。
• 認証には環境変数を使用します。.env ファイルで $REACT_APP_API_KEY を設定し、fetch 呼び出し内で process.env.REACT_APP_API_KEY を使用します。
• サーバーコンポーネントと組み合わせる場合は、サーバーのセットアップ（例：Next.js）を行い、'use server' ディレクティブを使用します。クライアント側では、フックを直接インポートします。
• web-dev クラスターのツールと連携する場合：バックエンドを使用する場合は、package.json にプロキシを設定して React Query が CORS を処理できるようにします："proxy": "http://localhost:5000"。
• React 19 の機能を使用するには、プロジェクトが React 19 以降を使用していることを確認します。package.json に "react": "^19.0.0" を追加し、npm install を実行します。

エラー処理

• フックでは、useEffect のクリーンアップ処理でエラーをキャッチします：useEffect(() => { const cleanup = () => { try { /* code */ } catch (e) { console.error(e); } }; return cleanup; }, []);
• サスペンスのエラーはエラーバウンダリーで処理します：class ErrorBoundary extends React.Component { state = { error: null }; componentDidCatch(error) { this.setState({ error }); } render() { return this.state.error ?
  Error: {this.state.error.message}
  : this.props.children; } }; のようなコンポーネントを作成し、サスペンスをそのコンポーネントで囲みます。
• React Query では、useQuery で onError を使用します：useQuery({ queryFn: fetchData, onError: (error) => console.error('Fetch failed:', error) }); グローバルに設定するには、QueryClient で設定します：new QueryClient({ defaultOptions: { queries: { onError: handleGlobalError } } })。
• サーバーコンポーネントでは、レスポンスを確認してフェッチエラーを処理します：async function serverAction() { try { const res = await fetch('/api/data'); if (!res.ok) throw new Error('Network response not ok'); } catch (e) { return { error: e.message }; } }。
• 未処理のプロミスを防ぐため、useActionState などの非同期フックでは必ず try-catch を使用します。

グラフの関係

• クラスターとの関連：web-dev（ウェブ開発向けのツールを共有します）。
• タグとの関連：react（コアフレームワーク）、hooks（useState などの特定の API）、components（サーバー／クライアントの種類）、web（全体的な領域）。
• 他のスキルへのリンク：「web-node」と連携してバックエンド API を処理したり、「data-fetching」と連携して高度なクエリを実行したりする可能性があります。