あいつの日誌β

あいつの日誌です。

Gatsby v1.3.0 を試す(1)

あらすじ

React.js と Vue.js のどちらが優れているかはどちらでも良いと思っています。なんですが React.js のエコシステム のほうが一歩先を歩んでいると思っています*1。私が React.js のエコシステムを推す理由に一つになっているツールがめでたくメジャーバージョンをリリースしたのでご紹介したいと思います。

Gatsby とは

Markdown を記述して Static な page を書き出すツールです。いわゆる Static Generator。今回のバージョンから Markdown 以外にも色々なところからデータを集積して Graphql で取り出すインターフェースが採用されました 。

f:id:okamuuu:20170726194358p:plain

私が Gatsby を好む理由ですが、React.js で書いた Compnent をそのまま利用できるところです。react-storybook 上に state less な compnents を集めている人はその財産をそのまま利用できます。

GraphQL とは

このあたりの記事を参考にすると良いのではないでしょうか。

GraphQL の概念とかその辺の記述を読んでいると時間かかると思いますが、最低限自分が必要な場面での使い方を覚える分にはそんなに時間かからないと思います。

GatsbyGraphiQL というツールを使って問い合わせできるので少しだけ紹介します。

github.com

Try GraphQL

やってみます。

npm install -g gatsby
gatsby new personal-blog && cd $_
npm run develop

次のような画面が出てきたら成功です。

 DONE  Compiled successfully in 182ms                                                                      15:27:47

 I  Your site is running at http://localhost:8000
 I  Your graphql debugger is running at http://localhost:8000/___graphql

http://localhost:8000/___graphql を開いてみましょう。これが graphiql の画面です。試しに以下のような Query を書いてみましょう。

query {
    allSitePage(limit:1000) {
      edges {
        node {
          id
        }
      }
    }
  }

そうすると以下のような画面になると思います。

f:id:okamuuu:20170726194216p:plain

Gatsby の Node について

詳しくは下記のドキュメントをご覧下さい。Gatsby は元となるデータをMarkdown であったり、JSON ファイルなどから集積しますが、その単位が以下の Node と呼ばれるものです。

https://www.gatsbyjs.org/docs/node-interface/

Graphql で問い合わせするのはこの node です。Gatsby をカスタマイズしたい場合は、node を作成する ことと Graphql で node を取得 する方法を覚えれば OK です。

Markdown で Node を追加して Grahpql で取得する

とりあえず一通り以下の Blog の通りに作業してみましょう。

www.gatsbyjs.org

手順通りに終わったら以下の Graphql を書いて見ましょう。以下が Markdown で記述された Node 一覧 です

query {
    allMarkdownRemark(filter: {}) {
      edges {
        node {
          id
        }
      }
    }
  }

以下のようなレスポンスが返ってくると思います。以下の例では Markdown のファイルを2個作成しています。

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "id": "/Users/okamuuu/personal-blog.bak/src/pages/08-12-2017-getting-next/index.md absPath of file >>> MarkdownRemark"
          }
        },
        {
          "node": {
            "id": "/Users/okamuuu/personal-blog.bak/src/pages/07-12-2017-getting-started/index.md absPath of file >>> MarkdownRemark"
          }
        }
      ]
    }
  }
}

次に Node 詳細 を問い合わせします。

query {
    markdownRemark(frontmatter: {path: {eq: "/hello-world"}}) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        path
        title
      }
    }
  }

以下の結果が表示されると思います。

{
  "data": {
    "markdownRemark": {
      "html": "<p>Oooooh-weeee, my first blog post!</p>",
      "frontmatter": {
        "date": "July 12, 2017",
        "path": "/hello-world",
        "title": "My First Gatsby Post"
      }
    }
  }
}

というわけでなんとなく Gatsby が集積した情報を問い合わせる方法が分かるんじゃないかと思います。

あと Front Matter について

下記に詳しい説明があるのでこの単語に聞き覚えがない方は一度ご一読下さい。

jekyllrb.com

まとめ

GatsbyMarkdown を使って Static Site を作る方法を学びました。 次回は JSON file から Static な Site を生成する方法を紹介します。

*1:React.js と Vue.js との優劣は議論する気はないのですがこれらのエコシスムの一長一短に関しての議論は歓迎します