ブログをNext.jsに置き換える

ゴールデンウィーク明けの平日、いかがお過ごしだろうか。私の場合は新卒研修のブログ記事を書こうと思ったものの、その記事を投稿するためのブログを弄っているうちにゴールデンウィークが終わってしまった。

そんなわけでここ数日は、「そろそろちゃんと触るか〜」と思っていたNext.jsを使ってこのブログを作り変えていた。見た目は似ているけど中身はイチから作ったので別物である。¹

機能追加をしたいことがあったりしたので前々からJavaScriptのフレームワークに載せ替えたいと思っていて、やっと腰が上がった次第。² 本当は1,2日でサクッと終わらせてしまってブログ投稿用のエディタを作ろうと思っていたのだけど全然思うようには進まず、結局閲覧画面だけ作って終わった。

以下にここ数日の感想をいくつかの話題に分けて記す。

ブログのデザイン

デザインは変わっていないようで細かいところが少し変化したり、機能追加されていたりする。つくりながら他のブログを眺めるなどして、見やすそうな部分を参考にしたりした。

具体的には例えば、記事ページ末尾にある隣の記事へのリンクについて。よくこういったリンクは next / prev とやってしまいがちだけれど、どっちが古い投稿へのリンクでどっちが新しい投稿へのリンクかわからなくなったりするので、「古い記事」「新しい記事」と書いてあるのをみて「良いな」と思ったので真似た。

記事ページ末尾の隣の記事へのリンクの新旧比較

ブログのデザインといえば、完成の見た目が定まっていなかったので結構作っては壊してを繰り返していたのは効率が悪かったのかもしれない。例えば記事一覧ページは記事ごとにカバー画像を表示するように作ってみたあと、やっぱりみづらそうで止めた。 figmaなどを使って事前にどんなものを定めるなど、そういうのをやったほうがよかったかもなあ。 (やったことない。)

remarkがよき

Hugoから置き換えた理由の一つに、Markdownのパースを改造できるようにしたかったからというモチベーションが有った。今回使ったMarkdownパーサのremarkがよく出来ていて、プラグインを追加するとパース時の機能や記法を追加できる。既によくあるMarkdown記法は既存のプラグインで対応できるし、新たな記法を追加するときはプラグインを作ってMarkdownやHTMLのASTに介入できるようで夢が広がる。

本当はここらへんを重点的に開発して記事の執筆時に使える記法や記事の出力時の見た目をもっとリッチにしたかったのだけど、Next.jsでブログを作る時点で時間切れになってしまった。

Next.jsのよさ

Nuxt.jsみたいにフォルダ構成をはじめとした規約が定まっていて、秩序を感じるのはよい。

簡単なAPIが書けるのもよい。Vercelを使えば一緒にデプロイもできそうで、ここらへんは開発元がホスティングサービスをやっている強みだなと感じた。

getStaticPropsとかgetServerSideProps、getStaticPathsとかの関数があるのもよくて、何処に何を書けば良いのか、いつ何処で実行されるのかがわかりやすいのが良い。 Nuxt.jsではここらへんどうなってたっけ？configでSPAかSSRかSSGか選べたのは覚えているんだけど...

ReactとJSXの記法への小言

Reactに触ったのも久しぶりで、JSXと後述するCSS-moduleに一言ずつ。

JSXを久々に書いたがちょっと書きづらい。特にDOMを条件分岐したいとき、その部分のJSXElementは変数に入れるのが良いのか最後のReturn文に埋め込むのが良いのか迷うなどした。埋め込むとしたら即時実行関数の中でifを書くか三項演算子を使うかだと思うけど、どちらも記号だらけであんまり見やすい表記じゃなさそうと思った。 Vue.jsのv-ifとかのほうがみやすさを感じる。

Vue.jsの独自記法を覚えなくていいといえばそうだけど、その意味で言えばVue.js/Nuxt.jsはJSX覚えなくていいからな。 (逆にJSXElementを繰り返すときは配列をmapできるのでスッキリ書けて気持ちいい。) 記法は慣れの要素が多分に含まれるので、小言を言っても仕方ないね。

CSS-moduleはつらくないか？

前項のJSX記法は好みの問題と思うが、一方でCSSの適用方法については根が深い。もともとReact/Next.jsでコンポーネントにCSSを適用するならCSS-moduleかCSS in JS (Styled components)の2種類の方法から選ぶらしい。特にNext.jsはパフォーマンスの理由でCSS-moduleを推してるのだけどこれがあんまり良いと思えなかった。一般的なCSSはセレクタを使って適用する要素を決めるが、CSS-moduleはCSSのスタイルの集合({から}まで)を、HTML要素で指定して指し示すような形になる。

CSSが多重に適用されることはなくなるのでシンプルになるけれど、一方で宣言的に書けていたCSSの良さを殺しているのでは？と感じた。あとメディアクエリが使えない/使いづらかったり、するのも気になった。結局移行前のものを活かすという意味もあって、CSS-moduleもCSS in JSも使わずに1枚のCSSにすべてを書き込んで作っていて、途中でCSS-moduleで分割するかとなったのだけど上述のつらみを感じて止めてしまった。

今回の開発を通して改めてVue.jsのシングルファイルコンポーネント好きだなあと感じた。

---

そんなこんなで予定がなくなってずっと家にいたゴールデンウィークだけれどコンピュータと仲良くなろうと遊んでいたのでよき休日だった。

このブログへの機能追加はまだまだやりたいことだらけですが、もし見づらい、バグってる、勘違いしたなどあったらフィードバックをくださると喜びます。