サイトを【Firebase × Gatsby】でリニューアルしてみた

前々からサイトの作りが非常に悪く、なんとかしたいと思っていたのですが。

先月は現場での作業があまり多くなかったので、暇な時間でシコシコ作っていました。

今までは【さくらの VPS × Webhook(Jenkins × GitHub)】の組み合わせで開発していたのですが。

さくらの VPS はともかく、Jenkins もかなりレガシーな技術になってきたのかなと…技術の移り変わりは早すぎますね。

最近だと CircleCI が主なんですかね？

それはともかく、自分のサイトくらいの規模で Jenkins を導入するのもどうなの？とは、当初から思っていました。

で、以前所属していた現場の上司から、Firebase良いよ！と強く勧められたので、いっちょやってみるか！と。

加えて、せっかくブログサイトを作るなら、Markdown と親和性の高い React パッケージを使用したいなということで、Gatsbyに白羽の矢が立った次第です。

Gatsby も Firebase も知識 0 の状態からリニューアルしてみたのですが、結局 3 週間くらいかかって、ようやくお披露目することができました。

ということで、各々について、以下現時点での所感です。

Gatsby

React で 否 SPA サイトを作るとなると、Gatsby か react-static のいずれかが選択肢に上がるイメージなんですが。

react-static は使ったことがないこと前提で、シンプルなサイトなら react-static で、複雑なサイトなら Gatsby で、みたいな感じなんですかね…？

とはいえ、Gatsby の方が流行っているだけあって、機能的に困ることや、わからないときに調べて戸惑うようなことは少なかったです。

(余談ですが、React の公式サイトも Gatsby で作られています)

ただ、当たり前ですが、日本語の記事が少ないので、調べること自体はやっぱり大変でした。

あと、個人的には、逆に機能過多感がありました…GraphQL で取得できるデータは、まだほとんど理解できていません。

加えて、React 初心者の方には、ちょっと扱うのは厳しいのかなと。

思っていた以上にできることが多いのと、モダンな技術や Gatsby 特有の実装も多く、そこに SSR も入ってくるとなると、なかなか大変です。

導入ハードルは高いと思います。

Firebase

続いて Firebase ですが、こちらは打って変わって、ものすごく使いやすかったです。

Google 特有のネストの深い設定も少なく、日本語のドキュメントも多く、とても良かったです、タダだし。

フロントの人間でも、十分に扱える範囲だと思います、自身、特に扱いに詰まることはありませんでした。

と、そんな感じでした。

既存サイトがまだ移行できていないので、早い段階で終わらせたいですね…。

あと、よくない設定が散見していることは承知の上で、ソースコードを公開してます。

もし参考になったら、幸いです。