個人的備忘録：Tailwind × framer-motion × API連携で、さぶちゃんを動かしてみた

はじめに

この記事では、Next.jsでクライアントサイドのAPI通信とアニメーションを組み合わせた実装例を紹介します。主に以下の機能が含まれています：

• framer-motionを使ったアニメーション付き画像の表示
• Tailwind CSSによる画面デザイン

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

このコードは、クライアントサイドで動作するコンポーネントとして構成されています。

書こうと思ったきっかけ

受講しているITスクールのハッカソンの開発の一環として、クライアントサイドでAPIを呼び出す処理とアニメーションを連動させたコンポーネントを作成しました。自分自身の備忘録として、今後の再利用や他のプロジェクトにも活用できるように記事としてまとめています。

実装内容の概要

"use client";

import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import Link from "next/link";

export default function Home() {
  const [message, setMessage] = useState("Loading...");

  useEffect(() => {
    fetch(`${process.env.NEXT_PUBLIC_API_URL}/`)
      .then((res) => res.json())
      .then((data) => setMessage(data.message))
      .catch(() => setMessage("Error fetching message from FastAPI."));
  }, []);

  return (
    <main className="relative flex flex-col items-center justify-center min-h-screen bg-white text-black p-8 gap-10 overflow-hidden">
      <motion.img
        src="/images/sabuchan.png"
        alt="弾けるさぶちゃん"
        className="w-[200px] h-auto absolute z-0"
        initial={{ x: 400, y: -400, scale: 1, opacity: 1 }}
        animate={{
          x: [400, -400, 0, 0],
          y: [-400, 400, -100, -100],
          scale: [1, 1, 1, 2, 0],
          opacity: [1, 1, 1, 1, 0],
        }}
        transition={{
          duration: 6,
          ease: "easeInOut",
          times: [0, 0.4, 0.7, 0.85, 1],
        }}
      />
    </main>
  );
}

実際のさぶちゃん

まとめ

このコンポーネントは、Next.jsのApp Routerで使えるクライアントコンポーネントであり、以下の特徴があります：

• APIから受け取ったデータを画面に表示（今回はmessage）
• framer-motionでロゴに動きをつけて視覚的に印象的な演出を実現

ハッカソンなど短期集中開発の中でも、遊び心と機能性を両立したコンポーネントとして活用できるかと思います...！