【ブログサイト開発其の7】
microCMSのデータを呼び出し、Nuxt.jsで表示

どうも！こんにちは！

ブログサイト開発の連載で其の7になります。

今回はmicroCMSで記事データAPIを作成、Nuxt.js側でAPIを読み込み表示させるまでをやってみようと思います。
ここまでできれば、ある程度ブログサイトとしては完成になります！

それではスタートです！

microCMSでAPIを作成

まずは、APIが無いとNuxt.jsで表示できませんので、記事データのAPIをmicroCMSで作成したいと思います。

miroCMSのAPI作成は、microCMSさんのブログが分かりやすいので、そちらを参考に進めていきます。
また、アカウント、サービス作成は済んでいるものとします。

参考
2. microCMSの用意する

まずはAPIのAPI名とAPIにアクセスするエンドポイントを作成します。

私はAPI名をブログ、エンドポイントをblogにしました。

次にAPIの型を選択しますが、画面にも書かれているようにブログだとリスト形式が適しているとのことなので、リスト形式を選択します。

最後に、実際にAPIで呼び出すデータを決めます。

私の場合は、日付、記事タイトル、記事本文で分けて作成しています。

記事本文に関してですが、リッチエディタとテキストエディタの2パターンになり、表示方法が異なります。

記事本文について

リッチエディタは、見出しタグや、pタグが自動的に付与される形になり、
テキストエディタは記載した内容がそのまま表示されます。

また、リッチエディタで画像を設定すると、前後の文章も含めて1つのpタグにまとめられます。

<!-- 例 -->
<p>ああああああああああああああああああああああああああ<br>
<img src="hogehoge.png" alt="">
いいいいいいいいいいいいいいいいいいいいいいいいいい
</p>

私の場合、各パーツの表示はオリジナルのcssで設定し、クラスをつけてパーツ化していたので、
リッチエディタのみだと記事を入稿する際に、一部オリジナルのクラスをつけれない状態になっていました。

そのため、microCMSにある「繰り返しフィールド」を使用して、
記事本文をリッチエディタとテキストエディタで切り替えられるように対応しています。
以下に設定方法の詳細が書いてありますので、同じようにオリジナルのクラスでレイアウトを設定している人は見てみてください。

参考
リッチエディタを使いつつ一部はHTMLで入稿する

こちらの変更はいつでもできるのですが、変更するとAPIを叩いた際に帰ってくるデータ構造が変わるので、
最初で「どのように記事データを扱うか？」というのは決めて置いたほうがベターです。

APIのコンテンツ作成

先程はAPIを作成しましたので、そのAPIのデータを作成していきたいと思います。
以下のように先程作成したAPIに、タイトルや本文を入れれる箇所ができてきていると思いますので、そこに表示させたい内容を入れていきましょう。

先程作成したAPIの場所がわからない場合は、ログインして画面右側の「コンテンツ（API）」下にあるかと思いますので、それをクリック、さらに右上にある追加をクリックすると表示されます。

NuxtでAPIを呼び出す

先程作成したAPIコンテンツですが、どのような形でNuxt側に返ってくるのかをまずは確認したいと思います。

JSではこのようにAPIを叩いたり、サーバーからデータを取得する場合、fetchメソッドやXMLHttpRequestメソッドがあります。

ただ以下のように、Nuxtの場合asyncDataやfetchを使用するのが推奨なので、今回はasyncDataを使用してAPIを叩いて行きたいと思います。

また、HTTPクライアントとしてaxoisを使用していきます。

参考
データの取得

axiosの説明や使用方法に関しては、以下が分かりやかったので参考にしてみてください。

参考
【Ajax】axiosを使って簡単にHTTP通信

axiosの準備が整ったら、NuxtでAPIを叩くべく、asyncDataを使って実装していきます。

<!-- /pages/index.vue -->
<template>
<!-- 省略〜〜 -->
</template>
<script>
import axios from 'axios' // axiosを読み込み

export default {
 async asyncData() {
  const { data } = await axios.get(
   // your-service-id部分は自分のサービスID
   'https://your-service-id.microcms.io/api/v1/blog',
   {
    // your-api-key部分は自分のapi-key
    headers: { 'X-API-KEY': 'your-api-key' }
   }
  )
  console.log(data) // console.logで返ってきているデータの中身を確認
  return data
 }
}
</script>

上記の実装をしページをリロードすると、GoogleChromeであれば、
F12を押してconsoleタブに移動すると、以下のように返ってきているデータが表示されているはずです。

このように返ってこれば成功です！

あとは、この返ってきたデータを表示させたい箇所に入れていくだけです。

データ表示

私の場合は以下のようにAPIのデータを表示させてます。

<!-- /pages/index.vue -->
<template>
 <card :article-data="data" btn-txt="記事を開く"></card></template>
<script>
import axios from 'axios'

export default {
 async asyncData() {
  const { data } = await axios.get(
   'https://your-service-id.microcms.io/api/v1/blog',
   {
    headers: { 'X-API-KEY': 'your-api-key' }
   }
  )
  console.log(data) // console.logで返ってきているデータの中身を確認
  return data
 }
}
</script>

APIのデータを変数dataに入れreturnし、そのdataをcardコンポーネントでpropsして渡しています。

cardコンポーネントは以下のような形です。

<!-- /components/Card.vue -->
<template>
 <div class="l-card">
  <div class="m-card-thumb">
   <nuxt-link :to="`/articles/article/${articleData.id}`">
    <img :src="articleData.eyecatch" :alt="articleData.title" />
   </nuxt-link>
  </div>

  <!-- 省略〜〜 -->
 </div>
 <!-- ./l-card -->
</template>
<script>
export default {
 name: 'Card',
 props: {
  articleData: {
   type: Object,
   default: () => {},
  },
  btnTxt: {
   type: String,
   default: '',
  },
 },
}
</script>

propsで渡したdataは、オブジェクトになっているので、
articleData.titleのように渡されたデータにドット記法でアクセスして中身を表示させている感じです。

もちろん、ドット記法でアクセスするキー名は、micorCMSでAPIを作成した際の名前になります！

これで、microCMSでAPIを作成し、Nuxt側でAPIを叩いてデータを取得し、表示させるということができました。

microCMSでのAPIの作成はそこまで難しく無いと思いますので、
Nuxt側でAPIを叩いてデータを取得するというところを重点的に繰り返して、慣れていきましょう！

次回

今回のAPI作成、APIデータの利用で記事を表示させることまでができました。
これで記事詳細ページを作成することができるかと思います。

ただ、今の時点では、「1つのvueファイルで1つの記事ページ」という感じで、
記事データが増えれば増えるだけ、vueファイルも増やすことになります。。

それは更新性を考えると手間なので、
「1つのvueファイルで、複数の記事ページを表示させる。」という対応をして、更新性をアップさせたいと思います！

それでは次回もゆたしく～～～