Gatsbyのチュートリアルを試してみた

はじめに

お久しぶりですmasaです。
前回のFlutter記事以降はバタバタしており勉強する時間も取れずアウトプットも出来ていませんでしたorz
久々に時間が取れそうなので最近気になっているGatsbyについて書いてみようかと思います。
ちなみに筆者は普段組み込みやIoTをやってるのでweb系ど素人です。

環境

MacBook Pro 2018
macOS Mojave 10.14.5
node.js v12.18.3
Gatsby 2.12.95
react 16.13.1

目次

1.Gatsbyとは
2.チュートリアル　環境構築
3.開発環境でGatsbyを動かす

1.Gatsbyとは

詳しくは下記公式サイトを確認いただきたいのですが、
簡単に言うとReact用のSSRなサイトを簡単に作れるジェネレータです。
Gatsby

私はWeb屋さんではないので最初SSRの文字を見たときはガチャがあるサイトなのかな？と一瞬思ってしまいました。
実際はserver side renderingの略でサーバ側で描画してパフォーマンス等をよくする技術みたいです。

2.チュートリアル　環境構築

Gatsbyチュートリアル
では早速このチュートリアルページに従い環境構築などを行なっていきます。
と言っても環境構築は特にハマるところもなかったのでチュートリアルに従えばOKです。

今回はとりあえず開発環境でGatsbyを動かしてみるところまでやってみます。

3.開発環境でGatsbyを動かす

gatsbyのサイトを作成するにはまず任意のディレクトリで下記のコマンドを実行します。

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

このコマンドを実行するとhello-worldディレクトリが作成されその下にGatsbyのスターターが配置されます。
gatsby newの後のhello-world部分が作成されるディレクトリ名、
その後ろのURLが使用するスターターとなるようです。
スターターはある程度レイアウトなどが作られたテンプレートのようなもので
公式サイトから検索出来ます。
Gatsby starters
自分で作成したstarterを登録することもできるようで有志が作成したいい感じのstarterも結構ありました。

ちょっと話が脱線しましたが配置されたファイルは下記のような感じになります。

xxx/hello-world

.cache/
.git/
.gitignore
.prettierignore
.prettierrc
LICENSE
README.md
gatsby-config.js
node_modules/
package-lock.json
package.json
public/
src/
static/

このスターターを開発環境で起動するには作成されたディレクトリの下（今回はhello-world）で下記のコマンドを実行します。

$ gatsby develop

そうするとブラウザから
http://localhost:8000/
でページにアクセスする事ができます。

表示されたページはsrc/pages/index.jsを使用して表示されているようです。

index.js

import React from "react"

export default function Home() {
  return <div>Hello world!</div>
}

内容はこんな感じ。
ReactなのでJSXな記法で作られてます。
開発環境ではホットリロードで動作するとのことで上記コードの文字列を更新すると
ブラウザの表示内容も自動的に更新されます。

またsrc/pages/*.jsに任意のReactコンポーネントを作成すると
http://localhost:8000/ファイル名
で作成したReactコンポーネントにアクセスできます。

別のコンポーネントを作成し利用する場合は
src/componentsディレクトリを作成しそこにReactコンポーネントを作成します。
src/pagesのコンポーネントから作成したコンポーネントを参照し
表示に使用する事ができるようです。

この二つの要素を合わせたのが上記画面です。
この画面はpages/about.jsを作成し表示しています。

about.js

import React from "react"
import Header from "../components/header"

export default function About() {
  return (
    <div style={{ color: `teal` }}>
      <Header headerText="About Gatsby!"/>
      <p>Such wow. Very React.</p>
    </div>
  )
}

”About Gatsby”と表示されている部分はcomponentsディレクトリに作成した下記のコードを使用しています。

header.js

import React from "react"

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

ページ間のリンクはgatsbyのLinkモジュールを使用するようです。
試しに書いてみたのがこんな感じ。

Header.js

import { Link } from "gatsby"
import React from "react"

export default function Header(props) {
    return (
        <div>
            <Link style={{ display:"block" }} to="/">top</Link>
            <Link to="/about">about</Link>
            <h1>{props.headerText}</h1>
        </div>
    )
}

Linkタグのtoにリンク先を指定すると画面遷移ができます。

この画面のtopとaboutがLinkタグにより作成されてます。
aboutを選択すると

aboutのページに遷移できました。
とりあえず今回はここまでです。

この後のチュートリアルではSurgeを使用してサイトを公開する手順となっていたのですが、
私は折角の静的サイトだったので気になっていたNetlifyで公開しようと思ってます。
公開手順についてはまた次回かな。
次は時間を空けずに投稿できるよう頑張ります！！