Hello world from Gatsby!

一昨日は結局セットアップで終了してしまいましたので、今日こそ本題である Hello world をやってみましょう。
さて、何は無くとも公式ページを見てみましょう。

Gatsby.jsチュートリアル

公式の基礎チュートリアルには以下の４つがありました。
（原文は英語です。Google先生ありがとう！）

0. 開発環境のセットアップ：Gatsbyを強化するコアテクノロジーを紹介し、開発環境のセットアップをガイドします。
1. Gatsbyの構成要素を理解する：新しいプロジェクトの開始、サイトの開発、および展開。
2. GatsbyでのCSSの使用の概要：Typography.jsやCSSモジュールなどのライブラリを調べてください。
3. Gatsbyでネストされたレイアウトを構築する：レイアウトは、ヘッダーやフッターなどの複数のページで再利用されるサイトのセクションです。

0. は、昨日やったし飛ばしても良いかなと思ったのですが、念のため、さーっと見ていると、何やら“starters”というのがあります。もうちょっと見てみましょう。なになに…

（デフォルト構成で部分的に構築されたサイト）をダウンロードして、特定の種類のサイトの作成を迅速に進めることができます。

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

ほほう。

ここで使用する「HelloWorld」スターターは、Gatsbyサイトに必要な最低限の要素を備えたスターターです。

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

そのものズバリのスターターがあるというじゃないですか。
では早速 “Hello World” starter を使ってみましょうか。 

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

gatsby コマンド「gatsby new hello-world」とスターターのURLをチュートリアルからそのままコピーしてコンソールへペタリ。

info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-hello-world.git
Cloning into 'hello-world'...
remote: Enumerating objects: 16, done.
remote: Counting objects: 100% (16/16), done.
remote: Compressing objects: 100% (11/11), done.
remote: Total 16 (delta 0), reused 9 (delta 0), pack-reused 0
Receiving objects: 100% (16/16), 365.71 KiB | 671.00 KiB/s, done.
success Created starter directory layout
info Installing packages...

added 1893 packages, and audited 1893 packages in 13s

found 0 vulnerabilities
info Initialising git in hello-world
Initialized empty Git repository in /Users/xxx/gatsby/hello-world/.git/
info Create initial git commit in hello-world
info 
Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd hello-world
  gatsby develop

そんで、開発サーバを起動させるのね。

% cd hello-world

長いんで省略ね...

You can now view gatsby-starter-hello-world in the browser.
⠀
  http://localhost:8000/

無事、起動できたようです。では早速、見てみましょう。

コマンド一つ叩いただけで、何もしないで Hello world! 終わってしまったんですが、このままでは全くツマラナイので、もう少し見てみましょう。

Hello world! の中身を見てみよう

Gatsby にて自動作成された hello-world の中を見ていくと、src ディレクトリがあります。更にその中に pages ディレクトリがあり、その中に index.js がありました。どうやらこれが Hello world! を表示している本体でしょうか？早速中を見てみましょう。

import React from "react" 
 
export default function Home() {
  return <div>Hello world!</div>
}

どうやらその様ですね。では少し変更して試してみましょう。

import React from "react" 
 
export default function Home() {
  return <div>Hello world! I am inohide.</div>
}

うむうむ。良いですね。
それではGatsby では CSS を当てるのはどの様にするのがお作法になっているのでしょうか？
チュートリアルの２に詳しく書いてある様ですので、早速みてみましょう。

スタイリング

• グローバルCSSファイル：Webサイトのスタイルを設定する従来の方法。CSSルールはグローバルに宣言され、スタイルは特異性と継承に応じて適用されます。
• モジュラースタイルシート：CSSルールは従来から記述されていますが、JavaScriptで使用され、他の場所での意図しない副作用を回避するためにローカルでスコープが設定されています。Gatsbyですぐに使用できます。
• CSS-in-JS：JavaScriptで記述および使用されるローカルスコープのCSS。動的なスタイル設定やその他の機能をより簡単に使用できるようにします。サードパーティのライブラリを使用する必要があります。

3つの方法がある様ですが、まずは従来の方法から試してみましょう。特に配置場所が決まっている訳ではない様ですが、公式の例で /src/styles/global.css となっているので、そのままやってみます。

html {
  background-color: teal;
  color: white; 
}

index.js 側での読み込みはどうするのかな？　いや普通に import だよね。きっと。という事で試してみる。

import "../styles/global.css" 
（これを index.js へ追加）

うんうん。特に問題無しだね。でもこれだと単にインポートしたファイルのみの適用だよね。グローバルでの設定ってことは、もう一捻りあるよね？　って見ていくと、gatsby-browser.js っていうファイルにインポートした CSS ファイルがグローバル適用されると書いてありますね。但し、ファイルの設置場所はルートの様ですね。
では早速試してみましょう。
まずは

import "../styles/global.css" 
（これを index.js から削除）

そして、hello-world の直下に gatsby-browser.js ファイルを作成し、こちらで global.css を読み込んでみます。

import "./src/styles/global.css"
（上とはディレクトリの位置が違うので注意）

適用されたか分かりづらいので、少し内容を変更っと。

import React from "react"
export default function Home() { 
  return <div><h1>Hello world! </h1><h3>I am inohide.</h3></div> 
}

html {
    background-color: teal;
    padding: 10px;
  }

h1{
    font-size: 2.5rem;
    color: white;
}
h3{
    font-size: 2rem;
    color: white;
}  

で、どうでしょう？

うん。良いですね。