Hello Gridsome！
こんにちは、フロントエンドエンジニアのさとまみです。
梅雨入りしましたね〜。私は6月半ばの生まれなのですが、昔から「初夏に生まれた」という表現に憧れがある、現実は梅雨生まれのジメジメニンゲンです。
さて、ちょっと前にGridsome（https://gridsome.org/）に挑戦しました〜
こちらが挑戦してできあがったものです（2019/6/10現在）→ https://satomami.com/
GridsomeはGatsby.js（Reactベース）のVue.js版という感じのJAMstackな静的サイトジェネレータです！
静的サイトというと普通の従来の技術な感じがしますが、JAMstackは動的なデータを扱う、新しい静的サイトの技術です。
JAMとは JavaScript / API / Markup の頭文字です。
JavaScriptとAPIで（CMSなどの）動的なデータを取ってこれることと、事前にビルドして静的なHTMLにしておくことがJAMstackなんですね。
そうすることによる利点は、閲覧者にとって表示速度が早いこと、セキュリティが高まること、成果物が静的になるので配信方法が自由になることなどが挙げられますが、特に開発者としては、サーバーサイドとクライアントサイドの開発を分けられるので気持ちがいいです！
従来のモノリシックなやり方。役割が分離されていなくてつらいです。
JAMstackなやり方！疎結合は正義です。
画像の出典：https://speakerdeck.com/biilmann/the-jam-stack
JAM stackについてはこちらの本がわかりやすいです！
『JAMstack 完全入門 ハイパフォーマンス Web サイト構築』
https://soussune.booth.pm/items/1035934
今回はもともとあったWordPress製のブログをGridsomeにしたんですが、WordPress用のスターターキットが用意されているので、GraphQLをちょこちょこ書き換えてCSSを当てるくらいで爆速でブログが出来上がりました！
今までのレンタルサーバーはデータベース用にしてしまい、Netlifyにデプロイしています。
JAMstackにすると、静的なサイトを公開しているだけなので、WordPressでブログを更新しても見えているサイトは更新されないのですが、GitHubとWebhookを使い連携させて、WordPressを更新したら自動的にNetlifyが再ビルド・デプロイしてくれるようにします。
Vue.jsで作ったようなSPAで心配なのはOGPなどのSNSでシェアされる情報です。SPA（シングルページアプリケーション）は1枚のページしかなく、ページ遷移をするのではなく内容をJavaScriptなどで書き換えるWebサイトのことで、FacebookとTwitterのクローラはまだJavaScriptを解釈してくれないので、JavaScriptで書き換わったOGPを見てくれないからです。なので、色々工夫してあげないといけません。
それに対してGridsomeは事前ビルドされ、単なるHTMLが出来上がるので、OGP関連も安心です。
Gridsomeはまだv0.6で、正式バージョンではないので不安定ですが、秋にはv1.0が出るらしく、実務で使える日が楽しみです。
