GatsbyJSに入門

ブログ更新がとても久しぶりです

梅雨が明けて8月となってしまいました。みなさんいかがお過ごしでしょうか？

それにしても暑いですね...
毎日36℃ぐらいあるのでとてもだるいです^^;

前回は1ヶ月2回ほど記事を書こうと思っていたのですが、バタバタと作業をしていて、更新できていませんでした。
少し落ち着いたのと、記事に残したい事柄が増えてきたので、毎週1記事は更新できるようにしていきたいなと思っています！

今回のテーマ

さて、今回はReactを使った静的サイトジェネレーターGastsbyJSに入門してみたいと思います！

GatsbyJSって？

GatsbyJSで検索していただけると詳しい説明が色々出てくるので詳細は割愛しますが、大雑把にまとめると、

• Reactベースで作られたフレームワークで、webサイトやアプリを作れるもの

• GraphQLを使って、WordPressなどのCMSやMarkDown, JSONなどのデータを使用できる

• ビルド時にHTMLを生成する

• 早いページを作れる

って感じのようです。

詳しくは公式(GatsbyJS)を確認してみてください。

どうして？

1. 今回こちらに入門してみようと思ったのは、自分のポートフォリオサイトをGatsbyJSで作ってみたくなったこと
2. webサイトを作成してみて欲しいと知人に相談されたこと

の2点です。

Reactを少し触っているので、webサイトもReactで作ってみたかったので、GatsbyJSに入門してみることにしました！

何する？

GatsbyJSを入門するにあたり、まずは公式サイトのチュートリアルをやってみました。
チュートリアルで学んだことを順番にまとめていこうと思います。
今回はチュートリアル1.Get to know Gatsby building blocksを行ったのでまとめてみました。

Hello World

Nodejsとyarnはインストールしてあったので、

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

を実行してhello world スターターを利用して雛形を作成しました。
hello-worldディレクトリが作成され、いくつかディレクトリとファイルが作成されました。

hello-world

src/pages/index.js を書き換えてみると、

// src/pages/index.js
import React from 'react'

export default () => (
  <div style={{ color: `purple`}}>
    <h1>Hello Gatsby!</h1>
    <p>What a world.</p>
    <img src="https://source.unsplash.com/random/400x200" alt="" />
  </div>
)

index.jsを編集

いい感じにページを修正できました。ホットリロードなので、ソースコードを変更するとすぐに確認できていいですね！

ページの追加

Using page components(https://www.gatsbyjs.org/tutorial/part-one/#-using-page-components)によると、
src/pages/ にjsファイルを作成するとページが作成できるようなので、チュートリアルに従ってaboutページを作成しました。

// src/pages/about.js

import React from "react"
export default () => (
  <div style={{ color: `teal` }}>
    <h1>About Gatsby</h1>
    <p>It's pretty cool</p>
  </div>

http://localhost/8000/about にアクセスすると、

aboutページ

aboutページを表示することができました！

コンポーネントの再利用

コンポーネントを細かく作って再利用できるようにすると処理がまとまって綺麗に作れるので、共通部分のヘッダーをコンポーネント化します。
こちらはGatsbyに限ったことではないですが、src/component/ ディレクトリを作成してコンポーネントファイルを作成していきます。

// src/components/header.js

import React from "react"
export default props => <h1>{props.headerText}</h1>

これを使って、index.jsとabout.jsを書き換えます。

// src/pages/index.js

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

export default () => (
  <div style={{ color: `purple`}}>
    <Header headerText='Hello Gatsby!' />
    <p>What a world.</p>
    <img src="https://source.unsplash.com/random/400x200" alt="" />
  </div>
)


// src/pages/about.js

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

export default () => (
  <div style={{ color: `teal` }}>
    <Header headerText='About Gatsby' />
    <p>It's pretty cool</p>
  </div>

この辺りはサイドバーとかレイアウトとかで共通なものをコンポーネント化するのが良さそうですね。

ページリンク

ページ間を遷移するためにリンクを設置します。
Gatsbyにはサイトページ内を遷移するためのLinkコンポーネントを利用します。

// src/pages/index.js

import React from "react"
import Header from '../components/header'
import { Link } from 'gatsby'

export default () => (
  <div style={{ color: `teal` }}>
    <Link to='/contact/' />Contact</Link>
    <Header headerText='About Gatsby' />
    <p>It's pretty cool</p>
  </div>

// src/pages/contact.js

import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"
export default () => (
  <div style={{ color: `teal` }}>
    <Link to="/">Home</Link>
    <Header headerText="Contact" />
    <p>Send us a message!</p>
  </div>
)

とすることで、

Contactページへのリンクを作成できます。
Contactをクリックすると、

ページリンク

ぬるっとContactページに遷移することができました！(^^)

ビルド

Gatsbyで作ったプロジェクトのルートで

gatsby build

と実行することでビルドできます。

ビルド

ビルドが簡単に完了しました^^

デプロイ

今回のチュートリアルで簡単に作成したページをデプロイしてみます。

surgeというものを使うと静的ページをサクッとホスティングできるみたいです！(初めて知りました^^;)

yarn global add surge

でsurgeをインストールします。

surge

コマンドを実行すると、email, パスワード, プロジェクトなどを聞かれるので適当
に入力するだけで、デプロイまでやってくれるようです。(お手軽！)

surge /public

を実行してビルドしたファイルをデプロイします。
デプロイが完了したので、URLにアクセスしてみると、、、

デプロイ結果

デプロイできました！
デプロイしたディレクトリを指定するだけでお手軽にできました。

まとめ

Gatsbyに初めて触れてみましたが、ReactベースなのでReactを少し知っているとすんなり使えそうですね！

次のチュートリアルではスタイルの付け方を説明されているようです。（styled-componentでスタイリングできたらいいなぁ〜）

データの取得と表示まで理解できるとかなりゴリゴリ使っていけそうなので、引き続きチュートリアルをやってまとめていきたいと思います！