comilablog

Gatsby+Netlifyに移行した話

前回の記事で、Netlifyに移転しますと言ってたのを実行しました。
ついでにジェネレータも変えてみたりとか。

今回の構成

  • Gatsby + TypeScript
  • TailwindCSS + PostCSS
  • Netlify

Gatsbyについて

react製の静的サイトジェネレータ。
昔はこの手のやつ（JekyllとかOctopressとか）はmarkdownファイルからページを生成する、いわゆるブログ的な使い方に特化しているものが多かったけど、これはmarkdownだけでなく、様々なデータソースからページを生成できます。
例えばWordPressを普通に使うと、動作は重いしセキュリティ対策は面倒だし…と色々問題点があるけれど、Gatsby経由でWPのデータから静的ページを生成し、サーバには生成されたページだけを置いておく、なんてことが可能。記事データの作成だけWPの管理画面を使えて、まさにいいとこ取り！という感じ。
もちろんWP以外のCMSも（プラグインが用意されてれば）使えるし、Googleスプレッドシートからデータを引っ張ってくるなんて手もアリ。お客さん側でデータ更新してもらいたいけど、管理画面を用意する工数はない…なんて時にぴったりですね。
こういうのをJAMstackと言うそうで。知らなかったなあ。

ちなみにreactを触るのは（HelloWorldレベルのお試しを除けば）今回が初めて。
色んなstarterのソースとか参考にしながら、だいたい2日くらいで実装できました。まあ後述のGridsomeで調整していた期間を含めれば1週間くらいですが…。

Gridsomeは？

まあ世間的にはGatsbyがダントツ有名で、Gridsome？何それ？という感じの人が多そうな気がしますが、GridsomeはGatsbyのvue.js版です。
わたしは普段vueを使っているので、最初はこちらを使おうと思った…というかほぼ完成までこぎ着けてはいたんだけど、細かい機能面のアレコレが気になってGatsbyに乗り換え。
先発なだけあってプラグインの豊富さ・カスタマイズ性ともにGatsbyの方に軍配が上がりますね。解説記事も多いし。ただ、お手軽さで行くとGridsomeかなあという感じです。あっちはページングとかわざわざ定義しなくても自動的にやってくれるので。

VuePressは？

Vue製だとVuePressというのもあります。
これはデータソースがmarkdownオンリーで、その代わりGatsbyやGridsomeよりもさらにお手軽感が強いです。Vueの公式ドキュメントをはじめ、各種ライブラリのドキュメントページでよく使われてるやつです。
ただデフォルトだとあのデザインになってしまって、そこからカスタマイズしようと思うと癖が強くてちょっと面倒くさかったです。なのでやめました。
見た目にこだわらないドキュメントサイト（社内用）とかならこれが一番楽だと思います。

TailwindCSSについて

ユーティリティファーストCSSだそうです。
HTMLコーディングにおいては、クラス名は「その要素の持つ役割や目的を指した名前」にしましょうと言われていて（セマンティックというやつです）、例えばBootstrapにおける.btn-dangerなんかがそれに近いと思うんですけど、TailwindCSSはその逆で、ユーティリティクラスだけで成り立っています。
Bootstrapにも.mx-autoとか.display-flexみたいなユーティリティクラスはありますが、TailwindCSSはその数が尋常じゃありません。というか、ほぼ全てのプロパティに対応しているのでは…ってレベルです。

先程例に挙げた.btn-dangerをTailwindCSSで書くとこんな感じになります。

<button class="text-white bg-red-500 hover:bg-red-700 rounded p-2">

長っ!と思うかもしれませんが、逆に言うと柔軟性がめちゃめちゃあります。レスポンシブ対応はもちろん、hoverとかfocusとかの疑似クラス対応ですらcssを一行も書かずに済む快適さ…素晴らしい…！
そして一箇所だけボタンの色を変えたい…なんてことになった時も、新しいクラスを定義したりする必要がありません。クラス名を書き換えるだけでOK。

毎回こんな長ったらしいクラス名書いてられるか！ということなら、PostCSSやらプリプロセッサあたりで@applyを使って定義してもOK。

.btn-danger {
  @apply text-white bg-red-500 rounded p-2;
  &:hover {
    @apply bg-red-700;
  }
}

こんな感じですね。もちろんvueやreactならコンポーネントを作ってしまっても良い。

ちなみにTailwindCSSはユーティリティクラスが死ぬほど定義されているので、そのまま使うとファイル容量がとんでもなく大きくなるんですが、PurgeCSS（未使用のスタイル定義を自動的に削除してくれるやつ）に対応しているので最終的なファイルサイズはかなり小さくなります。
使い方は公式ドキュメントにあるので調べてね。

あとPostCSSも初めてまともに使ったんですが、なんかもう別にプリプロセッサ要らないなって感じですね。
実はSass（というかnode-sass）がそんなに好きじゃないので、こっちが主流になってほしいなって思った次第です。

というわけで今回はreact、Gatsby、TailwindCSSにPostCSSと初めてづくしの構成でやりました。内部的にもAtomic Designの勉強ついでにコンポーネント切り分けたりとかしてます。
まあその辺は外から見えない部分ですし、外から見える部分も以前のBootstrap製デザインをほぼそのまま書き直しただけみたいな感じなんで、ぱっと見ではあんまり違いが伝わらないんですが…まあわたしが勉強できたからいいんですけどね。