はじめに
運営しているWebサービスが複雑化してきたので、リアーキテクチャやリファクタリングをしました。まだまだな伸び代は多いですが、一旦整理したのでやったことなとまとめてみました。
背景
自分が作ったWebサービスは、元々メディア的な属性が強かったのですが、認証機能やCRUDする機能など動的な機能が増えてきて、ロジック部分が多くなり複雑化してきました。
また、サーバーレスということもありフロントでのコード量が増え、なんとかアーキテクチャを見直さないと大変そうな感じがしていました。
そして一番の理由としてテストが書きづらいかったところです。元々メディア的な運営で静的化していたこともあり、デプロイ前のgenerateがテスト代わりのようになっていました。
しかし、動的な機能が増えるとSSGでは検知できないため、テストを書く必要があり、いざ書こうと思うと非常に書きにく設計となっていました。
今後の運用性・拡張性を考えてもリアーキテクチャは急務であり、非常に優先度の高い重要なタスクとして取り掛かりました。
色々考えたことを整理する
・フレームワークに依存した作りをやめたい
・レイヤリングしてUT導入したい
・ライブラリに依存したドメインを使わないようにしたい
・共通化したい
・型エラー直したい
ざっくりこんなことを考えており、1つ1つこなしていきました。感覚的な意識の部分としては、「依存性をなくして抽象的かつ中長期的に開発生産性の高いものにしたい」ということをぼんやり考えてました。
そんな中で、Nuxt3 + TypeScriptで開発しているのですが、ロジック部分などなるべくフレームワークに依存するような書き方はやめたいと考え、テストの書きにくさだったり、汎用性だったりを考えたときに、なるべく抽象性の高い書き方にしたく、素のTypeScriptで書くようにしました。
また、ドメインに関する情報の増加や複雑性もあり、DDD + Clean Architectureを導入することにしました。一部Firebaseライブラリのドメインを使っていましたが、そこへの依存度が高くなってしまい、Firebaseを辞めたときやバージョンアップで気付かぬうちに使えなくなってたというのをなくしたい気持ちがありました。
その上で、JestによるUTを導入し、安全かつ見通しの良い、開発していて楽しい開発体験を目指しました。
今回は、DDD + Clean Architectureを導入したリアーキテクチャのところを一部まとめておきたいと思います。
DDD + Clean Architectureの導入してリアーキテクチャする
構成としてはこんな感じで、srcの下にそれぞれレイヤリングして配置しています。modules.tsに依存関係を書いています。
依存関係としてはusecaseはgatewayとpresenterに依存しており、gatewaはdriverに依存しているといった形です。
本当はportなどのインターフェイスを作って依存性逆転して綺麗な形にしたいのですが、一旦このような形になっています。
usecaseではビジネスロジックを記述しており、garewayを通してデータの取得や登録などをしています。また、presenterを経由してstateの管理をしています。
gatewayではusecaseとdriverの橋渡しとして、driverからのデータをdomainに変換したりしています。データの取得・登録の実装部分はdriverで書いています。DBやAPIなど変更したとしても、driverを変えれば影響がないようにdriverからentityに詰めてgatewayに返し、gatewayでdomainに詰め替えています。
ここまでレイヤリングすると、あとはusecaseを呼び出すだけで済むので、だいぶスッキリしました。
今後はTDDで進めたいと思っていますが、既存の部分に関してはガッとリアーキテクチャしてから、テスト書きました。テストはJestを使っており、jest-whenライブラリを活用しつつ書いています。
おわりに
一旦基盤はできたので、今後は適宜リファクタリングしながら、保守性の高い設計に向けて改善を続けたいと思っています。
ドメインも全部は用意できてなかったりとまだ伸び代もあるので、常に改善する気持ちで開発し続けることが大事です。
あとはSSGベースでやってますが、SSRにしていきたいと思っています。ちょっとコスト的にどれだけ高くなるのか心配ですが、チャレンジしたいと思っています。
あとE2Eも書きたいと思っています。Cypressでちょっとやりましたが、放置してしまってるので、どこかで本腰入れてやりたいと思っています。やはりテストで担保されていないと、いつ壊れるかわからないですし、そうした状況下で開発するのは結構しんどいです。
品質の担保かつ生産性の向上のためにも、よりより開発・設計を追求していきたいです。
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします👇