私の作成したマッスルブログについて

##  この記事について
筋トレ活動を発信するために作ったブログ「マッスルブログ」の制作記録です。
Next.js × Tailwind CSS を使って、Vercelの公式テンプレートをベースにカスタマイズしました。
初心者がポートフォリオとしても使えるブログを作った過程や、GitHub Copilotを活用して開発効率を爆上げした話を紹介します！
##  作ったもの：マッスルブログ
- GitHub: https://github.com/saitojo1106/muscleclub_honmepage
- 使用テンプレ：Vercel公式のhttps://supabase.com/
- フロントエンド：Next.js, Tailwind CSS
- デプロイ：Vercel（Next.jsと相性バッチリ）
![スクリーンショット 2025-04-18 18.08.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3864848/2d568afa-410b-4045-a886-082deee51286.png)
##  技術スタックと採用理由
| 技術       | 理由                     |
|------------|--------------------------|
| Next.js    | ページを素早く表示できる(SSR対応),使いやすくてテンプレ豊富|
| Tailwind   | CSSを細かく書かずにデザインできる|
|Vercel|デプロイが早い,Next.jsとの相性◎|
|Markdown|記事投稿を楽にしたかったので採用（テンプレに元からある）|
|Github Copilot|コーディング速度と学習効率を爆上げしてくれるAIペアプロ|

## Copilotが役に立ったポイント
- 今回の開発では、GitHub Copilotをがっつり活用しました。
特に以下の場面で「手が止まらない」感覚を得られたので、紹介しておきます。
### 1. Tailwindのクラス補完が神
- Tailwindは自由度が高い分、クラスを毎回思い出すのが地味に手間。
Copilotが文脈に合わせて適切なクラスを提案してくれるので、ほぼ手入力いらずでした。
```tsx
<div className="bg-white rounded-xl shadow-md p-4">
  <h2 className="text-xl font-bold mb-2">タイトル</h2>
  <p className="text-gray-600">本文</p>
</div>
```
### 2. App Router周りの学習に最適
- Next.jsのApp Routerは新しくて難しいですが、Copilotの提案がちょうどよいお手本に。コードを参考にしながら仕組みを理解でき、自然とキャッチアップできました。
### 3. 認証・ミドルウェアの実装支援
- NextAuth.jsとミドルウェアを使って、管理者ページの保護などを行いましたが、
Copilotの提案でトークン管理・リダイレクト処理もスムーズに実装できました。
```tsx
if (!token) {
  return NextResponse.redirect('/admin/login');
}
```
###  4. 繰り返し処理やUIコンポーネントの雛形生成
- 「カードをリスト化する」「テーブルを作る」など、面倒な定型処理を瞬時に提案してくれるので、繰り返し作業に時間を取られず、UI/UX改善に集中できました。
##  カスタマイズしたポイント
### 1. デザイン面
- 部員紹介ページ（プロフィールカード）
    - Instagramリンク付きで、専門種目と自己記録も一目で分かる！
```tsx
<div className="flex gap-4 items-center mb-4">
  <p className="text-gray-600 dark:text-gray-300">
    <span className="font-bold">専門種目:</span> {member.speciality}
    <Link href={member.instagram} target="_blank" rel="noopener noreferrer"
      className="ml-2 inline-flex items-center text-pink-500 hover:text-pink-600"
    >
      <InstagramIcon /> <span className="ml-1 hidden sm:inline">@{member.instagram.split('/').pop()}</span>
    </Link>
  </p>
</div>
```
- イベントカレンダー（日本語対応）
    - イベントがある日に色が付く＋詳細がポップアップ表示
    - 次のイベントまでのカウントダウンも！
```tsx
// カレンダーの日付ごとにイベントを表示
{hasEvents && (
  <div>{event.title}</div>
)}
```
- 大会実績ページ
    - 出場選手や順位が一覧表で見やすい
    - 写真は大きくヒーロー風に!
```tsx
<table>
  <thead>
    <tr><th>選手名</th><th>カテゴリー</th><th>順位</th></tr>
  </thead>
  <tbody>{/* 結果を表示 */}</tbody>
</table>
```
### 2. 管理機能の追加
- NextAuth.js による認証システム
    - 管理者しか見れないページを設定
    - トークン（JWT）でログイン管理
```tsx
if (!token) {
  return NextResponse.redirect('/admin/login');
}
```
- 簡易データベース（ローカルストレージ利用）
    - 本格DBがまだいらない段階での軽量設計
    - 新しい部員の追加や削除も可能！
```tsx
localStorage.setItem("members", JSON.stringify(updatedMembers));
```
### 3. UI/UX改善
- ダークモード切り替え（システム連動 or 手動選択）
- SNSシェア機能(Twitter/Facebook/LINEボタン）
- レスポンシブ対応（スマホでもPCでも見やすい）
### 4. コンテンツ管理
- マークダウンベースでブログ管理
    - タイトル・タグ・日付などの「メタ情報」も記述可能
- タグ表示・フィルター機能もあり！
- イベント管理：表示・参加者管理・カウントダウン付き！
## 苦労したポイント・学び
### 苦労したところ
- ReactとNext.jsのバージョンの相性問題（RC版は注意）
- NextAuth.jsでの認証の設計（セッションの扱い）
- ローカルDB→本格DB移行を検討中
- Git操作（ブランチ統合・競合解決）に苦戦
- .env.localの管理（開発/本番の分け方）
### 学びになったこと
- Next.js App RouterやServer Componentsの使い方
- JWT認証の流れ、ミドルウェアでのページ保護
- 再利用できるUIコンポーネント設計
- 無料サービス（Vercel, MongoDB, Cloudinaryなど）の活用
- CRUD機能と非同期処理の基本
- Tailwindでのレスポンシブなデザイン
- 実際の開発フローの体験（要件定義〜公開まで）             　 
## 💡 今後の改善アイデア
- 認証機能の強化（ロール・外部ログイン対応）
- イベント機能の拡張（申込み・通知・Meet連携）
- コミュニティ機能（コメント・掲示板）
- データ分析機能（トレ記録・成長チャート・PDF出力）

##  最後に
Vercelのテンプレを活用すれば、初心者でもポートフォリオとして十分通用するブログが作れます。さらにGitHub Copilotを活用することで、実装スピードも学習効率も格段にアップしました！筋トレ × Web開発のように、「好きなこと × 技術」＝最高のモチベになるので、興味ある方はぜひチャレンジしてみてください！