Gridsome × Headless CMSでJAMstackなWebサイトを作る

2020年1月21日に行われたv-sendai #5で使用したスライドです。

スライド内のリンク

JAMstack
https://jamstack.org/

エンジニアHubのJAMstackの記事
https://employment.en-japan.com/engineerhub/entry/2019/12/10/103000

エンジニアHubのPWAの記事
https://employment.en-japan.com/engineerhub/entry/2019/10/24/103000

Gridsome
https://gridsome.org/

contentful
https://www.contentful.com/

netlify
https://www.netlify.com/

ソースコード
https://github.com/KanDai/portfolio

Transcript

1. 2020.01.21 @ v-sendai #5

   株式会社TAM 菅家大地

   Gridsome × Headless CMSで

   JAMstackなWebサイトを作る

   

   View Slide

2. 株式会社TAM フロントエンドエンジニア

   菅家 大地 / Daichi Kanke
   元デザイナーのフロントエンドエンジニア

   福島→宮城→東京→宮城

   PWA Night / 仙台フロントエンドUG /v-sendai

   Vue.js / Nuxt.js / PWA / Monaca 

   daichi.kanke
   @kan_dai
   

   View Slide

3. JAMstack?

   

   View Slide

4. Jamstackは特定のテクノロジーに関するものではありません。これは、パフォー
   マンス、セキュリティ、スケーリングのコストを削減し、開発者のエクスペリエンス
   を向上させるWebサイトとアプリを構築する新しい方法です。

   事前にレンダリングされたサイトは、JavaScriptと、APIを介して利用可能なブラウ
   ザおよびサービスの拡張機能により拡張できます。

   https://jamstack.org/
   JavaScript
   APIs
   Markup
   

   View Slide

5. https://employment.en-japan.com/engineerhub/entry/2019/12/10/103000
   

   View Slide

6. https://employment.en-japan.com/engineerhub/entry/2019/10/24/103000
   宣伝：僕の記事もあります
   

   View Slide

7. JAMstackが

   話題なのでなんか作りたい

   

   View Slide

8. Portfolioサイトを作成中…
   仕組みの部分だけはできたので、今日はそこの部
   分をメインで紹介できればと思います
   

   View Slide

9. 開発
   コンテンツ入力
   push
   ビルドを実行して、
   静的ファイルのみ配信
   記事更新などを
   トリガーにビルド実行
   構成
   

   View Slide

10. ● React製の静的サイトジェネレータのGatsbyを参考に作られた
    Vue.jsの静的サイトジェネレータ
    ● GraphQLでのデータ取得
    ● WordPressやContentfulのプラグインをインストールするだけで、
    簡単にデータ取得ができるようになる
    ● 2020/1/21時点では v0.7.12のベータ版
    ● https://gridsome.org/
    

    View Slide

11. View Slide

12. /src/pages/index.vue
    

    View Slide

13. ● 今話題のHeadless CMSの一つ。従来のCMSのようにテンプレートを表示す
    る部分を持たず、APIだけ提供することに特化している
    ● マークダウンファイルなどからのページ作成もできるが、興味あったので
    Headless CMS使いたかった
    ● 日本製のmicroCMSを使おうと思っていたが、Gridsomeのプラグインがある
    contentfulにした(自分で設定を書けば microCMSのデータも取得できるようです )
    ● 無料の範囲あり
    ● https://www.contentful.com/
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. gridsome.config.js
    環境変数が使えるのでリポジトリに
    TOKENなどをアップしなくて良い
    

    View Slide

18. View Slide

19. View Slide

20. $page.hoge で取得した要素に
    アクセスできる
    /src/pages/index.vue
    

    View Slide

21. gridsome.config.js
    詳細ページなどを作る場合は
    テンプレートを指定する
    

    View Slide

22. /src/templates/WorksDetail.vue
    

    View Slide

23. ● 静的コンテンツのホスティングサービス
    ● GitHub / GitLab / Bitbucket のリポジトリと連携して、pushやmergeなどが
    あったらNetlifyCIがビルドやデプロイをしてくれる。とにかく簡単
    ● WebHookを使ったcontentfulとの連携も簡単
    ● 無料プランあり
    ● https://www.netlify.com/
    

    View Slide

24. 環境変数の設定
    ビルドコマンドや出
    力先の設定
    

    View Slide

25. NetlifyとContentfulの連携
    Netlify
    contentful
    

    View Slide

26. 時間があればデモ

    

    View Slide

27. https://github.com/KanDai/portfolio
    

    View Slide

28. おまけ (Vueの静的サイトジェネレータ個人的所感)
    ● Nuxt.js → SPAなどのWebアプリ。SSR必要な時。
    ● Gridsome → 静的サイトやブログ
    ● VuePress → ドキュメント系？
    

    View Slide

29. まとめ
    ● Headless CMSやJAMstack流行りそう
    ● GridsomeやHeadless CMSを使って
    簡単にJAMstackなサイトを作れる
    ● Vue.jsが使える場面が増えている
    (Vue.jsに限らないモダンなフロントエンド技術や開発手法)
    

    View Slide

30. 

    ご静聴ありがとうございました

    

    

    View Slide