Gatsby とは
Gatsby は React ベースの静的サイトジェネレーターです。 生成される静的サイトはシングルページアプリケーションでもあるため、優れた UX をユーザーに提供できます。
メリット
- サイトを高速化することができる
- GraphQL を使用して、効率の良いリソース取得ができる
- React を使用することができる
- プラグインが豊富
- CMS の種類が豊富 etc…
本ブログで使用している技術
Netlify CMS
本ブログは、Netlify CMS で管理しています。Nelify CMS では、Netlify で静的ファイルの生成やホスティングをしてくれるため、低コストで運用・管理することができます。
Emotion
Emotion は、CSS-in-JS のライブラリの一つです。
CSS-in-JS の別のライブラリで Styled Components という選択肢もありましたが、Emotion の方が良いという記事が多かったので、今回は Emotion を使用しました。
CSS-in-JS のプロダクト採用事例
- レシピサービスのフロントエンドに CSS in JS を採用した話 by クックパッド
- styled-components の採用と既存資産を捨てた理由 by サイボウズ
- ヤフー株式会社における Web フロントエンドの技術選定 by Yahoo
- Sass から CSS Modules、そして styled-components に乗り換えた話 by 食べログ
上記のように、有名な Web 系企業でも採用されている CSS-in-JS ですが、パフォーマンスに影響を与えることが懸念されており、Next.js の公式では非推奨?となっている
- Next.js が CSS Modules を推奨する真相に迫りたい by Zenn
- The unseen performance costs of modern CSS-in-JS libraries in React apps by Aggelos Arvanitakis
Tailwind CSS
Tailwind CSS は、Utility first というアプローチでスタイルを組み上げていくのが特徴です。
- クラス名を考えるのに余計な労力を使う必要がない 何かをデザインするために
sidebar-inner-wrapperというような愚かなクラス名を追加する必要はありません。 そして、単なるフレックスコンテナに対して、完璧で抽象的な名前を考えるのに悩まされることはもうありません。 - CSS が肥大化しない 従来のやり方だと、新たな機能を追加するたびに CSS ファイルは大きくなってしまいます。ユーティリティを使うことで、全ては再利用可能で新たな CSS を書く必要は滅多にありません。
- 変更を加えるのが怖くない CSS はグローバルであり、変更を加えたときに何を壊しているのかがわかりません。HTML のクラスはローカルであるため、他の何かが壊れることを心配せずにクラスを変更できます。
TypeScript
TypeScript は、JavaScript のスーパーセット（上位互換）で型定義やジェネリックを扱うことができます。
私は、1 年前ほどから TypeScript を使っており、とにかく型が欲しかったので使用しました。
GraphQL
Gatsby を使用すると、コンテンツのリソースを取得する際に GraphQL が使用できます。
これを使用することで効率の良いリソースの取得を行うことができるほか、graphql-codegen を用いて TypeScript の型定義を生成することができます。
ブログを作ってみて
まず、Emotion と Tailwind CSS の相性の良さを実感しました。
CSS-in-JS を使用すると、CSS ファイルを作ることがなくなるので、少ない CSS の記述でもコンポーネントを作成したり、直接スタイルをあてたりする必要があります。しかし、Tailwind CSS を併用することで、わざわざ CSS の少ないコンポーネントを作る必要がなくなり、直接スタイルをあてることがなくなりました。
また、GraphQL と TypeScript の相性の良さも実感することができました。
GraphQL は自身にスキーマ定義を持っているので、GraphQL Codegen を使用して、簡単に TypeScript の型定義を生成することができ、安全にリソースへアクセスすることができました。さらに、Gatsby は元々ブログ用のスキーマを持っているため、本ブログを作成する際にほとんど GraphQL を触ることなく開発することができました。
Gatsby の勉強をするために、本ブログを作成しましたが、Gatsby 以外の知見も得ることができ、とても満足です 🚀