React製の静的サイトジェネレータがあるということなのでお試ししてみている。(整髪剤じゃあないよ)

header

Hugo を入れたばっかりですが、インターネットをさまよっていて見つけた Gatsby という静的サイトジェネレータをお試しに導入してみました。 (ひとまず入れて読めるようにしただけなのでデザインとかはまだすっからかんです・・・)

GatsbyJS

Gatsby とは

Gatsbyとは

Blazing-fast static site generator for React ということらしく「すごくはやい静的サイトをReactで作れるようにするフレームワーク」ということのようです。
デフォルトで WordPress や Markdown、JSON などをデータソースとして Graphql にビルドしてサイトを構築するというような仕組みになっているようです。

Hugo と Gatsby の違い

今まで使っていた Hugo との違いは下記の通り。

  • React.js 製
    • React Component で気に入ったものがあれば組み込むことができる
    • Virtual DOM による画面更新の速さが享受できる
    • ルーティング機能によりページのリロード無しで画面遷移ができヌルヌル動く
  • 豊富なプラグイン
    • 標準で提供される starter-template で下準備がされた状態から始められる
    • 画像の最適化処理やってくれるようなプラグインがあるため転送量を抑えることができる
  • Graphql 対応
    • generate して使うので、多分あまりメリットはないかも・・・?
  • PWA 対応
    • ⚡ の付いてるアレですね。
    • 雑に言うとWebサイトがアプリのように振る舞えるような機能です。

TypeScript は?

gatsby-config.js gatsby-node.js という2つの設定ファイルを除いて、全て *.tsx (JSXのかけるTS形式) で記載しています。
gatsby-plugin-typescript というプラグインを npm で取得して gatsby-config.js に追記するとすぐに使えるようになります。

gatsby/packages/gatsby-plugin-typescript at master · gatsbyjs/gatsby · GitHub

Nuxt.js は使わなかったの?

最初は Nuxt.js で同じことをやって見ようと探していたところ、 nuxtent という、Nuxt.js で Vue.js の旨味を活かしつつブログを作れるようなプロジェクトがありました。しかしながらメンテナの興味が別に変わりつつあり新しいメンテナを募集しているとのこと。

screenshot02

GitHub - nuxt-community/nuxtent-module: Seamlessly use content files in your Nuxt.js sites.

・・・そんなわけでひとまず今回は Gatsby でということなのでした。もしかすると次のタイミングで Nuxt.js + なにかに置き換わってるかも・・・? なんと言っても Vue.js の Single File Component が素晴らしいのとか着慣れているのもあり、使って行きたかったのですが、今回は React になったのでもし同じ様にやっていくなら styled-components でやっていくことになるかなという雰囲気を感じ取っております。

なお Nuxt.js で Markdown ベースでブログサイトを作る時に参考になりそうな記事を見かけたのでメモメモ。

まとめ

ひとまず Gatsby を導入してみました。触った感じ React の機能が生かされておりページ遷移がキビキビしているなど体感的に早いなという雰囲気を感じ取りました。 PWA とかはまだためしてないので、別の機会に収穫があったら書こうかなと思います。 実際にやってみたらアプリっぽく振る舞ってくれました。これからしばらくポチポチいじっていってみようと思います。


関連リンク