Slide 1
Slide 1 text
2020.01.21 @ v-sendai #5
株式会社TAM 菅家大地
Gridsome × Headless CMSで
JAMstackなWebサイトを作る
Slide 2
Slide 2 text
株式会社TAM フロントエンドエンジニア
菅家 大地 / Daichi Kanke
元デザイナーのフロントエンドエンジニア
福島→宮城→東京→宮城
PWA Night / 仙台フロントエンドUG /v-sendai
Vue.js / Nuxt.js / PWA / Monaca
daichi.kanke
@kan_dai
Slide 3
Slide 3 text
JAMstack?
Slide 4
Slide 4 text
Jamstackは特定のテクノロジーに関するものではありません。これは、パフォー
マンス、セキュリティ、スケーリングのコストを削減し、開発者のエクスペリエンス
を向上させるWebサイトとアプリを構築する新しい方法です。
事前にレンダリングされたサイトは、JavaScriptと、APIを介して利用可能なブラウ
ザおよびサービスの拡張機能により拡張できます。
https://jamstack.org/
JavaScript
APIs
Markup
Slide 5
Slide 5 text
https://employment.en-japan.com/engineerhub/entry/2019/12/10/103000
Slide 6
Slide 6 text
https://employment.en-japan.com/engineerhub/entry/2019/10/24/103000
宣伝：僕の記事もあります
Slide 7
Slide 7 text
JAMstackが
話題なのでなんか作りたい
Slide 8
Slide 8 text
Portfolioサイトを作成中…
仕組みの部分だけはできたので、今日はそこの部
分をメインで紹介できればと思います
Slide 9
Slide 9 text
開発
コンテンツ入力
push
ビルドを実行して、
静的ファイルのみ配信
記事更新などを
トリガーにビルド実行
構成
Slide 10
Slide 10 text
● React製の静的サイトジェネレータのGatsbyを参考に作られた
Vue.jsの静的サイトジェネレータ
● GraphQLでのデータ取得
● WordPressやContentfulのプラグインをインストールするだけで、
簡単にデータ取得ができるようになる
● 2020/1/21時点では v0.7.12のベータ版
● https://gridsome.org/
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
/src/pages/index.vue
Slide 13
Slide 13 text
● 今話題のHeadless CMSの一つ。従来のCMSのようにテンプレートを表示す
る部分を持たず、APIだけ提供することに特化している
● マークダウンファイルなどからのページ作成もできるが、興味あったので
Headless CMS使いたかった
● 日本製のmicroCMSを使おうと思っていたが、Gridsomeのプラグインがある
contentfulにした(自分で設定を書けば microCMSのデータも取得できるようです )
● 無料の範囲あり
● https://www.contentful.com/
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
gridsome.config.js
環境変数が使えるのでリポジトリに
TOKENなどをアップしなくて良い
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
$page.hoge で取得した要素に
アクセスできる
/src/pages/index.vue
Slide 21
Slide 21 text
gridsome.config.js
詳細ページなどを作る場合は
テンプレートを指定する
Slide 22
Slide 22 text
/src/templates/WorksDetail.vue
Slide 23
Slide 23 text
● 静的コンテンツのホスティングサービス
● GitHub / GitLab / Bitbucket のリポジトリと連携して、pushやmergeなどが
あったらNetlifyCIがビルドやデプロイをしてくれる。とにかく簡単
● WebHookを使ったcontentfulとの連携も簡単
● 無料プランあり
● https://www.netlify.com/
Slide 24
Slide 24 text
環境変数の設定
ビルドコマンドや出
力先の設定
Slide 25
Slide 25 text
NetlifyとContentfulの連携
Netlify
contentful
Slide 26
Slide 26 text
時間があればデモ
Slide 27
Slide 27 text
https://github.com/KanDai/portfolio
Slide 28
Slide 28 text
おまけ (Vueの静的サイトジェネレータ個人的所感)
● Nuxt.js → SPAなどのWebアプリ。SSR必要な時。
● Gridsome → 静的サイトやブログ
● VuePress → ドキュメント系？
Slide 29
Slide 29 text
まとめ
● Headless CMSやJAMstack流行りそう
● GridsomeやHeadless CMSを使って
簡単にJAMstackなサイトを作れる
● Vue.jsが使える場面が増えている
(Vue.jsに限らないモダンなフロントエンド技術や開発手法)
Slide 30
Slide 30 text
ご静聴ありがとうございました