目次

https://www.gatsbyjs.com/docs/tutorial/

1. Set Up Your Development Environment
2. Get to Know Gatsby Building Blocks
3. Introduction to Styling in Gatsby
4. Creating Nested Layout Components
5. Data in Gatsby
6. Source Plugins
7. Transformer plugins
8. Programmatically create pages from data
9. Preparing a Site to Go Live

https://www.gatsbyjs.com/docs/tutorial/part-zero/

必要な持ち物を確認

• Homebrewのインストール　✅
• Xcode Command Line Toolsのインストール　✅
• Node.jsのインストール　✅
• Gitのインストール　✅
• Gatsby CLI（本体）のインストール　✅
• Visual Studio Code（エディタ）のインストール　✅
• Prettier VSCode Plugin（コードフォーマッタ）のインストール　✅

全部持ってた😊

$ brew --version
Homebrew 3.0.0

$ node --version
v15.8.0

$ git --version
git version 2.30.0

$ gatsby --version
Gatsby CLI version: 2.19.1

$ code --version
1.52.1

https://www.gatsbyjs.com/docs/tutorial/part-zero/#create-a-gatsby-site

Gatsby site を作成する

1. チュートリアル用のディレクトリ（~/sandbox/gatsby-tutorial/）を作成した

$ mkdir -p ~/sandbox/gatsby-tutorial/
$ cd ~/sandbox/tutorial/

1. ページに書いてあるコマンドをコピペして実行した
2. スターターのGitHub URLを指定して、ウェブサイト（hello-world）を新規作成（new）している

$ gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-hello-world.git

Cloning into 'hello-world'...
success Created starter directory layout

info Installing packages...
added 1891 packages, and audited 1892 packages in 26s
6 vulnerabilities (1 low, 5 high)

info Initialising git in hello-world
Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd hello-world
  gatsby develop

1. 出力結果の最後に書いてるとおりにコマンドを実行した

$ cd hello-world
$ gatsby develop

$ gatsby develop
success open and validate gatsby-configs - 0.014s
success load plugins - 0.070s
success onPreInit - 0.025s
success initialize cache - 0.009s
success copy gatsby files - 0.073s
success onPreBootstrap - 0.018s
success createSchemaCustomization - 0.003s
success Checking for changed pages - 0.002s
success source and transform nodes - 0.031s
success building schema - 0.169s
info Total nodes: 18, SitePage nodes: 1 (use --verbose for breakdown)
success createPages - 0.004s
success Checking for changed pages - 0.001s
success createPagesStatefully - 0.035s
success update schema - 0.020s
success write out redirect data - 0.002s
success onPostBootstrap - 0.002s
info bootstrap finished - 3.701s
success onPreExtractQueries - 0.003s
success extract queries from components - 0.082s
success write out requires - 0.007s
success run page queries - 0.027s - 2/2 74.16/s
⠀
You can now view gatsby-starter-hello-world in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 4.794s

1. ここでも最後に書いてあるとおりhttp://localhost:8000/をブラウザで開いて、表示内容を確認した
2. シンプルにHello World!と表示された

まとめ

1. gatsby newで新規にウェブサイトを作成できる
2. gatsby developでローカルにサーバを立て、内容を確認できる（ホットリロードに対応している）

あっという間にウェブサイトを作成することができた。
ひとつのコマンドを実行したら、次のコマンドを教えてくれるので忘れっぽくても大丈夫。

ウェブサイトとは？

https://learn.shayhowe.com/html-css/building-your-first-web-page/

📖 あとで読む

知ってるとよいウェブ技術

1. HTML
2. CSS
3. JavaScript
4. React
5. GraphQL

https://reactjs.org/tutorial/tutorial.html

https://graphql.org/graphql-js/

これらはあとで必要そうになったら戻って読むことにする

https://www.gatsbyjs.com/docs/tutorial/part-one/

1. src/pages/index.jsを編集してlocalhost:8000/index.htmlを更新できた
2. JSXというJavaScriptの中にHTMLを記述する（HTML-in-JS）方法で書くことがベースになっている
3. ブラウザはJSXを直接理解することができない。その辺りをいい感じにやるのがGatsbyのしごと

https://www.gatsbyjs.com/docs/tutorial/part-one/#-using-page-components

ページコンポーネント（Page Component）

1. src/pages/*.jsのファイルは全部ページコンポーネントになる
2. src/pages/about.jsを新規に作成したらlocalhost:8000/about/が作成されることを確認した
3. gatsby developを走らせていれば、新規に作成されたファイルも自動で拾ってくれる

https://www.gatsbyjs.com/docs/tutorial/part-one/#-using-sub-components

サブコンポーネント（sub-components）

1. 複数の場所で使う要素（例：見出し、ボタンなど）はサブコンポーネントとして作成するとよい
2. サブコンポーネントはsrc/components/*.jsに作成する
3. 使う場所によって表示する内容を変更したい場合はpropsを使えばよい

https://www.gatsbyjs.com/docs/tutorial/part-one/#-using-the-link--component

ページ間のリンク

1. Linkコンポーネントを使う（import { Link } from "gatsby"）
2. toプロパティを使ってリンク先のパスを指定する（href="パス"と同じだと思う）

import { Link } from "gatsby"

<Link to="パス">ページ名</Link>

https://www.gatsbyjs.com/docs/tutorial/part-one/#deploying-a-gatsby-site

ウェブサイトをデプロイ

• gatsby buildを実行するとpublicディレクトリが作成される
• 必要なものがそこに含まれているので、その中身をアップロードすればOK
• Surgeというサービスが紹介されているので、あとで試してみよー

https://surge.sh/

https://www.gatsbyjs.com/docs/tutorial/part-two/

スタイルの適用

1. gatsby-browser.jsを使って全体用CSSを読み込む方法　←　これまでCSSの知識をそのまま使えるので、とっつき始めるには便利
2. Component-scoped CSS（CSS Modules or CSS-in-JS）を使う方法　←　これからGatsbyにハマる人には《推奨》みたい
3. このチュートリアルではCSS Modulesの使い方の説明

Globalスタイル

1. /src/styles/global.cssを作成する（ファイル名は好きなようにする）
2. /gatsby-browser.jsを作成し、上のglobal.cssをimportする

import or require

Note: Both CommonJS (require) and ES Module (import) syntax work here. If you’re not sure which to choose, import is usually a good default. When working with files that are only run in a Node.js environment however (like gatsby-node.js), require will need to be used.

こういう注釈があるのはありがたい。
基本的にimportを使えばよいことが分かった。

CSS Modules

1. /src/components/container.js と /src/components/container.module.cssを作成した
2. （Gatsbyでは）CSS Modulesの拡張子は.module.cssにする
3. container.jsはJSXで書く
4. .module.cssは普通のCSSで書く
5. container.jsの中でcontainer.module.cssを読み込むことで使えるようになる
6. JSXが展開されるときにCSS ModulesのファイルパスをベースにCSSのクラス名が自動で生成されるから、クラス名が重複する心配をしなくてよい。（逆に、クラス名を見ればどのファイルを確認すればよいかが分かる）

デバッグ

import React from "react"
import styles from "./about-css-modules.module.css"
import Container from "../components/container"

console.log(styles)

1. 新しくモジュールを読み込んだ場合（import styles from "./about-css-modules.module.css"）
2. きちんと読み込めてるかconsole.log(styles)を使って確認すればよい

https://www.gatsbyjs.com/docs/tutorial/part-three/

レイアウトコンポーネント

1. 全体的なサイトのデザインには、レイアウトコンポーネントを使う
2. ナビゲーションやフッタなどの全ページを通して共通なコンポーネントをひとつにまとめることができる
3. /src/components/layout.js（ファイル名は何でもいいはず）を作成して、ページコンポーネント（/src/pages/*.js）のファイルでimportする

ここまでのまとめ

1. ここまで（チュートリアル3）で、いちおうGatsbyの基本的な使い方を俯瞰した
2. ページを作成する場合はページコンポーネント（/src/pages/*.js）にJSXで書けばよい
3. 共通部分はコンポーネントとしてまとめればよい（/src/components/*.js）
4. スタイルはCSS Modulesを使えばよい（/src/components/*.module.css）
5. サイト全体の設計はレイアウトコンポーネントを使えばよい（/src/components/layout.js）

で、次は

1. ページを作成する場合に、毎回JSXファイルを作成するのはちょっと手間（JSXを生で書くのは大変）
2. Markdownで書いたものを読み込むことができるとハッピー😊

https://www.gatsbyjs.com/docs/tutorial/part-four/

データのクエリ（呼び出し方）

1. page query : ページコンポーネントの中で使えるGraphQLクエリ
2. StaticQuery : ページコンポーネント以外で使えるGrraphQLクエリ

他にもnodeのcreatePagesを使うことでunstructured dataを使ってページを生成することができるらしいけど、これはまた調べる。
GatsbyではGraphQLを仲介することで、元データがどんな形式であってもプラグインで対応できるようになる。

https://www.gatsbyjs.com/docs/tutorial/part-five/

ソースの指定

1. gatsby-source-filesystemプラグインをインストールする
2. gatsby-config.jsにプラグインを追加、データ源のパスを指定する
3. ローカルのGraphiQL（http://localhost:8000/___graphql）にアクセスしてクエリを作成する
4. allFilesとかfilesを選んで、いろいろ欲しい情報をぽちぽち選択すればOK
5. GraphiQLの使い方は簡単そうなので、使っていたら分かりそう

https://www.gatsbyjs.com/docs/tutorial/part-six/

Markdownファイルの読み込み

1. gatsby-transformer-remarkプラグインをインストール
2. gatsby-config.jsにプラグインを追加
3. src/pages/*.mdを作成する
4. GraphiQLのallMarkdownRemark / markdownRemark を使ってクエリを作成する
5. src/pages/index.jsにクエリを埋め込むことでトップページにMarkdownファイルの一覧を表示することができた

• gatsby-source-filesystemといろいろなtransformerプラグインを使うことで、ありとあらゆるデータをページに変換することができる

https://www.gatsbyjs.com/docs/tutorial/part-seven/

ページを自動的に生成する方法

1. ページ（記事ページとか）のpath or slugを作成する（このチュートリアルでは以降slugを使う）
2. ページを作成する

ページを作成するためのGatsby API

1. onCreateNode
2. createPages

編集する設定ファイル

1. gatsby-node.js

onCreateNode

1. 新しいノードが作成されたり、更新されたりしたときにGatsbyがコールするAPI
2. MarkdownRemarkノードだけにフィルタする

スラッグの作り方

1. /src/pages/*.mdのファイル名をスラッグとして使う
2. 具体的に/src/pages/pandas-and-bananas.md　→　localhost:8000/pandas-and-bananas/ にする
3. ファイル名を取得するためにgetNode()を使う

・・・とりあえずコピペして動かしてから、いろいろ考えよ

ここまででできたこと

1. *.mdのファイル名をベースにスラッグを作成できた
2. スラッグをGraphQLでクエリできるようになった

まだできていないこと

1. ページの生成

ページテンプレートコンポーネントの作成

1. src/templates/blog-post.jsを作成する
2. レイアウトコンポーネント（src/component/layout.js）をimportする
3. 単一の.mdに対してGraphQLクエリを発行する
4. 戻ってくる値を、表示したい箇所に配置する

最終的なgatsby-node.js

• チュートリアルに乗っているものをコピペして、ちゃんと動くことが確認できた
• 内容についてはそのうちちゃんと読んで理解する

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: path.resolve(`./src/templates/blog-post.js`),
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        slug: node.fields.slug,
      },
    })
  })
}

トップページを修正

1. src/pages/index.jsを修正して、各記事へのリンクを追加する
2. slugをGraphQLでコールできるようにしておくと、こういうところでも使える

ここまでのまとめ

1. Gatsbyで新規サイトを作成した（gatsby new）
2. ページやコンポーネントを作成した（src/pages/*.js / src/components/js）
3. スタイルコンポーネントを作成した（src/components/*.module.css）
4. sourceとtransformerプラグインを追加した（gatsby-config.js）
5. GraphQLクエリを使ってページを作成した（src/pages/*.md）
6. ファイル名を使って自動でページを作成した（gatsby-node.js）

これでチュートリアルは（ほぼ）完了🎉

https://www.gatsbyjs.com/docs/tutorial/part-eight/

最後の章はLighthouseを使ってパフォーマンスを確認しながら、改善するためのプラグインの導入とかなので、あとで読むことにする

プロダクションビルド

$ gatsby build
$ gatsby serve

PWA対策のために追加するとよいプラグイン

1. gatsby-plugin-manifest
2. gatsby-plugin-offline
3. gatsby-plugin-react-helmet, react-helmet

https://www.gatsbyjs.com/docs/themes/what-are-gatsby-themes/

Gatsby Theme

1. gatsby-starterを使う方法
2. gatsby-themesを使う方法
3. gatsby-themesはnpmパッケージとして提供されている
4. 1つのウェブサイトで複数のテーマ（npmパッケージ）を導入することができる
5. テーマによって機能が違うけど、あの機能とこの機能を合わせて使うこともできる

• チュートリアルを読んでみて、なんだかできそうな気がしてきた
• とりあえずよさげなテーマを探してみた
• これ使ってみようかな

サンプルサイト
https://gatsby-theme-forty.netlify.app/

リポジトリ
https://github.com/codebushi/gatsby-theme-forty

https://www.gatsbyjs.com/docs/how-to/

まとめ

1. チュートリアルをきちんと読むことでGatsbyの大枠を理解できた
2. 次は必要な部分のHow-to Guidesを読んでいくことにする
3. 画像周りのHow-toかなぁ

https://www.gatsbyjs.com/docs/how-to/images-and-media/

ということで、このスクラップはおしまい🎉