こんばんは。

今日は「MicroCMS：microcms-js-sdkを使ってデータをフィルタリング方法」について説明します。

microcms-js-sdk では、APIリクエスト時にクエリパラメータを指定してデータをフィルタリングすることができます。
これにより、特定の条件に一致するデータを取得することができます。

基本的な使い方

まず、microcms-js-sdk をインストールして、API クライアントをセットアップします。

npm install microcms-js-sdk

次に、microcms-js-sdkのセットアップを行います。

import { createClient } from 'microcms-js-sdk';

// APIクライアントのセットアップ
const client = createClient({
  serviceDomain: 'your-service-domain', // ご自身のサービスのドメイン名
  apiKey: 'your-api-key' // APIキー
});

クエリパラメータを使ったフィルタリング

MicroCMS では、以下のようなフィルタリングオプションを使うことができます。

filters: 特定のフィールドでフィルタリング（例: filters=field_name[条件]=値）
limit: 取得するデータの数
offset: データの開始位置（ページネーション）
orders: ソート順
fields: 必要なフィールドを指定（レスポンスを軽量化）

例

例1: 特定のフィールド値でフィルタリングする

例えば、category フィールドが 'tech' の記事だけを取得する場合:

client.get({
  endpoint: 'posts', // エンドポイント名
  queries: {
    filters: 'category[equals]tech'
  }
}).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

ここで、filters はフィールドに対する条件を指定します。この場合、categoryフィールドが'tech'のデータを取得します。

例2: 複数の条件を組み合わせる

複数のフィルタ条件を組み合わせることもできます。たとえば、categoryが'tech'で、published フィールドがtrueの記事を取得する場合:

client.get({
  endpoint: 'posts',
  queries: {
    filters: 'category[equals]tech&&published[equals]true'
  }
}).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

例3: ソートやページネーション

ordersを使ってソートを行い、limitとoffsetを使ってページネーションを実現できます。

例えば、publishedAtフィールドで降順にソートし、最初の10件だけ取得する場合:

client.get({
  endpoint: 'posts',
  queries: {
    orders: '-publishedAt', // 降順
    limit: 10
  }
}).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

ordersでpublishedAtを降順(-publishedAt)に設定し、limitで取得する件数を指定します。

例4: 特定のフィールドだけを取得する

データのレスポンスから、特定のフィールドだけを取得したい場合、fields クエリパラメータを使います。

client.get({
  endpoint: 'posts',
  queries: {
    fields: 'id,title' // id と title のみを取得
  }
}).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

microcms-js-sdkでは、filtersやordersなどのクエリパラメータを使用することで、データの取得時に柔軟にフィルタリングやソートが可能です。具体的な要件に合わせて、これらを組み合わせることで、必要なデータを効率的に取得できます。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。