そういえばNext13がすごいらしい、ということを小耳にはさんで、ここ１週間ほどかけて、この日記サイトをアップデートする作業をしていた。

リポジトリ

もともと、スタイリングにChakra-UIを使っていた。

何も考えずにNext13にアップデートをかけたところ、React Hydration Errorが頻発する。

ちょっとメンテが厳しいなぁ、という感じ。

いろいろ調べたところ、CSS Modulesがいいらしいという情報を掴み、今回はCSS Modulesを使って書き直していた。

Chakra-UIとの比較

自分はCSSにあまり明るくないので、Chakra-UIのように整ったコンポーネントシステムは本当にありがたかった。

ただ、前述の通り、Reactには個人的に解明ができないエラーが出ることもあるので、この先も使い続けられる自信もない。

CSS Modulesは基本的にはピュアCSSでサイトのスタイリングを行う手法。

幸いなことにChat-GPTなどの生成系AIを活用すれば最低限のスタイリングは行ってくれる。

より具体的に言えば、適当なプロンプトでも最低限の段組みなどのレイアウトは組んでくれるのである。

あとは大きさとか、色とかの細かいところを書き換えればそれなりに整えることができる。

レイアウトを組むことに比較すれば、大きさとか色の設定はそこまで難しくない、と認識している。

CSSが苦手な自分にはとても助かる思いがした。

GitHub Copilotの導入

今回のブログ改修からGitHub Copilotを導入してみた。

コードを書いている途中でまさにこれから記述しようとしていることを書いてくれる場面は多く、圧倒的にタイピングの回数を減らせた、という実感がある。

例えば記事に紐づいているタグの数を数える、以下のような関数を作ることを考える。

export const getReferencedTagCount = async () => {
    const allContents = await getAllPostsContents();
    const tagCount: Record<string, number> = {};
    for (const post of allContents) {
        for (const tag of post.tag) {
            if (tagCount[tag.id]) {
                tagCount[tag.id] += 1;
            } else {
                tagCount[tag.id] = 1;
            }
        }
    }
    return tagCount;
}

順番に足し上げているだけの単純な関数だが、if文も途中にあったりで、書けるけれども、書くのは面倒だなーという分量。

この手の関数は、大体この辺まで書けば補完をしてくれるような感じがあった。

export const getReferencedTagCount = async () => {
    const allContents = await getAllPostsContents();
    const tagCount: Record<string, number> = {};
    for (const post of allContents) {
    ...

例えばなんかファイルを作ったら全部良い感じに書いてくれるということはない。

「世界が変わったわ」というような驚きはないものの、あるとそれはそれで便利という絶妙さがある。

月額１０＄ほどかかるが、おすすめ。

その他

余談で競プロは主にPythonで参加をしているが、TypeScriptで解くという営みも行っていた。

そのおかげで今回のようなブログ作成レベルのコードであれば、基本文法はほぼ調べずに書くことができるようになっていた。

これには自分でも驚いた。もともとはfor文すら書けないレベルだったので。

あとはコードを書いているときに自然と計算量が見積もれるようになった、というのもある。

このおかげで適度に手抜きができるようになったのも収穫の一つ。

例えば、このくらいなら、愚直にループを回しても影響はない、というように楽ができる。

noteでAtCoderの良問をTypeScriptで解くというマガジンを書いている。よかったら是非に。

AtCoder 精選良問集 Diff 茶後半～水

ではでは。