GatsbyJS、ご存知でしょうか？（以下Gatsby）「静的にサイトを作る（後述）ので爆速・セキュリティばっちり」「プラグインとかテーマが豊富」「Reactで書いてある」「GraphQLを使っている」などなど、Gatsbyは魅力的で勉強になりそうなワードがたくさん詰まっています。ブログをもう一つ立ち上げようとしていたので、それをGatsbyで作っていこう、という企画です。
はっきり言って、Gatsbyは楽しいです。ただ、最初はとっつきにくい印象がありますし、しばらくイジらないとどういう仕組みで動いているかも把握しにくいです。
手探りでGatsbyブログを作ってきましたが「あらかじめ考えていた方がよかったな」とか、「ここは知っておきたかった…」という所を解説していきたいと思います！
クマプログラミング初心者でもなるべく分かりやすいように、Gatsbyの構造や操作感を伝えられれば、と思います。
Gatsbyで実際に運用しているブログはこちらです。ぜひ、のぞいてみてください！
- Gatsbyっていうフレームワークがあるらしいけど、なんのこと？
- Gatsbyって難しいの？
- Gatsbyをちょっと触ってみたけど、よくわかんない…どんな構造で、どうやって動いてるの？
Gatsbyのメリット、デメリット
公式ページはこちら。
メリット
- 静的なサイト作成により爆速表示＆セキュリティが堅い。
- SSR（Server-Side-Rendering）によりクローラーがちゃんと評価できるような作りになっている。よってSEO対策もばっちり。
- テーマ、プラグインが揃っている。
- 静的サイトなので、ホスティングサービスであるNetlifyなどを使えばサーバーを借りなくても公開できる。なので、サーバー代を浮かせられる。
デメリット
- 静的サイトなので事前にビルドする必要があるが、大規模で複雑な機能をもつサイトはビルド時間が長くなる。
- 動的な機能を直接持たせることができないので、コメント機能などは外部サービスを使って実装することになる。
- React、GraphQLなどの学習コストが高く、とっつきにくい。
現在「ブログを作る」と言えばWordPressがほとんどだと思います。WordPressはPHPという言語がベースになって作られています。PHPは「データベースに蓄えられたデータ」や「サイトを見ている人が入力したデータ」などを元に、ブログを訪れた人が「見せて」とリクエストする度にページを作って提供します。
クマリクエストがある度に作ると、柔軟性はあるけど提供に時間がかかりますよね。注文が入ってから皮を伸ばして包み始める餃子みたいなもんです。
一方、先ほどから登場しているGatsbyの特徴「静的なサイト」とは、あらかじめ準備したデータでページを作っておいて、リクエストがあればすぐにそのページを提供できる状態にしておく、というイメージです。ユーザーからの入力をページに反映したりはできませんが、あらかじめ作っているので提供が速いというのと変更の余地がないのでセキュリティに強い、という特徴があります。
クマ柔軟性が低い代わりに、速くて安全なサイトの情報提供ができる、ということですね。仕込みがあらかじめ済んでいる餃子のようなもんです。注文が入ったら焼くだけ。
LINEスタンプもぜひご覧ください！
Gatsbyの正体と勉強する利点
Gatsbyの正体を知ると、Gatsbyを学ぶ利点が見えてきます。
GatsbyはReactベースです。ReactはNode.jsで動いています。
いきなりわかりにくくなりました…少し丁寧に説明します。
つまり、Gatsbyは、Nodeというサーバー上で実行されるJavaScript（本来JavaScriptはクライアント、つまりサイトを見ている人のブラウザ上で実行される）で作られたReactというライブラリ（ファイルの集まり）を元に作られている、ということです。
「？」と思っていただいても「ふーん…」と思っていただいても結構ですが、要はGatsbyの書き方でわからないことがあれば元となっている「React」を調べるとわかりやすい、ということです。Gatsby独特の書き方もありますが、基本はReactです。
そして、Reactは柔軟性、汎用性、パフォーマンスに優れており、将来性が高いと言われています。スマホアプリ開発ができるReactNativeもReactがベースになっています。つまり、Reactは学んでおいて損はない、と言えるでしょう。
また、Gatsbyを構成している重要な要素であるGraphQL。これもモダンな技術ですが、一度使うと普通のデータベースに戻れないくらい利便性が高いものです。
クマGraphQLはそのうちしっかりと説明したいと思います。
Gatsbyのインストール
1．Node.jsをインストール
Node環境が必要なので、なければbrewを使ってインストール。インストールするとnpmというNodeのパッケージ管理コマンドが使えるようになります。後述しますが、私はnodeが入っているか確認せずにインストールして、後で整理する羽目になりました。
$ brew install node2．yarnをインストール
yarnとnpmは、Nodeのパッケージ管理コマンドです。しばらくnpmでGatsbyを運用（プラグインのインストールとか）していたのですが、依存関係の管理が面倒になって途中からyarnに乗り換えました。ということで、yarnを使ったNode管理の方がおすすめなので、yarnをインストールしておきます。
$ brew install yarn2．Gatsbyをインストール
$ yarn global add gatsby-cli以上。globalはグローバルインストールのオプション。
クマ「これだけ？」ってくらい簡単にインストールができます。アイス食べながらやったけど、アイス食べる方が時間かかりました。
Gatsbyでブログ立ち上げ
以下のコマンドで新しいサイト（ブログ）を立ち上げ
$ gatsby new サイト名 スターターのgithubURLスターターとは、いわゆるサイトの目的に応じたテンプレートです。さまざまなタイプのスターターがあるので、こちらで探してみてください。今回は、gatsby-starter-blogを使ってみます。
$ gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog「gatsby-blog」の部分は任意のサイトの名前、それ以降の「https://github.com/gatsbyjs/gatsby-starter-blog」はGitHub上にあるスターターのリポジトリです。（今回はgatsby-starter-blogのリポジトリ）
ちなみに、スターターと使っている環境のnodeのバージョンの関係によってはエラーが出る場合があります。私はnpmを使いましたが、yarnを使った場合も同様のエラーが起きるようです。nodeのバージョンを安定版か、場合によってはそれ以下に下げましょう。バージョンの下げ方に関しては以下の記事が参考になると思います。
インストールしている Node.js のバージョンをダウングレードさせるために n を使ってみる。
クマ個人的な問題①。
gatsby-starter-blogからCSSなどの装飾をはがしたスターターを使おうとしましたが、nodeのバージョンを下げても使えませんでした。諦めてgatsby-starter-blogでブログを立ち上げました。
クマ個人的な問題②。
nodeのバージョン管理コマンドnを使ってもnodeのバージョンが切り替わりませんでした。どうやらグローバルインストール、ローカルインストールが混在していたようです。これを機にnodeとnpm周りを一度アンインストールしてディレクトリも消して、整理しました。
話が少し逸れましたが、以下のコマンドを入力してサイトを立ち上げてみます。
$ cd gatsby-blog //ディレクトリの移動
$ gatsby develop //テスト環境でサイト立ち上げブラウザで「http://localhost:8000」と入力し、サイトが立ち上がっているか確認。
クマ無事にサイトが立ち上がりました。コマンドラインでのインストールですが、簡単ですね。
BearFruitのマスコットキャラ「クマ」がLINEスタンプになりました！
プログラマーの心に刺さる、「プログラミングあるある」。毎日使いたくなること間違いなし！
gatsby-starter-blogの構造
さて、無事にブログは立ち上がりましたが、正直「Gatsbyってどんな構造になってんの…？」と思うはずです。少なくとも私は思いましたし、同時に「訳分からん…」と思いました。
クマなので、ここではgatsby-starter-blogの構造について説明していくよ！
まずは、gatsby-starter-blogのディレクトリ構成です。
とりあえず、ブログの構成に必要なディレクトリの役割をざっと説明します。
- /content/blog/
この中にブログの中身を記述するディレクトリとファイルが入っています。ちなみにGatsbyのブログはマークダウン(.md)で書きます。が、後ほど説明しますが、マークダウンを拡張したMDXを使うようにした方がいいと思います。 - /src/components/
この中にはコンポーネントが入っています。ブログを構成する部品（サイドバー、フッター、ヘッダーなど。）やその部品を使い回したりするためのファイルが入っている、と思っていただければOKです。 - /src/images/
画像ファイルが入っています。そのままですね。別にここに入れなくてもいいです。Gatsbyのアイコンとかが入ってます。 - /src/pages/
いわゆる固定ページ用のディレクトリです。ここにあるファイルはそのままルートディレクトリにぶら下がっちゃいます。 - /src/templates/
ブログなんかは、それぞれのページが同じ形をしています。そのテンプレートを置いておくディレクトリです。後ほど説明しますが、ビルド時にここにあるファイルにデータを渡して、それぞれのブログページ等を作っていきます。
大まかに説明をしましたが、ぶっちゃけ/src/pages/以外のディレクトリは結構自由に構成して大丈夫です。例えば、/src/componetns/の中に/templates/を入れちゃったりしても全然問題ないです（パス指定するときはもちろん注意ですが）。
クマファイルの置き場所はどこでもいいですが、ビルド時のどのタイミングでファイルを読み込むか、によっては思うようにGraphQLのクエリが使えたり使えなかったりするので注意です。
さて、ディレクトリ構成を押さえたところで、Gatsbyで最初に頭に入れておくべきことを述べておきます。それは、
Gatsby（というより静的サイトジェネレーターと呼ばれるもの）の最大の特徴は、develop（テスト環境でサイトを立ち上げ）やbuild（本番環境の構築）をする際（以下まとめてビルド時ということにします）にすべてのページをあらかじめ作ってしまう、という点です。
そこでまず重要になってくるファイルがルートにある、
- gatsby-config.js （ブログのタイトルやディスクリプションなどの基本情報やプラグインの指定をする）
- gatsby-node.js （ビルド時にGraphQLでデータを拾ってきながらブログページなどを作っていく）
の二つのファイルです。これらに変更を加えると、好きなプラグインを使ったり、タグページなど新しいページを作ることができます。
ビルド時のそれぞれのディレクトリ、ファイルの関係は次のようになります。
クマちなみに、コンポーネントからGraphQLを使うこともできます（useStaticQueryというものを使う）が、変数を渡してクエリ（ざっくりと、データベースに対する命令と思ってください）を実行することができないのであまり自由度はありません。取ってくるものが決まってればいいですが…。
「あらかじめ考えておいた方がよかったな」と思うこと
1．ブログを実際に書く際にMD（マークダウン）で書いていました。が、途中でMDX（マークダウンでjsxが使えるようになるように機能拡張した形式）というものに気付き、そっちで書いています。最初からMDXで書いていればよかったなぁ、と思ってます。設定が若干面倒なので、またそのうち記事にしたいと思います。
クマMDXは便利なのですが、GatsbyではGraphQLの書き方が変わるので書き換えがちょっと大変です。
2．カテゴリーの階層の扱い。当初、2階層（メインカテゴリ→サブカテゴリ）としていましたが、URLを作るのが面倒＆カテゴリ一覧のページを作るときに複雑になりすぎました（作れないことはない）。
クマ結局こだわりを捨てて1階層（メインカテゴリ）のみにしました。
3．当たり前かもしれませんが、ブログの構成はよく考えてからやりましょう。WordPressに慣れていると「まぁサイドバーの構成なんかあとでどうにでもなるわ」と無意識のうちに思っちゃってますが、Gatsbyは基本的にコード書きによる手直しなので、作り直しなんかが面倒です。
クマ「これ、やっぱりこうしたいな」と思ってからが大変です。
ちなみにサーバーはConoHa WING
Gatsbyはサーバレスでの運用も魅力的ですが、本格運用するなら安心感のあるレンタルサーバーもおすすめです。
まとめ
コマンドラインを使うので若干慣れが必要ですが、（すんなりいけば）数十分でブログが立ち上がります。
クマ「Gatsbyってどんな感じなのかわかんない」という人がちょっとでも興味をもってくれれば嬉しいです。
Gatsbyの記事は随時更新中です！
Gatsbyを学習している方への私からのオススメ！
私が読んでよかったな、と思うGatsbyの学習をするのにオススメの本を紹介しておきます。
画も多くてとても読みやすく、ステップバイステップでGatsbyJSのサイトを作ることができます！
また、Gatsbyを学習する上で、Reactを同時に学習することもオススメします。
こちらも、まず構成や見た目がとても読みやすい本です。加えてReactに対しての専門的な知識を丁寧に学ぶことができます。ここでReactに対する基礎知識をしっかりしておくと、Gatsbyに対する見方が変わって、Webページをサクサク作ることができるようになります！
あと、色々と調べたのですが、Reactの学習ならUdemyもオススメです。必要な知識を１動画単位で購入できるので、学習に無駄がないです。Reactってあんまり学習できるプログラミングスクールみたいなのがないんですよね…。「React」と検索するだけで大量に動画がでてきます！
おまけ
クマここからは本文に関係ない宣伝です。
このブログはアフィリエイトに参加しているのですが、アフィリエイトの広告って、結構面白いものがあるんですよね。
中には「なにコレ！欲しい！」と思うようなものもあります。結構アフィリエイトの広告って眺めているだけでも面白いです。
私は結構多趣味でパソコン関係からスポーツ、アウトドア、料理…色々やります。そんな私が、有名なASPサイトである「A8.net」と「もしもアフィリエイト」の広告を全て見て「これは面白いな」と思ったものや、実際に利用しているサービスを紹介していきたいと思います！
クマちょっと息抜きに見てみてください！
お得な情報
ふるさと納税をお得に！
クマふるさと納税をやってる人は多いと思いますが、こちらは寄付金額の１０％還元、ということでお得にふるさと納税ができます！
クリエイターを目指す方へ
Adobeがお得に手に入って学べる！
クマ実はYoutubeもやってます。気になる方は右上のYoutubeアイコンからご覧いただければ嬉しいです！で、このYoutubeの編集ソフト、最近Adobe Premiere Proに変えました。変えたら…結構視聴維持率が伸びたんですよね！やっぱりAdobeはオススメ！ですが、専門的で難しい、というのも否めません。クリエイターに興味がある方は、Adobeがお得に手に入って学べるデジハリの受講がおすすめです！
