Merged
Conversation
RankBadgeコンポーネントに画像表示モードを追加。 displayMode="image"で画像表示、"color"で従来の色分け表示が可能。 画像読み込み失敗時は自動的に色分け表示にフォールバック。 変更内容: - RankBadge: displayMode prop追加、Next.js Image使用、エラーハンドリング実装 - StatusCard: RankBadgeにdisplayMode="image"を明示的に指定 - frontend/public/images/ranks/: 画像配置用ディレクトリ作成、README追加 セキュリティ対策: - ランク番号の検証（0-9の範囲チェック）でXSS対策 - 画像パスはユーザー入力に依存しない固定パス使用 アクセシビリティ対応: - altテキスト設定 - スクリーンリーダー用のsr-onlyテキスト追加 - 画像表示時もaria-labelで情報提供
ランクラベルを以下のように変更: - Rank 0: 初心者 → 種子 - Rank 1: 見習い → 苗木 - Rank 2: 駆け出し → 若木 - Rank 3: 中級者 → 巨木 - Rank 4: 実践者 → 母樹 - Rank 5: 熟練者 → 林 - Rank 6: エキスパート → 森 - Rank 7: マスター → 霊樹 - Rank 8: レジェンド → 古樹 - Rank 9: グランドマスター → 世界樹 種子から世界樹へと成長していく一貫したテーマを設定し、 ユーザーの成長過程を視覚的に表現。
Contributor
There was a problem hiding this comment.
Pull request overview
このPRは、エンジニアランク（Rank 0～9）の表示を、従来の色分け表示から画像表示に変更する機能を実装しています。各ランクに対応する木のイラスト画像を使用し、種子から世界樹へと成長していく視覚的な表現を実現しています。
Changes:
RankBadgeコンポーネントに画像表示モード（displayMode="image"）を追加し、Next.jsのImageコンポーネントを使用した画像表示機能を実装- ランクラベルを木の成長をテーマにした統一ネーミングに変更（種子→苗木→若木→巨木→母樹→林→森→霊樹→古樹→世界樹）
frontend/public/images/ranks/ディレクトリに10枚のランク画像（PNG形式）を配置し、README.mdで仕様を文書化
Reviewed changes
Copilot reviewed 4 out of 14 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
frontend/src/features/dashboard/components/RankBadge.tsx |
画像表示モードの追加、入力検証の実装、フォールバック機能の実装 |
frontend/src/features/dashboard/components/StatusCard.tsx |
RankBadgeコンポーネントにdisplayMode="image"を指定 |
frontend/src/features/dashboard/constants/rankColors.ts |
ランクラベルを木のテーマに統一 |
frontend/public/images/ranks/rank_tree_*.png |
Rank 0～9に対応する10枚の画像ファイルを追加 |
frontend/public/images/ranks/README.md |
画像ディレクトリの仕様と使用方法を文書化 |
Comments suppressed due to low confidence (2)
frontend/src/features/dashboard/components/RankBadge.tsx:67
- 画像表示時の
sr-onlyテキストは、既にImageコンポーネントのalt属性で同じ情報を提供しているため、冗長です。スクリーンリーダーはalt属性を読み上げるため、追加のsr-only要素は不要です。この行を削除することを推奨します。
{/* スクリーンリーダー用のテキスト */}
<span className="sr-only">{altText}</span>
frontend/src/features/dashboard/components/StatusCard.tsx:63
displayModeプロパティは明示的に"image"として指定されていますが、デフォルト値も"image"（行20）であるため、この指定は冗長です。コードの簡潔性のため、デフォルト値に依存する場合はこのプロパティを省略できます。
<RankBadge
rank={rank.rank}
label={rank.rank_name}
size="lg"
displayMode="image"
Comment on lines
+54
to
+64
| <Image | ||
| src={imagePath} | ||
| alt={altText} | ||
| width={80} | ||
| height={80} | ||
| className="h-full w-auto object-contain" | ||
| onError={() => { | ||
| console.warn(`Failed to load rank image: ${imagePath}. Falling back to color mode.`); | ||
| setImageError(true); | ||
| }} | ||
| priority={size === "lg"} |
There was a problem hiding this comment.
Next.jsのImageコンポーネントはonErrorプロパティをサポートしていません。画像の読み込み失敗時のフォールバック処理が動作しない可能性があります。
代替案として、以下のいずれかの方法を推奨します:
- 通常の
<img>タグを使用してonErrorを処理する（frontend/src/features/exercise/components/ExerciseMenu.tsxの81行目の実装パターンを参照） - 画像の存在を事前に検証するサーバーサイドロジックを追加する
- エラーバウンダリーコンポーネントを使用する
Contributor
Author
|
@Neon-straySheep I've opened a new pull request, #94, to work on those changes. Once the pull request is ready, I'll request review from you. |
Contributor
Author
|
Contributor
Author
|
ほんまに申し訳ないんですけどマイグレーション周りの解像度とランクの変更周りがちょっとアレだったのでそれ用のページを用意してもらってテストしました。一応コードざっと見た感じ大丈夫のはずです |
Neon-straySheep
added a commit
that referenced
this pull request
Feb 21, 2026
スキルツリー左側のRankBarコンポーネントで、ランク番号（数字）の代わりに ランク画像（rank_tree_0.png～rank_tree_9.png）を表示するように変更。 【変更理由】 - 既存の画像アセットが未使用だった - ユーザー体験向上のため視覚的な表現を強化 【技術的な実装】 - Next.js Image コンポーネントを使用して最適化 - tierIndex（0-9）を基に画像パスを動的生成 - レトロピクセル感を維持するため imageRendering を設定
6 tasks
Neon-straySheep
added a commit
that referenced
this pull request
Feb 21, 2026
feat: #92 RankBarコンポーネントにランク画像表示を実装
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
実装の概要
エンジニアランク（Rank 0～9）の表示を、従来の色分け表示から画像表示に変更しました。各ランクに対応する木のイラスト画像を使用し、種子から世界樹へと成長していく視覚的な表現を実現しています。
主な変更内容
RankBadgeコンポーネントの拡張
displayModeprop追加（"image"/"color"）next/imageを使用した画像表示機能ランクラベルの統一
画像ファイルの配置
frontend/public/images/ranks/配下に10枚の画像を配置🔧 技術的な意思決定とトレードオフ (最重要)
採用したアプローチ
Imageコンポーネントを使用した画像表示却下したアプローチ（代替案）
🧪 テスト戦略と範囲
実施したテスト
displayMode="color"で従来の色分け表示が動作追加したテストケース
セキュリティに関する自己評価
typeof rank === 'number' && rank >= 0 && rank <= 9）アクセシビリティ対応
altテキスト設定sr-onlyクラスで追加情報提供レビュワー（人間）への申し送り事項
確認してほしいポイント
画像表示の確認
フォールバック動作
ランクラベルの統一
実装上の注意点
displayModeのデフォルトは"image": 既存のRankBadge使用箇所は自動的に画像表示になりますdisplayMode="color"を指定することで従来の色分け表示も可能今後の拡張性
スクリーンショット
※ ブラウザで http://localhost:3000/test-rank を開いて確認済み
チェックリスト
補足情報
ファイル変更サマリー
frontend/src/features/dashboard/components/RankBadge.tsx(機能拡張)frontend/src/features/dashboard/components/StatusCard.tsx(displayMode指定)frontend/src/features/dashboard/constants/rankColors.ts(ラベル統一)frontend/public/images/ranks/(ディレクトリ + 画像10枚 + README)コミット履歴
feat: #91 ランク表示画像実装用のコンポーネント更新feat: #91 ランクラベルを木のテーマに統一