microCMSのデータ移行

本記事は  【Advent Calendar 2025】  5日目の記事です。
🌟🎄  4日目  â–¶â–¶ æœ¬è¨˜äº‹ â–¶â–¶  6日目  ðŸŽ…🎁

こんにちは。フロントエンジニアの日高です。
昨年に続いてアドベントカレンダーに執筆させていただくことになりました。
今回はAPIベースの日本製ヘッドレスCMSであるmicroCMSのデータ移行についてご紹介します。

はじめに

microCMSを使用しているサイトを改修する際に、microCMSで管理しているデータの構成を変更する必要がありました。
すでに登録されているデータについても新しい構成に変更しなくてはならないのですが、データの量が多く、手作業だとなかなか大変。。
というような背景があり、大量のデータをどのように移行するか検討することになりました。

前提

管理画面で移行元のコンテンツ(API)と同じ環境に移行先のコンテンツ(API)を作成しておきます。
移行元と移行先のAPIスキーマの設定はそれぞれ下記の通り。
移行元では旧リッチエディタを使用していましたが、移行先ではリッチエディタを使用するよう変更しています。

【移行元のコンテンツ(API)】

• タイトル（title）
  テキストフィールド

• 画像（image）
  画像

• 本文（body）
  旧リッチエディタとテキストエリアの繰り返しフィールド
  ※旧リッチエディタとテキストエリアはカスタムフィールドとしてフィールドを用意しています
  
  

【移行先のコンテンツ(API)】

• タイトル（title）
  テキストフィールド

• 画像（image）
  画像

• 本文（body）
  リッチエディタとテキストエリアの繰り返しフィールド
  ※リッチエディタとテキストエリアはカスタムフィールドとしてフィールドを用意しています

データ移行方法

１. 移行するデータをエクスポートする

まずは移行元のコンテンツ(API)に登録されているデータをエクスポートします。 下記のようにGET APIを使ってデータを取得するコードを作成します。

async function getData() {
  try {
    const response = await fetch(sourceEndpoint, {
      method: 'get',
      headers: {
        'X-MICROCMS-API-KEY' : key
      },
      dispatcher,
    });
    if (!response.ok) {
      throw new Error(`レスポンスステータス: ${response.status}`);
    }
    const result = await response.json();
    return result;
  } catch (error) {
    console.log(error.message);
  }
}

※sourceEndpointにはmicroCMSの移行元のコンテンツ(API)のエンドポイントを、keyにはmicroCMSのAPIキーを設定します。

２. エクスポートしたデータを登録する

データの登録方法としては下記2パターンがあります。

• microCMSの管理画面でCSVファイルをインポートする
• APIを利用する

それぞれ見ていきましょう。

パターン①：microCMSの管理画面でCSVファイルをインポートする

１. CSVファイルを作成

インポートするCSVファイルを用意するため、データのエクスポート時にCSVファイルを作成するコードを作成し、実行します。

const fs = require('fs');
const path = require('path');

// CSVファイルを作成
async function createCSV() {
  const key = ['', 'title', 'image','body'];
  let rows = [];
  // 移行元からデータを取得
  const data = await getData();
  let contents = [];
  if (data) {
      contents = data.contents;
  }

  for (let i = 0; i < contents.length; i++) {
    let content = contents[i];
    let row = [];
    row.push(content.id);
    if (content.title) {
      row.push(content.title);
    } else {
      row.push('')
    }
    if (content.image) {
      row.push(content.image.url);
    } else {
      row.push('');
    }
    if (content.body) {
      let bodyJson = JSON.stringify(content.body);
      bodyJson = '"' + bodyJson.replace(/"/g, '""') + '"';
      row.push(bodyJson);
    } else {
      row.push('');
    }
    rows.push(row);
  }

  // CSVデータ作成
  const csvHeader = key.join(',');
  const csvBody = rows.join('\r\n');
  const csvDataArray = [csvHeader, csvBody];
  const csv = csvDataArray.join('\r\n');
  return csv;
}

// CSVファイル出力
async function downloadCSV() {
  const csv = await createCSV();
  const outPath = path.join(__dirname, 'data.csv');
  fs.writeFileSync(outPath, csv, 'utf-8');
}

downloadCSV();

２. microCMSの管理画面でCSVファイルをインポート

作成したCSVファイルを管理画面で読み込みます。


良い点としては、 インポート自体はコードを用意する必要がなく、エクスポートも手作業によるCSVファイルの作成が可能であれば全体を通してコーディングができない方も対応することができることかと思います。
ただこちらの方法の場合、データの公開日時を登録することができないようでしたので、移行元のデータの公開日時を引き継ぐことはできませんでした。

パターン②：APIを利用する

１. コードを作成し、実行

WRITE APIを使ってデータを登録するコードを作成し、実行します。

// post通信用にデータを整形
function formatData(item) {
  let data = {
    id: item.id ? item.id : '',
    publishedAt: item.publishedAt ? item.publishedAt : '',
    title: item.title ? item.title : '',
    image: item.image ? item.image.url : '',
    body: item.body ? item.body : [],
  }
  return data;
}

// データを1件ずつ登録
async function postData(data) {
  const request = {
    method: 'post',
    headers: {
      'X-MICROCMS-API-KEY' : key,
      'Content-Type' : 'application/json'
    },
    dispatcher,
    body: JSON.stringify(data),
  }
  try {
    const response = await fetch(targetEndpoint, request);
    if (!response.ok) {
      throw new Error(`レスポンスステータス: ${response.status}`);
    }
    console.log(response.json());
  } catch (error) {
    console.error(error.message);
  }
}

// データをすべて登録
async function postAllData() {
  const data = await getData();
  for (const item of data.contents) {
    await postData(formatData(item));
  }
}

postAllData();

※targetEndpointにはmicroCMSの移行先のコンテンツ(API)のエンドポイントを、keyにはmicroCMSのAPIキーを設定します。


APIを利用したデータの登録はCSVインポートと異なりエンジニアによる対応が必須にはなりますが、データの公開日時についても移行が可能でした。

まとめ

以前はカスタムフィールドや繰り返しフィールドのデータはCSVファイルでのインポートができませんでしたが、最近のアップデートでできるようになったようです。そのため、CSVインポートでの移行とAPIでの移行ではほぼ差がなくなったように感じました。
個人的には、公開日時を引き継ぎたい場合や登録されているデータのみの移行であれば後者のAPIを利用する方法、移行時にデータの追加・変更が必要だったり、エンジニア以外の方もデータを編集したい場合はCSVファイルでの移行が適しているのではないかと思います。

執筆者：日高 フロントエンジニア