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

動機

前のサイトを作り直した当時は本業でもちょいちょい、副業ではもりもり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で静的サイト作成する上でのだるかったネタもネチネチ書こうと思います。