PR
【GatsbyJS製ブログ】Gatsbyの勉強法
![](https://bear-fruit.online/wp-content/uploads/2022/08/main-12.webp)
このブログでは結構Gatsby関係の記事を書いていて、情報発信をしています。
![](https://bear-fruit.online/wp-content/uploads/2022/06/main-300x212.webp)
もちろん自分でもGatsby製ブログの運営をしています!
ですが、Gatsbyは日本語の情報が少なく、勉強がしにくいんですよね…。
この記事では、私がどのようにGatsbyを勉強してきたか、について紹介していきます。
![](https://bear-fruit.online/wp-content/uploads/2022/10/normal-150x150.webp)
よければ参考にしてみてください。
とはいえ、勉強方法については当たり前のようなことばかりですので、参考になるサイトや本を見ていただければ、と思います。
公式ドキュメント
公式ドキュメントに勝るものはないです。
「あ、そんなオプションあったの?」みたいなのも、当たり前ですがちゃんと書いてあるので、公式ドキュメントには結構お世話になりました。
ただ、英語なんですよねぇ…ここらへんが抵抗感がある人も多いと思います。
![](https://images.ctfassets.net/vkdbses00qqt/38yAjXH9hRko9noPZWrluI/4d1988b4b07acfab9ce93a87407930bd/Frame_3__2_.png)
![](https://images.ctfassets.net/vkdbses00qqt/38yAjXH9hRko9noPZWrluI/4d1988b4b07acfab9ce93a87407930bd/Frame_3__2_.png)
インターネットでバラバラ落ちている情報を集める
基本的にはこれですね。とにかく「これどうするんだろ?」と思ったものについて、インターネットに落ちている情報をかき集めます。
日本語であればありがたいですが、英語でもとにかく読みます。
特にdevelopしたりbuildする際のトラブル関係は日本語情報が少なすぎるので、この辺りは英語情報が中心です。
![](https://bear-fruit.online/wp-content/uploads/2022/10/pale-150x150.webp)
![](https://bear-fruit.online/wp-content/uploads/2022/10/pale-150x150.webp)
![](https://bear-fruit.online/wp-content/uploads/2022/10/pale-150x150.webp)
英語…難しいよねぇ…厳しいですぅ。
このサイトが特にオススメ、というのはあんまりありませんが、かみーゆさんの「銀ねこアトリエ」とKAZUTAKA SAKODAさんの「REFFECT」はコンスタントにお世話になっています。
「銀ねこアトリエ」さんは初心者にもわかりやすく、順序立てて説明してくれてるのでありがたいですね。
「REFFECT」さんは初心者でもわかりやすいんですが、情報が少ないのとちょっと古め、というのは微妙なところですね…でも、GatsbyだけでなくReactの情報も沢山あるのはありがたいです。LaravelやPHP、Pythonなど、沢山の言語、フレームワークの解説をしているので、そのあたりに興味がある方も見てみる価値アリ、です。
![](https://ginneko-atelier.com/static/ab63b904907e79c826f81db95b836380/035fd/entry401-v4.png)
![](https://ginneko-atelier.com/static/ab63b904907e79c826f81db95b836380/035fd/entry401-v4.png)
![](https://reffect.co.jp/wp-content/uploads/2020/03/react_gatsby.png)
![](https://reffect.co.jp/wp-content/uploads/2020/03/react_gatsby.png)
あとは結構バラバラと必要な情報を引っ張ってきています。
本
本も読みました。何冊か読みましたが、そもそもGatsby自体が最新の技術モリモリで作られているので、あまり冊数自体も多くありません。
正直なかなかオススメできるほどの情報量がないのが現状なのですが、その中でもわかりやすかったのはエビスコムさんの「Webサイト高速化のための静的サイトジェネレーター活用入門 」です。
大体の本はそうなのですが、この本も流れに従って作業していけば、サイトができてしまう、ということで体験としてはいいのかな、と思います。
なにより、図が多く文の装飾などが読みやすいので、技術書にありがちな「うわー…、これ読まなきゃいけないのか…」感が少ないです。
ただ、やはりJavaScriptやReactの記述の仕方などを知っておかないと読みにくい部分も多いです。「本当に初心者」という人はその辺りは適宜調べていく必要があるのかな、と思います。
BearFruitのマスコットキャラ「クマ」がLINEスタンプになりました!
プログラマーの心に刺さる、「プログラミングあるある」。毎日使いたくなること間違いなし!
動画
Youtubeなどの動画でも勉強できますがほぼ英語…英語がある程度できないとなかなか厳しい状況です。
![](https://bear-fruit.online/wp-content/uploads/2022/10/pale-150x150.webp)
![](https://bear-fruit.online/wp-content/uploads/2022/10/pale-150x150.webp)
![](https://bear-fruit.online/wp-content/uploads/2022/10/pale-150x150.webp)
日本語の情報少なすぎ…。本当に人気のフレームワークなのか?
まぁReactをベースにGraphQLなんかの技術も使っているので、敷居が高い感はあるので、それが情報が少ない理由かなぁと思いますが。
唯一、UdemyにはGatsbyの動画解説があります!
検索窓から「Gatsby」と入力すればコースが出てきます。動画で勉強したいならUdemyしかないですね。
しかも、Udemyには、GatsbyのベースになるReactに関する動画もある、というのが大きなメリットです。Gatsbyは、そもそもReactを理解していないと分かりにくい部分もあるので、そこも一緒に勉強できるのはありがたいです。
しかも、Reactは今Web開発業界でも人気がメチャクチャ高いJavaScriptライブラリです。これを機に勉強しておいても損はありません!
![](https://bear-fruit.online/wp-content/uploads/2022/10/good-150x150.webp)
![](https://bear-fruit.online/wp-content/uploads/2022/10/good-150x150.webp)
![](https://bear-fruit.online/wp-content/uploads/2022/10/good-150x150.webp)
Udemyではセールをやっていることも多いです!3割引からお得なもので8割引ほどのものもあります!安く購入できるタイミングで、ぜひチェック!
まとめ
とにかくネットで色々検索しながら手を動かしていきましたね…もっと情報があればありがたかったなぁ、とも思います。
その代わり、といってはなんですが、勉強して得た技術や情報はなるべくこのブログで公開していこうと思うので、ぜひ参考にしてください。
私自身がプログラミングほぼ未経験者、という意味でも、初めてGatsbyやReactに触れる人にもわかりやすく説明できれば、と思います。
![](https://bear-fruit.online/wp-content/uploads/2022/01/main-13-300x212.webp)
![](https://bear-fruit.online/wp-content/uploads/2022/01/main-13-300x212.webp)
Gatsbyを学習している方への私からのオススメ!
私が読んでよかったな、と思うGatsbyの学習をするのにオススメの本を紹介しておきます。
画も多くてとても読みやすく、ステップバイステップでGatsbyJSのサイトを作ることができます!
また、Gatsbyを学習する上で、Reactを同時に学習することもオススメします。
こちらも、まず構成や見た目がとても読みやすい本です。加えてReactに対しての専門的な知識を丁寧に学ぶことができます。ここでReactに対する基礎知識をしっかりしておくと、Gatsbyに対する見方が変わって、Webページをサクサク作ることができるようになります!
あと、色々と調べたのですが、Reactの学習ならUdemyもオススメです。必要な知識を1動画単位で購入できるので、学習に無駄がないです。Reactってあんまり学習できるプログラミングスクールみたいなのがないんですよね…。「React」と検索するだけで大量に動画がでてきます!