LoL Tier Table

League of Legendsのチャンピオンを使ったティアリストとマトリクス図作成アプリケーション。

🎯 2つの強力な分析モードでチャンピオンを可視化

• 🏆 ティアリストモード: 伝統的なS-A-B-C-Dランキング
• 📊 マトリクスモード: 2軸グリッド + 革新的な4分割象限システム

✨ 167体全チャンピオン対応 | 完全オフライン | ドラッグ&ドロップ

🚀 セットアップ

1. 依存関係のインストール

npm install

2. ローカルデータのセットアップ（推奨）

npm run setup-local

このコマンドは以下を実行します：

• Riot Data Dragon APIからチャンピオンメタデータを取得・保存
• チャンピオンアイコンをpublic/champions/に保存
• dragontail-15.14.1からタイルアイコンをpublic/tiles/にコピー（利用可能な場合）
• ローカルデータのマニフェストファイルを作成

3. バージョン指定セットアップ

# 特定バージョンでセットアップ
npm run setup-local-version 15.14.1

# または直接スクリプトを実行
node scripts/setup-local-data.js --version 15.14.1 --language en_US

4. アプリケーションの起動

npm run dev

📁 データとアイコンの保存場所

ローカルデータは以下の場所に保存されます：

• チャンピオンデータ: public/data/champions.json
• データマニフェスト: public/data/manifest.json
• 正方形アイコン: public/champions/{championId}.png
• タイルアイコン: public/tiles/{championId}_0.jpg

🔧 利用可能なコマンド

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

# ローカルデータセットアップ
npm run setup-local

# バージョン指定セットアップ
npm run setup-local-version <version>

# 従来のアイコンダウンロード
npm run download-icons

# 初期セットアップ（従来）
npm run setup

# プロダクションビルド
npm run build

# ビルドプレビュー
npm run preview

🎯 データの読み込み方式

1. ローカルデータ優先: public/data/manifest.jsonが存在する場合、ローカルデータを使用
2. リモートフォールバック: ローカルデータが無い場合、Riot Data Dragon APIから取得
3. LocalStorageキャッシュ: 両方失敗時の代替手段

💡 パフォーマンス最適化

• ローカルデータ使用時: 高速読み込み、完全オフライン対応
• リモートデータ使用時: キャッシュ機能で高速化
• アイコン表示: 正方形アイコンで統一された見た目

🔄 データの更新

新しいチャンピオンが追加された場合：

npm run setup-local

でデータとアイコンを再ダウンロードできます。

📦 バージョン管理

セットアップスクリプトは以下をサポートします：

• Data Dragonバージョン指定
• 言語設定
• 自動設定ファイル更新

🎮 主要機能

🏆 ティアリストモード

• カスタムティア作成: S, A, B, C, Dティアでチャンピオンを分類
• ティア完全カスタマイズ: 名前・色・数を自由に変更
• インライン編集: ティア名をクリックして直接編集（Enter確定、Escape取消）
• カラーピッカー: 各ティアの色をカスタマイズ
• ティア管理: 動的にティア追加・削除
• ドラッグ&ドロップ: チャンピオンの直感的な配置・移動

📊 マトリクスモード（2種類）

📈 グリッドマトリクス

• 可変グリッドサイズ: 5×5～19×19（奇数サイズ）
• 中心軸表示: 自動計算された中心線をハイライト
• 4方向ラベル: 上下左右の軸ラベルを自由設定
• 座標ベース配置: 精密な2次元チャンピオン配置
• リアルタイム調整: スライダーでグリッドサイズ変更

🎯 4分割マトリクス（NEW!）

• 象限システム: 標準座標系の4象限（第1～第4象限）
• 象限別カスタマイズ: 各象限のサイズとラベルを個別設定
• 視覚的区別: 象限ごとの色分け（緑・青・紫・赤）
• 中央十字線: 象限を分割する視覚ガイド
• 独立グリッド: 各象限3×3～10×10の独立したグリッド
• 外周ラベル: 象限ラベルをグリッド外周に配置

🔍 チャンピオン管理

• 全チャンピオン対応: 167体のLoLチャンピオン
• 高度な検索: 名前・タイトルでのリアルタイム検索
• 役割別フィルタ: アサシン、ファイター、メイジ等でフィルタリング
• 複数選択フィルタ: 複数の役割を同時選択可能
• 選択状態表示: 現在選択中のチャンピオンをハイライト
• 統計表示: 表示中/全体チャンピオン数カウンター

🎨 UI/UX機能

• タブ式設定パネル: タイプ選択・ラベル設定・サイズ調整の整理された設定
• 展開式コントロール: 設定パネルの表示/非表示切り替え
• レスポンシブデザイン: PC・タブレット・モバイル対応
• ドラッグ&ドロップ: @dnd-kit による滑らかなDnD操作
• ゴミ箱機能: 不要なチャンピオンを削除
• 確認ダイアログ: 重要な操作時の確認表示

💾 データ機能

• 完全オフライン対応: インターネット接続不要
• ローカルデータ: 高速なローカルJSONデータ
• 状態管理: Zustand による効率的な状態管理
• 設定保存: ユーザー設定の永続化（将来実装）
• 画像エクスポート: 作成した図表の画像保存（将来実装）

🔧 技術仕様

フロントエンド

• フレームワーク: React 18 + TypeScript
• 状態管理: Zustand（軽量でパフォーマント）
• DnD機能: @dnd-kit/core（アクセシブルなドラッグ&ドロップ）
• ビルドツール: Vite（高速開発・ビルド）
• スタイリング: Tailwind CSS（ユーティリティファースト）

データ管理

• Data Dragon: v15.14.1対応
• チャンピオンデータ: 167体の完全なメタデータ
• 画像アセット: 最適化されたPNGアイコン
• データ永続化: ローカルストレージ + 将来的にIndexedDB

アーキテクチャ

• コンポーネント設計: 機能別モジュラー構成
• 状態設計: ドメイン別ストア分離（App/TierList/Matrix）
• 型安全性: 完全TypeScript対応
• パフォーマンス: React.memo、最適化されたレンダリング

4分割マトリクス実装詳細

• QuadrantGrid.tsx: 専用コンポーネント
• 象限管理: 独立した座標系とドロップゾーン
• 視覚設計: CSS Grid + Tailwind による柔軟なレイアウト
• 状態管理: Zustand での象限データ管理
• TypeScript型: PlacedChampion インターフェースの拡張

💰 コスト効率

• API呼び出し: 0円（完全ローカル化）
• 帯域幅: 最小限（初回セットアップのみ）
• ホスティング: 静的ファイルのみ
• 保守コスト: 最小限（フレームワーク依存なし）

🚀 パフォーマンス特徴

• 初回読み込み: ローカルデータで高速起動
• ドラッグ操作: @dnd-kit による滑らかなアニメーション
• レンダリング: 必要最小限の再レンダリング
• メモリ効率: Zustand による軽量状態管理
• オフライン対応: 完全なインターネット非依存

🎯 使用例

ティアリスト作成例

1. メタ分析: 現在のパッチでの強力なチャンピオンランキング
2. 役割別評価: ADC、サポート等の役割別ティアリスト
3. 難易度評価: プレイ難易度別のチャンピオン分類

マトリクス作成例

1. 性能分析: ダメージ vs 耐久性の2軸比較
2. ゲーム段階: アーリーゲーム vs レイトゲーム強度
3. 4象限分析:
   • 第1象限: 高ダメージ・高耐久（バランス型）
   • 第2象限: 低ダメージ・高耐久（タンク型）
   • 第3象限: 低ダメージ・低耐久（サポート型）
   • 第4象限: 高ダメージ・低耐久（アサシン型）