2019年11月トロントで開催されたVueConfの『Building Blazing Fast Sites with Gridsome』をYoutubeでみました

Blazing FastってのにひかれてついついみてしまったYoutubeのビデオをみました。講演者は@jakedohmさん。

GridsomeはVue.js開発者用のJAMstackフレームワークですよ、と

JAMstackとにかく最近流行ってますわ、と。

最近、皆んな自分のブログをGatsbyで書き直したりしてるよね、と。笑

そしてGridsomeの話へ。もし、GatsbyとかJekyllとかそれ系のヤツと同じような恩恵が受けられるフレームワーク。

1. Developer Experience

プラグインエコシステム。Vue.jsのアプリケーションに馴染みがあればCLIを使ってプラグインをpullしてきたりできるけど、それと似たような体験。

そして、Source Plugins。例えばWordPressとかSalesforceとかそういったCMSを使ってデータを扱っているのであれば、プラグインを使って簡単にそのデータを取得することが出来る。

User Experienceか、Deveoper Experienceか。

この文脈では、GridsomeはDeveloper ExperienceのためにUser Experienceが損なわれるようなことはない。DXにレバレッジをかけて良いUXを構築できるように。つまり正しいものを簡単に作れる。

2. Performance

どのようにして速さを実現しているか？

まずはPre-rendered HTML。これは疑いようもなく既にレンダリングされているHTMLを表示するのが早いに決まっている。

次にAutomatic code-splitting。例えば全てのデータやCSS、JavaScript、そしてHTMLを一つのファイルに押し込めたら、、っていうところを、インテリジェントなやり方で分割するので、ロードされるのはユーザーがその時に必要なものだけ。

PRPLパターン。Googleによってリリースされたものでパフォーマンスのために推奨されている。詳細は以下。

• Push critical resources for the initial URL route
• Render initial route
• Pre-cache remaining routes
• Lazy-load and create remaining routes on demand

Smart link prefetching。これはクリックされるかもっていうリンクは事前に読み込んでおく。インテリジェントなインターセクション。JavaScriptで組み立ても終わってる状態にすることでクリックされた時はレンダリングするだけ。

Progressive Image Loading。最初はbase64のblur(ぼかし)な画像を表示しておいて遅延ロードさせる。これによって体感的によくなる、と。

CDN-based hosting。Digital OceanとかS3とかNetlifyとかStaticなものを置いておくだけなのであればCDNを使った方が早いわけで。

3.Security

単純にStaticなファイルが置いてあるだけであれば、サーバーリソースのハックがされようがないしね。

4. Scaling is easier and less costly

Staticなサイトであれば、サーバーは要らない。Eコマースのバックエンドとかは別にあるものという位置づけなので、特にスケールさせるのにお金かからないはず。サーバーを沢山並べるのと比べてStaticなコンテンツを配信させるのに9割以上コストはかからない。

そしていよいよGridsomeの話

Gridsomeって何をするもの？

1. Renders Vue components/pages to HTML & CSS at build time

メインパート。

2. centralized GraphQL store for any data you will utilize in Vue templates/components

Gridsomeはビルドするのにどういうデータかっていうのを知らなければいけないわけなんだけど、GraphQLを知ってれば、どんなタイプのデータでも簡単に取ってくることができる。Axiosとかfetchとかhookとかいらない。

3. Abstracts Vue configuration

out-of-the-boxで動くので自分でVueのコンフィギュレーションとかしなくてイイ。

4. Provides features that are outside Vue

progressive image loadingとかVueのスコープに入ってないようなものが無料でついてくる。

5. best practices for performance, SEO, and UX the default

SEOとかイケてるUXとか。

デモ

ってことで、Blazing FastなサイトをGridsomeで作ってこうぜって話しになります。

先日https://www.yoshida.red/2020/06/12/jamstack/ | ヨシダレッドっていう記事を書いたけど、色々躓いたんだけど、先にこのデモを見ておけばもっとスムーズに行ったかな？とか思います。

GraphQL explorerを使ったデータの取得の解説があってから、About.vueってVueファイル作ってからそのルートに行って、Hello Tronto!みたいなページを出していって、そっからレシピとかプラグインとか紹介した後に、gridsome.config.jsにcraftってプラグインを登録して(コンフィグ変えた時はサーバーを再起動する)、GraphQLのスキーマが更新されていることを更新してちょっとやりとりして、page-queryタグの中にクエリを書いていって、Vueのdev toolで取得したデータを確認したりとか。ってな感じで開発を進めていってカクテルを作るレシピサイトが出来上がり〜的な。

最終的にはビルドして出来たアウトプットをNetlify Dropでデプロイしてインターネットに公開できたよーっていうところまで。

まとめ

VuePressはドキュメントには良いし、Nuxtはstaticか否かによらずアプリにはとても良い。Gridsomeはstaticなサイトやアプリに使うと良い感じ。それぞれ仲良いし、どういう時に何を使わなきゃいけないとかってわけじゃないよ、と。

ってことで、『So, should you use Gridsome？』って質問に、答えは👇のように『わかりまへんわ。笑』って感じｗ

そして、Theodore Rooseveltの引用として👇ですよん、と。

In any moment of decision, the best thing you can do is the right thing, the next best thing is the wrong thing, and the worst thing you can do is nothing.

Go build stff. Thank you♥ ってな締めくくりでした。

---

このちょっと肩の力抜けた感があるの好きだな〜