タイトル読みゃわかるんですけど、懲りずに移行、というか作り直しました。

動機

前のサイトを作り直した当時は本業でもちょいちょい、副業ではもりもり Vue.js を使っていたから Nuxt で組んだんですけど、転職のからみで Vue.js を触る機会がまったくなくなった結果、書き方を完全に忘れ去ってしまった、というのがまず 1 点。

もうひとつはデザインが気に入らなくなってしまったのです。というか正直作って 1 ヶ月くらい、いや嘘ですね。1 週間くらいでなんかやだなとなってました。なんか暗いんですけどって感じで。

ポストロック寄りのハードコアっぽいデザインを狙ったんですが、自分のサイトに採用するもんじゃないなと。見てて疲れるし飽きるしアニメーションも全体的にとってつけたような感じだったし。なんで、やめたった。

今回のでさすがにもう落ち着くかな〜と思ってます。見てて疲れないし。やるにしてもアニメをちょこちょこいじるくらいだと思います。

技術選定

基本的には手慣れたものをチョイスしてます。ソースはGitHub に置いてあります。最初は本気で完璧、細部にも手を抜かない一億点のコードを目指してたんですが案の定ダルくなってきて「まぁ自分のサイトだし適当でいっか」がガンガン増えてますね。あんま参考にしないでください… 🙇‍♂️

コア

まず React は確定でした。普段から使ってるのももちろんあるんですが、テンプレ言語と違って

• DOM を JS(TS)で書ける
• Linter / Formatter がごく自然に走る
  • a11y チェックできるって素晴らしくないですか
• pug / slim みたいな、Python インスパイア系ではない
  • あれらは html から遠くに行き過ぎてて、「考えながら」でないと書けない

というのが静的サイトを作る上でも大きすぎまして。この 3 点が解決できるなら他のでもいいんですけど、他にないよなー少なくとも僕の知る限りはないわなーと。

ほんでもって JAMstack 構成でやるのもマスト。となると基盤になってくるのは以下の 3 つかなと。

1. 生でゴニョゴニョやって頑張る
2. Gatsby
3. Next.js

1 はあんまり勉強にならんなーということで除外。いや、間違いなく勉強にはなるんだけど、生で書くのはさんざんやっとるしフレームワークの経験も積みたかったので除外。

で。そうすると 2 と 3 になるんですが、今のうちに Next.js ある程度触っといたほうが良さそうだなとつよく思ったので 3 にしました。ちなみに 2 こと Gatsby も一応ある程度組んではみたです。ぜんぜんいけるよなーと思ったけど Next.js でいけるならそっちのほうがええわーでした。

スタイル

SCSS(dart-sass) + PostCSS で CSS Modules です。CSS Modules はぼちぼちやめて完全 BEM 移行でも別にかまわんなーと思うんですが、SCSS + PostCSS の組み合わせは自分にとっては一番考えることが少ないし縛りも少ないのでこっちは譲れないぜ、やっぱこれだなーと。

おしごとでは emotion 使ってていいものだと思うんだけど、やっぱ多少 CSS 書いてるときと違う脳みそが動いてる感じがあってむずむずするのと、なんも考えずに PostCSS でいろいろやりたいのにできないなーっていうのが歯がゆいのと、stylelint がすぱっと使えないのがだるいなーとなってるんですよね。

原稿

contentful。理由は今のうちに触っておいてそのうち経験ありますよって言いたくて（こればっかですいません）。いけてるなぁという感じですね。

一周回って Markdown を普通に書くのもありだったんですが、そのうち push するの忘れてどこに最新があるのかわからんってなるに決まってるのでやめました。

配信

vercel。Next.js 使うならこれしかないのでは？

まだやってないこと

Incremental Static Regeneration

仕込んでないんですけど、仕込んだほうがいいかな。めった更新されないブログでそこまでいるかーって気はもちろんしてますけど、やっといたほうが経験値あがるしなー。

PWA

Service Worker のキャッシュコントロールできなくてトラウマになってます。

AMP 対応

元マークアップ屋ですが、モチベがあがらず逃げ続けて触ってないです。

Next.js は便利

Nuxt.js を先に触ったクチなので「なんだスカスカじゃないか」と思ったんですが、触ってくと抑えるべきポイントはきちんと押さえてあって便利やーんにあっさり手のひら返ししました。React のダルいとこだけうまくラップして、好きにしたいところはそのままにしてくれてるっていうか。

なんでこうなん、ホントに仕様？という謎挙動もいくつか見受けられるのは事実ですが、トータルで見れば明らかにプラス、新規に React で Web アプリケーション作成するなら大抵のケースでマッチするんじゃないかと思います。

形になってよかった

やーほんと、形になってよかったです。作っちゃ飽きちゃを繰り返して半年近く時間がかかってしまった…。

そのうち Next.js で静的サイト作成する上でのだるかったネタもネチネチ書こうと思います。