WordPressに代わるCMSツールGatsby使ってみた
はじめに
最近Gatsbyというワードをよく聞くようになりました。今回は静的サイトジェネレータと呼ばれるGatsbyの公式サイトを読みつつ触ってみて、簡単な説明や使ってみた感想を書いていきたいと思います。
Gatsbyの公式：https://www.gatsbyjs.com/
（ちなみにGatsbyという単語でググってもなかなか公式サイトに辿り着けませんw Gatsby SSGとかで調べると下の方に出てきます 笑）
Gatsbyとは
Gatsbyはstatic site generator（日本語では静的サイトジェネレータ）と呼ばれる物です。静的サイトジェネレータの説明に関しては以下のように書かれています。
静的サイトジェネレータ（SSG）はテンプレートやコンポーネント及び任意のコンテンツソースからHTMLページを生成するアプリケーションソフトウェアである。
簡単に言うとマークダウンとかで書いたコンテンツとReactで作ったテンプレートを組み合わせてHTMLに変換してあげるよ。というツールです。
そしてこのSSGはデータベースを活用した従来のCMS（content management sysmem）に取って代わる物と言われています。従来のCMSと言えばWordpressが一強ですよね。つまりWordpressを代替するソフトウェアということになります。
SSGの利点
では従来のCMSに比べてGatsbyのようなSSGは何が優れているのでしょうか？SSGには以下の利点があります。
1. サイトの複雑性を下げ、スピードと信頼性を向上させ、DX（developer experience）を改善する。
2. データベースへのアクセス集中を気にしなくて良くなる←データベースを持たないから
3. データベースサーバーを管理するソフトウェアやバックアップを気にしなくて良い
4. コンテンツの変更をトラッキングするためにバージョンコントロールシステム（VCS、gitなど）を使うことができる
5. ウェブサーバーやロードバランサー（アクセスが多い時にサーバーへのアクセスを複数に振り分ける仕組み）の存在を意識する必要がない。
非常にたくさんの利点がありますが私は1、4が非常に大きいと思っています。1に関してはWordpressとの比較になりますが、Wordpressが独特のルールや設定によって構築されているのに対し、GatsbyはあくまでReact、Node.jsなどの範疇で作られていますのでそれらを理解している人にとっては非常に理解しやすいですし、それらを触ったことがない人であってもGatsbyは非常にシンプルで理解がしやすいです。
またGitでコンテンツの変更を管理できるので「過去のバージョンに戻したい」「間違って消しちゃった」などの状態にもGitを使って簡単に対応できます。
実践編
それでは実際にGatsbyでブログを作っていきましょう。公式サイトのQuick startに沿って進めていきます。
npm init gatsby
npm start以上です！
ブラウザからhttp://localhost:8000にアクセスすると以下のページが表示されているはずです。簡単ですね！
ソースコードを見てみるとこんな感じです。pagesというフォルダ（ディレクトリ）の中にindex.jsというJSファイルが作られていて、その中にReactでトップページが記述されているのがわかります。
プラグイン
Gatsby自体は機能が非常に絞られておりデフォルトでマークダウン記法などには対応していません。ただし、プラグインと呼ばれる拡張機能が数多く開発されており、それらをうまく組み合わせて機能を拡張していきます。ここはWordpressと同じですね！
テーマ
プラグインに加えてGatsbyにはテーマというものが存在します。これはReactのコーディングやプラグインの導入、コンテンツとの紐付けが既に終わっており、すぐに便利な機能が使えるようになっています。今回は既存のテーマを使ってブログを作っていきます。テーマとして選んだのはGatsby公式が紹介していた「gatsby-starter-blog-theme」という公式テーマです。以下のコマンドを叩いてみます。
gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog-thememy-blogというディレクトリが作成されますので移動して
gatsby developとコマンドを打ちます。その後
にアクセスすればこのようなページが表示されているはずです。
ファイル構成
このGatsbyアプリケーションは以下のような構造になっています。
・content：マークダウン形式で書かれたブログ記事が保存される。
・src/gatsby-plugin-theme-ui：UI部分に共通で使われる定数などが定義される。
・gatsby-theme-blog/components：実際にUIに表示されるReactのコンポーネントが定義される。
・gatsby-config.js：サイトのタイトルやSNSアカウント、説明文などを編集することができます。
細かいUIを修正したい場合はshadowingという仕組みを使って更新できるようです。(https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/)
記事を書く
contentの配下のpostsというフォルダにmdxファイル（マークダウン）を配置すると自動的に記事として認識され、ブログに表示されるようになります。こういう感じですね。
http://localhost:8000 で確認すると記事が作られていることがわかります。
gatsby-config.jsでプロフィールなども書き換えて完成です！
公開してみる
せっかくブログができたのでインターネット上に公開してみましょう！今回使ったようなstatic site generatorで作られたHTMLファイルを公開する方法はたくさんありますが今回はFirebase hostingを使ってみます。
Firebase hostingは無料で使えますし、使い方もシンプルなのでおすすめです。
まずはstatic site generatorの名の通りstaticなサイトを生成していきましょう！
npm build
このコマンドを実行するとpublicというフォルダの配下にhtmlなどのファイルが生成されます。これらをFirbase hostingなどのホスティングサービス上に配置することでサイトを公開することができます。
次にFirebaseをコマンドを使えるように設定します：こちらのドキュメントに詳しくまとまっているので今回は割愛します。(https://firebase.google.com/docs/hosting/quickstart?hl=ja)
準備ができたら以下のコマンドを実行します
firebase deployしばらく待つとサイトがデプロイされ、Gatsbyで作成したブログが公開されます！
こちらが実際にデプロイされたサイトになります。
いかがだったでしょうか？今回はさらっと流しましたがFirebase hostingなどによってstaticなサイトを公開する手間が圧倒的に下がったことでstatic site generatorの価値も上がっているのだと思います！
感想
さて、今回はGatsbyの理論から実践までさらっとやってきましたが、正直な感想を述べると、思ったより事前知識が求められるかなという感じでした。もともと私のGatsbyへの認識は「ブログを作るツール」「Reactで作られている」「Staticだから簡単にホスティングできる」くらいでしたが、実際にはもっとたくさんのことができるツールだと感じました。
実際使いこなすには
・Node.js
・npm
・JavaScript（TypeScript）
・React
などの知識が必須だと思いました。逆に言うとこれらの知識を持っていない人にとっては学ぶことが多いので手放しにおすすめはできないかと思います。
Wordpressと比較してどうかと言うとWordpressよりも身軽だが高い知識が求められているのかなと思いました。やはりGatsbyを使うとCLIを通した操作やgit管理、マークダウンファイルの作成などが必要になってくるのでハードルが高いかもしれません。最初にしっかり組んでしまえばContentfulなどのツールを使ってGUI部分は補完できるのではないかと思います。
ReactやJavaScriptができる、もしくは勉強したいと言う人にとってはとても魅力的なツールだと思います！
最後に
今回はNode.jsやnpm、その他Gatsbyから少し遠い内容に関しては割愛しました。記事の中でもしわからない部分やエラーが出てしまって動かないという時はGatsbyに関係なくても喜んでお答えするので、気軽に私のTwitterへご連絡ください！
今後も開発・デザインについて発信を続けますので良かったらTwitterのフォローよろしくお願いします！