ブログ一覧ページにもバックボタンを追加

[tanahiro2010]

ブログ一覧にスタイリッシュな「戻る」ボタンを追加

概要

ブログ一覧ページ（src/app/blog/page.tsx）の上部に、視認性と操作性を高めるカスタム BackButton を追加しました。
ボタンはクライアントコンポーネントとして実装し、前のページに戻る（履歴がなければ Next.js の挙動に従う）か、href が指定されている場合はそのパスへ遷移します。

変更点（主なファイル）

• src/components/ui/buttons.tsx
  • モジュールをクライアントに変更（"use client" を追加）。
  • BackButton をリデザインして実装（アイコン、ホバー効果、a11y 属性、href?: string と label?: string をサポート）。
  • 既存の GithubButton / BookButton はそのまま利用可能。
• src/app/blog/page.tsx
  • ブログ一覧ページの内容（max-width コンテナ）の先頭に BackButton を挿入。

動作

• デフォルト：クリックでブラウザ履歴に戻る（router.back()）。
• オプション：href を渡すと router.push(href) で指定先に移動。
• アクセシビリティ：button 要素を使用し、aria-label を設定。キーボード操作にも対応。

検証

• TypeScript 型チェック実行済み: npx tsc --noEmit（エラーなし）
• 見た目と動作はローカルの dev サーバーで確認してください。

QA 手順（レビュアー向け）

1. リポジトリを pull して dev サーバーを起動:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

2. ブラウザで http://localhost:3000/blog を開く。
3. ページ上部に「戻る」ボタンが表示されていることを確認。
4. 戻るボタンをクリックして前のページに戻る（履歴がない場合は、<BackButton href="/" /> 等で遷移を確認）。
5. キーボードでフォーカスして Enter/Space で動作することを確認。

注意点 / 影響範囲

• buttons.tsx をクライアントコンポーネント化したため、このファイル内のコンポーネントはクライアント側でのみ使用することを想定しています。サーバーコンポーネントから直接使用する場合はラップや確認が必要です。
• 既存の GithubButton / BookButton に動作の変更はありません。

追加提案（任意）

• 戻る先を固定したい箇所では <BackButton href="/" label="Home" /> のように href を渡すことを推奨します。
• デザインの微調整（色・サイズ・配置）があれば指示ください。軽微な調整ならこの PR に追記可能です。

Summary by CodeRabbit

リリースノート

• 新機能
  • ブログページにバックボタンを追加しました。ブログ一覧ページと個別の記事ページで便利にナビゲートできます。

[vercel]

@tanahiro2010 is attempting to deploy a commit to the t-b-t-nchos Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

BlogページとブログポストページにBackButtonUIコンポーネントを統合。新しいBackButtonコンポーネントをsrc/components/ui/buttons.tsxに追加し、useRouterを使用してナビゲーション機能を実装。既存のLinkベースのバック機能をコンポーネント化。

Changes

コホート / ファイル	変更概要
Back navigation UI component src/components/ui/buttons.tsx	新しいBackButtonコンポーネント追加。useRouterを使用して、href指定時はrouter.pushを、未指定時はrouter.backを実行。BookButtonのシグネチャを微調整（セミコロン追加）
Blog pages integration src/app/blog/page.tsx, src/app/blog/[slug]/page.tsx	各ページでBackButtonコンポーネントをインポートして使用。ブログページ上部とポストページフッターでBackButton を表示。従来のLink要素をコンポーネントに置き換え

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• BackButtonコンポーネントのロジックはシンプルで、useRouterの基本的な使用パターン
• ファイル変更数が少なく、各ファイルの修正量も限定的
• 既存機能の置き換えで新規ロジック複雑度は低い

Possibly related PRs

• PR ✨️ | Feat: simple blog #3: 同じブログページファイルの変更。BackButton統合の初期段階として関連
• PR 関数からコンポーネントへ #4: src/components/ui/buttons.tsxを修正して新しいボタンコンポーネント追加。本PRと同じパターンのコンポーネント拡張

Poem

🐰 ウサギはボタンを跳ねて戻り行き、

前へ進むか、後ろへか選べるようにしたり。

routerの道をシンプルに整え、

BackButtonでユーザーの旅を優雅に🌟

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d2c719c and 4d6180a.

📒 Files selected for processing (3)

• src/app/blog/[slug]/page.tsx (2 hunks)
• src/app/blog/page.tsx (2 hunks)
• src/components/ui/buttons.tsx (3 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
web-page-v2	Ready	Preview	Comment	Oct 30, 2025 8:48am

[T-b-t-nchos]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.