GatsbyJSチュートリアル (introduction)

ギャツビーへようこそ あなたがここに来てくれて嬉しいです。このチュートリアルの目的は、スターターテンプレートを使用した最初のGatsbyサイトのセットアップとデプロイをガイドすることです。

その過程では、より一般的なウェブ開発のトピックを紹介し、Gatsbyサイトの基本的な構造を説明します。 このチュートリアルは、ウェブ開発の経験があまりない方でも(まだですが!)可能な限りアクセスしやすくすることを目的としています。

直接コードを書きたい場合は、ステップバイステップのチュートリアルをスキップして、クイックスタートページをご覧ください。

ギャツビーの基礎知識

  1. 開発環境を設定しましょう。Gatsbyを動かすコアテクノロジーを紹介し、開発環境の設定方法をご案内します。
  2. Gatsbyのビルディングブロックを知る。新しいプロジェクトの開始、開発、サイトのデプロイ。
  3. GatsbyでCSSを使用する方法を紹介します。Typography.js や CSS Modules などのライブラリを調べます。
  4. Gatsby でのネストされたレイアウトの構築。レイアウトとは、ヘッダーやフッターなど、複数のページで再利用されるサイトのセクションのことです。

中級チュートリアル

これらの中級チュートリアルでは、GraphQLを使ってほぼどこからでもGatsbyサイトにデータを引っ張ってくる方法を学びます。
  1. ブログ内のデータをクエリで取得する ブログを作成し、GraphQL クエリを使用してサイトタイトルをブログヘッダーに取得します。
  2. ソース プラグインとクエリされたデータのレンダリング。ソース プラグインを使用して Markdown ブログ記事をサイトに取り込み、ブログ記事のリストを含むインデックス ページを作成します。
  3. 変換プラグイン。変換プラグインを使用して、Markdownブログ記事をブログがレンダリングできる形に変換します。
  4. プログラムでデータからページを作成する。ブログ記事のためのページのセットをプログラムで作成する方法を学びます。
  5. 本番に向けてサイトを準備します。サイトのパフォーマンスやアクセシビリティ、SEOなどのベストプラクティスを監査する方法を学びます。

プラグインとテーマのチュートリアル

Gatsbyプラグインは、データソーシングなどの機能をカプセル化し、再利用し、構成する方法です。Gatsbyテーマはプラグインの一種で、デフォルトの設定(共有機能、データソーシング、デザイン)をサイトから抽象化してインストール可能なパッケージにします。 プラグインとテーマのチュートリアルでは、プラグインとテーマの構築と使用方法をステップバイステップで学ぶことができます。

その他のチュートリアル

Gatsbyには多くのユースケースがあり、その中には最初のチュートリアルではカバーされていないものもあります。GatsbyのAdditional Tutorialsセクションは、画像やCMSコンテンツのソースプラグインの使用など、さらに多くのGatsbyタスクをステップバイステップで完了させる方法を示すリソースを集めたものです。 Gatsbyの追加チュートリアルでさらに深く学びましょう。