Spotify APIの使い方ガイド|JavaScriptでアーティストデータを取得する方法

目次

Spotify API とは?【好きなアーティストのデータを取得できる音楽API】

Spotify API は、アーティストやアルバム、楽曲などの音楽データをプログラムから取得できる Web API です。Spotify for Developersでアプリを作成し、アクセスキーを取得すれば無料で使い始められます。

Spotify API で取得できる情報

2026年2月時点で、Developer Mode(開発モード)から取得できる主な情報は以下のとおりです。

  • アーティスト名・ジャンル
  • アルバム一覧・リリース日・ジャケット画像
  • アルバムの収録曲・曲の長さ
  • 関連アーティスト(Related Artists)
  • 楽曲の検索

⚠️ 2026年2月のAPI制限変更について

Spotifyは2024年末から段階的にAPIの制限を強化しています。2026年2月の変更で、以下の制約が追加されました。

項目 変更前 変更後(2026年2月〜)
アカウント要件 無料アカウントでもOK Spotify Premium必須
テストユーザー数 最大25人 最大5人
Client ID 複数作成可能 1アカウント1つのみ

また、Artist Top Tracks(人気曲)、Audio Features(楽曲の音響特徴量)、New Releases(新着アルバム)など多くのエンドポイントが新規アプリでは利用不可になっています。本記事では2026年2月時点で使えるエンドポイントだけに絞って解説します。

Spotify API の準備【アクセスキーの取得】

Spotify API を使うには、Client ID と Client Secret の2つのキーが必要です。

1. Spotify for Developers にPremiumアカウントでログイン
2. ダッシュボードから「Create App」をクリック
3. アプリ名・説明は任意、Redirect URI は http://127.0.0.1:3000 を設定
4. APIの種類で「Web API」にチェックを入れて保存
5. Settings画面で Client ID と Client Secret を控える

Spotify API の基本的な使い方【初心者向け】

Spotify API は PokeAPI と違い、リクエスト前にアクセストークンの取得が必要です。Client ID と Client Secret を使ってトークンを発行し、そのトークンをリクエストヘッダーに付与します。

アクセストークンを取得する

const CLIENT_ID = "ここに自分のClient IDを入力";
const CLIENT_SECRET = "ここに自分のClient Secretを入力";

async function getAccessToken() {
  const response = await fetch("https://accounts.spotify.com/api/token", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      Authorization: `Basic ${btoa(`${CLIENT_ID}:${CLIENT_SECRET}`)}`,
    },
    body: "grant_type=client_credentials",
  });
  const data = await response.json();
  return data.access_token;
}

この関数を呼び出すと、1時間有効なアクセストークンが返ってきます。以降のAPIリクエストには、このトークンを Authorization: Bearer {トークン} の形で付与します。

エンドポイント一覧(2026年2月時点で利用可能)

エンドポイント 用途
GET /v1/search アーティスト・アルバム・楽曲の検索
GET /v1/artists/{id} アーティスト情報の取得
GET /v1/artists/{id}/albums アルバム一覧の取得
GET /v1/artists/{id}/related-artists 関連アーティストの取得
GET /v1/albums/{id} アルバム詳細の取得
GET /v1/albums/{id}/tracks アルバム収録曲の取得
GET /v1/tracks/{id} 楽曲詳細の取得

レスポンスデータ一覧(アーティスト検索の場合)

{
  "artists": {
    "items": [
      {
        "id": "1snhtMLeb2DYoMOcVkiKoR",
        "name": "Kenshi Yonezu",
        "genres": ["j-pop", "japanese pop"],
        "images": [
          {
            "url": "https://i.scdn.co/image/...",
            "height": 640,
            "width": 640
          }
        ],
        "uri": "spotify:artist:1snhtMLeb2DYoMOcVkiKoR"
      }
    ]
  }
}

JavaScript で Spotify API を使う方法【コピペ OK】

アーティスト名で検索して、名前・ジャンル・画像URLを取得する最小コードです。

const token = await getAccessToken();

const response = await fetch(
  "https://api.spotify.com/v1/search?q=artist:Kenshi Yonezu&type=artist&limit=1",
  {
    headers: { Authorization: `Bearer ${token}` },
  }
);
const data = await response.json();
const artist = data.artists.items[0];

console.log("アーティスト名:", artist.name);
console.log("ジャンル:", artist.genres.join(", "));
console.log("画像URL:", artist.images[0]?.url);

検索時のポイントとして、日本語名ではヒットしないことがあるためローマ字表記で検索するのがおすすめです。

応用編①:アルバム一覧と収録曲を取得する

アーティストのIDがわかれば、アルバム一覧 → 各アルバムの収録曲と辿っていくことができます。

const artistId = artist.id;

// アルバム一覧を取得
const albumsRes = await fetch(
  `https://api.spotify.com/v1/artists/${artistId}/albums?album_type=album&limit=5`,
  { headers: { Authorization: `Bearer ${token}` } }
);
const albumsData = await albumsRes.json();

for (const album of albumsData.items) {
  console.log(`\n■ ${album.name}(${album.release_date})`);

  // 収録曲を取得
  const tracksRes = await fetch(
    `https://api.spotify.com/v1/albums/${album.id}/tracks`,
    { headers: { Authorization: `Bearer ${token}` } }
  );
  const tracksData = await tracksRes.json();

  tracksData.items.forEach((track, i) => {
    const min = Math.floor(track.duration_ms / 60000);
    const sec = Math.floor((track.duration_ms % 60000) / 1000);
    console.log(`  ${i + 1}. ${track.name}(${min}:${String(sec).padStart(2, "0")})`);
  });
}

応用編②:関連アーティストを探索する

Spotify API には、指定したアーティストの関連アーティストを返してくれる機能があります。Spotifyユーザーの再生履歴をもとに「このアーティストを聴いている人は他に何を聴いているか」を算出した結果です。

const relatedRes = await fetch(
  `https://api.spotify.com/v1/artists/${artistId}/related-artists`,
  { headers: { Authorization: `Bearer ${token}` } }
);
const relatedData = await relatedRes.json();

console.log(`\n${artist.name} の関連アーティスト:\n`);
relatedData.artists.slice(0, 10).forEach((r, i) => {
  const genres = r.genres.slice(0, 3).join(", ") || "ジャンル情報なし";
  console.log(`${i + 1}. ${r.name}(${genres})`);
});

関連アーティストのジャンルを見ると、そのアーティストのリスナー層がどこまで広がっているかがわかります。たとえば、アイドルグループの場合、関連に他のアイドルグループばかり並ぶか、J-POP全般のアーティストが出てくるかで、ファン層の広がり方がまったく違います。

Spotify API よくある質問

❓ Spotify APIは無料で使えますか?

API自体の利用料はかかりませんが、2026年2月以降はDeveloper Mode(開発モード)の利用にSpotify Premiumアカウントが必須になりました。月額1,580円(日本の場合)がかかる点に注意してください。また、5人を超えるユーザーにアプリを公開する場合はExtended Quotaの申請が必要で、こちらは法人登録やMAU 25万人以上といった厳しい条件があります。

❓ PokeAPIのように認証なしで使えますか?

使えません。Spotify APIはすべてのリクエストにアクセストークンが必要です。本記事で紹介したClient Credentials認証を使えば、ユーザーのログインなしでアーティストやアルバムの公開情報を取得できますが、トークン発行のステップは省略できません。

❓ Audio Features(楽曲分析)はまだ使えますか?

2024年11月以降、新規に作成したアプリではAudio FeaturesやAudio Analysisのエンドポイントが制限されています。BPMやダンサビリティ、エネルギーなどの音響特徴量を取得する過去の記事やチュートリアルは、現在は動かないケースが多いです。最新の利用可能エンドポイントは公式リファレンスで確認してください。

❓ レート制限はありますか?

あります。Spotify APIは短時間に大量のリクエストを送ると 429 Too Many Requests のエラーが返ります。公式には「30秒あたりのリクエスト数」で制限がかかるとされています。個人の学習用途で普通に使う分には引っかかることはほぼありませんが、ループで大量にAPIを叩く場合はリクエスト間に待機時間を入れましょう。

Spotify APIと併せて学びたいAPI・開発関連記事

Spotify APIでAPIの認証フローを学んだら、他のAPIや開発スキルにも挑戦してみましょう。

🎮 API入門
無料&登録不要で使える!PokeAPIの使い方ガイド – 認証不要で始められるAPI入門の定番。Spotify APIとの違いも体感できます

🗄️ データベース設計
マルチテナントって何?SaaSのDB設計でよくある「あの構造」を解説 – API取得データを保存するDB設計の基礎知識

💻 コマンドライン操作
psqlとは?PostgreSQLをコマンドラインで操作する基本コマンドと実践的な使い方 – 取得したデータをDBに格納して分析する際に役立ちます

🔒 セキュリティ
リリース前に必ず確認!バイブコーディング&非エンジニア向けWebアプリ安全チェックリスト – APIキーの管理やセキュリティ対策の必須知識

Spotify API を使ってみよう!【まとめ】

  • Spotify API はPremiumアカウント + アプリ登録で使える
  • アクセストークンの取得が必要(PokeAPIとの大きな違い)
  • アーティスト検索、アルバム一覧、収録曲、関連アーティストが取得可能
  • Audio Features(楽曲分析)は2024年以降、新規アプリでは制限あり
  • PokeAPI → Spotify API の順で学ぶと、API認証の仕組みが自然に身につく

PokeAPIが「認証なしで叩けるAPI」の入門だとすれば、Spotify APIは「認証付きAPIを扱う」次のステップとしてぴったりです。好きなアーティスト名を差し替えるだけで動くので、ぜひ試してみてください!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次