🌟

Spotify API × AI × Next.js で音楽統計サービスを作ってみた話 - AIコーディングとグロースハックの実践

に公開
Google Analytics
Next.js
個人開発
v0
Claude Code
tech

はじめに

個人開発でSpotify APIとAIを組み合わせた音楽統計サービスを開発しました。この記事では、アイデア出しからUI/UX設計、実装、そして本番運用断念までの過程を共有します。特に、ChatGPT、V0、Cursor、Claude Codeなどの最新AIツールを活用した開発フローについて、実践を通じて得た知見を交えながら紹介します。

1. 開発の目的

今回の個人開発プロジェクトを始めた理由は主に4つあります。

まず、データドリブンなプロダクト改善の実践をしたかったからです。実際のプロダクトで、GA4を使ったユーザー行動の可視化やファネル分析による離脱ポイントの特定、さらにA/Bテストでの施策効果検証まで、グロースに必要な一連のプロセスを体験することで、単に作るだけでなく「どう成長させるか」まで考えられるエンジニアとしてのスキルを身につけたいと考えていました。

次に、Next.jsを使った本格的なプロダクトの開発と運用経験を積みたかったのです。特にApp Routerを使用したモダンな実装や、認証、API統合、リアルタイムデータ処理など、実践的な技術を習得したいと思っていました。

また、SNSシェア機能によるグロースハックの効果を検証してみたいという思いもありました。バイラル性を考慮したUI/UX設計では、ユーザー体験の質を保ちながらもビジネス指標を意識する必要があり、このバランスを実践的に学べる良い機会だと考えました。

最後に、AIコーディングツールがどこまで実用的なのかを検証したいという技術的な興味もありました。最新のNext.js 15やApp Router、さらにChatGPT、V0、Cursor、Claude Codeといった新しい技術やツールを積極的に取り入れることで、常に学習し続ける姿勢を大切にしています。

2. 使用技術

フロントエンド

  • Next.js 15 (App Router)
  • TypeScript (strict mode)
  • Tailwind CSS + shadcn/ui
  • Recharts (データビジュアライゼーション)

バックエンド・API

  • NextAuth (Spotify OAuth認証)
  • Spotify Web API SDK
  • OpenAI API (@openai/agents)
  • SWR (データフェッチング)

開発ツール

  • ChatGPT (アイデア出し・設計)
  • V0 (UI/UXのマークアップ生成)
  • Cursor (AIペアプログラミング)
  • Claude Code (コード実装・最適化)

分析・運用

  • Google Analytics 4 (ユーザー行動分析)
  • Vercel (ホスティング・デプロイ)

3. ChatGPTとアイデア出し

壁打ちの全文は以下です
https://chatgpt.com/share/6885dc07-a1c0-8008-8ecf-a5534230aa79

プロンプト

# 指示
spotify APIを利用した個人開発できるプロダクトのアイデアをください

# 条件
- Spotify APIを利用する
- webアプリケーション。Next.jsで作成したい。
- toC
- ユーザーが流入しやすい内容
- AIを使っても使わなくてもOK
- 運用コストはなるべく無料にしたい

検討したアイデア

  1. 🎧 アイデア1: 「My Mood Mix」- 気分で作るパーソナルプレイリスト
    ユーザーが「今の気分」を選択すると、それに合ったSpotifyの曲を提案し、自動でプレイリストを生成するサービス。

  2. 📈 アイデア2: 「Music Wrapped Live」- 今週の自分だけのSpotifyまとめ
    Spotifyの「Wrapped」のような機能を毎週リアルタイムで提供するサービス。

  3. 🧠 アイデア3: 「AIソング診断」- 好みからあなたの“推しジャンル”を診断
    Spotifyの再生履歴を分析し、AIがユーザーの音楽嗜好を可視化＋診断。

  4. 📅 アイデア4: 「音楽日記」- 日々の気分と音楽を記録する日記アプリ
    その日聴いた曲・プレイリストを自動記録し、簡易日記（気分メモ）と一緒に保管。

選定理由

Music Wrapped Liveを選んだ理由として、まず最初はAIソング診断を検討していたのですが、調査を進める中でSpotify Audio Features APIが非推奨になっていることが判明しました。この時点で素早くピボットする判断を下し、代替案を検討しました。Music Wrapped Liveは、シェアしたくなるコンテンツ性を持ち、認証→ローディング→結果→シェアという明確なユーザーファネルがあるため、グロースハック検証に最適だと考えました。また、技術的な複雑さも適度で、AIコーディングツールの実力を検証するのにもちょうど良いレベルでした。

4. V0でUI/UXをマークアップ

ChatGPTでプロンプト生成

  1. UI/UXを具体化を指示すると、ユーザーフローとUI案を提案してくれました
  2. 「ワイヤーフレームを具体化してください。」と指示すると、アスキーアートのようなワイヤーフレームが出力されました
  3. 「このサービスをvercel v0に作らせます。プロンプトを作ってください」と指示すると次のプロンプトが出力されました
Create a modern, stylish web app UI in dark mode with a neon cyber aesthetic, using Tailwind CSS and shadcn/ui components. The app summarizes a user's weekly Spotify listening history in a visually engaging way. It's designed for music lovers who want to reflect on their week in music and share results on social media.

## Product Concept
The app analyzes a Spotify user's last 1 week of listening history and summarizes it into:
- Top artists
- Top tracks
- A personalized "music persona" generated by AI
It should look sleek, immersive, and inspired by Spotify's design language. Everything is built with Next.js and shadcn/ui.

## Color Palette (Neon Cyber)
- Background: #0D0D0D (near-black)
- Accent: #1DB954 (Spotify green)
- Primary text: #FFFFFF
- Secondary text: #A1A1A1
- Decorative/glow: #00FFC2, #33BBFF (used for highlights and chart elements)

## Page Structure

### 1. Landing Page (`/`)
- Hero section with logo and app description
- "Login with Spotify" button (call-to-action)
- Sample preview image of the report (mock or placeholder)
- Should feel modern, energetic, and music-themed

### 2. Summary Page (`/summary`)
- Section 1: Top Artists (list with play count or bar chart)
- Section 2: Top Tracks (list with play count)
- Section 3: AI Music Persona (a stylish card with a short AI-generated description)
- Option to share results on social media or re-analyze
- Use shadcn/ui cards and `recharts`-style visualizations

### 3. Loading Page (`/loading`)
- Full-screen loading animation or skeletons
- Text: "Analyzing your listening history..."

Use large bold headings, soft shadows, rounded corners (2xl), and a layout grid to avoid clutter. Buttons should glow on hover. Make the design responsive and ready for both desktop and mobile screens.

V0の出力結果

上記プロンプトをコピペするだけでほぼ完璧なマークアップがされたので、手直しなしで使用しました

5. CursorとClaude Codeでコーディング

開発フロー

1. CursorからClaude Codeへの移行

当初は使い慣れていたCursorのAgentモードを活用して開発を進めていました。Cursorは自動補完や簡単なコード生成には優れており、開発初期の基本実装では十分な生産性を発揮していました。

// Cursorで実装したSpotify認証の例
import NextAuth from 'next-auth'
import SpotifyProvider from 'next-auth/providers/spotify'

export default NextAuth({
  providers: [
    SpotifyProvider({
      clientId: process.env.SPOTIFY_CLIENT_ID!,
      clientSecret: process.env.SPOTIFY_CLIENT_SECRET!,
      authorization: {
        params: {
          scope: 'user-read-recently-played user-top-read'
        }
      }
    })
  ]
})

しかし、開発途中でClaude Codeが話題になっていることを知り、試してみたところ、その圧倒的なパワフルさと賢さに驚きました。特に複雑なリファクタリングや、アーキテクチャレベルでの改善提案において、Claude Codeは別次元の能力を発揮しました。結果的に完全にClaude Codeにシフトし、現在はClaude Code一本で開発を行っています。Cursorは解約しました。

2. CLAUDE.mdによる開発ガイドライン

Claude Codeの真価を発揮させるため、プロジェクトルートにCLAUDE.mdを作成し、開発ガイドラインを明文化しました：

## コード品質ガイドライン
- デッドコードの積極的な削除
- カスタムhooksによる関心の分離
- TypeScript型安全性の確保
- エラーハンドリングの統一

このガイドラインにより、Claude Codeは一貫性のある高品質なコードを生成してくれるようになりました。ただし、開発が進むにつれてCLAUDE.mdの記載内容と実際のコードベースに齟齬が発生することがあり、この整合性をどう保つかは今後の課題です。定期的なドキュメントの見直しや、自動的に同期を取る仕組みの構築が必要かもしれません。

3. AIツールの使い分け

  • ChatGPT: アーキテクチャ設計、問題解決のアプローチ
  • V0: UIコンポーネントの初期実装
  • Claude Code: メインの開発ツール（コーディング、リファクタリング、バグ修正、最適化）

実装のポイント

カスタムHooksアーキテクチャ

SWRを活用してSpotifyのデータフェッチングを抽象化し、コンポーネントから複雑なロジックを分離しました。5分間のキャッシュ設定により、無駄なAPI呼び出しを削減しつつ、適度な鮮度のデータを提供しています。

// useSpotifyData.ts
export const useSpotifyData = () => {
  const { data, error } = useSWR(
    '/api/recently-played',
    fetcher,
    {
      revalidateOnFocus: false,
      dedupingInterval: 300000 // 5分間キャッシュ
    }
  )
  
  return {
    data,
    isLoading: !error && !data,
    isError: error
  }
}

AIペルソナ生成

OpenAI Agentsを使用して、ユーザーの音楽嗜好から個性的なペルソナを生成。単なる統計情報の羅列ではなく、共感を呼ぶストーリー性のある文章を生成することで、SNSシェアを促進する設計にしました。

// OpenAI Agentsを使用
const persona = await agent.run({
  messages: [{
    role: 'user',
    content: `以下の音楽データから150-200文字の日本語でペルソナを生成:
    ${JSON.stringify(musicData)}`
  }]
})

6. GA4でファネルレポート設定

実装したイベントトラッキング

1. ファネルの定義

AARRR指標を参考にファネルを定義してみました

// ユーザージャーニーの各ステップ
1. first_visit (ランディング表示)
2. start_analyzing (診断開始)
3. view_result (結果表示)
4. share_result (シェアボタンクリック)

2. GA4をコードに埋め込む

GA4へデータを送信するには、layout.tsxにGoogleAnalyticsコンポーネントを設置し、トラッキングしたいところでsendGAEvent()を記述するだけの簡単なものでした

  // layout.tsx
  return (
    <html lang={locale} className="dark">
      <body className={inter.className}>
        <Providers session={session}>
          <NextIntlClientProvider messages={messages}>
            {children}
          </NextIntlClientProvider>
        </Providers>
      </body>
      {/* 本番環境でGA4を有効化 */}
      {process.env.NODE_ENV === 'production' && (
        <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID!} />
      )}
    </html>
  );

  // page.tsx
  const handleStartAnalyzing = async () => {
    sendGAEvent('event', 'start_analyzing'); // GA4イベント送信
    if (status === 'authenticated') {
      // 既に認証済みの場合は直接ローディングページに遷移
      router.push('/loading');
    } else {
      // 未認証の場合は認証を開始
      await signIn('spotify', { callbackUrl: '/loading' });
    }
  };

3. 分析ダッシュボードの構築

あとはGA4をぽちぽちするだけでファネルレポートが作成できました

7. Spotify APIの落とし穴 - 本番運用断念

発覚した問題

開発完了後、Vercelにデプロイして友人に使ってもらったところ、なぜかSpotifyの認証でエラーが発生して診断ができませんでした。API利用について確認してみたところ、商用利用(Extended Quota Mode)には法人としての利用申請が必要でした。開発モード(Development Mode)ではユーザー名とメールアドレスを開発ダッシュボードから登録すれば利用できるのですが、さすがにユーザー名とメールアドレスをフォーム等で入力してもらって、ダッシュボードで手動で登録してメールでお知らせみたいなフローは運用上無理かと断念しました。ユーザーインタビューとかABテストとかやりたかった！

振り返りと今後

AIコーディングツールの所感

  • 当たり前だが人が手でコーディングするより遥かに高速
  • NextAuthやOpenAI Agent SDKなどは学習データが多いのか、雑な指示でもほぼ一発で実装できました
  • 多言語対応のnext-intlの導入は学習データが少ないからかうまくいかず、自分でドキュメントを読み込み、タスクを細分化して指示する必要がありました

Vibe Codingとの付き合い方

開発を通じて、AIコーディング（Vibe Coding）について考える機会を得ました。

従来、フレームワークを利用した開発は便利な反面、技術の詳細を隠蔽してしまい、エンジニアの成長を阻害し応用力を奪うという問題がありました。今、その上にさらなる抽象化レイヤーとしてAIコーディングが登場したのだと捉えています。Vibe Codingも結局は同じ構造だと気づきました。圧倒的に便利で高速である一方、技術の詳細を隠蔽してしまう。使い続けるだけでは技術力は向上しないのだと思います。

この認識から、私は高速開発が必要な時と技術力向上が必要な時で、AIツールの使い方を明確に分けるようにするといいのではないかと思います。プロトタイプ作成やボイラープレートコード生成、リファクタリング作業など、スピードが求められる場面ではAIツールをフル活用。一方で、新しい技術の学習やパフォーマンス最適化、複雑なアルゴリズムの実装など、深い理解が必要な場面では、あえて手を動かして一から実装するといった具合です。

偉そうに書いてますがフレームワーク時代から変わってなくて、AIツールは強力な武器ですが、それに頼りきりになるのではなく、エンジニアとしての基礎力を磨くことも大切にしています。状況に応じて適切にツールを選択し、効率性と学習のバランスを保つことが、長期的なエンジニアとしての成長につながると考えています。

まとめ

Spotify APIの制限により本番運用は断念しましたが、多くの貴重な経験を得ることができました。AIツールを活用した高速開発フローの確立、グロースハックを前提とした設計の実践、データ分析基盤の構築ノウハウ、そしてAPI利用規約の重要性の理解など、失敗からも多くを学ぶことができました。

制限という壁にぶつかりましたが、これを学びの機会として捉え、次のプロジェクトに活かせる知見を得ることができたと前向きに考えています。この経験を活かし、次は制限の少ないAPIを使用したプロダクトで、実際のユーザーを獲得してグロースハックを実践していきたいと考えています。

リポジトリ

https://github.com/[your-username]/spotify-wrapped

使用したAIツール

参考資料

Discussion