トップ > GatsbyJS > しぶしぶGatsbyJSを始める2-2-Tutorial実践編

しぶしぶGatsbyJSを始める2-2-Tutorial実践編

GatsbyJS

執筆中

概要

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出だすと以下のようになる



https://www.gatsbyjs.com/static/c1449b13fbeab2d990b6be27f26e364f/0e904/css-modules-console.png



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の設定



    

  1. gatsby-config.jsにconfigファイルのpathを書く
    2. 

  2. pathにconfigファイルを置く
    3. 

  3. 適切に書き込む
    4. 





うまくいくと、