Gatsby.jsでサイトを構築したので良いところを書いていく

Gatsby.jsのすヽめ

静的サイトジェネレータは文字どおり静的サイトを生成してくれる技術です。

コードを書いてコンパイルすればいい感じにサイトを生成してくれるので、あとはそれを適当なサーバでホスティングするだけ。サーバーの環境構築もDBの世話も不要、というシンプルさが魅力です。

Markdownファイルからページを生成させればブログとしても使えるし、NetlifyCMSやStrapiのようなヘッドレスCMSと組み合わせればCMS付きのWEBサイトにもできます。

日本での普及度はまだまだですが、個人的にはWordPressにとって代わるポテンシャルを持った技術だと思っています。WPは定期的に面倒を見てあげないといけないうえ、カスタマイズしようとすると色々厄介ごとが多いイメージだったので、その辺の煩雑さから一挙におさらばできる静的サイトジェネレータはまさに救世主でした（WPみたいな定期的なアップデートが不要なのは本当嬉しい）。

で、数ある静的サイトジェネレータ中でもGatsby.jsは日本での知名度が高めなうえ、使ってみて良いものだったので、普及の一助になればと思い、感じた美点や個人的に苦労した点などを書いていきます。

導入する際の参考にどうぞ。

Gatsby.js公式はこちら
※静的サイトジェネレータ自体の持つメリットはすでにいくつも紹介している記事があるので省きます

良いところ

SPAを手軽に構築できる

Gatsby.jsはReact製のジェネレータ、ということで、面倒なこと一切なしでSPAとして動作してくれます。

SPAはインタラクティブなWEBアプリを構築する際に優れたUI/UXを提供できる一方で、普通のブログやWEBサイトに使うにはコストが高すぎるとも思います。ただ静的なコンテンツを返すだけのサイトをSPA化しても、そのために支払う開発コストに対して得られる効用が釣り合わないわけです。

が、構築に支払うコストの高さという問題さえ解消できてしまえば、すべてのWEBサイトをSPA化してしまっても良いくらい優れた技術なのもまた事実です。

Gatsby.jsはSPA構築のコスト問題を解決する優れた手段です。

なにせコマンドひとつで完璧に動作するReactアプリを構築できてしまうし、新しいページを追加する手段は/src/pages/以下のディレクトリにページ名を冠したJSファイルを追加するだけです。

凝ったことをやろうとしない限り、面倒なことはなにひとつ考える必要がありません。

###充実したチュートリアルとドキュメント
Gatsby.jsはまだ日本語の情報は少ないものの、公式がかなりしっかりとしたstep by stepのチュートリアルを準備しています。

このチュートリアルはモダンなフロントエンド技術への入門書にもなっていて、進めるうちにReactやGraphQLなどの扱いが分かる他、surge.shやLightHouseといった便利なサービスにも触れられるようになっています。

そのため、Gatsby.jsのチュートリアルを進めることは、初心者がReactやモダンなフロントエンド環境に慣れるための優れた選択肢でもあります（実際私がそうでした）。

ドキュメントも恐ろしく充実しており、開発する過程で生じたほとんどの疑問は公式サイトを読んでいれば解消できるはずです。ぜひ一度覗いてみて欲しいのですが本当に細かいところまで網羅されており、開発コミュニティの活発さと普及にかける熱意が伝わってきます。

もちろんドキュメントは英語ですが、基本的に平易な英文で書かれているため、英語が読めない人でもGoogle翻訳を通せば問題なく理解することができるはずです。

強力なGraphQL

GraphQL and Gatsby
Gatsby.jsはGraphQLを通じてあらゆるデータソースを呼び出し、サイト内に埋め込めるようになっています。サイトメタデータ、ディレクトリ内にある画像ファイルやマークダウンファイル、さらには外部ソースまで、あらゆるものをです。

これは実際に使ってみるとかなり強力で、私はひとつサイトを作り終える頃にはすっかりGraphQLの虜になってしまいました。この便利さを体験してしまうと、RESTAPIで何度もリクエストを飛ばすのがひどく煩雑に感じられるようになってしまうほどです。

まだ普及度の低いGraphQLのパワーを手軽に体感できるという点でもGatsby.jsはおすすめです。

モダンなフロントエンド環境が手軽に手に入る

基本的にGatsby.jsプロジェクトは、トランスパイラやコンパイラがすべて設定され、あとはコードを書くだけ、という状態で生成されます。そのため、あなたが環境構築のためにやることはほとんどありません。せいぜいプラグインを入れてconfigを編集するくらいです。
環境構築というのはいつの時代も面倒で手間のかかる作業です。その過程をほとんど自動でやってくれるというのは、フロントエンド初学者にとってはもちろん、すべての開発者にとって嬉しいところです。

高いカスタマイズ性

高機能なシステムはその完成度の高さ故に窮屈に感じられることがありますが、Gatsby.jsはそうではありません。

もし望むなら、あなたはすべてのコンポーネントを1から自分で作ることができるし、それらを自由に組み合わせてサイトを構築することができます。そのため、あり合わせのテーマやテンプレートを適用するだけでは満足できないとき、Gatsby.jsは良い選択肢となります。

もちろん、手早く見た目の整ったサイトを構築したければGatsby.jsに用意された豊富なスターターキットから好きなものを選ぶこともできるし、これらのスターターキットをベースにしてカスタマイズすることもできます。

静的サイトジェネレータとしては日本における普及度が高め

静的サイトジェネレータはまだ普及度の低い技術なのである程度は英語圏の情報を漁る覚悟は必要ですが、Gatsby.jsは日本語圏での情報が比較的多いです。このあたりも初学者にとって優しい点だと思います。

Reactコンポーネントを利用できる

React用に作られたコンポーネントは基本的にGatsby.jsでも利用することができます。

##個人的に詰まったところ
以下のところは私個人の技術力不足による面が大きいので、JSやReactの仕様をちゃんと理解できていれば相対的に無視できるようになる問題です。が、使っていて苦労したところも一応書いておきます。

###React製であるということ
これは享受できる恩恵の裏返しなのですが、サイトのあらゆる機能をReactの作法に則って実装する必要があるというのは留意しておくべきです。

ReactやJSXの独特のクセを理解する必要はあるし、素のHTML&CSS&JSでは簡単だった機能の実装に思わぬ手間がかかることもあります。もちろんReactに初めて触る場合、そこそこの学習コストを支払うことになります。

これは私個人の知識不足による面が大きいのですが、Gatsby.jsは(というよりReactは）リッチなアニメーションの実装に苦労することが多かったように思います。基本的にReactはほとんどのJavaScriptライブラリを活用できますが、それらを導入するとき毎回「ReactとJSXの作法に則って実装するにはどうすれば良いか」を考えなければならないというのは、けっこう疲れるものです。

こういう事情もあり、私は基本的に外部のJSライブラリは使わずに、CSSアニメーションとJSによるイベント制御を組み合わせてアニメーションを実装しました（凝ったことをやろうとしない限りそれで十分）。

ともかく、Reactに対応していない/Reactにおける実装方法がはっきりしないJSライブラリなどを使いたい場合は苦労するかもしれないし、自身のスキルレベルによってはライブラリの採用自体を断念することになるかもしれません。

複雑なアニメーションやUIを実装しようとするとそれなりの技術力が必要

上の項目と通じる話ですが、シェーダーなどを使ったリッチなグラフィック表現を実装したい時詰まることがありました（まあこれは素のHTML+CSS+JSで実装しても難易度が高いものですが）。

個人的な体感では、ReactはHTML&CSS&JSでアニメーションをやるくらいなら問題なく実装できました(Reactの作法でイベントを制御する必要がある程度)が、ここにWebGLを加えてさらにリッチな表現を、となると私個人の技術力ではちょっと手に負えなくなる印象でした。
私はWebGLやGLSLシェーダーに関してほぼ素人なので、チュートリアルを見よう見まねで実装することはできても、それをReact上で応用することができなかったのです。

ReactからWebGLを扱いたい場合、react-three-fiberやgl-reagtといったものがあるため、やってできないことはないはずです。が、現状の自分のスキルでこれらを扱うにはちょっと荷が重かったようです。

逆に、WebGLの扱いに習熟していたり、シェーダー自分で書けるよ、というレベル人ならこの辺も何の問題もないかと思います。
私もそれくらいのレベルになったらまた挑戦するつもりです

元来、シェーダーによるリッチな表現は画面遷移の発生しないSPAとの相性が良いはずなんですよね。

##おわり
そういうわけで、個人的な感想を交えたGatsby.jsの紹介でした。
総じて、いまWordPressが占めているような需要にはほとんどの場合応えられる技術であるように思います。

Webサイトやブログを構築したい方、モダンなフロントエンド環境に触れたい方、手軽にSPAを手に入れたい方、WordPressのかわりになる技術を探している方、一度試してみては如何でしょう。上にも書きましたが日本での普及度が比較的高めなのもあり、静的サイトジェネレータは迷ったらとりあえずこれやっとけば良いのでは、とすら思います。

ReactやGraphQLが入ってくる都合上若干学習コストは高めかと思いますが、得られる恩恵は間違いなく大きいです。シンプルなのにパワフルで良い技術ですよ。

環境構築手順はこちらからどうぞ👉チュートリアルのpart0