ポータルサイトの技術構成が古くなっていたのと、新しい方式で管理したくなったので作り直しました。
現在の構成を紹介します。
フロントエンドフレームワークはReact Router
フロントエンドの構成の要件は以下です。
- ファイルベースのルーティングができる
- SPAで動作する
- デプロイの時点でページのビルドができる
- 各ページのgit更新履歴情報を取得してレンダリングに適用できる
この要件に合うフレームワークは例えば以下が考えられます。
Next.jsではシンプルなSPAを構成するにはtoo muchであるため選択肢から除外しました。
TanStack StartとReact Routerはこの要件に非常にマッチします。
TanStack Startはルーティングが型安全であることが気に入っています。React Routerはページごとのデータ取得、フォーム送信、ページの再検証をシンプルに記述できるところが気に入っています。
今回の要件では、より「各ページごとの処理」を強調してシンプルに実装したかったため、React Routerが最もよくマッチしていると判断しました。
記事の記述にはDecap CMS
記事を記述することについての要件は以下です。
- マークダウンで体験よく記事が書ける
- 記事を書きながらプレビューできる
- 記事はリポジトリで管理できる
- セルフホストが可能で無料で利用できる
この要件に合致するのがDecap CMSでした。記事編集の認証にはGitHub認証を導入しています。認証処理を実行するための基盤としてCloudflare Workersを利用しています。1日あたり100,000リクエストまでは無料で利用できるため、今回の要件には十分です。
その他の少し細かいところ
- デザインを全面的に刷新しました
- 古臭い見た目になっていたのでイイ感じに変えました
- テストを導入
- テストが全く書かれていなかったので全面的に導入しました
- ユニットテストとE2Eテストを拡充しました
- AIファーストに開発できるように整えました
- ライブラリが公式に提供しているスキルを導入しています
- AIが自律的に正しくコードを書くことができるように型チェック、構文チェック、テスト、スキルを整備しています
まとめ
以前と比べてシンプル、使いやすい、きれいな見た目、管理しやすいように再構築できました。
今回ほぼ全面的に作り直す形で再構築しました。設計から実際の構築までAIに相談しながら進めましたが、作業開始から完了まで1日もかからず完了しています。本当に便利な世の中になりました。