あたらしいウェブサイトを作りました

お久しぶりです。山田ハヤオです。大学にも慣れてきて、かなり人生に余裕ができてきました。今は某学習塾と某スタートアップで働きつつ一人暮らししてます。

ここ1年間ブログの更新がなかったのは大学が忙しかったのと、ブログの移行作業をしていたからです。Hugoでテーマを作るのが思った以上にだるかった（というかReactやVueのようなフレームワーク無しにウェブサイトを書きたくない）ので、同等程度の機能を有したものをイチから作っていました。

親は基本的に生活費なんてくれる訳がないので（この前2万円もらえたので感謝）バイト代がほぼ生活費に消えてます。まぁ父親が不倫してる最悪な実家よりはましかな。

両親が離婚したら実家に戻って生活してもいいかもしれない。あーでもやっぱなしかも。自分の部屋がないのでプライベートもくそもない。

閑話休題。

ウェブサイトを一新した

1つ前のサイトはニューモフィズムが難しすぎて、あまりいいデザインにならなかったので新しく作り直しました。

せっかくフルスクラッチで作り直すのだからということで、Next 14でApp Routerを使ってみました。更にFramer Motionも使ってアニメーションにも挑戦。

結構いい感じのデザインになったんじゃないかなと思ってます。それ以外の技術スタックは前のサイトからあまり変化なし。

Next.js + TypeScript + Tailwind CSS + Daisy UI + Framer Motionという感じ。

前回のサイトはISRやSSRをフル活用していたんですが、今回はStaticに拘って開発してみました。こっちのほうが速度的にいいかもしれない。

Next.jsのStatic Exportは結構便利で気に入ってるんですが、Next.jsの恩恵はあまり受けられないというか、Next.jsである意味というのはあまり無いと思います。

Next.jsのいいところってISRやSSRがあって、それらをよしなにしてくれることだと思ってるんですが、Static Exportの場合レンダリングもクソもないのでね。

それでも今回のサイトはなるべく全体がSSRになるように作ってあって、あまり大きいコンポーネントがCSRにならないようにしています。ISRは不使用です。

おかげでGitHub Pagesにもデプロイできるので、Vercelへの依存をしたくなかったらStatic Exportでいいんじゃないかと思います。

ブログシステムの話

そんなわけでNext.jsでイチからブログシステムを作りました。Hugoより数段柔軟性は高いので、色々好き勝手弄って遊んでいます。

んで、このブログもすでに更に新しくする構想があり、CMSを自作しようかなと思っています。

わたすけが数週間前にやっていて、結構簡単そうだったのでやってみようかなと。

• マークダウンの編集画面を提供するフロント
• 記事一覧を表示するフロント
• マークダウンのテキストデータをGitにコミットするバック
• Gitから記事一覧を返したりフィルターしたりするRest API

があれば良さそうなので、RustやGoと組み合わせれば簡単にできそうです。

MDの編集画面についても、結構それっぽいライブラリが転がっていたので楽そうと言う感じ。ここからTexに対応したり…としていると大変そうですがやりがいもありそう。

時間があるときに実装したいなぁというお気持ち。やりたいことが多すぎて時間ない。

Next.jsの動的ルーティングの話

Pages Routerの頃はgetStaticPropsの動作がよくわからずサンプルコードをコピペしてたのですが、App Routerで改めてイチから勉強してようやくその意味がわかりました。

当時はReactの知識だけでいっぱいいっぱいだったので、Nextの作法にまで頭が回らなかったんですね。動的ルーティングはApp Routerのほうが書きやすいですね。

Pagesだとコンポーネントでasync/awaitを使えないので、useフックで非同期データを設定する必要があったり、そもそもNode系の処理とブラウザ側の処理を完全に分離しないといけないので、可読性がすごく低下しているように感じました。

App Routerでは

export default async function Hello() {
    const data = await getPosts();
    return <p>{data}</p>;
}

のような書き方ができるので、より直感的になってるように感じます。（内部の実装は数段複雑になってるのがフロントエンドの嫌なところ。こういう隠蔽体質がｒｙ）

それでもApp Routerつらい

App Router自体は全体のデフォルトがSSRになって、ファイル名もpage.tsxで統一されて、レイアウトの共有もしやすくなって非常に好きなんですが、まだまだ周囲は追いついていない感じがしますね。

Framer Motionでも、ページ遷移アニメーションなどはApp Routerで実装するには一工夫必要みたいですし、next-mdx-remoteでもApp Router用のAPIはunstableなままです。

変更があまりにも大規模なのは致し方ないのですが、はやくコミュニティが成熟してくれないかなぁと思っています。

結局これらの互換性の問題は全て「SSRでuseフックが使えない」ことに起因してるんだと思います。React DaisyUIというDaisyUIのReactコンポーネント版でも、テーマの適用とか管理にuseContextを採用している関係でSSR内では使用できません。

DaisyUIなんてコンポーネントの実装はPostCSSなんだから変なことしないで純粋なラッパーだけ提供してくれよと思うんですけどね。

そんなわけでこのサイトではダークテーマが現在未実装です。時間があれば作るかも。

VercelはSSRでHookもどきを使えるようにしてほしいですね。仕組み的に無茶ですが。

状態管理にはJotaiを使ってるんですが、Next.js 14のApp Routerと組み合わせると

Detected multiple Jotai instances. It may cause unexpected behavior with the default store. https://github.com/pmndrs/jotai/discussions/2044

という警告を出してきます。JotaiでStoreを複数定義しないほうがいいみたいなエラーなんですが、StoreどころかProviderを明示的に使っていないのでたぶんJotai側のバグです。警告が出るだけで動作に影響はなさそうなので無視しています。

というかJotaiもドロワーのアニメーションとかの細かい部分にしか使っていないので、正直消してしまってもいいかもしれないと思っていたり。前述したダークテーマを使うのならJotaiでLocalStorageと組み合わせるのが最適かなぁと勝手に妄想してる。

終わり

だらだらとNextについて喋りました。ここまで誰が読んでるんだろう。

2023年はほぼウェブ系を書いてる一年間でした。1~4月くらいはGoでREST API書いて遊んだりコマンドラインツールを作ったり。

5月以降はずっとReactやらVueやらを書いてました。フロントエンドあまり好きじゃないんだけどなぁ。JS/TSに触れている時間が多くてウェブ系の黒魔術のような負の遺産のような知識ばかり溜まっていく。

某D氏に低レイヤをやれと怒られた勧められたので、Rustの勉強も兼ねてOSを書いていきます。