個人的にはGatsby推しです

おくだ

最近、Gatsbyを触る機会があったので以前触ったことのあるVuePressと比較してみました！

SSG（静的サイトジェネレータ）とは

WordPressなどの動的なCMSとは違い、
静的サイトジェネレータ（以下、SSG）はHTMLとCSSで構成されるため動作が非常に軽いのが特徴です。

また、DBを持たないためセキュリティ面でも優位性があります。

なぜ“ジェネレータ（生成するもの）”かというと、JSで書いたものをビルドすると静的なHTMLとして吐き出されるためです。

そのビルド前のJSですが、GatsbyはReact、VuePressはVueで書きます。

おおよそ、SSGはMarkdown記法をサポートしており、そこもエンジニアから好かれる一因となっています。

Gatsbyのほうがいいところ

GitHubのスター数が多い

gatsbyjs/gatsby

https://github.com/gatsbyjs/gatsby

Build blazing fast, modern apps and websites with React - gatsbyjs/gatsby

GitHubのリポジトリの人気度を表す指標の1つ、GitHubのスター数。

プラグインやフレームワークを選定する際にはこれが非常に重要です。
なぜなら機能のアップデートやバグのfixが頻繁に行わなければ、開発に支障がでるからです。

その点Gatsbyは50k以上のスターを獲得しており、現在進行系で流行っています。
それゆえにコントリビューションも盛んで、日々アップデートされています。

また、流行っているということは情報もネットに溢れていること。
何かで困ったとき、公式ドキュメントを読んでもピンとこない時は、ググって調べることができます。

どうしてもスター数の少ないものだとググっても欲しい情報が出てこないときがありますからね。

一方で比較対象のVuePressのスター数は19kです。
Gatsbyに比べると少ない数になっています。

デザインテーマが豊富

Starter Library

https://www.gatsbyjs.com/starters/?

Gatsby Starters: Library

ブログだけでなく企業サイト、商品紹介LPなど、テーマが豊富に揃っています。

自分でデザインをしないエンジニアがサクッとサイトを作りたいならGatsbyのほうが早いかも！

一応、VuePressにもテーマがあるんですが、非常に数が少ないです。
みんなデフォルトのテーマで使っているから、どれも似たサイトになりがち。

ちなみにVuePress公式サイトがデフォルトのテーマです。

VuePress

https://vuepress.vuejs.org

Vue-powered Static Site Generator

もともとドキュメントなどをまとめるような用途で使われるので、
Gatsbyより幅が狭いのは仕方のないことかもしれません。

VuePressのほうがいいところ

開発者がEvan You氏

言わずとしれた（？）Vue.jsの始祖、Evan You氏が開発したのでVue.jsとの相性はもちろん抜群です。

信頼性もあり、これからの継続的な開発が期待されます。

また、Vue.jsの設計思想がVuePressにも引き継がれており、Vue.jsが好きな人ならかなり親和性は高いと思います。

GraphQLを使わない分、手軽に始められる

そう、GatsbyはGraphQLを使うため、カスタムするにはGraphQLの知識が必要です。

GraphQL自体、かなりシンプルでわかりやすくなっていますが学習コストはやはりそれなりにあります。
一方でVuePressはGraphQLを使わないため、Vue.jsさえ理解していればある程度カスタムすることは可能です。

まとめ

個人的な感覚としては、

技術ドキュメントをまとめるならVuePress、
サイトを作成したいならGatsby

が適していると思います。

やはり大きな差はテーマの数。
VuePressだと企業サイトやLPなどを作ろうとした時にしんどそうですね。

どちらも1時間ほどでビルド〜公開することが可能で、非常にお手軽です。

この機会にぜひお試しください 🙂

WEBサイトなどのご相談はこちらからどうぞ

お問合せはこちら