チュートリアルを試す
前回のつづきステップ４
ここからの４つのステップは連続しており、これらを通して Gatsby が兼ね備えるかなり強力な機能である graphql によるリソースへのアクセスについて書かれている。これらのステップを通すことで最終的に markdown 記法による記事作成が出来る簡易的なサイトが完成する。
ステップ４では gatsby ライブラリが提供する graphql モジュールがどのように動作するのかを学ぶためにサイトのタイトル情報にアクセスする方法に触れる。サイトのタイトルは gatsby-config.js のような場所に記載しておくことで、ここを一箇所変更するだけで各コンポーネントやページに記載されているサイトタイトルも書き換わるという状態を目指す。
所感
本ステップで軽めに useStaticQuery について触れられているがこれがあまり深く理解出来なかった。ページコンポーネント以外のコンポーネントにおいて GraphQL でリソースにアクセスしたいときに使用する方法なのだが、これを使うと呼び出し元のページコンポーネントから props でデータを渡す場合とどう違うのか等。
それから、ステップに明確な意図が存在しつつその流れの中に色んな付加情報があって、学びが多く良い指導の仕方だなと思った。例えばこのステップでは上記に述べたような内容を伝えたい本筋があるが、その例題の中で emotion ライブラリを使って CSS-in-JS していたり。
ステップ５
ステップ５では gatsby-source-filesystem プラグインを使って、サイトを構成するファイルに GraphQL を使ってアクセスする方法について学ぶ。例えばこのサイトではトップページや全記事ページなどに各記事のタイトルが並んでいてそこから記事本文にアクセス出来るようにしているが、これらは GraphQL を使って取得した各記事ファイル情報を列挙しているだけである。
またこのステップで Gatsby が提供してくれている GraphQL エディタについても触れる。このツールが便利で、チェックボックスをポチポチとクリックしていくだけで簡単に GraphQL が作成できる。
所感
GraphQL についてのそもそもの理解があまり無いので edge や node という概念がぼやけていて「まぁそういうものなんだなぁ」くらいの理解になってしまっている。これは後日時間を見つけて把握しておく。