---
title: 複数のAPIから横断的にコンテンツを取得し、まとめてソートする方法は？
description: microCMSをご利用いただくなかで、複数のAPI（例えば、「ニュース」と「ブログ」）を横断的に取得し、それらのコンテンツをまとめてソートしたうえで表示したいケースがあるかと思います。 実例として、microCMSのコーポレートサイトの「お知らせ」ページでは、上記のように複数のAPIから記事を取得し、まとめて表示しています。 この記事では、このような表示を実現する実装方法をご紹介します。 まず、
---

[コンテンツまでスキップ](https://help.microcms.io/ja/knowledge/combine-apis#main-content)

[![logo.png\]](https://help.microcms.io/hs-fs/hubfs/logo.png?width=150&height=34&name=logo.png)](https://microcms.io/)

メインナビゲーションを開く

メインナビゲーションを閉じる

 キーワードから探す

- 検索フィールドが空なので、候補はありません。

1. [ヘルプ](https://help.microcms.io/ja/knowledge?hsLang=ja)
2. [実装（全般）](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja)
3. [API](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#api)

# 複数のAPIから横断的にコンテンツを取得し、まとめてソートする方法は？

microCMSをご利用いただくなかで、**複数のAPI（例えば、「ニュース」と「ブログ」）を横断的に取得し、それらのコンテンツをまとめてソートしたうえで表示したいケース**があるかと思います。

実例として、microCMSのコーポレートサイトの「[お知らせ](https://microcms.co.jp/news)」ページでは、上記のように複数のAPIから記事を取得し、まとめて表示しています。

この記事では、このような表示を実現する実装方法をご紹介します。

### 前提

まず、前提として以下の2つのAPIがあると仮定します。

#### 1. ニュース

エンドポイント："news"

APIスキーマは以下の通りとします。

```
title: 本文（テキストフィールド）body: 内容（リッチエディタ）
```

#### 2. ブログ

エンドポイント："blog"

APIスキーマは以下の通りとします。

```
title: 本文（テキストフィールド）body: 内容（リッチエディタ）
```

分かりやすさのために、APIスキーマは必要最低限の設定としています。

 

また、ニュースおよびブログにてそれぞれ以下のようにコンテンツを用意します。

#### 1. ニュース

1. 「1つ目のニュース記事」（publishedAt: 2023-12-31T15:00:00.000Z）
2. 「2つ目のニュース記事」（publishedAt: 2024-01-02T15:00:00.000Z）

#### 2. ブログ

1. 「1つ目のブログ記事」（publishedAt: 2024-01-01T15:00:00.000Z）
2. 「2つ目のブログ記事」（publishedAt: 2024-01-03T15:00:00.000Z）

両者をまとめると、時系列（降順）としては以下の順序となります。

1. 「2つ目のブログ記事」（publishedAt: 2024-01-03T15:00:00.000Z）
2. 「2つ目のニュース記事」（publishedAt: 2024-01-02T15:00:00.000Z）
3. 「1つ目のブログ記事」（publishedAt: 2024-01-01T15:00:00.000Z）
4. 「1つ目のニュース記事」（publishedAt: 2023-12-31T15:00:00.000Z）

### やりたいこと

上記の前提で、**「ニュース」および「ブログ」のコンテンツを同時に取得し、まとめ、publishedAtの降順に出力するケース**を考えます。

### サンプルコード

以下、JavaScriptのサンプルコードです。microCMSのAPIへのリクエストには、[microcms-js-sdk](https://github.com/microcmsio/microcms-js-sdk)を利用しています。

```
import { createClient } from 'microcms-js-sdk';const client = createClient({  serviceDomain: "some-domain",  apiKey: "some-api-key"});// 各エンドポイントから記事を取得する関数async function getArticles(endpoint) {  try {      const articles = await client.getAllContents({        endpoint,      })      // 取得した記事にsourceプロパティを追加      articles.forEach((article) => {        article.source = `"${endpoint}"`;      });      return articles;  } catch (error) {    console.error("Failed to fetch articles");    return [];  }}// 記事を一つのリストにマージする関数async function mergeArticles() {  const newsArticles = await getArticles('news');  const blogArticles = await getArticles('blog');  return newsArticles.concat(blogArticles);}// 記事を日付順（publishedAtの降順）にソートする関数function sortArticlesByPublishedDate(articles) {  return articles.sort((a, b) => new Date(b.publishedAt) - new Date(a.publishedAt));}// メインの処理async function main() {  const allArticles = await mergeArticles();  const sortedArticles = sortArticlesByPublishedDate(allArticles);  // ソートされた記事をコンソールに表示する  sortedArticles.forEach((article) => {    console.log("===")    console.log("title:", article.title,`（publishedAt: ${article.publishedAt}）`);    console.log("body:", article.body);    console.log("source:", article.source);  });}main();
```

getArticles関数でAPIの記事を取得する際に、microcms-js-sdkの全記事取得のためのメソッドである[getAllContents](https://github.com/microcmsio/microcms-js-sdk?tab=readme-ov-file#get-all-contents)を利用しています。

### サンプルコードの実行結果

サンプルコードの実行時にコンソールに出力される内容です。

```
===title: 2つ目のブログ記事 （publishedAt: 2024-01-03T15:00:00.000Z）body: <p>2つ目のブログ記事のbodyです。</p>source: "blog"===title: 2つ目のニュース記事 （publishedAt: 2024-01-02T15:00:00.000Z）body: <p>2つ目のニュース記事のbodyです。</p>source: "news"===title: 1つ目のブログ記事 （publishedAt: 2024-01-01T15:00:00.000Z）body: <p>1つ目のブログ記事のbodyです。</p>source: "blog"===title: 1つ目のニュース記事 （publishedAt: 2023-12-31T15:00:00.000Z）body: <p>1つ目のニュース記事のbodyです。</p>source: "news"
```

公開日時（publishedAt）の降順に、ニュースの記事とブログの記事がマージされて出力されています。

なお、どちらのAPIから取得したコンテンツかを判定しやすくするために、source プロパティを付与し、エンドポイント名（"news" or "blog"）を持たせています。

#### 発展的なアイデア

例えば、**年別にページを分けたりする場合などは、[filters](https://document.microcms.io/content-api/get-list-contents#hdebbdc8e86)パラメータの[begins\_with](https://document.microcms.io/content-api/get-list-contents#hcd3e2ddb48)等をご活用いただく**などのアイデアもございます。

また、今回のケースでは同一サービスの複数APIからの取得でしたが、同様に**サービスをまたいだコンテンツの取得も可能**です。

ご利用のユースケースに合わせ、ぜひご活用ください。

コンテンツの件数が多くページングを取り入れる場合、API間の公開順にバラつきがありうまく機能しない場合がございます。その際は、期間ごとに分けてページを区切る方法などをご検討ください（例：microCMSコーポレートサイトの「[お知らせ](https://microcms.co.jp/news)」）。

![CleanShot 2024-01-22 at 14.40.47](https://help.microcms.io/hs-fs/hubfs/CleanShot%202024-01-22%20at%2014.40.47.png?width=623&height=200&name=CleanShot%202024-01-22%20at%2014.40.47.png)

 

- [アカウント](https://help.microcms.io/ja/knowledge/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88?hsLang=ja#main-content)

    - [ログイン](https://help.microcms.io/ja/knowledge/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88?hsLang=ja#%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3)
    - [登録／変更／削除](https://help.microcms.io/ja/knowledge/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88?hsLang=ja#%E7%99%BB%E9%8C%B2%E5%A4%89%E6%9B%B4%E5%89%8A%E9%99%A4)
    - [その他](https://help.microcms.io/ja/knowledge/%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88?hsLang=ja#%E3%81%9D%E3%81%AE%E4%BB%96)
- [機能](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#main-content)

    - [コンテンツ](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84)
    - [リッチエディタ](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%AA%E3%83%83%E3%83%81%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF)
    - [コンテンツAPI（GET）](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84apiget)
    - [コンテンツAPI（WRITE）](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84apiwrite)
    - [マネジメントAPI](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%9E%E3%83%8D%E3%82%B8%E3%83%A1%E3%83%B3%E3%83%88api)
    - [Webhook](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#webhook)
    - [インポート / エクスポート](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88-%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88)
    - [API設定](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#api%E8%A8%AD%E5%AE%9A)
    - [レビュー](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC)
    - [メディア（画像/ファイル）](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E7%94%BB%E5%83%8F-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB)
    - [メンバー](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%83%A1%E3%83%B3%E3%83%90%E3%83%BC)
    - [権限](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E6%A8%A9%E9%99%90)
    - [複数環境](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E8%A4%87%E6%95%B0%E7%92%B0%E5%A2%83)
    - [セキュリティ](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3)
    - [その他](https://help.microcms.io/ja/knowledge/%E6%A9%9F%E8%83%BD?hsLang=ja#%E3%81%9D%E3%81%AE%E4%BB%96)
- [実装（全般）](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#main-content)

    - [トラブルシューティング](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E3%82%B7%E3%83%A5%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0)
    - [ユースケース別の実装方法](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#%E3%83%A6%E3%83%BC%E3%82%B9%E3%82%B1%E3%83%BC%E3%82%B9%E5%88%A5%E3%81%AE%E5%AE%9F%E8%A3%85%E6%96%B9%E6%B3%95)
    - [API](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#api)
    - [Webhook](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#webhook)
    - [インフラ](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E5%85%A8%E8%88%AC?hsLang=ja#%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9)
- [実装（言語／フレームワーク）](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E8%A8%80%E8%AA%9E%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF?hsLang=ja#main-content)

    - [JavaScript](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E8%A8%80%E8%AA%9E%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF?hsLang=ja#javascript)
    - [Next.js](https://help.microcms.io/ja/knowledge/%E5%AE%9F%E8%A3%85%E8%A8%80%E8%AA%9E%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF?hsLang=ja#next-js)
- [お支払い](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#main-content)

    - [従量課金](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#%E5%BE%93%E9%87%8F%E8%AA%B2%E9%87%91)
    - [プラン変更](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#%E3%83%97%E3%83%A9%E3%83%B3%E5%A4%89%E6%9B%B4)
    - [解約](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#%E8%A7%A3%E7%B4%84)
    - [請求書](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#%E8%AB%8B%E6%B1%82%E6%9B%B8)
    - [支払いサイクル](https://help.microcms.io/ja/knowledge/%E3%81%8A%E6%94%AF%E6%89%95%E3%81%84?hsLang=ja#%E6%94%AF%E6%89%95%E3%81%84%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB)
- [ご契約](https://help.microcms.io/ja/knowledge/%E3%81%94%E5%A5%91%E7%B4%84?hsLang=ja#main-content)

    - [Hobbyプラン](https://help.microcms.io/ja/knowledge/%E3%81%94%E5%A5%91%E7%B4%84?hsLang=ja#hobby%E3%83%97%E3%83%A9%E3%83%B3)
    - [Enterpriseプラン](https://help.microcms.io/ja/knowledge/%E3%81%94%E5%A5%91%E7%B4%84?hsLang=ja#enterprise%E3%83%97%E3%83%A9%E3%83%B3)
- [セキュリティ](https://help.microcms.io/ja/knowledge/%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3?hsLang=ja#main-content)

    - [シングルサインオン](https://help.microcms.io/ja/knowledge/%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3?hsLang=ja#%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%B3%E3%82%AA%E3%83%B3)
- [既知の不具合](https://help.microcms.io/ja/knowledge/%E6%97%A2%E7%9F%A5%E3%81%AE%E4%B8%8D%E5%85%B7%E5%90%88?hsLang=ja#main-content)

    - [旧リッチエディタ](https://help.microcms.io/ja/knowledge/%E6%97%A2%E7%9F%A5%E3%81%AE%E4%B8%8D%E5%85%B7%E5%90%88?hsLang=ja#%E6%97%A7%E3%83%AA%E3%83%83%E3%83%81%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF)
- [その他](https://help.microcms.io/ja/knowledge/%E3%81%9D%E3%81%AE%E4%BB%96?hsLang=ja)

株式会社microCMS