フロントエンド実装 - rfdnxbro/trends-laravel GitHub Wiki

フロントエンド実装

概要

企業影響力ダッシュボードのフロントエンドは、React 19 + TypeScript + Tailwind CSS v4 で構築されています。 モダンな開発体験と高性能なユーザーインターフェースを提供します。

技術スタック ✅ 実装完了

コア技術

  • React 19: 最新のUI フレームワーク
  • TypeScript: 型安全な開発体験
  • Vite: 高速ビルドツール・開発サーバー
  • Tailwind CSS v4: ユーティリティファーストCSS

ルーティング・状態管理

  • React Router v7: SPA（Single Page Application）ルーティング
  • React Query v5 (TanStack Query): サーバーサイド状態管理・キャッシュ
  • Axios: HTTP通信ライブラリ

プロジェクト構成

resources/js/
├── app.tsx                    # エントリーポイント
├── styles/
│   └── app.css               # Tailwind CSS + カスタムスタイル
├── components/
│   ├── App.tsx               # メインアプリケーション（ルーティング）
│   ├── Layout.tsx            # レイアウトコンポーネント
│   ├── Header.tsx            # ヘッダーコンポーネント
│   ├── Sidebar.tsx           # サイドバーコンポーネント
│   ├── RankingTable.tsx      # ランキングテーブルコンポーネント
│   ├── RankingCard.tsx       # ランキングカードコンポーネント
│   ├── InfluenceChart.tsx    # 企業影響力チャートコンポーネント (#31)
│   ├── TrendChart.tsx        # トレンドチャートコンポーネント (#31)
│   ├── RankingHistoryChart.tsx # 順位履歴チャートコンポーネント (#31)
│   └── __tests__/            # コンポーネントテスト
├── pages/
│   ├── Dashboard.tsx         # ダッシュボードページ
│   └── CompanyDetail.tsx     # 企業詳細ページ
├── services/
│   └── api.ts               # API クライアント（Axios設定）
├── types/
│   └── index.ts             # TypeScript 型定義
├── hooks/
│   └── useApi.ts            # カスタムフック
└── utils/
    └── index.ts             # ユーティリティ関数

実装済み機能

1. ダッシュボードページ (/)

機能:

  • 企業統計情報表示（期間別統計情報：総企業数・記事数・エンゲージメント数）
  • 上位企業ランキング（TOP 10）
  • レスポンシブデザイン対応

API統合:

  • GET /api/rankings/statistics - 期間別統計データ取得
  • GET /api/rankings/1m/top/10 - 1ヶ月期間の上位企業データ取得

主要コンポーネント:

  • DashboardStats - 統計カード表示
  • TopCompanies - ランキングテーブル表示
  • ローディングスピナー・エラーハンドリング

2. 企業詳細ページ (/companies/{id})

機能:

  • 企業基本情報（名前・説明・影響力スコア・ランキング）
  • プラットフォーム連携情報（はてな・Qiita・Zenn）
  • 統計情報（総記事数・登録日・最終更新）
  • ランキング履歴
  • 最新記事一覧
  • パンくずナビゲーション

API統合:

  • GET /api/companies/{id} - 企業詳細データ取得

主要コンポーネント:

  • CompanyProfile - 企業基本情報
  • PlatformConnections - プラットフォーム連携表示
  • RankingHistory - ランキング推移表示
  • RecentArticles - 記事一覧表示

3. レイアウトコンポーネント

Header:

  • アプリケーションタイトル
  • ナビゲーションメニュー
  • レスポンシブメニュー

Sidebar:

  • ダッシュボード・ランキング・企業一覧・検索へのナビゲーション
  • アクティブ状態の視覚的表示

Layout:

  • Header + Sidebar + メインコンテンツの統合レイアウト
  • レスポンシブ対応

4. ランキングコンポーネント ✅ 実装完了

RankingTable:

  • 企業影響力ランキングの表形式表示
  • 7つの期間切り替え（日次・週次・月次・四半期・半年・年次・全期間）
  • ソート・フィルタリング機能（順位・スコア・企業名・順位変動）
  • 検索機能
  • レスポンシブデザイン対応

RankingCard:

  • 個別企業ランキング情報のカード表示
  • 順位変動の視覚化（上昇・下降・変動なし）
  • プラットフォームバッジ表示（はてな・Qiita・Zenn）
  • 企業詳細へのクリック遷移対応

主要機能:

  • 期間別ランキング表示
  • リアルタイム検索・フィルタリング
  • 順位変動アニメーション
  • プラットフォーム連携状況表示
  • 企業基本情報表示（名前・説明・スコア・公式サイト）

5. データ可視化コンポーネント ✅ 実装完了 (#31)

InfluenceChart:

  • 企業影響力スコアの時系列グラフ表示
  • 複数企業の比較機能（最大8企業）
  • インタラクティブなデータポイントクリック
  • カスタムカラーパレット対応
  • レスポンシブデザイン

TrendChart:

  • 記事数・エンゲージメント数推移の棒グラフ表示
  • 期間選択UI（7日間・30日間・90日間・1年間）
  • 二軸表示（記事数・エンゲージメント数）
  • 統計情報サマリー（総記事数・総エンゲージメント数）
  • リアルタイム期間切り替え

RankingHistoryChart:

  • 企業順位変動履歴の折れ線グラフ表示
  • 順位と影響力スコアの二軸グラフ
  • 順位変動インジケーター（上昇・下降・維持）
  • 統計情報表示（現在順位・最高順位・最低順位・平均スコア）
  • 日付順ソート機能

技術スタック:

  • Chart.js v4.5.0 + react-chartjs-2 v5.3.0
  • TypeScript完全対応
  • カスタマイズ可能な設定オプション
  • アニメーション効果内蔵

主要機能:

  • インタラクティブなチャート操作
  • レスポンシブデザイン対応
  • エラー状態の適切なハンドリング
  • データ未取得時のフォールバック表示
  • カスタムスタイリング対応

API クライアント設定

Axios 設定 (services/api.ts)

主要機能:

  • CSRF トークン自動設定
  • エラーレスポンス統一処理
  • 10秒タイムアウト設定
  • レスポンスインターセプター

React Query 設定

キャッシュ戦略:

  • 1回のリトライ設定
  • ウィンドウフォーカス時の自動再取得無効
  • QueryKeys による型安全なキー管理

TypeScript 型定義

主要型定義 (types/index.ts)

基本エンティティ:

  • Company - 企業エンティティ
  • Article - 記事エンティティ
  • CompanyRanking - 企業ランキング（順位変動含む）
  • DashboardStats - ダッシュボード統計
  • TopCompany - 上位企業（影響力スコア・ランキング付き）
  • RankingStatsResponse - 期間別ランキング統計情報
  • TopCompaniesResponse - 上位企業レスポンス
  • PeriodStats - 期間別統計データ

ランキング関連:

  • RankingFilters - ランキングフィルター設定
  • RankingTableProps - ランキングテーブルコンポーネントProps
  • RankingCardProps - ランキングカードコンポーネントProps

チャート関連 (#31):

  • ChartDataPoint - チャートデータポイント
  • TimeSeriesData - 時系列データ
  • InfluenceChartData - 影響力チャートデータ
  • TrendChartData - トレンドチャートデータ
  • RankingHistoryData - 順位履歴データ
  • ChartConfig - チャート設定
  • InfluenceChartProps - 影響力チャートProps
  • TrendChartProps - トレンドチャートProps
  • RankingHistoryChartProps - 順位履歴チャートProps

API・共通:

  • ApiResponse<T> - API レスポンス統一型
  • PaginatedResponse<T> - ページネーション対応レスポンス
  • QueryKeys - React Query キー定義（チャート用キー含む）

スタイリング

Tailwind CSS v4 設定

カスタムコンポーネント:

  • .dashboard-card - ダッシュボードカード
  • .metric-card - メトリクス表示カード
  • .btn-primary / .btn-secondary - ボタンスタイル
  • .nav-link - ナビゲーションリンク
  • .data-table - データテーブル
  • .loading-spinner - ローディングアニメーション

レスポンシブ対応:

  • モバイル・タブレット・デスクトップサイズ対応
  • フレキシブルグリッドレイアウト

日本語フォント:

  • Inter + Hiragino Sans + Noto Sans JP の優先順位

開発・ビルド設定

Vite 設定 (vite.config.js)

主要設定:

  • Laravel Vite プラグイン統合
  • Tailwind CSS v4 プラグイン
  • esbuild による JSX 処理（React Fast Refresh 対応）
  • 開発サーバー: localhost:5173

package.json 依存関係

主要な依存関係:

  • React 19.1.0 + React DOM
  • React Router v7.6.3
  • TanStack Query v5.81.5
  • TypeScript 5.8.3
  • Chart.js 4.5.0 + react-chartjs-2
  • Tailwind CSS v4.0.0 + Vite 6.2.4
  • Vitest 3.2.4（テストフレームワーク）

詳細は package.json を参照してください。

開発ワークフロー

起動手順

# 1. Laravel 開発サーバー起動
php artisan serve

# 2. Vite 開発サーバー起動（別ターミナル）
npm run dev

# 3. ブラウザでアクセス
# http://localhost:8000

ビルド

# 開発用ビルド（ホットリロード）
npm run dev

# 本番用ビルド
npm run build

テスト ✅ 実装完了

# フロントエンドテスト実行
npm test

# テスト監視モード
npm run test:ui

テスト環境:

  • Vitest: 高速テストランナー
  • Testing Library: Reactコンポーネントテスト
  • jsdom: ブラウザ環境シミュレーション

テストケース (64テスト):

  • App.test.tsx（1テスト）
  • Header.test.tsx（2テスト）
  • Sidebar.test.tsx（2テスト）
  • RankingTable.test.tsx（12テスト）
  • RankingCard.test.tsx（10テスト）
  • InfluenceChart.test.tsx（10テスト）
  • TrendChart.test.tsx（12テスト）
  • RankingHistoryChart.test.tsx（12テスト）
  • Dashboard.test.tsx（3テスト）

カバレッジ:

  • 全コンポーネントの基本機能テスト
  • ユーザーインタラクションテスト
  • プロップ渡しと表示内容テスト
  • エラー状態とローディング状態テスト

エラーハンドリング

API エラー

  • 404 Not Found: 企業が見つからない場合の適切な表示
  • 500 Server Error: サーバーエラーの統一表示
  • Network Error: ネットワークエラーのフォールバック

ローディング状態

  • データ取得中: スピナーアニメーション表示
  • 初期化中: フォールバックコンテンツ表示
  • エラー時: エラーメッセージとリトライボタン

パフォーマンス最適化

React Query キャッシュ

  • API レスポンスの適切なキャッシュ
  • 重複リクエストの自動排除
  • バックグラウンド更新

Tailwind CSS 最適化

  • 未使用 CSS の自動削除
  • 本番ビルド時の最適化
  • カスタムコンポーネントの再利用

今後の拡張予定

  • 検索ページ: 企業・記事の統合検索機能
  • リアルタイム更新: WebSocket 統合
  • エクスポート機能: CSV・PDF ダウンロード
  • PWA 対応: オフライン機能・プッシュ通知
  • 多言語対応: 国際化（i18n）
  • アクセシビリティ: WCAG 2.1 AA 準拠

トラブルシューティング

よくある問題

  1. Tailwind CSS が適用されない

    # Vite 開発サーバー再起動
npm run dev

  2. React Query エラー

    # ブラウザキャッシュクリア
# 開発者ツール > Application > Storage > Clear storage

  3. TypeScript エラー

    # 型チェック実行
npx tsc --noEmit

関連ドキュメント