Mix Space（ミックススペース）は、小規模な個人スペースサイトです。伝統的なブログを受け継ぎ、ブログとは異なる豊富なコンテンツを提供しています。さまざまなスタイルやタイプの執筆愛好家に向いています。
実際には、多くの個人スペースを模倣、移植、オープンソース化しただけです。なぜなら、このようなシステムは一般的に個人使用のためであり、外部に公開されていません。（例：ポールの小さな巣、電波ステーションなど）私は単に模倣してオープンソース化したかったのです。
最近の 1 ヶ月間で、基本的な機能はすべて完成しました。バックエンドの執筆部分もすべて完了し、次に拡張機能を追加する予定です。次に、3 つの部分に分けて、今後の予定と修正が必要な不具合について説明します。
フロントエンド
初版のフロントエンドは時間的な制約のため、独自の UI デザインは行っていません。そのため、私の師匠のデザインを引き続き使用しています。今回の開発では、既存の HTML 構造をベースに React に移植しました。SEO を行う必要があるため、サーバーサイドレンダリングには NextJS を使用しています。
Q：なぜ Vue を使用しないのですか？
A：Vue は素晴らしいフレームワークですが、私も Vue から始めました。しかし、現在の Vue はサーバーサイドレンダリングのパフォーマンスが非常に低いです（Vue2 を指します）。NuxtJS はさまざまな問題に直面することがあります（Nuxt のトラブルシューティングを参照してください）。以前の Mix Space の前身である Focus のフロントエンドでは、NuxtJS + Vue を使用して開発しました。しかし、今回は TypeScript で完全なアーキテクチャを書き直したため、React が最も適しています。
残りの作業：
- 機能の最適化
- ページの充実
フロントエンドとバックエンドの分離の利点：
- フロントエンドの開発は柔軟で、バックエンドの制約がありません
フロントエンドとバックエンドの分離により生じる問題：
- テンプレートエンジンに比べて SEO が難しい
- 設定には多くのハードコーディングが存在し、柔軟性に欠ける場合がある
可能な作業：
- 他のテーマの移植
- 独自のテーマの開発
ミドルウェア
ミドルウェアは Vue + TypeScript で開発されており、バックエンドの SEO 最適化は必要ないため、Vue を採用しています。主な理由は、以前のバージョンが Vue + JavaScript で開発されていたため、時間的なコストを考慮して、この基盤の上でリファクタリングを行ったからです。ただし、Vue を使って Vue を書くという経験はまだまだ良くありません。
残りの作業：
- 機能の充実
- 設定モジュール
可能な作業：
- Vue3 を使用して書き直す（TypeScript のサポート度合いに基づく）
バックエンド
バックエンドは元々の Express から Nest.js に移植しました。Nest.js の利点は、ng アーキテクチャを採用しており、モジュール間の疎結合性が高く、機能のレイヤー分割が明確で、後続のメンテナンスが簡単です。データベースは引き続き Mongo を使用しています。
今回の目標はすべてバックエンドに集中しているため、バックエンドに費やされる時間が最も長くなりました。セキュリティと機能性のため、すべてのリクエストはデータのクリーニングと検証が行われ、これまでで最も完全なものになりました。これにより、NoSQL インジェクションの問題が根本的に防止されました。
残りの作業：
- 設定モジュール
- WebSocket モジュール
- サブアプリケーションの分離
結論
今回、すべてのプラットフォームで TypeScript で書き直す目的は、将来の保守性を確保するためです。したがって、開発段階では多額の費用がかかりました。機能がすべて実装された後、ユニットテストと E2E テストを導入する予定です。