MicroCMS×Vue.js

kurumin

SDKとCDNを読み込み

まず、microCMS SDKとVue.jsのCDNを読み込みます。

  <!-- microCMS SDK -->
  <script src="https://cdn.jsdelivr.net/npm/microcms-js-sdk/dist/umd/microcms-js-sdk.min.js"></script>
  <!-- Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

SDKとは、開発者が特定のプラットフォームやサービスを使うために必要なツールセットで、CDNとは、ウェブ上で公開されているライブラリを簡単に使えるようにするサービスです。

全体コード

// microCMSの認証設定
const { createClient } = microcms;
const client = createClient({
  serviceDomain: 'qc1v7w07dz', // XXXX.microcms.io の XXXX 部分
  apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
});

// Vue.jsアプリケーションの設定
const { ref, onMounted, createApp } = Vue;

// アプリケーションを作成
const app = createApp({
  setup() {
    // 変数の定義
    const lists = ref({});

    // 日付フォーマット（0000年0月0日）
		const formatDate = (inputDate) => {
			const date = new Date(inputDate);
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const day = date.getDate();
			return `${year}年${month}月${day}日`;
		};

    // ・クエリパラメータの作成
    // ・APIの呼び出し
    onMounted(async () => {
      try {
        // APIを呼び出します
        const res = await client.get({
          endpoint: 'news',
          queries: queries
        });
        // データをリアクティブな変数に代入します
        lists.value = res.contents;
        console.log(lists)
      } catch (err) {
        // エラーが発生した場合
        console.error('mounted ERROR!!', err);
      }
    });

    // 他の場所（html）で使うために変数を返します
    return {
      lists,
      formatDate
    };
  },
});

// アプリケーションを「#app」要素にマウントします
app.mount('#app');

microCMSの認証設定

// microCMSの認証設定
const { createClient } = microcms;
const client = createClient({
  serviceDomain: 'qc1v7w07dz', // XXXX.microcms.io の XXXX 部分
  apiKey: 'Ya12aDg1EwidQebVY0MDNFRDIa6PfBeYcrkz',
});

createClient

これはmicroCMSのクライアントを作成するための関数です。

serviceDomain

これはサービスのドメイン名にあたる部分で、「XXXX.microcms.io」の「XXXX」の部分に対応します。

apiKey

microCMSのAPIキーです。このキーを使って、認証された通信を行います（安全のため、通常は環境変数などで管理します）。

Vue.jsアプリケーションの設定

const { ref, onMounted, createApp } = Vue;

ref

Vueのリアクティブな値を作成するための関数。このコードでは`lists`というリアクティブ変数を作っています。

onMounted

コンポーネントがマウントされたときに実行される関数。

createApp

Vueアプリケーションを作成するための関数。

Vueアプリケーションの作成

const app = createApp({
  setup() {
    const lists = ref({}); // データを保存するリアクティブ変数

    const formatDate = (inputDate) => {
      const date = new Date(inputDate);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}年${month}月${day}日`;
    };

    onMounted(async () => {
      try {
        // APIを呼び出します
        const res = await client.get({
          endpoint: 'news',
          queries: queries
        });
        // データをリアクティブな変数に代入します
        lists.value = res.contents;
        console.log(lists)
      } catch (err) {
        // エラーが発生した場合
        console.error('mounted ERROR!!', err);
      }
    });

    return {
      lists,
      formatDate
    };
  },
});

setup

コンポーネントのデータやメソッドを定義し、使用するための関数です。

lists

APIから取得したニュースデータを格納するための変数です。

formatDate

日付を「XXXX年XX月XX日」という形式にフォーマットするための関数です。

onMounted

コンポーネントが初めて表示されたときに、microCMSのAPIを呼び出して「news」エンドポイントからデータを取得します。取得されたデータは`lists`に保存されます。

アプリケーションのマウント

アプリケーションをページ内の特定の要素に関連付けます。

app.mount('#app');

mount

このVueアプリケーションをHTML内の`<div id=”app”>`にマウントします。これで、VueのデータとメソッドをそのHTML要素と連動させることができます。

まとめ

microCMSのクライアントを作成し、APIにアクセスできるようにする

// microCMSの認証設定
const { createClient } = microcms;
const client = createClient({
  serviceDomain: 'qc1v7w07dz', // XXXX.microcms.io の XXXX 部分
  apiKey: 'Ya12aDg1EwidQebVY0MDNFRDIa6PfBeYcrkz',
});

Vue.jsのアプリケーションを作成し、必要な機能をインポートする

// Vue.jsアプリケーションの設定
const { ref, onMounted, createApp } = Vue;

// アプリケーションを作成
const app = createApp({
  setup() {

  　・・・省略

  },
});

リアクティブなデータ（lists）を定義**する。これは、取得したニュース記事を格納する配列になる。

    // 変数の定義
    const lists = ref({});

コンポーネントがマウントされたとき（onMounted）に、microCMSのAPIからデータを取得する。このとき、async・awaitを使って非同期処理を行う。

取得したデータをlistsに格納する。これで、テンプレート側でlistsを使ってデータを表示できるようになる。

    onMounted(async () => {
      try {
        // APIを呼び出します
        const res = await client.get({
          endpoint: 'news',
          queries: queries
        });
        // データをリアクティブな変数に代入します
        lists.value = res.contents;
        console.log(lists)
      } catch (err) {
        // エラーが発生した場合
        console.error('mounted ERROR!!', err);
      }
    });

HTMLで使用するデータや関数をreturnで返す。

    // 他の場所（html）で使うために変数を返します
    return {
      lists,
      formatDate
    };

アプリケーションをマウントして、HTMLと紐付ける

// アプリケーションを「#app」要素にマウントします
app.mount('#app');