フロントエンド
React
仕事でフロントエンド周りに関わるようになったので、気軽にフロントエンド周りの開発を試せる環境が欲しくなった。 はてなブログのWeb上で文章書くのもしんどかったので、ブログ＋その他実験上としてWebサイトを立ち上げた。 あとはいざというときにポートフォリと的なものが嬉しいという気持ちもあった。
維持費をかけたくなかったのでSSGで静的ファイルホストを前提にしてサイトを構築した。当初はGatsbyの採用を考えてたが学習コストが高いのとNextJSでも静的サイトの構築はできるので結局NextJSを採用した。
記事は基本的にMarkdown形式かつ記事単位で管理できるようにしたい。 はてなブログはMT形式というフォーマットでダウンロードできるのだけれども、これをいい感じに記事単位に分割してMarkdownに変換していく必要がある。 手でやるのは無理なのでPythonで簡単にスクリプトを書いて、「記事単位に分割」→「HTMLからMarkdownに変換」する処理を自動で行った。
Markdownにした後、記事中に大量にはてなキーワードへのリンクが埋め込まれていたことに気が付きシェル芸で頑張って排除する必要があった。 結局全て自動で排除できなくて、全ての記事を目で見て微修正してく苦行をする羽目になった。
NextJSをしばらく使っていなかったらApp Routerという新しい仕組みが導入されていて戸惑った。チュートリアルが2パターンするのはややわかりにくい気がするが、ルーティング周り以外は大きく変わっていないようなので特に問題なく構築できた。 一部ライブラリ（Nextjs Google Analytics）などがうまく動作しなかったりしたのは残念だった。
やってることはMarkdownをremarkで整形してレンダリングと非常にシンプルなので技術的に目新しいことは特に無い。色付け周りもtailwindがあればかなり楽にできるのであまり工数自体はかからなかった。
なにか作るのときは新しい技術を1つ入れるのをマイルールにしていて、今回はそれがCloudFlare Pagesだった。 登録して5分くらいでデプロイ処理まで実行できて非常に便利のはずだったが、CloudFlareのビルド時にGoogle Fontの取得で確率的にエラーがでる状態になってしまった。 どうもNextJSデータ取得のタイムアウト時間が身近すぎて不安定のようだ。 結局Google Fontからttfファイルをダウンロードして、リソースに含めることで解決した。ファイルサイズが大きいので明らかにレスポンスが遅くなってしまったのが残念だ。 CloudFlare自体はFreeプランでもかなり使えるので、静的ホスティングであれば今後もここを使いたい。
ドメインの取得はGoogleDomainが撤退するという話を聞いて、さくらのDNSを使ったがCloudFlareのドメインサービスを使ったほうが手間の観点でよかったかもしれない。 （CloudFlare Pagesのカスタムドメイン設定する際に、Whoisのネームサーバーの情報を修正するのに多少時間がかかってしまう） さくらのドメインはUI的にはダークパターン的なものが少なくて好感は持てた。
はてなブログのデザイン設定でJavascriptを書いて転送するようにした。参考 細かいJavascriptを書いて対応するページに転送しようと思ったが、めんどくさくなってサイトトップに転送するようにした。 色々やり方調べるとProでしかできない方法を書いているブログもあるが、はてなブログの編集画面のデザイン→カスタマイズ→ヘッダはProじゃなくてもHTMLが書けるのでなんとかなる。
UI構築自体は楽しくできたが、記事に埋め込まれた余計なリンクや画像周りのダウンロードが結構な苦行だった。 しばらく更新していなかったが自分で作ったこともあって今のブログには結構愛着が湧いている。 これからは定期的に更新していこうと思う。