Gatsbyで個人サイトを作ってみた

April 26th, 2021

個人サイトを作ってみた

Gatsby.js + Contenful CMS + GitHub Pagesを使って個人サイトをつくってみた。

元々個人サイトは作りたいと思っていたのだが、今回晴れて実行に移したのには大きく分けて2つ理由があるのでポエムする。


脱Angularしたかった

1つ目の理由は、Angular(*1)からReactにスキルセットを移行させたかったからである。

私は普段の仕事でフロントエンドは主にAngularで書いており、逆にReactやVueといったより人気のフレームワークには一切触れてこなかった。

実はこのサイトを作る前にも個人サイトをAngularで作っていて、今と同じドメインにホスティングしていたのだが、SEOなどを考えてSSG(*2)に対応させたいとは常々考えていた。(最も、当時は今みたいにポエムを個人サイトに掲載することは想定していなかったので、SEOの事を考える必要もなかったというのはあるが )

そんな時に、職場の他の開発者の方がReact製のSSGフレームワークであるGatsbyを使ってブログをデプロイしたという話を聞いて、私もReact/Gatsbyに入門してみたというのが今回の経緯である。

加えて、Angularが社内外問わず嫌われすぎていて、「これは沈みゆく船だな...」と思ったというのもある。むしろ、こっちの方が理由としては大きい。

断っておくが、私は決してAngularが嫌いなわけではない。むしろ凄く好きなフレームワークである。

AsyncPipeでObservableの非同期データを気持ちよく扱うことができ、コンポーネント間の双方向バインディングでとても使い勝手がよいと思っている。

しかし、どういうわけかAngularは世間ではまるで腫れ物のように扱われ、全人類がこぞってReactを使用している(要出典)。曰く、Angularは状態管理がめんどくさいのだと。

Angularで状態管理をするとなったら一番に候補に挙がる選択肢はNgRx(*3)だろうが、たしかにStateやエンドポイントの数だけファイル数が莫大に増えるので、開発やコードリーディングに時間がかかると言えばかかる。

私はReactに入門したてで詳しいことはよく分からないが、最近はGraphQLとApollo Clientというのを使って状態管理を行うのが主流なのだという。

幸いGatsbyでもContentfulデータの呼び出しや内部データの取得にGraphQLを使っており、ここら辺の理解も深めていきたいという所存だ。


技術のアウトプットがしたかった

個人サイトを開設した2つ目の理由としては、勉強した技術のアウトプットができる場所が欲しかったからだ。

これは自論なのだが、特定の分野に詳しい人間はインプットした情報以上にアウトプットする場を設けている、と感じている。

例えば学生時代に勉強ができたAくんは、勉強ができるが故に他の生徒に勉強の質問をされたり、勉強を教えることが多かったのではないだろうか?

他の生徒に教えたり質問に答えることで必然的にアウトプットの量も増え、さらに理解を深めることができるという好循環にAくんは陥っていたのではないか、と勝手に推測している。

私はいわゆるWebアプリケーションの実務開発を始めてもうすぐ1年(*4)になるのだが、正直言ってまだ何も分かっていない。

無論、ちょろっと解説記事を読んで分かった気になることは可能なのだが、本質的には何も分かっていない、そんな状態が開発を始めてからずっと続いていた。

本質的に何も理解しないまま実務開発歴がもうすぐ1年を迎えるにあたり、唯一この1年で大幅に向上したと言える能力といえば、Google検索力とドキュメントのリーディングスピードくらいだろう(逆に言えば、ここは昔と比べてありえん伸びた)。

そんな状態だからこそ、意識的に勉強した内容を言語化して記事に起こす場を設ける事は開発者としてより成長するために必要だと感じている、

また、Webアプリケーションの開発を雰囲気でやっている事に加えて、私には土台となるコンピューターサイエンスの基礎体力も不足している。

私は大学では文系の学問を専攻(*5)していたので、他のCS卒の開発者と比べると数理的なアルゴリズムの部分や低レイヤの部分はサッパリである。

そもそもWebアプリケーション開発に数理的な知識や低レイヤの知識が必要なのか?という問いには私はまだ答えを見つけられていないが、少なくともGood to haveであることは間違いないので、Webアプリケーション開発関連の技術に加えて、CS的なお勉強のアウトプットの場としてもこの場を活用していきたいというお気持ちでいる。


このサイトの使用技術について

最後に、このサイトを開発するにあたって使用した技術について簡単にまとめておく。

前述のように、このサイトはReact製のWebフレームワークであるGatsbyを使用しており、言語としてはTypeScript、スタイルにはSCSSを使用している。また、Gatsbyはデータの呼び出しにGraphQLを用いている。

ちなみにホスティングにはGitHub Pagesを使っていて、こちらも割と気に入っている。

先月ハッカソンに出場する機会がありそこでNetlifyを使ってデプロイしてみたのだが、所感としてはNetlifyは起動が結構遅かった。

ネットで調べてみても速度面ではGitHub Pagesに分があがるようだ。せっかくサイトをSSG化して工夫しているのに肝心のホスティングサービスの速度が悪ければ意味がないので、無難な選択肢かと思っている。

Headless CMSにはContentfulを使っているが、敢えてContentfulを採用した理由は特にない。強いて言えば、昔Wordpressを使っていたときに使いづらかったので他のUIを試してみたかった。


補足

*1 ひと昔前に流行ったTypeScript製のSPAフレームワーク。Googleが開発したことで有名。

*2 静的サイトジェネレータ。SPAかつSEOにも優れているが、動的なアプリには向いていない。

*3 RxJsをベースとして作られたReduxライクな状態管理ライブラリ。

*4 プログラミング 歴自体はもうすぐ2年。実務はインターンを含む。正社員としては1ヶ月程。

*5 正確には、教養系の学部で数理科学を専攻していたので、授業で少なからずの数学とプログラミングには触れていた。