しぶしぶGatsbyJSを始める2-2-Tutorial実践編 - 学習バンザイITエンジニアの精神安穏日記

執筆中

概要

f:id:masanolinks:20201113223417p:plain 基本編は全部で4つあります。これを勉強すれば、たぶんデプロイとか設定ができ、わからない箇所をしらべようと思えるレベルには成りそうです。

かかった時間

だらだらこなして、4,5時間くらいかかりました(詳細)

追記 2.5ヶ月後に、再びこの記事を編集する頃にはすっかり忘れていました。

0.セットアップ Set Up Your Development Environment | Gatsby

環境構築~localで起動までの解説もう出来てるので省略

1. 基本的要素 Get to Know Gatsby Building Blocks | Gatsby

building block == 建築用ブロック

勝手にroutingされる仕組み

Just by putting a React component in the src/pages/about.js file, you now have a page accessible at /about.

src/pages/配下に以下のようなjsファイルを置くと、勝手にroutingされる

import react from "react"

export default function about() {
  return (
    <div style={{ color: `teal` }}>
      <h1>about gatsby</h1>
      <p>such wow. very react.</p>
    </div>
  )
}

componentsについて

src/components/配下に例えばHeaderを置く。
src/pages/○○.js内で読み込む

propsについて

functionの引数に渡せる例えば、Headerというcomponentに <Header headerText="Hello"/>のように、htmlの属性を付与すると、 component file側で以下のようになっていると

export default function Header(props) {
  return <h1>{props.headerText}</h1>
}

設定した値が出てくる

の使い方

import { Link } from "gatsby"
<Link to="/">Home</Link>

みたいに使える {}で囲っている意味は↓

サンプルが多くてわかりやすかった javascript — ES6のインポートに中括弧を使用するのはいつですか？範囲が広いので見にくかった import - JavaScript | MDN

デプロイしよう

以前したので略

2. サイトをきれいに整えよう Introduction to Styling in Gatsby | Gatsby

サイト全体で使われるCSSなどのスタイリングについてのレッスン。

cssファイルの追加

今回は、/styles/global.cssに配置する

✋ Include the stylesheet in gatsby-browser.js

ということで、このディレクトリのrootにgatsby-browser.jsを作る

Gatsbyの数少ない( 重要)設定ファイルの一つで、あれば自動で読み込まれる。さらなる詳細: Gatsby Browser APIs | Gatsby

以下のように単純にimportする

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を取り込む(まずは一番簡単な方法)

CSS files directly, using gatsby-browser.js

直でimportするのが一番簡単ではあるが、

In most cases, the best way to add global styles is with a shared layout component. Check out the docs for more on that approach.

ということでCSS importのベストプラクティスが下記に書いてある。 Standard Styling with Global CSS Files | Gatsby

CSSをコンポーネントに閉じ込めよう(キタコレ)

昔Vue.jsでやって感動した覚えがある。

CSS moduleの総本山(?)らしいのでメモっとく。 css-modules/css-modules: Documentation about css-modules

src/components/〇〇.module.cssのようにする GatsbyJSでは、CSSmoduleするときは、拡張子をmodule.cssする必要がある。以下のように取り込んで、参照する

import containerStyles from "./container.module.css"

export default function Container({ children }) {
  return <div className={containerStyles.container}>{children}</div>
}

.container {
  margin: 3rem auto;
  max-width: 600px;
}

ちなみに、Containerにchildrenを渡すと、childrenがサンドされる。 className={props.prop}みたいなのは、どういうことなんですかね。予想: - header,divとかにすれば、import後に自動で全体に反映される - #idとかはそもそも存在意義がない - classNameは直で取得してCSSに反映される

CSS in JSというキーワードに関連している。このあたりあとで読む。 Styling and CSS – React React: CSS in JS - Speaker Deck A Unified Styling Language. In the past few years we’ve seen the… | by Mark Dalgleish | SEEK blog | Medium

import styles from "./about-css-modules.module.css"

console.log(style)

styleをconsole.log出だすと以下のようになる

src-pages----about-css-modules-module---avatar---2lRF7のようなクラス名が自動で生成されて、サイト内でuniqになる。

その他のCSS

この辺が使えるとのこと

Typography.js
Sass
JSS
Stylus
PostCSS 下3つは知らんかった

リストの元: Introduction to Styling in Gatsby | Gatsby

3. ネストするパーツの再利用Creating Nested Layout Components | Gatsby

plugin

ここではpluginを使う Typography.jsを使う。最初にいくつか、他のpackageが必要になるらしい。依存関係ごと、一気にインストールしてはくれんのか。

数少ない設定ファイルの2つ目

gatsby-config.jsも数少ない設定ファイルのうちの一つ。自動的に読み込まれる。 ↓は詳細 Gatsby Config API | Gatsby

Typography.jsの設定

gatsby-config.jsにconfigファイルのpathを書く
pathにconfigファイルを置く
適切に書き込む

うまくいくと、