【GatsbyJS 入門】 Gatsby Tutorialざっくり解説

チュートリアルについて

公式チュートリアル
https://www.gatsbyjs.org/tutorial/

チュートリアルとして、適度な分量（多すぎない、深すぎない）が良かった。
（チュートリアル実施時点での自分のレベル感としては、NetlifyでDeployしてみたぐらい。Qiita見たぐらい。）

全9章で、掛かった合計時間は、10時間ほど。
（※1点だけハマり箇所有り。 “nmp install” を使うとハマるエラーが起こる箇所があった。
“yarn add” を代わりに使うとはまらないので、基本yarnを使うことをおすすめします。）

上記ハマりやメモ書きしたりがなければ、 8hかからない = 1日でおわりそうな分量。
部分的に知識ある人だと、半日とかで終わるかも。

前半はレイアウト関連（React,JSX）で、後半はデータ関連（GraphQL）の解説。
最後に、サイト公開前に入れると良いプラグインの説明、というのがざっくりした流れ。
また、各章でサイトを少しずつ改良していく形のチュートリアルで、難しすぎず、ハマりどころ無く進められる様になっていた。

1週間ちょこちょこやって終わったので、1日でやろうと思えばできる分量かと。
React触ったこと無くても進められ、Gatsbyの基礎とReactとGraphQLを触れるのでお得感あるので、おすすめです！
（GatsbyJS + React(JSX) + GraphQL + 各gatsbyプラグイン + Chormeのサイト診断）

内容

※（）内は、実際に掛かった時間。

目次

1. 開発環境を設定する (30m)
2. Gatsbyの構成要素（ビルディングブロック）を知る (1h30m)
3. Gatsbyのスタイリング入門 (1h)
4. ネストレイアウトコンポーネントの作成 (2h30m)
5. Gatsbyのデータ (2h)
6. ソースプラグインとレンダリングされた問い合わせデータ (40m)
7. トランスフォーマープラグイン (25m)
8. プログラムでデータからページを作成する (40m)
9. サイトを可動させるための準備 (1h)

ハマった点

3章のTypographyの npm install 後にエラー

結論から言うと、 nmp install は使わず、 yarn add を使うべき

npm install --save gatsby-plugin-typography react-typography 
typography

とすると、ビルド時にエラーとなるので、 “yarn add” を使うようにすればOK.

yarn add gatsby-plugin-typography react-typography 
typography

※ gatsbyJSのIssueで上がっていて、 npm install の代わりに yarn add 使えば大丈夫だよ、というコメントが下までスクロールするとありました。

https://github.com/gatsbyjs/gatsby/issues/6834

npm install する箇所をすべて yarn add を使ったがエラー起きないのでGatsbyTutorial中は、yarn を使うことをおすすめします。

    npm install --save ~~~

↓

    yarn add ~~~

最後に

gatsbyの入門として、Tutorialが終わった後は、公式DocumentのRecipes見てみたり、自分でDeployしたGatsbyのサイトを改良しつつ、GatsbyJS力を上げていくのがよさそう。
公式のドキュメントが充実しているっぽいので、どんどん読んでいきたい。

Gatsby 関連記事まとめ

Tutorialやる前にDeployしてみた記事
・Gatsby + Netlify + Netlify CMS で、ブログ公開してみて

Gatsby Plugin系
・SNSシェアボタン / react-share
・SNS・動画埋め込み / gatsby-transformer-remark
・OGP対応 / react-helmet

デザイン修正系
・starter lumen から修正1

エラー系
・開発時に変更が反映されない

公式Document系
・Doc -> Recipes の目次一覧
・Doc -> Recipes の内容ざっくり解説