GatsbyJS×TypeScriptでブログを作ってみた

Gatsby.jsでブログを構築してみた。

Gatsby.jsとは？

React製の静的サイトジェネレーターです。webサイトを作る時に使います。 Gatsby.jsは公式サイトに「blazing fast🔥」と自分で書いちゃうほど早いフレームワーク

Gatsbyによって生成されるWebサイトはSPAとして出力される
様々な最適化・コード分割をGatsbyがやってくれる
GatsbyのサイトはSPA、初回ロード以降はロード時間ゼロで画面遷移できる
Gatsbyが専用のLinkコンポーネントを用意しており、それを用いると、ページ内に入っているリンクを自動で検出してプリフェッチを行ってくれる。（必要そうなデータは自動で読み込んでくれる）
SSRと同様、配信されるのはHTML/CSS & JavaScriptなので、クライアントサイドでDOMを構築する時間も不要となり、JavaScriptの実行時間を短縮できる
Wordpressのように動的にページを作成することも無くなり、サーバサイドのプログラム実行時間とクライアントサイドのプログラム実行時間を両方削減することが出来る

今回、ブログを作ってみて、「簡単なサイトなら全部Gatsbyでいいんじゃね？」と思うほど使いやすかった。

GatsbyJSにはネイティブでTypeScriptをサポートしているので、特に設定なしでTypeScriptが使用できる。が、タイプチェックを行うためにはTypeScriptのインストールと .tsconfig ファイルの作成が必要。

今回は、React、TypeScript、GraphQLのキャッチアップも兼ねているのでこういった構成にしてみた。個人ブログには不要な感じもするが、より実務感を出すためにも、リンターの設定を入れてある。

コードハイライトが反映されているかのテスト

const hoge = 'hogehoge'

<div>hoge</div>

個人的には、React、TypeScriptのキャッチアップに最適だと感じた。公式のチュートリアルや技術書でインプットを終えた後、GatsbyでTypeScriptの環境を構築してコンポーネントの開発を進めたほうが理解が早い。

emotionやstyled-componentsを入れて、themeの設計だったり、やれることはたくさんある。ついでにGraphQLも学べるので、一石三鳥だ。

何より、個人で使うブログを自分好みにカスタマイズしながら開発するほうが楽しいし数倍捗る。

駆け出しフロントエンドエンジニアには是非おすすめしたい。