こんにちは。野崎です

microCMSでは今年から毎月でJamstackの登壇形式の勉強会「ジャムジャム！！Jamstack！！」(以下ジャムジャム)を開催させていただいています。
イベントページはこちら
https://jamjamjamstack.connpass.com/

次回は年明け2022年の1/27(木)に開催します。登壇・参加お待ちしております。
https://jamjamjamstack.connpass.com/event/233633/

この記事では、ジャムジャムの雰囲気を感じていただければと思い、今年全3回の様子をレポートさせていただきます。

概要

• 開催回数　3回
• のべ参加人数　585人
• のべ登壇数　22回

今年から開催したイベントにも関わらず、多くの方にご参加いただきました。誠にありがとうございます。
登壇内容も「Jamstack勉強会」ならではのものが多く、とても興味深い内容が多かったです。

ジャムジャムはYouTube Liveでの配信形式で行っています。
オンラインではありますが、Twitterやコメントなどで多くの質問をいただくので、オンラインのような双方向的な勉強会をさせていただいています。
今後もぜひお気軽に質問などを投稿していただけると嬉しいです。

では、全3回のイベントを振り返らせていただきます。

第1回　ジャムジャム！！Jamstack

イベントページ
https://jamjamjamstack.connpass.com/event/223566/
YouTubeアーカイブ

記念すべき第1回でした。初めてのYouTube Liveでの配信だったこともあり配信に手間取ってしまいましたが、参加者の方々のおかげでとても盛り上がった回になったと思います。

Jamstackとノーコードが目指すウェブ制作のこれから

たにぐちまことさんに基調講演としてJamstackとノーコード、WordPressの関わりやウェブ制作これからについて講演していただきました。
Jamstackの立ち位置やノーコード・WordPressとの関わりからJamstackの今後や使いどころなどについて考えるきっかけとなる講演でした。
YouTube Liveで資料をご覧いただけます。

Next.jsで整える。デザインとロジックの分離

hanetsukiさんによるNext.jsのPage Extensionについての解説です。
デザイナーとの協業などをする上でのNext.jsでのロジックの分離・ディレクトリ構造などとても参考になるLTでした。

でぃーすけさん「事前生成のメリットを生かして、microCMSのリッチエディタを最適化して使う」

https://jamjam-slide.vercel.app/1

でぃーすけさんによるJamstackのPre Renderingの仕組みを最大限に活かして、パフォーマンスを向上させる方法についてのLTでした。
Jamstackは事前にビルド生成したものを配信するので、ビルド時に処理を行うことでパフォーマンスが向上することについてmicroCMSでのTipsを紹介いただきました。

SaddnessOjisanさん 「不用品掲示サイトをMicroCMS + NextJS + vanilla-extract で作った話」

saddnessOjisanさんにmicroCMSで不用品を掲示するサイトを作成した話をしていただきました。
microCMSでステータスの管理などを行っているそうです。Next.jsやvanilla-extractなどの技術選定もとても参考になりました。

minami.takaoさん「Next.jsとWordPressで初めてのフロントエンジニア体験記」

minami.takaoさんによるNext.jsとWordPressをヘッドレスCMSとして利用する方法についてです。
ヘッドレスCMSの入門としてとても参考になる内容でした。Jamstack入門やWordPressを経験されていた方々の導入としても参考になるかと思います。

meijinさん「microCMSを使ったビジネスサイドとのコミュニケーション」

meijinさんによるmicroCMSの運用の話です。
meijinさんの会社ではビジネスサイドの方がスキーマを定義しているそうです。「UIによるITリテラシの底上げ」をしてビジネスサイドとの円滑なコミュニケーションをしているとのことでした！

Ryo Kawamataさん「esaをCMSにVuePress v2でJamstackなドキュメントサイトを作る」

KawamataさんによるesaとVuePressでのJamstack制作事例です。技術選定の方法や課題を解決する方法など、ドキュメントサイトの制作過程がとても参考になりました。

菅家さん「Jamstackの実案件で躓いたことや工夫したこと」

菅家さんによるNuxt.jsとmicroCMSでの実案件をもとにした体験談を話していただきました。ビルドやWordPressからの移行などJamstackを採用する上でとても参考になるTipsが詰まった内容で参考になりました。


第1回登壇いただいた皆様誠にありがとうございました！
ハッシュタグ #jamjamjamstackでも多くの質問をいただき大盛況となりました...！！

第2回　ジャムジャム！！Jamstack_2

イベントページ
https://jamjamjamstack.connpass.com/event/226467/
YouTube アーカイブ

第２回も初回に引き続き多くの方にご参加いただきました。ありがとうございました。
引き続き、参考になる登壇ばかりでとても勉強になりました。

Oyuさん「Vue.jsとMicroCMSでJamstackなポートフォリオサイトを作ってみた」

Vue.jsとmicroCMSでJamstackなポートフォリオサイトを作ってみた

OyuさんによるVue.jsとmicroCMSを用いてポートフォリオを作成する方法についてです。
初心者登壇枠として、初めてのLTをしてくださいました。初LTの場に選んでいただきありがとうございます。

minami.takaoさん「Next.jsとWordPressで初めてのJamstack体験記 -Pagination実装-」

第１回に引き続き、minami.takaoさんに登壇していただきました。今回はJamstack実装でハマりがちなPaginationの実装について解説してくださいました。
前回の資料と合わせてJamstack入門する際にとても参考になる登壇でした！

shibe97「SvelteKitでJamstackを試す」

弊社のshibe97によるLTでした。SvelteKitの紹介・特徴について解説してくださっています。SvelteKitは次世代のフレームワークとして注目されている技術です。
ぜひ試してみてはいかがでしょうか....！！

Uejima Aijiさん 「70万通りのURLを持つWebサービスをNext.jsにリプレイスして高速化した話」

UejimaさんによるNext.jsの運用方法についてのLTでした。SSR/SG/ISRの使い分けやデプロイ時間を短縮させる方法などについて解説されています。
エッジコンピューティングやモノレポの方法など、とても参考になります。

Sugawaraさん「STUDIOで開発中の機能を使ってmicro cmsと連携してみる」

アーカイブからデモをご覧いただけます。
SugawaraさんにSTUDIOで開発中のBluePrintという機能を使ってmicroCMSと連携する機能についての紹介をしていただきました！
microCMSとSTUDIOとの連携に期待です....！！

jiyuujinさん「GitHub issuesをCMSとして扱う」

https://webneko.dev/posts/github-issues-usage-as-a-cms

jiyuujinさんによるGitHub issuesをCMSとして扱う方法についてです。GitHub issuesをCMSとして、運営されている勉強会の記事などを運用されているそうです。
GitHub APIの使用法・GraphQLの扱いなど参考になりました。

りゅーそう 「Jamstack Conf 2021をふまえて、ブログの構成を考え直した」

司会からもLTをさせていただきました。Jamstack Confのレポートです。
海外の事例などを参考に、Jamstack関連の技術を触るきっかけにしていただけますと幸いです。


第2回に登壇いただいた皆様誠にありがとうございました！

第3回　ジャムジャム！！Jamstack_３

イベントページ
https://jamjamjamstack.connpass.com/event/229334/
YouTube Liveアーカイブ

第3回は登壇枠に空きがあったこともあり、弊社からも登壇させていただきました。

semiguraさん「Next.js + DatoCMS で記事のプレビューができるブログを作ってみた」

semiguraさんにDatoCMSとNext.jsでプレビュー機能を実装する方法について紹介していただきました。
テンプレート機能などを活用することで、簡単に機能を実装できるとのことです！とても参考になりました。

うえむーさん「ポートフォリオサイトのお問い合わせフォームをSendgrid + microCMSで作成したお話」

うえむーさんにSendgridとmicroCMSを用いてお問い合わせフォームを実装する方法について解説していただきました。JamstackはSassを自由に組み合わせてサイトを制作できるのが、メリットだと感じています。
フォームの作成方法がとても参考になりました。

takanoripさん「Eleventy 1.0という選択肢」

https://zenn.dev/takanorip/articles/26754e75dc8753

takanoripさんにbeta版になったEleventyについてお話しいただきました。Eleventyのメリットやデメリットについて、Eleventyでの開発方法についてご紹介いただきました。Eleventyを試してみたくなりました。

りゅーそう「microCMSでimgixに入門する」

司会からmicroCMSでimgixとは何か？入門方法について解説させていただきました。
microCMSブログ内でもimgixの解説をさせていただいているのでぜひ参考にしてみてください！

λ沢「microCMSのカスタムドメイン」

https://slide.lambdasawa.me/jamjamjamstack-3/index.html

弊社のλ沢より、microCMSのカスタムドメインについて紹介させていただきました。
microCMSのインフラがどのように構築されているのか？興味のある方はぜひご覧になってみてください！

hiro08「Serverless Functions + microCMSで全文検索APIを作成する」

https://blog.microcms.io/serverless-functions-search/

弊社のhiro08より、microCMSの全文検索機能とVerselのServerless Functionsを使用して全文検索APIを作成する方法について解説させていただきました。
ブログ記事になっているので、ぜひ参考にしてみてください！

himara2「Next.js + microCMSでWebサイトを作った話」

弊社のhimara2より、Next.jsとmicroCMSでWebサイトを作った話をさせていただきました。
Firebaseとの使い分けやmicroCMSへの移行方法、Webとアプリにコンテンツを配信する方法など解説させていただきました。

shibe97「microCMSでif文を作る」

弊社のshibe97よりmicroCMSのカスタムフィールドや繰り返しフィールドの活用方法について解説させていただきました。
これらを活用することでコンテンツの出しわけなどが簡単に実現できます！ぜひお試しください。


第3回にご登壇いただいた皆様ありがとうございました！
今回は弊社からの登壇が多くなりましたが、次回以降皆さまからの登壇申し込みお待ちしております！

まとめ

「ジャムジャム！！Jamstack」は今年からスタートしたイベントですが、登壇・参加していただいた方々のおかげで実りあるイベントになりました。
参加していただいた皆様改めてありがとうございました！
運営一同、さらに皆様に「参加してよかった」と思っていただけるようなイベントとなるようにさらに改善を進めてまいります！

次回は年明け1/27(木)19:30〜YouTube Liveで行います。登壇・参加お待ちしております！
https://jamjamjamstack.connpass.com/event/233633/

スライドなどの埋め込み機能について

当記事のスライドやYouTubeなどのようにmicroCMSのリッチエディタの機能で、簡単に記事内に埋め込みをすることができます！
ぜひ、お試しください。
https://blog.microcms.io/richeditor-embed