BT

Ready for InfoQ 3.0? Try the new design and let us know what you think!

Reactベースの静的サイトジェネレータGatsbyの作者、Kyle Mathews氏とのQ&A

| 作者: David Iffland フォローする 4 人のフォロワー , 翻訳者 sasai フォローする 0 人のフォロワー 投稿日 2017年7月30日. 推定読書時間: 5 分 |

原文(投稿日:2017/07/11)へのリンク

一連のスタートアップを経て、Kyle Mathews氏は仕事をやめ、サイドプロジェクトの一つにフルタイムで取り組み始めた。そのGatsbyというプロジェクトは「React.js以外のものを使わないようにする」ことを可能にするWebサイトを作りたいという願いから生まれた。

それ以来、Gatsbyはバージョン1.0になり、プラグインアーキテクチャ、ビルドタイムGraphQLベースのデータレイヤ、PWA(Progressive Web Apps)サポートなどを含む様々なツール群へと発展している。CLIやBabelとwebpackで構築されたプリコンフィグ済みのビルドプロセスも含まれている。

Gatsbyのスピードを知らしめようと、Mathews氏はInstagramクローンを書いた。そこで彼は、できるだけ高速にスクリーン上のピクセルを得るためにGoogleのPRPLパターンをいかに使っているかを紹介した。そのスピードの一部は「各ページの静的HTMLレンダリングを作成して、初期ロードを可能な限り高速にしている」おかげだ。加えて、プリフェッチが重い処理を助けていると彼は語っている

Gatsbyは非常に高速です。クライアントにおけるリソースのプリフェッチとクライアントサイドのトランジションのおかげです。Gatsbyのサイトをクリックしていると、まるでローカルサイトにいるようだという人もいます。

InfoQとのインタビューで、Mathews氏はGatsbyへのモチベーションと、Gatsbyがどこへ向かっているのかについて語ってくれた。

InfoQ: Gatsbyはどんな問題を解決しようとしているのですか?

Kyle Mathews: Gatsbyは、2017年のWebサイトフレームワークはどうあるべきか、という問題を解決しようとしています。Webフレームワークの試みのほとんどは、Webの第1世代/第2世代からのものです。それらは素晴らしく、成熟したフレームワークです。しかし、信頼性の低いネットワークにあるローエンドのスマートフォンからアクセスする何十億もの人たちに支配された、今日の巨大なWebのために構築されたものではありません。

Webサイトがスマートフォン上で高速になるように、Gatsbyはかなり独立して動いています。コードとデータをプリフェッチして、コンテンツをクライアントでレンダリングすることができます。

スマートフォンとブラウザは、Web上ですばらしい体験を提供するのに十分速いのです — ただ高速な有線ネットワーク接続を前提にした古いフレームワークが邪魔をしているだけなのです。小さなスーパーコンピュータは、信頼性の低い携帯ネットワークを待たざるを得ないのです。

サイトが高速にロードされ、ネットワーク状況によらずナビゲーションが非常に素早く感じられるように、Gatsbyには豊富なインテリジェンスが備わっています。

レスポンシブデザインはモバイルWebにとって重要な最初のステップでしたが、私たちは本気で、サイトをクライアントでレンダリングし、コンテンツをインテリジェントにプリフェッチするモデルへと移行する必要があります。

InfoQ: Reactベースのもの、そうでないものも含めて、他の静的サイトジェネレータと比べてどうですか?

Mathews: Gatsbyは従来の静的サイトジェネレータの恩恵をすべて継承しています。例えば、すぐれたパフォーマンス、高いセキュリティ、低コストなスケーリング、すぐれた開発者体験(誰でもデータベースマイグレーション?)などです。Contentful、Wordpress、DrupalといったCMSとの豊富なインテグレーションと、デフォルトでサイトを驚くほど高速ににする各種機能(ルートベースのコード分割、サービスワーカー、オフラインサポートなどなど)を実現することで、Gatsbyのv1は静的サイトジェネレータの新たな領域を獲得しています。

開発者体験では、他の静的サイトジェネレータは、モダンなCSSとJSのために助けてくれることはほとんどありません。(通常はMarkdownを)HTMLにコンパイルするだけで、モダンなビルド/アセットパイプラインのセットアップは自分でやらなくてはなりません。Gatsbyには最初からすべて用意されており、最新のツールとテクニックを用いて、洗練されたWebサイトを構築することができます。

InfoQ: Gatsbyの寿命についてはどうですか?

Mathews: Gatsbyにはかなり勢いがあり、2年しか経っていないのに、すでに静的サイトジェネレータのナンバー4になっています。Gatsbyで立ち上げられたり開発されている人気サイトもかなりあります。現在、コアへのコントリビュータは200名を超え、Gatsbyのダウンロードも500,000を超えています。Gatsbyが長生きするために重要なのは、Gatsbyのコア開発資金のための持続可能なビジネスモデルを確立すること、そして、プラグインとデータソースとのインテグレーションを開発・保守する、しっかりとしたオープンソースコミュニティを確立することでしょう。

InfoQ: 次は何でしょうか?

Mathews: 個人的にフォーカスしているのは、Gatsbyのコア開発のための資金調達への取り組みです。プロジェクトのメインフォーカスは、API、CMS、データベースとのデータ統合をどんどん作り上げて、既存のサイトをGatsbyに移行しやすくしたり、モダンなWebサイトフレームワークで再構築しやすくすることです。Gatsbyはすでにプロダクションレディで、洗練された非常に高速なWebサイトを構築できます。リストの次にあるのは、データをGetsbyに変換するのが簡単であることを確かめることです(それが今どこにあろうとも)。

はじまって2年近くになるが、プロジェクトはまだ初期段階にあり、必要なピースはたくさん残っている。プラグインアーキテクチャのおかげで、コミュニティはそのギャップを埋めることができるはずだ。今のところ、SASS、TypeScript、Preactなどをカバーする約35のプラグインがある。

詳しくは、GitHub リポジトリもしくはGatsbyホームページを見てみよう。

 
 

Rate this Article

Adoption Stage
Style
 
 

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション
BT