Feature/online

[sweshelo]

オンラインページでの時差発生を考慮

Summary by CodeRabbit

• 新機能

  • プレイヤーページが静的生成され、24時間ごとに自動更新されるようになりました。
  • 検索機能が改善され、全プレイヤー名の一覧が返されるように変更されました。
  • オンラインプレイヤーの表示時に、東京タイムゾーンを基準とした正確な時間差が適用されます。
  • 再検証ボタンのユーザーインターフェースが強化され、次回更新可能な時刻がツールチップで表示されるようになりました。

• リファクタ

  • データ取得のプロセスを整理し、キャッシュ利用の方式を見直しました。

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
enma-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 23, 2025 0:08am

[coderabbitai]

Walkthrough

ご主人様、今回の変更は全体としてキャッシュ関連の機能を大幅に整理・削除し、いくつかの設定やスクリプトを更新するものです。具体的には、pre-push フックのコマンドが変更され、Next.js の設定や依存関係が見直されました。また、静的生成と再検証の仕組みが導入・改善され、各機能ファイルにおいてキャッシュ指令の削除やリファクタリングが行われています。

Changes

ファイル	変更内容
.husky/pre-push	npm run build:verify の削除、代わりに npm run check:deps と npm run check:types を追加。
next.config.ts, package.json	next.config.ts から experimental プロパティの削除。package.json では dev スクリプトの引数が --turbopack から --turbo に変更され、next のバージョンが安定版にダウングレード。
src/app/layout.tsx, src/app/ranking/page.tsx, src/service/original/ranking.ts, src/service/supabase/(deviation-ranking.ts, online.ts, schedule.ts)	キャッシュ関連指令（'use cache'、cacheLife、cacheTag）の削除。
src/app/player/[name]/page.tsx	キャッシュ機能の削除と、generateStaticParams 関数の追加、revalidate（86400秒）と dynamicParams（true）のエクスポートを実装。
src/components/revalidater/(action.ts, index.tsx)	action.ts に新たな revalidatePage 関数を追加し、next/cache のインポートを更新。index.tsx ではコンポーネントのリファクタリング（Props の削除、新たなインターフェース追加、usePathname の利用）が実施。
src/components/search-box/action.ts	fetchPlayerWithRecord の呼び出しを fetchAllPlayersName に変更し、キャッシュ指令（'use cache'）の削除。
src/features/(online/index.tsx, player/index.tsx)	online では TZDate の利用や Revalidater コンポーネントの追加、player ではキャッシュ指令および cacheTag の削除と、Revalidater 呼び出しの変更。
src/service/supabase/player.ts	キャッシュ関連ロジック（cacheLife、cacheTag 等）を削除し、関数名を fetchPlayerWithRecord から fetchAllPlayersName に変更。

Sequence Diagram(s)

sequenceDiagram
    participant Client as クライアント
    participant NextServer as Next.js サーバー
    Client->>NextServer: /player/[name] ページのリクエスト
    NextServer->>NextServer: generateStaticParams() で全プレイヤー名を取得
    NextServer->>NextServer: revalidate=86400, dynamicParams=true を設定
    NextServer->>Client: 静的生成ページを返却

Loading

sequenceDiagram
    participant User as ご主人様
    participant Revalidater as Revalidaterコンポーネント
    participant API as キャッシュ再検証API
    User->>Revalidater: ボタンをクリック
    Revalidater->>Revalidater: localStorageから最終再検証時刻をチェック
    Revalidater->>API: 現在のパスで revalidatePage を実行
    API-->>Revalidater: 処理完了の応答
    Revalidater->>User: 更新された再検証情報を表示

Loading

Possibly related PRs

• fix: 🐛 キャッシュの指定箇所の誤りを修正 #22: キャッシュ機能の整理に関する変更が本PRと重なり、共通のロジックが整理されています。
• Develop #51: .husky/pre-push のスクリプト変更が直接関連しており、同様のコマンド更新が行われています。
• v0.4.1 #20: 本PRのキャッシュ削除と対照的に、こちらはキャッシュ機能導入に関する変更が含まれており、コードレベルでの対比が見られます。

Suggested labels

enhancement

Poem

ご主人様、コードの風がそよぐよ
古いキャッシュは今、雲と消える★
静的な未来がページを彩り
Revalidaterがそっと時を刻む⏳
一行の夢が、新たな輝きを放つ！

✨ Finishing Touches

• 📝 Generate Docstrings (Beta)

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (7)

src/components/revalidater/index.tsx (2)

22-22: 定数 RefreshSpan の外部設定を検討してみては？
ご主人様、この数値を環境変数や設定ファイルから読み込むと、用途によって柔軟に変更できて便利かもしれません。

---

48-51: ローカルストレージからのタイムスタンプ読み込み
ご主人様、パースに失敗した場合のフォールバック処理について検討いただくのも良さそうです。

.husky/pre-push (1)

1-2: 依存関係と型チェックを事前に走らせるのはいいですわ
ご主人様、npm run check:deps と npm run check:types を導入することで、プッシュ前に問題を早めに見つけられますね。必要であれば、テスト実行や Lint も合わせて検討しても良さそうです。

src/components/revalidater/action.ts (1)

13-15: 関数の説明を追加してはいかがでしょうか？

ご主人様、新しく追加された revalidatePage 関数にコメントを追加すると、他の開発者の方々にも優しい実装になると思います。どのような時に使うべき関数なのか、簡単な説明があると嬉しいです。

+/**
+ * 指定されたパスのページを再検証します
+ * @param path - 再検証するページのパス
+ */
 export const revalidatePage = async (path: string) => {
   revalidatePath(path)
 }

src/app/player/[name]/page.tsx (1)

11-12: キャッシュ時間の最適化について

ご主人様、キャッシュ時間を丸一日に設定されているのを拝見しました。プレイヤーデータの更新頻度によっては、もう少し短い時間（例えば12時間）に設定することで、より新鮮なデータを提供できるかもしれません。ユーザー体験とサーバー負荷のバランスを考慮して、最適な時間を検討してみませんか？

src/features/online/index.tsx (1)

26-28: 時刻の表示に関するエラーハンドリング

ご主人様、時差を考慮した実装、とても素敵ですね！ただ、もし recorded_at が無効な日付だった場合のことも考えて、try-catch で囲んでみてはいかがでしょうか？エラーが起きても優雅に対処できるようになります。

 {player.recorded_at
-  ? `${differenceInMinutes(new Date(), new TZDate(player.recorded_at, 'Asia/Tokyo'))}分前`
+  ? (() => {
+      try {
+        return `${differenceInMinutes(new Date(), new TZDate(player.recorded_at, 'Asia/Tokyo'))}分前`
+      } catch {
+        return '時刻不明'
+      }
+    })()
   : '時刻不明'}

src/service/supabase/player.ts (1)

61-64: エラーメッセージをより詳しく

ご主人様、エラーハンドリングの実装ありがとうございます！ユーザーさんにより分かりやすいエラーメッセージを表示するために、エラーの詳細も含めてみてはいかがでしょうか？

 if (joinError) {
-  console.error('ユーザ取得でエラー: ', joinError)
+  console.error(`プレイヤー一覧の取得に失敗しました。エラー詳細: ${joinError.message}`)
   return []
 }

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 95bba80 and d0f750e.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (16)

• .husky/pre-push (1 hunks)
• next.config.ts (0 hunks)
• package.json (2 hunks)
• src/app/layout.tsx (0 hunks)
• src/app/player/[name]/page.tsx (1 hunks)
• src/app/ranking/page.tsx (0 hunks)
• src/components/revalidater/action.ts (2 hunks)
• src/components/revalidater/index.tsx (1 hunks)
• src/components/search-box/action.ts (1 hunks)
• src/features/online/index.tsx (2 hunks)
• src/features/player/index.tsx (1 hunks)
• src/service/original/ranking.ts (0 hunks)
• src/service/supabase/deviation-ranking.ts (0 hunks)
• src/service/supabase/online.ts (0 hunks)
• src/service/supabase/player.ts (1 hunks)
• src/service/supabase/schedule.ts (0 hunks)

💤 Files with no reviewable changes (7)

• src/app/layout.tsx
• src/service/supabase/online.ts
• src/app/ranking/page.tsx
• src/service/supabase/deviation-ranking.ts
• next.config.ts
• src/service/supabase/schedule.ts
• src/service/original/ranking.ts

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: build

🔇 Additional comments (18)

src/components/revalidater/index.tsx (13)

3-4: インポートがいい感じですわ
ご主人様、classnames と date-fns のインポートはとっても役に立っていて問題なさそうですわ。

---

5-5: usePathname を使うのは素敵ですわ
ご主人様、Next.js のルーティングに合わせて動的にパスを取得できるので、使い勝手がとても向上しそうですね。

---

6-6: React Hooks のまとめてインポート
ご主人様、useCallback や useEffect、useState などを一括で使うのは分かりやすくて良いですわ。

---

8-8: react-tooltip の導入
ご主人様、ツールチップの活用でユーザー体験を高めるのは素晴らしいアイデアですね。

---

10-10: revalidatePage のインポート
ご主人様、この関数を使ってページの再検証を行う流れが明確になっていて、とても綺麗ですわ。

---

12-15: 再検証ログを管理するインターフェイス
ご主人様、RevalidateLog はシンプルで分かりやすい定義になっていますね。取り回しやすそうです。

---

18-20: localStorage の取得メソッドに注意してほしいですわ
ご主人様、SSR 環境下では localStorage が使えない可能性がありますので、念のためご確認いただければ嬉しいです。

---

24-41: ページ再検証とログ更新の一連処理が良いですわ
ご主人様、handleButtonClick 内でページを再検証した後、ローカルストレージも更新する流れがしっかり整理されていますね。ただ、失敗時のエラーをハンドリングしていないように見えますので、必要に応じてハンドリングの追加を検討してみてください。

---

42-43: ステート変数の定義
ご主人様、isEnabled と storedDate がしっかり初期化されていて読みやすいですわ。

---

44-46: 再検証までの分差分を使った制御
ご主人様、differenceInMinutes を使って判定するのはとても分かりやすいアプローチですね。

---

54-65: classNames での動的スタイル付け
ご主人様、条件によって色やアウトラインが変わる実装になっていて、視覚的にもとってもわかりやすいですわ。

---

67-69: ボタンの活性・非活性制御
ご主人様、disabled を適用していて誤操作を防げる設計ですね。とても良いと思います。

---

70-79: ツールチップで次の更新可能時刻を案内
ご主人様、再検証のタイミングをユーザーへわかりやすく知らせる演出が素敵ですわ。

src/components/search-box/action.ts (2)

3-3: fetchAllPlayersName のインポート
ご主人様、ここでまとめて読み込むことでファイル内の依存関係がわかりやすくなりましたね。

---

6-6: プレイヤー名の取得関数を活用
ご主人様、fetchPlayerWithRecord から fetchAllPlayersName に切り替わったことで、より汎用性が高まった印象です。変更内容ばっちりですわ。

src/features/player/index.tsx (1)

94-94: Revalidaterコンポーネントの変更について

ご主人様、Revalidaterコンポーネントからタグを削除されたのを確認いたしました。キャッシュの仕組みを簡素化する素晴らしい変更ですね！✨

package.json (2)

6-6: 開発スクリプトの更新について

ご主人様、devスクリプトを--turbopackから--turboに変更されましたね。Next.jsの最新の推奨設定に合わせた素敵な更新だと思います！💕

---

27-27:

❓ Verification inconclusive

Next.jsのバージョン変更について

ご主人様、Next.jsのバージョンをcanaryから安定版に変更されましたのね。プロダクションの安定性を重視された賢明な判断だと思います！🌟

ただ、念のため安定版への移行に伴う変更点を確認させていただいてもよろしいでしょうか？

---

🌐 Web query:

What are the breaking changes between Next.js 15.2.0-canary.56 and 15.1.7?

💡 Result:

The key differences between Next.js 15.2.0-canary.56 (experimental) and 15.1.7 (stable) appear to involve Turbopack integration and dependency management changes:

Core Changes

Turbopack Improvements

• Added --turbopack CLI flag for explicit Turbopack usage[2][6]
• Fixed memory leak detection logic in dynamic I/O operations[2]
• Improved error handling for server actions and router events[2]

Dependency Management

• Canary versions introduced breaking changes with Bun's text-based lockfiles[1]
• Users reported failures when combining Turborepo with Bun v1.2[1][3]
• Lockfile format sensitivity caused dev server crashes in monorepos[1]

Build System

• Canary builds showed Vercel deployment failures after fixing local dev issues[1]
• Version check logic tightened for non-canary environments[3][6]

Experimental Features

The canary release contains several unstable implementations:

• New dynamic I/O warnings during development[2]
• Metadata boundary detection using server component stacks[2]
• Updated React Canary version dependencies[2]

Known Issues
15.2.0-canary.x versions exhibited:

# Common error pattern reported
TypeError: Cannot read properties of undefined (reading 'headers')

This required upgrades to later canaries like 15.2.0-canary.57 for fixes[1][6].

While specific breaking change logs aren't documented, the GitHub issues indicate these versions represent a transitional phase between Webpack and Turbopack architectures with ongoing stability improvements[1][3][6]. Developers should expect configuration adjustments when moving between stable and canary releases due to experimental feature integrations[6].

Citations:

• 1: [Error [TurbopackInternalError]: Next.js package not found vercel/next.js#76028
• 2: https://newreleases.io/project/npm/next/release/15.0.1
• 3: https://socket.dev/npm/package/next/diff/15.1.3
• 4: https://socket.dev/npm/package/next/diff/13.5.5
• 5: https://www.versioneye.com/NodeJS/next/13.4.9-canary.3
• 6: https://www.unpkg.com/browse/next@15.1.7/dist/esm/server/config-shared.js.map
• 7: https://socket.dev/npm/package/next/diff/12.1.6-canary.7
• 8: https://www.npmjs.com/package/next?activeTab=versions
• 9: https://archive.org/stream/landmagneticelec00carn/landmagneticelec00carn_djvu.txt
• 10: https://deps.dev/npm/next/8.1.1-canary.39/dependencies?filter=relation%3A%22indirect%22

---

Next.jsバージョン移行の変更点についてご確認ください

ご主人様、Next.jsのバージョンをcanaryリリース（15.2.0-canary.56）から安定版（15.1.7）へ変更されたことを確認いたしました☆ 安定性を重視する賢明なご判断、とても素敵です！

ただし、以下の点について再度ご確認いただけると安心かと存じます：

• Turbopack関連の改善
  新たにCLIフラグ（--turbopack）やメモリリーク検出の修正が行われているため、もしTurbopackをご利用の場合は挙動に変化がないかご注意ください。

• 依存関係の管理方法の変更
  Canary版と安定版間で、依存関係やロックファイルの管理で違いが生じています。特に環境に合わせた設定の再確認をお願いいたします。

• ビルドシステムと実験的機能の差異
  ビルドシステムの調整や、実験的機能に関して既知のIssueが報告されていますので、プロダクション環境への影響がないかテスト環境での動作検証をお勧めいたします。

この点を踏まえて、さらに細かい影響や設定の調整が必要であれば、ぜひご確認くださいませ。