あらすじ
React.js と Vue.js のどちらが優れているかはどちらでも良いと思っています。なんですが React.js のエコシステム のほうが一歩先を歩んでいると思っています*1。私が React.js のエコシステムを推す理由に一つになっているツールがめでたくメジャーバージョンをリリースしたのでご紹介したいと思います。
Gatsby とは
Markdown を記述して Static な page を書き出すツールです。いわゆる Static Generator。今回のバージョンから Markdown 以外にも色々なところからデータを集積して Graphql で取り出すインターフェースが採用されました 。
私が Gatsby を好む理由ですが、React.js で書いた Compnent をそのまま利用できるところです。react-storybook 上に state less な compnents を集めている人はその財産をそのまま利用できます。
GraphQL とは
このあたりの記事を参考にすると良いのではないでしょうか。
- http://qiita.com/bananaumai/items/3eb77a67102f53e8a1ad
- http://mizchi.hatenablog.com/entry/2017/02/07/201308
GraphQL の概念とかその辺の記述を読んでいると時間かかると思いますが、最低限自分が必要な場面での使い方を覚える分にはそんなに時間かからないと思います。
Gatsby は GraphiQL というツールを使って問い合わせできるので少しだけ紹介します。
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
}
}
}
}
そうすると以下のような画面になると思います。
Gatsby の Node について
詳しくは下記のドキュメントをご覧下さい。Gatsby は元となるデータをMarkdown であったり、JSON ファイルなどから集積しますが、その単位が以下の Node と呼ばれるものです。
https://www.gatsbyjs.org/docs/node-interface/
Graphql で問い合わせするのはこの node です。Gatsby をカスタマイズしたい場合は、node を作成する ことと Graphql で node を取得 する方法を覚えれば OK です。
Markdown で Node を追加して Grahpql で取得する
とりあえず一通り以下の Blog の通りに作業してみましょう。
手順通りに終わったら以下の 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 について
下記に詳しい説明があるのでこの単語に聞き覚えがない方は一度ご一読下さい。
まとめ
Gatsby で Markdown を使って Static Site を作る方法を学びました。 次回は JSON file から Static な Site を生成する方法を紹介します。
*1:React.js と Vue.js との優劣は議論する気はないのですがこれらのエコシスムの一長一短に関しての議論は歓迎します
