余談はじめにこのブログを開発するにあたって選定した技術やアプリの構成について簡単にまとめておこうと思います。技術的な詳細やチャレンジは後日また書こうと考えています。今回このブログに使用されているおおまかな技術は以下のようになります。Lighthouse選定基準Turborepoモノリポを個人開発でも導入してみたかったという興味がきっかけです。Turborepoは仕事やOSSでよく見るものの、実際にゼロから自分でプロジェクトを立ち上げるときに使用した経験がなく、モノリポに対するふわっとした理解が深まればいいなという願いを込めて選定しました。Turborepoでは、各workspaceに定義されたpackage.jsonのscriptsを、workspace間の依存関係を考慮した順番でビルドしてくれます。CPUの上限内で異なる種類のscriptsの並列実行もしてくれます。CLI.https://turbo.build/repo/docs/core-concepts/monorepos/running-tasksまた、Turborepoを選定して、ローカル・リモートキャッシュの恩恵を受けて効率的に開発できることが大きなメリットだなと感じています。ローカルキャッシュに関してはturbo.jsonにキャッシュファイル群を指定する設定を行なうことで、キャッシュがあるときのビルドが効率化されます。キャッシュを利用して、差分がある箇所のみのビルドを行なうことができます。...}さらに、リモートキャッシュを使用することでCIの高速化を図ることができます。今回はVercelをPaaSとして使用したので、Vercelのキャッシュサーバーをそのまま利用でき、CIでリモートキャッシュを比較的簡単に使用できました。Caching.https://vercel.com/docs/monorepos/turborepoNext.jsまず、ブログアプリということで、初回レンダリングのパフォーマンス改善とSEOに対する強みが欲しかったので、ページのPre-RenderingができるReactフレームワークを使用したいと考えました。加えて、ブログアプリのため、リクエスト時ではなく、ビルド時に生成されたファイルを提供する、SSGができるということも条件に入れたかったです。RoutesであってもgenerateStaticParamsを使用することでSSGをできます。data.https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-paramsさらに、Turborepoを使用するという背景も加わり、Vercelにデプロイすることでキャッシュやその他の面で恩恵を受けやすい一面のあったNext.jsで事を進めました。Next.jsのSSGアプリをVercelでホスティングすると、構築済みのHTMLファイルを都度アプリケーションサーバーから取得するのではなく、CDNにHTMLファイルのキャッシュを配置しておくことでパフォーマンスの最大化に近づけるということが比較的簡単に行なえます。Routerで十分な気がしてきました。ComponentsやSuspenseがデフォルトで使用できたり、それによるさらなるパフォーマンス改善が期待できたりしました。Routerに舵を切りました。記事の管理は[root]/articles/**/*.mdでマークダウンとして管理しています。matterというYAML形式でメタデータを記述できる手法を用いて、gray-matterでYAMLを解析し、jsonデータとして取り出しています。stringで返却する関数を使用しています。まとめると、remarkでmarkdown→AST(mdast)に変換し、mdastのカスタマイズが可能な諸プラグインの処理を通し、remark-rehypeでAST(mdast)→AST(hast)に変換し、hastのカスタマイズが可能な諸プラグインの処理を通し、rehype-stringifyでHTML形式のテキストを出力しています。stringに変換されたHTMLは、最終的にはサニタイズしたのちにdangerouslySetInnerHTMLを使用してブラウザDOMとしてレンダリングしています。今回は、ブログを開発するにあたって選定した技術について狭く浅く触れました。CMS使おうと思ってやっぱやめたってなった話とか、TailwindCSSと仲違いしそうになった話とか、技術的なチャレンジとか、色々書ききれてないことはまたまとめていきたいです🌸Vercelってすごい。