数字フィールドは、価格、数量、ランキング、順序など、数値データを管理するためのフィールドです。
テキストフィールドと異なり、入力内容を数値に限定できるため、フロントエンド側での計算処理や、数値に基づいた並び替えを正確に行いたい場合に適しています。

データの入稿方法

フィールドの入力欄をクリックし、半角数字を入力します。

API、CSVを利用した入稿については以下のドキュメントをご参照ください。

制限事項／注意事項

• 入力可能な数値の範囲は 9007199254740991 〜 -9007199254740991 です。

詳細設定

GET APIのレスポンス形式

詳細は以下のドキュメントをご参照ください。

フロントエンドでの利用方法

数字フィールドは数値形式でデータが返されるため、そのまま表示するだけでなく、計算処理やフォーマット変換を行って表示します。
以下はNext.jsで、価格を表示する実装例です。

export default async function Page({ params }) {
  const { slug } = await params;

  // microCMS JavaScript SDK（https://github.com/microcmsio/microcms-js-sdk）を使用してデータを取得
  const data = await client.getListDetail({
    endpoint: "products",
    contentId: slug,
  });

  return (
    <main>
      {/* price はフィールドIDです。実際のフィールドIDに置き換えてください */}
      <p>価格：{data.price.toLocaleString()}円（税込）</p>
    </main>
  );
}