Jamstackオンラインワークショップ #1「microCMS × Nuxt編」に参加しました！

こんにちは。コーディングデザインのフロントエンドHTML&CSSデベロッパー森です。

今回は先週木曜日に受講したJamstackオンラインワークショップ #1「microCMS × Nuxt編」のレポートです。
コードはまったく出てきませんが、ベースになっているmicroCMSのチュートリアルブログは紹介していますので、よろしければご覧ください。

６月に「チャリティカンファレンス沖縄2020 Vol.1 Frontend」でも受講したmicroCMSのワークショップに引き続き、受講させていただきました。
主催はmicroCMSを開発されているウォンタ株式会社さん。
参加費は無料。20名の参加枠に40名ほどの登録があり、抽選で当選したため、ありがたく参加しました。

結果、microCMS、面白い！って思えるワークショップでした！
今後Nuxt.js編とNext.js編が1回ずつ決まっているので、ぜひ興味のある方は受講していただきたい内容です。

まずオリエンテーションがありました

まずはイベントを始めるにあたって、オリエンテーション用のPDFとワークショップ用のPDFが配布されました。
PDFは参加者限定とのことでしたのでこちらでは公開しませんが、とても勉強になる内容でした。

イベントの中身はオリエンテーションとワークショップで、ワークショップは【解説＆実装】x 2という構成でした。

国産ヘッドレスCMSであるmicroCMSとNuxt.jsでブログを作成できるワークショップです。
実際に手を動かして参加者全員が各々ブログを完成させ、Jamstackの仕組みを理解することがゴールです。
Jamstackで構築されたブログ例： https://microcms.io/blog/
引用元：Jamstackオンラインワークショップ #1「microCMS × Nuxt編」

オリエンテーションではJamstackとはなんぞやという解説があり、ざっくりいうと下記のことが伝えられました。

WebアプリケーションとWebサイトは目的が違うので作り方も違うのをSSGとヘッドレスCMSが解決しつつある
→　SSG：Static Site Generate。静的サイト生成。SEOに強い
→　ヘッドレスCMS：Webサイトの見た目の管理が切り離されたCMS。microCMSも入る
JamstackはSSG + CSRによってセキュア＆ハイパフォーマンス＆強SEO＆ローコストを実現する構成
→　CSR：Client Side Rendering: クライアント側での表示
→　初期ページは静的ファイルをロードして（SSG）、ページ遷移時はクライアント側で表示（CSR）

Nuxt.jsやNext.jsを利用しているWebアプリケーション開発者から見たときに、Webサイトを制作しやすくする構成なのかなと感じました。

Webサイト開発者としてはサーバサイドではWordPressやMovableTypeなどのCMSを使い、クライアントサイドではDOMの制御にまだjQueryを使うのが日常。jQueryのプラグインでメジャーなものは改善が進んでいて、安心して使うことができます。
サーバサイドのCMSはプラグインがたくさんあり、機能が追加しやすい仕組みがあります。

Jamstackはバックエンドとデータの入稿をヘッドレスCMSに任せられますが、フロントエンドは完全に分離するため、データのつなぎ込みは自分でやる必要があります。
データドリブンなNuxt.jsはわりかし学習コストがかかります（便利であることは間違いありません）。
機能追加についてNuxt.jsのプラグインを利用できれば良いですが、まずいろいろ探す必要があるでしょう。
欲しい機能に見合うプラグインがなければ、自分で手を動かす部分が多くなる可能性があります。

Jamstackは手がかかるかも…と思いつつ、「セキュア＆ハイパフォーマンス＆強SEO」というのはかなり強みですよね。
この構成は静的ページの多いWebサイトにはとても向いているようです。

ワークショップで得られたこと

オリエンテーションのあとのワークショップは配布されたPDFを使って、ブログサイトを作るものでした。

まずJavaScriptフレームワークNuxt.js（SSGができる）と下記のWeｂサービスで利用の流れを解説いただき、そのあと手を動かしていきます。

microCMS（ヘッドレスCMS）
Github（Gitリポジトリの置き場所）
Netlify（静的ファイルのホスティング）

PDFは画面キャプチャが多く、かなり丁寧に作られていたため、見たままに進めることができました。
途中からは解説を聞きながら、PDFにしたがって自分の環境で進める方もいらっしゃったかもしれません。
森は解説を聞きながら手を動かしてました。

内容的にはmicroCMSのブログにある「microCMS + NuxtでJamstackブログを作ってみよう」の内容＋αでした。

microCMSの面白さ

microCMSはデータ形式を作る＆データを入稿がブラウザでできる＆APIでデータ配信できるWebサービスです。

Googleフォームのように入力フォームをGUIでつくるWebサービスがいろいろありますが、それらと同じように、GUIでさくっとAPIで配信するデータ形式を作ることができる面白さがあります。

また、お客さんにデータを入力していただく画面もシンプルで使いやすいです。

URLにパラメータをつけることでデータの検索やフィルタリングができます。

画像をmicroCMSにホスティングできるんですが、img要素で表示するときのURLにパラメータつけることで画像を編集できる機能があります。

microCMSのブログにある「microCMS + NuxtでJamstackブログを作ってみよう」のとおりに作れば、Nuxt.jsと連携させて、一覧ページと詳細ページを作るのは10分ほどで完了するほど「さくっと」作れてしまうのがが楽しいです。ワークショップではPDFにあるソースをコピペしました。

一覧ページと詳細ページを作成したあと、Sassを使えるようにしたり、静的ファイルを書き出してみたりしました。これもあっという間に終わります。

microCMSのブログでは新機能のお知らせに加えて、ページネーションの作り方、プレビュー画面の作り方などの開発に役立つ情報が紹介されていてとてもありがたいです。

Jamstackで知るいまどきのWebサービスの連携の面白さ

microCMS + Nuxt.jsを使って端末の中で記事の一覧と詳細を作るのはとても簡単にできました。
ここでネット上に公開するにあたって、Github, Netlifyと連携させていきました。

開発のリソースを公開する仕組みづくり

まずは開発のリソースを公開する仕組みとして、GithubとNetlifyを連携させます。

Gihubに新規リポジトリを作成。
作業環境にGitリポジトリを作ってまるっとコミット＆作成したGithubのリポジトリにプッシュ。

Netlifyの管理画面で「New site from Git」ボタンをクリックして、Githubのリポジトリを登録します。
また、「ブランチ」「ビルドコマンド」「公開する静的ファイルがあるフォルダ」を指定します。

このとき、上で作成したGithubのリポジトリが表示されない時があるかもしれません。
その時はリポジトリを選択する画面（下のキャプチャ）の一番下のテキストリンク「Configure the Netlify app on GitHub」をクリックしてください。NetlifyからGithubのリポジトリへのアクセスの制限を設定する画面に遷移します。

下記の画面でGithubのリポジトリをNetlifyにアクセスさせるかどうかを設定できます。
設定ができていればNetlifyのリポジトリ選択画面で該当のリポジトリが表示されるはずです。

これでGithubのリポジトリに変更があったときはNetlifyで検知してソースをビルド＆静的ファイルを公開してくれます。FTPやSSHをする必要はありません。これで開発のリソースを公開する仕組みができました。

入稿されたデータを公開する仕組みづくり

つぎに入稿されたデータを公開する仕組みとして、microCMSとNetlifyを連携させます。

まずはmicroCMSで API設定 > Webhook > 追加 > Netlify とクリックして画面を表示しておきます。
チェックボックをポチポチすることで、どんなタイミングでNetlifyに通知するか（ビルドして公開するか）を設定できます。
URLを入れるテキストボックスは空のまま。

Netlifyで Setting > Build & Deploy とクリックして Build hooks でフックの名前（microCMSとか）とビルドするブランチ名を指定します。指定するとURLが発行されるので、microCMSの空にしておいたテキストボックスにコピペして保存しましょう。

この設定が終われば、microCMSでデータ入稿したときに、Netlifyで検知してソースをビルド＆静的ファイルを公開してくれます。これでサイトの運用担当者がコンテンツを追加・更新・削除する仕組みができました。

Jamstack完成です。

フロントエンドの作業はプログラムを触りますが、そのあとの設定をする間は、まったくプログラムは必要ありません。複数のWebサービスが互いに連携して、効率的な開発・運用ができるということですね。本当に素晴らしい〜。

まとめ

Jamstackは「SSG + CSRによってセキュア＆ハイパフォーマンス＆強SEO＆ローコストを実現する構成」です。
サーバサイドのCMSと違ってログインを突破されたら…という心配がないのがとても良いです。

SSG + CSRができるNuxt.js はある程度の学習コストが必要ですが、手を動かしてみるととても楽しいフレームワークですし、microCMSはGUIでAPIを作れる楽しさがあり、機能追加も頻繁で、ドキュメントやブログが充実していて、どんどん使っていきたいWebサービスです。

これまで制作してきたWebサイトに近づけようとすると、長い道のりであるのは否めないですが、得られる効果は大きいので実戦投入していきます。

Jamstackオンラインワークショップ、とてもよかったです！
ウォンタ株式会社の@shoma2da、@shibe97、ワークショップ中サポートしてくださった@kamimura_thさん、どうもありがとうございました！

セキュア＆ハイパフォーマンス＆強SEO＆ローコストなWebサイトを作りませんか？
ぜひお問い合わせください！

お問い合わせ