microCMS公式ブログを読んでチュートリアルの機能を実装してみた

gatsbyに移行しようとしたらnuxtでハマったポイントの解説があったので出戻った件 (--;

読むだけじゃなく、ハンズオンもちょいちょいやってみました。
所感を交えてお話します。

# 成果物

- 動くもの：https://nomuraya-microcms-tutorial.netlify.app/
- ソースコード： https://github.com/shimajima-eiji/Hosting/issues/29
- APIスキーマ（接続情報）： https://github.com/shimajima-eiji/Hosting/issues/31
- 参考情報： https://microcms.io/blog/
  - 👍目次
  - 👍マークダウン
  - 👍ハイライト
  - 👍Netlifyにデプロイ
  - 🤔ページング
  - ❌privateRuntimeConfigを用いてAPIKEY隠蔽
  - ❌外部CSS

順番に解説していきます。

# 環境構築手順

執筆時点ではGETで呼ばれる分には制限がないんで公開していますが、変更になったらこのままでは使えないようになるかも知れません。

## microCMS

自分で作ってもいいですが、今回は公開情報としています。APIスキーマを参照してもらえば分かりやすいかと。

## ローカルビルド環境

ローカルで動くものを作ります。

npm i npx
npx create-nuxt-app (test)
# SSR, JAMStackだけ設定

package.jsonを差し替えてnpm i --saveで更新しておいてください。
あとはgit cloneした細かいファイルを置けば完了です。index.vueとnuxt_config.jsだけ上書きして後はスキップしてください。置けるものは全部置きます。

.envにURLとAPI_KEYを設定しておきましょう。URLはエンドポイントです。パラメーターはスクリプトで作成していますのでここでは不要です。
ここで設定した内容はNetlifyでも設定します。

全部できたらnpm run devとすると見れます。

## Github-Netlify連携

いい感じにやっちゃってください。

# カスタマイズ

microcmsのブログに書いてある事はとりあえずやってみます。

## 目次：index.vue

cheerioがすごい。
GASスクレイピングの時も思ったけど使いやすすぎて脳汁でますね（死語）

## マークダウン：_slug.vue

本文はcontents.bodyに書くので、ここだけmerkedができれば解決です。

## ハイライト

やってることはマークダウンと同じです。

### その他

実はファイルパスを/pages/_slug/index.vueに変えても同じ事ができます。
今回はroutingに書かなくても内部クローリングをさせているので大した事はないですが、パスが変わると参照情報でエラーになるので、特に理由がなければ/pages/_slug/index.vueの方が拡張性があるのでオススメです。

## ページング

できてるか？というと微妙なところ。
原因はわからないのですが、使おうと思っていたモジュールがことごとく使えなかったので、仕方なく自作ページネイト関数を作りました。
とりあえず機能としては問題ないのでいいんですが、便利なプラグイン等があるのにわざわざ車輪の再発明はしたくないですね…。

## セキュリティ情報を隠蔽

何故か出来なかったのがこれです。
これのせいで手元にある移行計画のうち、本番運用をするものは全部見送りました。つまりNetlifyを採用していません。
ここしばらくNoteで精力的に記事を書いているのはこういった背景もあります。

脆弱性という意味ではWordPressもどっこいですが、知見があるだけまだこちらの方がマシです。
早いとかメンテしやすいとかどうこう以前に、いちばん大事な要素が抜け落ちている！

## 外部CSS

考えてみれば分かるんですが、vueから参照しているからと言ってcssをいい感じにやってくれたりはしません。
そもそもそういう運用は想定していないのか、あるいはcomponentsなどに入れておけ、という事なのでしょうか。
単純にパスがおかしいだけの可能性もありますが、上にクリティカルなやべーやつがいたので調査はほとんどしていません。