GatsbyJS触ってみた

成果物

また適当にリンク置いてるだけなのだけれど貼る
github.com

デプロイしたやつ ↓
mt-coff.me

実際に触る

環境構築

Gatsby CLI をインストール

$ npm install -g gatsby-cli

Gatsby CLI でプロジェクトを作成

$ gatsby new [プロジェクト名] [使うのであればスターターのURL]

自分はデフォルトのものを使用したが多くのスターターがあり、自分で CSS とか考えたくないならｼｭｯといい感じのベースを生成してくれるので使う。

これで基本的な環境構築は終わり。

pages に各ページを components に必要なコンポーネントを定義していく感じなはず。

json からデータを取得してみる

gatsby-transformer-json を利用する

github.com

$ npm install --save gatsby-transformer-json

依存に追加したら gatsby-config.js に設定を追加した

plugins: [
  `gatsby-transformer-json`,
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      path: `${__dirname}/src/data`
    }
  }
];

src/data/ 下に json ファイルを置く。自分は以下のようなファイルを sns.json として置いた。

[
  {
    "name": "GitHub",
    "link": "https://github.com/mt-coff"
  },
  {
    "name": "Blog",
    "link": "https://mt-coff.hatenablog.com"
  },
  {
    "name": "Twitter",
    "link": "https://twitter.com/mt_coff"
  }
]

実際にコンポーネントで上記データを利用する際は以下のようなコードになると思う。

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const SomeComponent = () => {
  // all + ファイル名 + Json
  const { allSnsJson } = useStaticQuery(
    graphql`
      query {
        allSnsJson {
          edges {
            node {
              name
              link
            }
          }
        }
      }
    `
  )

  return (
    <>
      {allSnsJson.edges.map(({ node }) => {
        return (
          <div>{name}</div>
          <div>{link}</div>
        )
      })}
    </>
  )
}

Gatsby ではいろんな値を GraphQL の query でとってくる。localhost:8000/__graphql で query が試せるのでいろいろやってみるのがいいと思う。

ハマったところ

styled-components を利用していて一旦デプロイをかけたら何もスタイルがあたっていない状態でデプロイされた。
びっくりして gg ったら gatsby-plugin-styled-components というのがいたので必要な依存を追加。

$ npm install --save gatsby-plugin-styled-components\
                     styled-components\
                     babel-plugin-styled-components

設定を追加

plugins: [`gatsby-plugin-styled-components`];

これで解決した。

触ってみて

Graphql を使う辺りがちょっととっつきにくいと感じた。それを除けばプラグインもスターターも豊富かなと感じていて凝ったことをやらない限りは良さそうなスターターでプロジェクトを生成して表示するコンテンツだけいじるのが楽。

逆に自分でコンポーネントやスタイルをゴリゴリやっていきたいならデフォルトのスターターでやっていくのがいいのかな...

自分のポートフォリオ？(mt-coff.me)は GatsbyJS で今後いじっていくと思うのでもっと触ってなれたいと思います 💪