マーシーサットンとポッドキャストエピソード20を壊す：ギャツビーとは何ですか？

今日はギャツビーについて話します。 それは何であり、それはあなたのWeb開発スタックにどのように適合しますか？ ドリュー・マクレランが専門家のマーシー・サットンと話をして調べます。

メモを表示

• ギャツビー
• Twitterのマーシー
• マーシーの個人ウェブサイト

毎週の更新

• 「Googleの助けを借りて、サイトを高速、アクセス可能、安全にする」
  DionAlmaer著
• 「ギャツビーでのプラグイン開発を理解する」
  AleemIsiaka著
• 「TauriとVue.jsを使用した小さなデスクトップアプリの作成」
  KelvinOmereshone著
• 「Eコマースの出荷および在庫アラートからのパニックの除去」
  スザンヌ・スカッカ
• 「VuejsとNuxtjsのCSSトランジション」
  ティミ・オモイエニ

トランスクリプト

Drew McLellan：彼女はGatsbyのDeveloperRelationsチームのリードエンジニアです。 以前は、オープンソースのaxe-coreアクセシビリティテストライブラリに取り組み、Adobeでアクセシビリティエンジニアとしても働いていました。 彼女は障害を持つ人々のためにウェブを改善することに情熱を持っており、会議でそれについてしばしば話します。 2016年、O'Reillyは、アクセシビリティの取り組みに対してWebプラットフォーム賞を授与しました。

ドリュー：彼女はまた、地元の地域でシアトルとNW Tech WomenMeetupsのアクセシビリティを共同で率いています。 つまり、彼女は熟練したエンジニアであり、アクセシビリティの専門家であることがわかります。 しかし、彼女がエンジェルフォールを樽に入れて送りたいと思っていることを知っていましたか？ 私の壊滅的な友人はマーシーサットンを歓迎してください。

マーシー・サットン：こんにちは。

ドリュー：こんにちは。 マーシー。 元気ですか？

マーシー：私は壊している。 元気ですか？

ドリュー：私はとても元気です。 ありがとう。 今日はギャツビーについてお話ししたいと思います。 前回のエピソードでミナ・マーカムとのReactの学習について話していたときに出てきたので。 直接の経験がないことについて意見を述べるというインターネット上の典型的な人をやる危険があることに気づきました。 だから、それは私たちがスマッシングで物事を行う方法ではありません。

ドリュー：そして、ギャツビーを適切にカバーしていることを確認したい。 そして、それを内外で知っている誰かと話すよりも、それを行うためのより良い方法はありません。 だから、おそらく私はギャツビーという名前を聞いたことがあると思います。 しかし、ウェブサイトを構築するときに、それがスタックのどこに収まるのかわかりません。 ギャツビーとは正確には何ですか。

マーシー：ギャツビーはウェブサイトジェネレーターで、現在Reactを使用しています。 しかし、それはあなたのために静的なウェブサイトを作成し、それは完全なReactウェブアプリケーションに再水和します。 したがって、ユーザーが高速にロードするHTMLファイルをコンパイルする高速ビルドで、両方の長所を実際に活用できます。 そして、JavaScriptを使用してこのすべての拡張機能を利用して、本当にインタラクティブな動的Webアプリを作成できます。

マーシー：それで、参加するのは本当にエキサイティングなスペースです。そして、私はドキュメンテーションで学習側に取り組んでおり、現在はDevrelチームで、JavaScriptによるアクセシビリティの課題を理解し、可能な限り優れたものにすることに注力しています。裏返しに修正しようとしています。

Drew：私たちの多くは、静的サイトジェネレーターの概念に精通していると思います。 そしてギャツビーはその役割に広く適合しているようです。 しかし、私には、ほとんどのSSGよりもはるかに進んでいるように見えます。 また、ほとんどのサイトジェネレーターはフロントエンドコードに依存しません。 Gatsbyを使用すると、Gatsbyコードがサイトの一部として実行されることになります。 それは公正な評価ですか？ もしそうなら、ギャツビーは実際にあなたのフロントエンドでどのようなことをしていますか？

マーシー：はい、その最大の部分はクライアント側のルーティングだと思います。 そのため、ギャツビーは現在、内部でリーチルーターを使用しています。 それは一種の独自の実装を行います。 しかし、それは静的サイトを初めてロードするときにHTMLファイルがそこにあるという部分です。 したがって、ユーザーが何らかの理由でJavaScriptをオフにした場合でも、サイトはそこにあり、コンテンツが残っているはずです。

マーシー：しかし、JavaScriptが有効になっている場合は、このハイドレーションステップが発生し、Gatsbyサイトでリンクを使用すると、そのページからリソースがプリフェッチされるため、読み込みが速くなります。 つまり、Gatsbyが提供するこのJavaScriptレイヤーですべてが有効になります。 そしてそれを超えて、それはあなたがあなたのサイトで使用しているものの種類がそのJavaScriptバンドルに含まれることになるかどうかに本当に依存します。

マーシー：しかし、アクセス可能なインターフェースのように、多くの双方向性を使用するものにとっては、それは良い場所です。 私にとって、JavaScriptをいつでも利用できること、そしてマークアップを適切な場所に置くことを本当に楽しんでいます。 HTML、JavaScript、CSSをすべてきちんと結合し、Gatsbyの構築にバリエーションの余地があるかどうかは、好みの問題だと思います。

マーシー： CSSやJSのようなものを常に使用する必要はありません。 しかし、それは本当にあなたがあなたのウェブサイトを書いている間にあなたが利用できるその動的なJavaScriptレイヤーの力を手に入れることについてです。 このアドオンを別のファイルに追加するのとは異なります。

Drew：静的サイトジェネレーターが通常どのように機能するかを考えるとき、おそらくMarkdownファイルのコンテンツを考えています。 そして、ジェネレーターはそのコンテンツを実行し、それをテンプレートとマージして、Webサイトのページである数十、数百、数千のHTMLファイルを作成します。 Reactのサイトやアプリについて考えるとき、インターフェイスがReact on theflyによって作成されるシングルページエクスペリエンスについてもっと考えています。 だから、あなたはギャツビーがそれらの両方をしていると言っているのですか？ すべてのページを作成し、JavaScriptで拡張していますか？

マーシー：そうです。 Gatsbyはビルド時にNode.jsを使用し、Reactコンポーネントを調べて、HTMLファイルにコンパイルします。 正直なところ、Gatsbyを初めて見たときは、JavaScriptをオフにせず、「わかりました。ここに他のページはありますか、これは何ですか？」 そして、ギャツビーがデフォルトでそのように機能することをとてもうれしく思いました。 それはあなたのreactコンポーネントからビルドされたファイルを作成します、それは素晴らしいです。

マーシー： JavaScriptを使用しているので、よりプログレッシブエンハンスメントのアプローチを検討しました。 ユーザーのためにプログレッシブエンハンスドなものを出力したい場合のように、JavaScriptがオフになっている場合、JavaScriptが存在することを前提とするこの壊れたコードはすべて必要ありません。 ですから、それにはいくつかの癖があります。 ただし、少なくとも、誰かがまだ何かを購入できるようにしたいコアユーザーフローでは、そのようなことを回避できます。サポートを追加する必要がある場合や、それらのユースケースについては。

マーシー：しかし、ギャツビーがデフォルトでそれを展開する方法に私はうれしく驚きました。 したがって、そのようにサイトを構築するために彼らが行った選択であり、私たちは常にそれを評価しています。 それでも最善の方法ですか？ ユーザーが求めているものをユーザーに提供するには、何をする必要がありますか？ そのため、Gatsbyがウェブサイトの構築で最善の仕事をしていることを確認するために、社内でいくつかの調査を行っています。

マーシー：バンドルサイズを小さく保ち、私たちが言うこととのトレードオフを行うために、プリフェッチを備えたパフォーマンスの高いコードであることを確認してください。 たとえば、それをバックアップするためのデータはありますか？ それは私が非常に興味を持っている開発者の擁護者としての種類のことであり、私たちがウェブサイトにパッケージ化してバンドルしているものが実際に必要であり、それが作ることができる最高のギャツビーサイトを本当に作ることを確認しています。

ドリュー：あなたはそこでパフォーマンスについて言及しましたが、パフォーマンスに大きな焦点が当てられています。 それは確かにギャツビーがそれ自身を提示する方法から思われます。 それはGatsbyの本当の機能ですか、それともJAMstack Webサイトの性質ですか？

マーシー：それはJAMstackのウェブサイトの性質かもしれないと思います。 最終的に、それはあなたがあなたのウェブサイトにバンドルしているものに帰着するでしょう。 したがって、使用しているフレームワークやツールに関係なく、エンドユーザー向けにこれらのバンドルに何を入れるかについては、慎重に検討する必要があります。 しかし、ギャツビーは本当にあなたに良いデフォルトを与えることを目指しています。 パフォーマンスだけでなく、アクセシビリティのためにも。

マーシー：しかし、それは常に評価が必要です。何かを追加した場合でも、それが引き続きパフォーマンスを発揮することを常に確認する必要があります。 しかし、ええ、静的ファイルの初期ペイロードを取得すると、それらは高速にロードされます。 私が以前持っていた古典的なWordPressサイトよりもはるかに高速です。 しかし、JavaScriptでそれを強化します。 確かにそこにはいくつかのトレードオフがあります。

マーシー：しかし、それは本当にうまく機能します、多くの人々、彼らは彼らのギャツビーサイトが本当に好きです。 ですから、フルタイムで作業し、GatsbyのようなJavaScriptフレームワークの詳細を学ぶのは楽しいことです。

ドリュー：ギャツビーだけがあなたのサイトをスピードアップするために実際にどのようなパフォーマンス機能を導入しましたか？

マーシー：まあ、リンクのプリフェッチで、このクライアントはルーティングのことを言った、私はそれがおそらく最大のものだと思う。 プログレッシブウェブアプリの作成が非常に簡単になります。 したがって、いくつかのオフライン機能を使用すると、オフラインおよびPWAタイプのものに関して必要なものを選択できます。 しかし、マニフェストの使用例や、最新バージョンのWebサイトを作成する例がある、多くのスターターサンプルサイトのように、実際には初期エクスペリエンスの一部になっています。

マーシー：本当に、それはあなたが必要としないコードを出荷しないようなものです。 それはそれの大きな部分です。 キャッシング、それは実際にはリンクのプリフェッチです。 それが私が言うことですそれの最大の部分です。

ドリュー：これは、ユーザーがどこに行くのかをサイトが実際に予測している場所です。 それはそれと同じくらいインテリジェントですか、それともページ上のすべてをプリフェッチしますか？

マーシー：いいえ、それはユーザーの操作に基づいています。 したがって、ユーザーがビューポートを下にスクロールすると、そこで何かプリフェッチが発生します。 リンクにカーソルを合わせると、そのページに移動する可能性がかなり高いと推定されます。 私たちは社内で、そのプリフェッチをキーボードフォーカスでも行うべきかどうかについてオープンソースで話し合っているので、アクセシビリティとパフォーマンスの交差点は非常に興味深いものです。

マーシー：マウスを使用できず、すべてのリンクをタブで移動してナビゲートしているキーボードユーザーのように、いくつかのトレードオフがあります。マウスユーザーの方が少し選択的である可能性があるため、実際にはそれらすべてのコンテンツをフェッチしている必要があります。彼らがマウスカーソルを置いた場所について。 ですから、私が感じるそれらの会話は非常に魅力的です。

マーシー：そして、これらの仮定を検証するためにどのようなデータが必要かを考えようとしています。 そうですね、これらのデフォルトを確認し、どのような改善を行うことができ、実際にどのくらいのデータを取得しているかを確認することは非常に興味深いことです。 それは本当に良いことですか？ 少しスピードアップするだけですか？ それともそれなしで十分に速いですか？ これらすべてのトレードオフを評価できるため、フレームワークでの作業の楽しみの一部として使用できる代替ソリューションはありますか。

ドリュー：これは、ユーザーが自分のサイトで無料で入手できるものをプリフェッチしています。 それで、彼らはそれを実装するために何か仕事をしなければなりませんか？

マーシー：ギャツビーのリンクを使って無料で入手できます。 つまり、Gatsbyに付属しているコンポーネントであり、それを使用すると、アンカータグが出力されます。 つまり、HTMLは実際のHTMLであり、そのようにWebプラットフォームを活用しています。 ただし、Reactコンポーネントでは、Gatsbyリンクコンポーネントを直接操作しています。 そして、それはそれらのメカニズムのすべてを持っています…それはあなたが行きたい場所のそのリンクのためにあなたの将来のHREFが何であるかを見て、そしてそれは行きそしてそのリンクからリソースをつかみそしてそれらをプリロードします。

マーシー：そしてそれはあなたのサイトの内部だけです。 だから、それは消えて、他のウェブサイトで物事をフェッチしようとはしていません。 しかし、それはかなりうまくいくようです。 実際にこれらのいくつかをオプトアウトする必要があるように、一部のユーザーが積極的に方法を探していることを私は知っています。 少なくともルーティング、プリフェッチを使用しない。 通常のアンカータグを使用するだけです。 そして、あなたは実際にはその機能を手に入れません。 他のものを使うのはとても簡単です。 しかし、私たちが行っている議論のいくつかは、クライアント側のルーティングと、それを可能な限り最高のものにする方法に関するものです。 だから、それも本当に面白い空間です。

ドリュー：自分のリンクコンポーネントが必要かどうかという点で、ギャツビーエコシステム内でどの程度緊密に連携する必要がありますか？ それは完全に大丈夫だろうか、私はそのようなことをするためにギャツビーと戦うことはないだろうか？

マーシー：いいえ、Reactランタイムで動作する限り、必要なコンポーネントをスロットに入れることができます。 それは本当にそれの美しさです。 Reactアプリに入れることができるものなら何でも、Gatsbyアプリに入れることができます。 Pre-Reactプラグインもあります。 したがって、ギャツビーを使用する代わりにいくつかの方法があります。 しかし、私は、使用したい、または独自に作成したい既製のコンポーネントをどのように取り込むことができるかが大好きです。

マーシー：そして、柔軟性は人々が本当に楽しんでいるものだと思います。 Reactランタイムを使用するという警告があります。 したがって、reactを使用するか、このpre-Reactプラグインを使用することに問題がない必要があります。 しかし、個人的には、アクセシビリティとテンプレート、特にReactフックを操作するためのreactとJSXが本当に好きです。 だから、私のギャツビーサイトで小屋を使うことができるのはとてもクールです。 私は本当にそれが好き。

Drew：そして、おそらくインストールできるノードモジュールであるGatsbyサイトを構築するプロセスはどうですか？他の静的サイトジェネレーターと同じように構築しますか？

マーシー：はい。 グローバルにインストールするCLIがあります。 そして、それはあなたがそれをグローバルにインストールしたいかどうかだと思います。 これがお勧めです。コンピュータの任意のディレクトリから実行できますが、Gatsbyサイトを構築するために必要なものはすべてプルダウンされます。 そして、追加できます。たとえば、WordPressをヘッドレスCMSまたはその他のコンテンツソースとして使用したいとします。

マーシー：パッケージやプラグインをインストールしてそれを機能させ、それをサイトに統合することができます。 また、より早く立ち上げて実行するために使用できるいくつかのスターターとテーマもあります。 Drupalやprismicなどの特定の統合のために何かをテストしたりサイトを迅速に開始したりする場合や、CMSやeコマースソリューションなどを使用したい場合は、これらを使用しました。

マーシー：たくさんの例があります。 したがって、試行錯誤を繰り返して理解しようとしているわけではありませんが、これらの構成要素を組み合わせて作成することができます。これをコンテンツメッシュと呼びます。 したがって、これらの最高の品種統合を使用してサイトを作成できます。従来のWordPressサイトを持っていた場合、オーサリングの経験とチームでの作業は本当に素晴らしいものです。

マーシー：しかし、フロントエンドには、モバイルデバイスでの動作などの欠点がありました。 ほかに何か？ eコマースソリューションが必要な場合は？ 最近はもっと簡単なことがあると思いますが、認証に最適なソリューションを選択できるようになると、「それを使用できればいいのにと思います。 」 Gatsbyを使用すると、これらの多くのものをまとめて、このコンテンツメッシュを作成する方法を作成できます。これは非常に新鮮です。

マーシー：特に、WordPressのような統合を引き続き使用でき、チームと連携できる場合はなおさらです。 ですから、私たちは、あなたが好きな、またはあなたのチームのために働くすべてのテクノロジーを選ぶことができるこの新しい働き方にかなり興奮しています。

ドリュー：ギャツビーが強く宣伝している大きな機能の1つは、さまざまなソースからデータやコンテンツを取り込むこの機能です。 あなたはWordPressやDrupalのようなもの、そしてあなたは何を持っているかについて言及しました。 従来、JekyllやEleventyなどを使用していた場合は、APIとやり取りするために自分で接続し、コンテンツをプルダウンしてマークダウンファイルまたはJSONファイルに書き込んでから、ジェネレーターを機能させる必要がありました。それらのファイルで。

ドリュー：それは一種の2段階のプロセスであり、そのようなことを行う前のエピソードで取り上げたソースビットのようなものを使用できますか？ Gatsbyには、他の静的サイトジェネレーターとは異なり、さまざまなソースを消費するこのネイティブ機能があることを正しく理解していますか？

マーシー：この分野でGatsbyを本当に強力にしているのは、GraphQLデータレイヤーとプラグインエコシステムだと思います。 したがって、構築しようとしているデータソースのプラグインを誰かがすでに作成している可能性があります。 そうでない場合は、おそらく近いものがあります。 しかし、GraphQLを使用することは、一種の機能不足です。 これらすべての統合を可能にするレイヤーは、GraphQLを使用しています。

マーシー：それで、あなたが引き込むことができるものには多くの可能性があり、私たちはプラグインも簡単に書くことができるように努めています。 そのため、プラグインの作成方法については非常にわかりやすく学習しており、プラグインが作成するASTまたは抽象構文木とそのすべてがどのように機能するかについての学習は非常に優れています。 しかし、ええ、私は言うでしょう、あなたがそれをすべて自分で書く必要なしにあなたが拾うことができる棚からたくさんのものがあります、それはかなり素晴らしいです。

マーシー：そして、マークダウンを引き込む柔軟性があるのは素晴らしいことです。 開発者がブログコンテンツのマークダウンを書きたいと思っているが、マーケティングチームはそれに満足していないとしましょう。コンテンツソースを組み合わせて、複数の場所から調達することができます。 他のGitHubリポジトリから物を調達している人を見たことがありますが、彼らはgetプラグインを使用してマークダウンコンテンツをそのように取得しています。 たくさんの柔軟性。

Drew：カスタムデータソースからプルする独自のプラグインを作成するオプションがあると思います。 いくつかのレガシーシステムがあり、その前面に素敵で光沢のある新しいWebサイトを配置したいとします。 必要な形式でデータを取得し、それを作業よりも大きくなるものに変換するプラグインを作成できますか？

マーシー：そうかもしれません。 そして、プラグインはそれを可能にします。 そして、その上にこの抽象化があります。これをギャツビーテーマと呼びます。 そして、それらはユーザーインターフェイスコードであるだけでなく、GraphQLクエリ、プラグインを設定する構成である可能性があるため、使用法がバンドルされたプラグインのようなものです。 そして、それらのテーマをNPMで配布できます。

マーシー：そして、それらのバージョンとあなたはそれらを引き込むことができます。そして、あなたが複数のリポジトリを持っていて、それらにデータを引き込みたいと言うチームにとっても、そのAPI全体は本当に興味深いです、同じクエリを持つことは非常に反復的です同じコード内のこれらすべてのリポジトリで。 だから、物事を少し乾かして、あまり繰り返さないようにします。 テーマと呼ばれるこれらの抽象化を使用して、そのソースプラグインを有効にするロジックまたはコードを分散させることができます。 ですから、その上に構築できるこの種の抽象化レイヤーがあり、チームは今、本当に多くのことを学んでいると聞いています。

Drew：つまり、ギャツビーの世界のテーマは、WordPressのようなCMSのようなルックアンドフィールではありません。

マーシー：ええ、つまり、それは可能ですが、それだけではありません。 ですから、名前を付けるのはとても難しいです。 しかし、私が本当に楽しんだテーマは、柔軟性だけを学び、そうすることができるということです。そうです、いくつかのユーザーインターフェイスコードを含めることができます。 ただし、そこに含まれるクエリ言語コードもある可能性があります。 しかし、それが一種のバンドルであるという事実は、配布を容易にします。 ええ、人々が何を構築し、どのテーマを出荷しているのかなどを見るのがクールだったのは、本当に素晴らしい抽象化でした。

ドリュー：ええ、それがギャツビーのかなり革新的な使用法につながると想像できます。 特に、顧客がこれを特にクリエイティブに行っていることに気付いたものを見たことがありますか？

マーシー：うん。 テーマに関して言えば、私が最初に読んだテーマの1つは、ギャツビーのブログにケーススタディがあるということです。アポロからだと思います。 そして、彼らはGatsbyテーマを使用し、getsourceプラグインを使用したドキュメントサイトを作成しました。 そのため、ソーシングとコンテンツが実際に切り離され、チームがテーマを取り込んで複数のリポジトリで使用できるようになります。

マーシー：それが私にとって最も興味深いのは、コンテンツを調達しなければならなかった過去のチームのように、それが可能になると想像できるからだと思います。かもしれない。 そのため、チームが「ああ、これはうまく機能している」というような解決策を今見ています。 そしてそれは去年の夏でさえありました、あるいはそのように少し前のケーススタディでした。

マーシー：それ以来、APIは改善されており、チーム全体がギャツビーのテーマに取り組んでいます。 そして、私は彼らが今後数週間でいくつかの大きな改善を展開していることを知っています。 だから、私は彼らの雷を盗もうとは思わないが、テーマにはいくつかの素敵なものが付属している。 彼らは、私たちがギャツビーから提供するコアテーマのようなブログテーマのいくつかをオーバーホールしてきました。

マーシー：私は、彼らが社内でそれを使用して、私たち自身の製品発表のいくつか、または今後数週間以内にここで発表される製品の改善を構築していることを知っています。 だから、ギャツビーのテーマでたくさんのクールなことが起こっていて、人々は自分のテーマやスターターを売っています。 それも本当に面白いと思います。

ドリュー：ギャツビーの周りには少し市場が湧いています。

マーシー：あります、ええ。

ドリュー：誰かが望むなら、オンライントレーニングのようなものはありますか？誰かが本当にギャツビーに入ろうと決心し、それを素早く学ぶ必要があるとしたら？ そのような情報を持って行くことができる実行場所はありますか？

マーシー：それはたくさん？ はい。 GatsbyDocのサイトは間違いなくgatsbyjs.org/docです。 チュートリアルもあり、ギャツビーのもののためにほぼ毎週ライブストリームを行っています。 YouTubeやさまざまな学習プラットフォームにギャツビーの資料を持っている教育者はたくさんいます。 エッグヘッド、ギャツビーのチームメイトの何人かはエッグヘッドのビデオも持っていると思います。

マーシー：それで、そこにはたくさんのものがあります。 何か見つけたら日付を確認してください。 Gatsby Doc、古いサードパーティのビデオの一部、および更新のためにすべての学習リソースを監視できるわけではないため、それらの日付を確認する可能性のあるものを常に積極的に更新しています。 私たち自身のスタッフについていくのは難しいです。

マーシー：コンテンツソーシングのオプションとユースケースの数は非常に多いからです。 とても広い空間です。 しかし、そこには非常に多くの学習資料があり、開始する方法がたくさんあるので、学習範囲のどこにいるかに応じて、さまざまなことを試して見つけることができます。 あなたは初期段階にありますか、あなたは他のテクノロジーから来ていますか、そしてあなたはこのReactのものが何であるかについて学ぶ必要があります。

マーシー：あなたは、あなたがどこにいるかに基づいて、どの材料があなたのために働くかを選択することができます。 私は最近、Gatsby Web Creatorsと呼ばれるライブストリームを通じてコースを受講しています。このコースでは、初心者のHTML、CSS、JavaScriptから、最初のGatsbyサイトの作成までを行ってきました。 金曜日に完了しました。 ですから、最初に戻るのは本当に素晴らしいことです。

マーシー：そしてギャツビーにはたくさんの素材があるので、Reactを使っています。 ですから、それを始めるのはかなり大きなジャンプです。 だから、私は本当に戻って、ReactとGatsbyで物事を構築するまでのすべてのステップを踏むことを望みました。 とてもきれいでした。 そして、私はそのルートを継続することに興奮しています。そのため、これらのスキルの多くは他のフレームワークに移植できるため、Gatsbyを使用してサイトを構築する方法を人々が理解するのに役立つ、より多くの初心者向け資料とより多くのものがあります。

ドリュー：ギャツビーを使ってある種のクライアントプロジェクトサイトを構築することを考えている人にとっては、大きな質問の1つです。これから出てくる大きな質問のひとつは、コンテンツの管理とクライアントの前に物を置くことです。 Gatsbyがさまざまなコンテンツ管理システムに接続する方法についてはすでに説明しました。 それはあなたがその質問に対処するために実施するであろう主要な方法ですか？ それとも、ギャツビーのエコシステムには、人々が何らかの方法でコンテンツを編集できるようにするものがありますか？

マーシー：ええ、CMSか何かを持っていると、それらのチームの関係がはるかにうまく機能するようになると思います。 私は、開発チームが「HTMLを学ぶだけ」のようなユースケースに参加しました。 そして、あなたは、「いいえ、あなたがちょうどそれを言ったとは信じられません」のようなクライアントからこの釉薬を見ます。 ですから、人々が自分に最も適した方法で最善の仕事をすることができるシステムを持つことは、非常に重要です。

マーシー：あなたがマーケターのGitHubを処理できないように、いつかは機能するかもしれませんが、常に機能するわけではありません。 したがって、プレビューとビルドインフラストラクチャのようなものがあると、それがより良くなり、Gatsbyクラウド製品スペースの一種が争いに巻き込まれます。 プレビューを行う方法があります。 有料のクラウド側がなく、Gatsbyクラウドには個人プロジェクト用の無料枠があるため、すべてが有料というわけではありません。

マーシー：しかし、オープンソースと製品エコシステムのようなものが一緒になっているので、ギャツビーは創設組織として、オープンソースフレームワークを維持し、健全に保ち、それに沿ってコミュニティを動かし続けるのに十分なお金を稼ぐことができます。 つまり、このオープンソースの商用サイドが一体となって、チームが必要とするこれらのワークフローのいくつかを実際に実現できるのです。

マーシー：高速プレビューの取得、ビルドの高速化と展開などのいくつかのこと。 そのため、特にGatsbyクラウド側にはソリューションがあり、Gatsbyをプレビューサーバーなどで機能させるオープンソースの方法がある場合は常に、それを文書化して、コミュニティが何をどのように行うかを確実に把握できるようにします。それらのチームのニーズに応えます。

マーシー：ええ、CMSの変更をプレビューする方法が必要です。それは、その瞬間の満足感のようなものだからです。 ビルドがコンテンツを表示するのを1時間待つ必要はありません。

ドリュー：それは興味深い。 Gatsbyクラウドサービスは、コンテンツを操作しているだけのヘッドレスCMSサービスを使用する機能を提供しますが、サイトでどのように表示されるかを視覚化することはできず、そのプレビューを取得できます。動作します。 そうですか？

マーシー：そうですね。 つまり、これはデカップリングのトレードオフの一部です。ヘッドレスCMSは、WordPressのようにフロントエンドを検索するだけで済みますが、新しいフロントエンドを提供し、他のソースを取り込む可能性があります。 WordPressが知らないその他のこと。 したがって、そのように分離することは理にかなっています。 しかし、それでも、チームメンバーとして、あなたはあなたが急速に慣れているスピードであなたの仕事をすることができなければなりません。

マーシー：そこで、ギャツビーのプレビューが行われます。ギャツビーのビルドは、チームがコラボレーションしたり、意思決定をしたり、何かを出荷したりできるように、フロントエンドをチームに提供します。 そのため、昨年はそれが発生し、常に多くの機能と改善が行われ、実際に速度が向上し始めているいくつかのチームから聞いたことがあります。

マーシー：そして、「さて、このビルドが遅くなっているのなら、それはなぜですか？」 それは通常、サイトが本当に、本当に大きいからです。 そのため、私たちは大規模なサイトの改善に重点を置き、それらのチームのコラボレーションワークフローを実際に改善してきました。 それは今のチームの大きな焦点です。

ドリュー：ギャツビークラウドは、その中心にあるのはホスティングサービスだと思います。 Gatsby固有の機能とその周辺の機能を搭載したGatsbyサイトをデプロイするためのCDNですか？

マーシー：実際のCDNではないので、継続的デリバリー製品と呼んでいます。 Fastly、NetlifyなどのCDNと統合されます。 接続できるプロバイダーはたくさんあり、そのうちのいくつかは無料です。 あなたは無料でたくさんのことができます、それはかなり素晴らしいです。 先日、前回のGatsby Webクリエーターセッションでそれを行いました。GatsbyクラウドとNetlifyを使用してサイトを構築しています。

マーシー：そして、ギャツビーのサイトをより速くすることができます。なぜなら、それらの改善が行われているからです。 1種類のサイトを構築するだけです。 したがって、Gatsbyクラウドにはいくつかの改善点がありますが、他のプラットフォームでは、これらのさまざまなタイプのWebサイトすべてをサポートしようとしているため、他のプラットフォームでは実行できません。

マーシー：しかし、ギャツビーの場合、それがあなたが構築しているすべてであり、ギャツビーにすべて参加しているかなりの数のエージェンシーがあり、彼らはできるだけ早くそれを作りたいと思っています。 つまり、Gatsbyクラウドは、他のプラットフォームについて心配する必要がないため、Gatsby専用のパフォーマンスを向上させることができます。

Drew：つまり、Gatsbyクラウドがビルドを実行し、それをNetlifyのようなもの、またはおそらくさまざまな場所にデプロイするだけです。

マーシー：うん。 うん、そうなるだろう。 したがって、これらのビルドされたパッケージをアップロードするときに使用するのはNetlifyの一部です。 ビルドされたファイル。 ビルドを使用していないため、ビルドはGatsbyクラウドインフラストラクチャで行われています。そこで、速度が大幅に向上する可能性があります。 そして、選択したCDNにアップロードするためのアップロード手順がまだあります。

マーシー：しかし、ええ、チームはこの見る能力を本当に愛しているようです。 つまり、あなたが見逃していたであろう機能です。 したがって、これを追加し直す必要があるのは、これらの共同プレビューを実行して、サインオフなどを取得できるようにすることです。

Drew：つまり、GatsbyクラウドはGatsby社からのサービスとして提供されており、Gatsbyオープンソースプロジェクトもあります。 これは、オープンソース製品を開発している営利団体がいるWordPressや自動のような関係ですか？

マーシー： Drupalのようにそうだと思います。 テクノロジーには、好循環のようなこれらの創設組織を持つ前例があります。 そして、私たちは現在、いくつかのガバナンス文書の公開に取り組んでおり、それが私たちのコミュニティにとって非常に明確であり、私たちがどのように意思決定を行うかを確認しています。 しかし、全体的な目標は、Gatsbyを持続可能に保つことです。これにより、Gatsbyクラウドにアクセスしても、人々がGatsbyを使用できるオープンソースプロジェクトであり続けることができます。

マーシー：必要に応じて、他のソリューションを使用することもできます。 ですから、それに取り組んでいる人々のように、私たちは維持するのに十分なビジネスが必要です。 ですから、私はオープンソースとコマーシャルの中間に浮かんでいて、物事を優先していることを確認しようとしているようなものです。 つまり、ご想像のとおり、私たちはさまざまなことをスペースの広さで調整しています。私たち全員が、自分たちの仕事のためにやらなければならない、好きな、本当に強く感じているニッチなユースケースを持っています。

マーシー：それは、多くのニッチなユースケースになります。 ですから、私たちは、何が今痛いのか、何が苦痛なのか、何がうまくいっているのかについて、ジャグリングして優先順位を付け、コミュニティに実際に耳を傾けようとします。 ですから、それは私が個人的にdevRELに戻り、コミュニティの話を実際に聞いてもらうための興味深い旅でした。どうすれば私たちをさらに良くすることができるでしょうか。

ドリュー：そして、ギャツビーの周りにはたくさんの人々がそれを使っている大きなコミュニティがありますか？

マーシー：それを使っている人はたくさんいて、貢献者もたくさんいます。 したがって、多くの人にとって、ドックに来てHacktoberfestに参加するなど、オープンソースに貢献するのは初めてかもしれません。 そのため、特にアクセシビリティや、フレームワークが箱から出してすぐに無料でできることをすべて実行できるようにするなど、Gatsbyの大きなコミュニティが何を持っているかを確認するのは本当に素晴らしいことです。

マーシー：それで、アクセシビリティとギャツビーのサブセットまたは交差点があります。それが私の幸せな場所です。 しかし、より広いコミュニティでは、多くの人がReactを学んだり、Gatsbyを通じてWeb開発を学んだりしています。 ですから、コミュニティの進展を見るのは本当に素晴らしいことです。問題などであっても、人々に貢献してもらうことを願っています。「ねえ、このリンクが壊れていたか、ドックのこの部分が混乱していた。またはそれは時代遅れです。」

マーシー：使用しているフレームワークやプロジェクトに伝えるだけのように、何かが改善される可能性があることは、改善を使用できるものについての洞察を得るのに役立つため、貢献するための優れた方法です。 ですから、それは貢献するための素晴らしい方法です。

ドリュー：あなたはアクセシビリティについて言及しました、そしてもちろん、人々はあなたがアクセシビリティの専門家であることを知っているでしょう。 And they might be surprised to see you working with sort of fully featured front end framework like React, thinking that perhaps the two don't really go together. Is that always the case at JavaScript heavy front ends are worth less accessible?

Marcy: Well, I wish it weren't the case. But I think the data has shown that a lot of websites that do use front end frameworks are less accessible than those that don't. A project that comes to mind is the Web a Million. And actually, I have a blog post, I'm refreshing the Gatsby site to see if my blog post has launched yet. But webbing through the web a million this project, they used their automated wave tool to crawl the top 1 million home pages and evaluate them for some accessibility violations.

Marcy: And it was really depressing results. Like they've run it twice now I think, and I think it got worse. So, it's not great, but I don't think you can really point to any one framework because there's plenty of sites that don't use frameworks that have lots of accessibility problems. So, it's kind of a broader industry issue, a really society.

Marcy: And so, for me working on a full featured web framework, I saw as an opportunity to try and get more accessibility awareness in the mainstream. And so, that was an intentional move on my part to go and try to make an impact on a lot of sites like working on one site is cool. You can solve some really interesting problems. For me, I wanted to advocate accessibility much more broadly and try to make frameworks the best they can be from the inside.

Marcy: So even if something is rough right now, trying to play that long game of like, “Okay, what web standards things can we talk about? What framework improvements can we make so that if this is kind of rough, like not just give up on it.” So, even if I know it's… I don't know, JavaScript is some folks enemy I feel like I like it. You need some JavaScript to make accessible user interfaces, you just do.

Marcy: So, I am trying to like straddle those viewpoints and do the right thing while listening to my activist colleagues and friends kind of out there like pushing us forward as an industry. And then on the inside, I can be the messenger and the person that could try and reconcile some of those huge trade offs and ethical questions about What are we building?

Marcy: So, it's challenging, but I really like it, because I have an impact to make on the web. And so, web framework. Lots of people are building Gatsby sites. So, seems like a good place to try and make an impact.

Drew: You mentioned briefly that Gatsby uses React at the moment. Is there a possible future where Gatsby might work with other frameworks, might receive a view version of Gatsby?

Marcy: I would love that. I've certainly talked about it. There is a pre React plug in, as I mentioned earlier. So you can swap that out. I think a big part of what we are talking about is sustainability of projects, trying to make the right call, these aren't easy choices to make. It's not just like rip it out and start over. There's a lot of concerns that go along with that. It goes deep.

Marcy: So, it's something we're actively talking about. And I don't really have anything specific to share right now. But we do have some internal meetings coming up soon to talk about that sort of thing. So, it's being discussed, and I would love to have a view flavor, that'd be amazing. But as you can imagine there's some interesting challenges that come along with that, and we want to make sure it's the right move so that we're not like, I don't know, going down a path and having it not work for whatever reason, then we're maintaining two frameworks, like how do we make that actually realistic in terms of what we can maintain and make succeed for an open source community?

Drew: So I've been learning all about Gatsby. What have you been learning about lately Marcy?

Marcy: Well, I wish it was better but work life balance. I've been learning about, for me, unfortunately, I'm in like a burnout cycle. And so, I feel like I'm continually learning the lesson of how to be productive, especially this year in 2020. There's just like one thing after another. So, trying to get really clear focus on where I want to go in my career, what makes me happy?

Marcy: How can I sustain, and we're talking about sustainability. Like how can I sustain my own life after a career of really pushing hard on accessibility in particular like, “Okay, how can I kind of take a little step back and make sure that what I am putting out there, what I am doing is meaningful, worth the energy.” See, a lot of my lessons have been kind of that intersection of work and life and trying to make the most of the time that's been… I don't know about you, but it's been pretty stressful for a lot of people including me.

Drew: It's been very, very stressful. We are at very difficult times, isn't it?

Marcy: Yeah, yeah. I mean, we have so much to be thankful for in this industry, having opportunities and skills that you can apply. Seeing a lot of layoffs in our industry, really trying to make decisions that reflect where we're at and not just going through the motions. So that was a big motivator for Gatsby web creators was, “Wow, there's a lot of school age kids not in school this year, it would be really cool to see an outcome of turning some kids' eyes onto web development.”

Marcy: Like when I was in seventh grade, and someone came to a class of mine to talk about photojournalism. I was like, “I want to be a photojournalist.” So that actually did work. I got some feedback from someone that said, “My seventh grader's learning from you, and now they're really excited about code.” So, that was a really good thing to spend some energy on, in a time where like, that wasn't something I would have necessarily thought of before being in these circumstances in 2020.

Marcy: So, really trying to be like nimble and make choices that kind of reflect where I want to go and what's happening.

Drew: If you the listener would like to hear more from Marcy, you can find her on Twitter where she's @marcysutton and find all her latest goings on, on her personal website, marcysutton.com. And of course you can find out how to get started with Gatsby from Gatsbyjs.org. Thanks for joining us today Marcy, do you have any parting words?

Marcy: Make the most of it wherever that might be.