Nuxt.jsとmicroCMSとNetlifyと。
業界未経験者です。
現在はWeb制作におけるマークアップ、フロントエンド部分を仕事にしたいと思い自宅学習中です。
娘が保育園にいくことになったのでピンチですが、がんばっています。
フロントエンドのトレンドの学習をしていたら、Jamstackという言葉に出会いました。
かなり噛み砕いて説明していますが、調べるとSSG(Static Site Generator)を使用して、APIでデータを持ってきてマークアップして静的サイトを作った状態のものを対応するホスティングサービスにデプロイすると出来るとのことで、Jamstackのブログを作ろうと思い、やってみることにしました。
完成したもの
使用技術
Nuxt.js
SSGできるJavaScriptフレームワークはNext.js、Gatsby js、Nuxt.jsなどありますが、Vueの学習を進めていたのでNuxt.jsを採用しました。
microCMS
Jamstackで必要になるのが、APIでデータを取得する先のもの。
ここで使うのがヘッドレスCMSというもので、通常のCMSと違い、データをJson形式などで扱うのみで見た目を構成したりすることはできない。
ヘッドレスCMSはさまざまなサービスがあるが、UIが好き、日本産で日本語ドキュメントが豊富、という点でmicroCMSを使うことにしました。
Netlify
ホスティングサービスは、Firebase、Vercel、Netlifyの3つで悩みました。
普段はFirebaseを使っていましたが、Jamstackで主に使われるのがVercelとNetlifyが多く、わからなくなった際に調べた際も、上記の2つが多いためFirebaseは選択肢から外しました。
VercelとNetlifyで悩んだ結果Vercelの方が速度が早いみたいなのですが、こちらも検索するとNuxtとNetlifyの組み合わせが多く、困った時に助かると思いNetlifyにしました。
開発の流れ
- Let's Nuxt.js
- Let's microCMS
- デザイン
- 開発
かなり大まかにするとこの4つの流れで行いました。
Let's Nuxt.js
Vue.jsで何度か開発を行っていたので、Nuxt.jsは初めて使いましたが特に問題さく進めることができました。
Vue Routerと違い、ファイル名でルートを分けるのが直感的でわかりやすく実施することが出来ました。
Let's microCMS
microCMSとの通信も、公式様のドキュメントやブログがわかりやすくそれだけでほぼ完結しました。
もちろん日本語のドキュメントというのもありますが、それ以前に記述されている内容がわかりやすいです。
データの取得は
<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/blog',
{
// your-api-key部分は自分のapi-keyに置き換えてください
headers: { 'X-API-KEY': 'your-api-key' }
}
)
return data
}
}
</script>
を記述するだけで出来ます。
データの絞り込みもmicroCMSのコンテンツAPIで行えたました。
デザイン
好きなサイトの好きな部分を参考にしました。
参考といってもほとんど真似（数値などを自分のサイトに合わせる）なので特にここも詰まることなく行えました。文字を読んでもらうサイトなので凝った演出は控えて落ち着いた感じのもを目指しました。
開発
上記でも記述した通り、特につまらず開発を進めることができました。
Nuxt.js、microCMSの学習に1日ずつ、デザインに約2日、開発に約3日の1週間程度で完成デプロイまで持っていくことができました。
まとめ
公式のドキュメントが豊富で初学者でもチャレンジしやすい内容でした。
基礎の学習と平行しながら、トレンドを掴むことも意識して行えたので学びは非常に大きかったです。
JamstackがWeb制作の環境を変えるものになるだろうか…。
Discussion