microCMS + Nuxt.js でサイトを作る（その１？）

　いまあるサイトのリファクタリングついでに新しい技術を導入してみたくなったので、Nuxt.jsの発展形を試してみたいと考えましたのでここにまとめておこうと思う。Nuxt.jsを使ったサイトの作り方の自分まとめを結局毎回見ながらやりつつってこともあって、まとめた重要性は意外と高いように思うので超面倒臭いんだけど頑張ってやりたいと思います。

前提環境
実際にやった手順
最後に
参考文献

前提環境

macOS Mojave 10.14.6
GoogleChrome バージョン: 89.0.4389.90（Official Build）（x86_64）
npm 7.5.4
(@vue/cli 4.5.11)
create-nuxt-app v3.6.0
Nuxt @ v2.15.3

実際にやった手順

Nuxt のプロジェクトを作成

SHELL:

$ npm init nuxt-app appNuxt
✨  Generating Nuxt.js project in appNuxt
? Project name: (appNuxt) 
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: 
  ❯◉ Axios - Promise based HTTP client
   ◉ Content - Git-based headless CMS
? Linting tools: ESLint
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using 
typescript)
? Continuous integration: None 
? Version control system: Git

エラーなく終わったら以下のコードで起動させてブラウザで確認します。

SHELL:

$ cd japaripark
$ npm run dev

動いてますね。

見た目がNuxt.jsのバニラとちょっと違うので驚きましたがちょっとワクワクしますねこれ。楽しみです。

microCMS側を用意する

　これは前に記事にしたものをそのまま流用したいと思います。

URLを入れるのを忘れていたのでそれを追加した以外はそのままです。

まずはまるっとコピペして動くか検証

　ここのサイトからコードを拝借して、まずは一覧（１件しかないけど）が取得できるかを検証します。

pages/index.vue:

<template>
  <ul>
    <li v-for="content in contents" :key="content.id">
      <nuxt-link :to="`/${content.id}`">
        {{ content.title }}
      </nuxt-link>
    </li>
  </ul>
</template>

<script>
import axios from 'axios'
export default {
  async asyncData () {
    const { data } = await axios.get(
      // your-service-id部分は自分のサービスidに置き換えてください
      'https://your-service-id.microcms.io/api/v1/links',
      {
        // your-api-key部分は自分のapi-keyに置き換えてください
        headers: { 'X-API-KEY': 'your-api-key' }
      }
    )
    return data
  }
}
</script>

あれ…？　エラーなくリストにはなったけど中身が表示されない…

こんなときは落ち着いて、データが取得できているかを確認します。{{ content.title }}の部分を {{ content }}のみにして、全部を表示させます。とここまでやった段階で気づきました。titleじゃなくて前の記事の時にはlinkTitleって設定してましたね。

調子に乗って全部表示できるようにする

　ここまできたら登録したものを全部表示させてみたいじゃないすか。ということで、登録したものを全部乗せにした上で、適当に整形してみます。

…と思ったけど、これまでの書き方だとうまく書けなかったのと、データが一個じゃやっぱりよくわからなかったので、データを二つに増やした上で、以下のように記述した。

pages/index.vue:

<template>
  <v-container>
    <v-row>
      <v-col
        v-for="content in contents"
        :key="content.id"
        class="linkItem row"
      >
        <img :src="`${content.linkImage.url}`" class="col-md-4">
        <div class="col-md-8">
          <nuxt-link :to="`/${content.id}`" class="col">
            {{ content.linkTitle }}
          </nuxt-link>
          <p>
            {{ content.linkDescription }}
          </p>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import axios from 'axios'
export default {
  async asyncData () {
    const { data } = await axios.get(
      // your-service-id部分は自分のサービスidに置き換えてください
      'https://your-service-id.microcms.io/api/v1/links',
      {
        // your-api-key部分は自分のapi-keyに置き換えてください
        headers: { 'X-API-KEY': 'your-api-key' }
      }
    )
    return data
  }
}
</script>

<style>
.linkItem {
  margin: 1em 0;
  padding: 1em;
  border: 1px solid #efefef;
  list-style-type: none;
}
</style>

表示はこのようになった。

ビルドしてみる

SHELL:

// Ctrl+Cでdevをstopする
$ npm run generate

そういや一部コードが間違っているので、リンクがサイト内向きになっているやつがあってエラーが出ますが今回は無視することで…

最後に

　これを発展させていってちょっとしたサイトができればいいなぁと思ってます。

参考文献

microCMS + NuxtでJamstackブログを作ってみよう：　https://blog.microcms.io/microcms-nuxt-jamstack-blog/