なにこれ

Gatsby(React製の静的サイトジェネレーター)が2018年9月に2系にアップデートしたそうです。 2系の新機能について、公式ブログ(Announcing Gatsby 2.0.0)を参考に、主要な部分をピックアップして紹介します。

Gatsby採用事例

Gatsbyは、多くのデベロッパーが、ブログ、アプリ、マーケッティングサイト、ECサイト、ドキュメントなどを作る際に採用しています。
例をあげると、

などなど。 他にもまだまだあるそうで、それらはShwcase | Gatsbyで確認できます。

Gatsbyの動向

1系をリリースしてから直近1年で、かなり大きなエコシステムに成長しています。

  • コントリビューターが198人から1100人に
  • 90プルリク/週ほどをマージ中(1年前は50ほど)
  • 400万ダウンロード達成
  • 457個のプラグインがnpmで公開されている
  • 55万人がGastbyのWebサイトを訪れている
  • GitHubのスター数が10kから22.5kに
  • コントリビューターが会社を設立。OSSサポートのため370万ドルを調達し、GatsbyでWebサイトを構築・公開するのを支援するクラウドツールを公開

Gatsby2系の新機能・改善点

1. ビルドの高速化

ビルド時間が75%に短縮されています。

2. クライアント側のJavaScriptランタイムを31%削減

Gatsby製Webサイトに必ず含まれるJavaScriptのランタイムを31%削減(78.5kbから53.9kb)しています。 これはGatsbyが依存しているライブラリの改善が要因としては大きく、その中でも下記2つは大きな削減ポイントです。

  • React16へのバージョンアップによるファイルサイズ30%削減(49.8kbから34.8kb)
  • ルーター機能 react-routerから@reach/router移行ともなうルータ部分ファイルサイズ70%削減(18.4kbから6kb)

3. React 16

15から16へアップデートしています。 16ではReactエコシステムが大きく変更されていて、例えば、

  • Fragment
  • Error Boundary
  • Portals機能の追加
  • カスタムDOM属性のサポート
  • サーバーサイドレンダリングの改善
  • フィアルファイルサイズ削減

などです。詳細はReact公式サイトのブログ React v16.0 Releasedを参照してください。

4. Webpack 4

3から4へのアップデートに伴い下記改善がされています。

5. Babel 7

6から7へのアップデートに伴い下記改善がされています。

詳細はBabel公式サイトのブログ Babel 7 Releasedを参照してください。

6. @reach/router導入によるアクセシビリティ改善

ルーター機能をreact-routerから@reach/routerに切り替えています。 それによってスクリーンリーダーに対応しアクセシビリティが向上しています。 ちなみに@reach/routerの作者はreact-routerと同じRyan Florenceなので、自分のGatsby製のWebサイトを2系に移行するときも手間なく簡単です。

7. GraphQL stitching

GraphQL stitchingを実験的にサポートしています。 GraphQL APIとGraphQLステッチングを提供するサービスがますます増えているなかで、 Gatsbyではソースプラグインでラップすることなく直接APIを使用できます。

8. Ludicrous Mode(爆速ホットリローディング)

ホットリローディングが爆速になっています。 そのためマークダウン編集がほぼリアルタイムでブラウザに反映されるようになっています。

9. Layoutの廃止

Gatsby1系のLayout機能は便利な反面、Reactのコンポーネント構成の規則を破るもので混乱を招く要因だったので2系では廃止されています。 ただ廃止はされていますが、プラグインgatsby-plugin-layout を使うことで2系でもLayout機能を使うことが可能です。

10. StaticQueryタグ

「コンポーネントでデータを取得するにはどうすればいいの?」 という質問が非常に多かったらしく、任意のコンポーネントでデータをGraphQLで取得できるStaticQueryというタグが追加されています。

11. gatsby-plugin-offline改善

多くのバグフィックスと機能拡張が施されたようです。

12. トレース機能

どのプラグインやパーツのビルドに時間がかかっているかを可視化する機能が追加されており、ビルドのボトルネックをデバッグする際にとても便利です。

まとめ

記事を読んでみて、Gatsby2系はビルド速度が向上して開発環境周りのサポートが充実したなぁという印象です。
特にLudicrous Mode(爆速ホットリローディング)は、実際に試してみて感動しました。 ほんとにマークダウンの編集がリアルタイムにブラウザに反映されるので、今後ますますGatsbyでのWebサイト構築が簡単になるのではないでしょうか。
ちなみに、store.gatsbyjs.orgでステッカー、Tシャツ、靴下を販売しているそうです。コレ結構ほしい。