はじめに

Next.jsを使用して、インタラクティブなアドベントカレンダーUIを実装してみました。
3Dアニメーションや雪のエフェクトを取り入れつつ、TypeScriptの型安全性も確保しています。

完成イメージ

24個のドアが7日ごとにグリッド表示
ドアをクリックすると3Dアニメーションで開く
雪が降るエフェクト
中にランダムな絵文字とメッセージ
https://adbent-yusukekoides-projects.vercel.app/

実装で工夫した点

1. ハイドレーションエラーの解決

App Routerでの最大の課題は、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）の整合性でした。

// クライアントサイドのみの処理を制御
const [isClient, setIsClient] = useState(false);

useEffect(() => {
  setIsClient(true);
}, []);

// ランダムな要素はクライアントサイドでのみ実行
const [currentSurprises] = useState(() => {
  const initialSurprises: SurpriseMap = {};
  if (typeof window !== 'undefined') {
    const shuffled = [...surprises].sort(() => Math.random() - 0.5);
    // ...
  }
  return initialSurprises;
});

2. TypeScriptの型安全性確保

オブジェクトのインデックスアクセスに関する型エラーに悩まされました。
インターフェースを定義することで解決しました：

interface Surprise {
  emoji: string;
  message: string;
}

interface SurpriseMap {
  [key: number]: Surprise;
}

const [currentSurprises] = useState<SurpriseMap>(() => {
  // ...
});

3. 3Dアニメーションの実装

CSSの3D変換を使用して、本物のドアのような開閉アニメーションを実現：

.door {
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.door.open {
  transform: rotateY(-105deg);
}

4. カレンダーグリッドの実装

7日ごとの改行を実現するために、配列を週単位で分割：

const renderCalendarGrid = () => {
  const weeks = [];
  let currentWeek = [];
  
  for (let i = 1; i <= 24; i++) {
    currentWeek.push(<Door key={i} number={i} />);
    
    if (currentWeek.length === 7 || i === 24) {
      weeks.push(
        <div key={weeks.length} className="flex justify-center w-full">
          {currentWeek}
        </div>
      );
      currentWeek = [];
    }
  }
  
  return weeks;
};

5. 雪のエフェクト

複数の雪の結晶文字を使い、ランダムな動きを実現：

const snowflakes = ["❄", "❅", "❆", "✻", "✺", "*"];

const getSnowflakes = () => {
  return Array.from({ length: 8 }).map((_, i) => ({
    flake: snowflakes[Math.floor(Math.random() * snowflakes.length)],
    delay: Math.random() * 5,
    duration: 2 + Math.random() * 3,
    position: Math.random() * 100
  }));
};

困った点と解決策

1. SSRとCSRの不一致

問題：

Math.random()を使用した要素の生成
クライアントサイドでのみ必要なアニメーション

解決策：

isClientフラグでレンダリングを制御
useEffectでクライアントサイド処理を分離

2. TypeScriptのエラー

問題：

インデックスシグネチャの欠落
暗黙的なany型

解決策：

適切なインターフェースの定義
型アノテーションの追加

3. モバイル対応

問題：

小さい画面でのグリッドのはみ出し
タッチデバイスでの3Dエフェクト

解決策：

レスポンシブなグリッドレイアウト
hover状態の適切な処理

<div className="max-w-7xl mx-auto p-4 sm:p-6">
  <div className="flex flex-col gap-4">
    {/* グリッドコンテンツ */}
  </div>
</div>

デプロイ方法

Vercelを使用して簡単にデプロイできます：

GitHubにプッシュ
Vercelでプロジェクトをインポート
自動デプロイの設定

# デプロイコマンド
vercel

まとめ

Next.js を使用したインタラクティブUIの実装は、
いくつかの課題がありましたが、適切な設計と型定義により解決できました。

特に以下の点が重要でした：

SSR/CSRの適切な使い分け
TypeScriptの型安全性確保
パフォーマンスとアニメーションの両立