フロントエンドでのクリーンアーキテクチャ

それほど前のことではありませんが、フロントエンドのクリーンアーキテクチャについて話をしました。この投稿では、その話をアウトラインして少し展開します。

読んでいる間に役立つさまざまな便利なものへのリンクをここに載せておきます。

• 公開トーク
• トークのスライド
• 設計するアプリのソースコード
• 動作するアプリのサンプル

今後の計画

まず、一般的なクリーンアーキテクチャについて話し、ドメイン、ユースケース、アプリケーションレイヤーといった概念に慣れ親しむことから始めましょう。次に、これがフロントエンドにどう適用されるか、そしてそもそもそれが全ての価値があるのかについて議論します。

次に、クリーンアーキテクチャのルールに従ってクッキーストアのフロントエンドを設計します。そして最後に、実際に使用できるかを見るために、最初からユースケースの一つを実装しましょう。

ストアはUIフレームワークとしてReactを使用しますが、これにはこのアプローチがReactでも使用できることを示すためです。Reactは必須ではありません、この投稿で見るすべてを他のUIライブラリやフレームワークでも使うことができます。

コードには少しTypeScriptが含まれていますが、これは型とインターフェースを使ってエンティティを記述する方法を示すためだけです。TypeScriptを使わずに今日見るものは全て使用できますが、コードの表現力は落ちるでしょう。

今日はOOPにほとんど触れないので、この投稿が重度のアレルギーを引き起こすことはありません。OOPについては終わりに一度だけ触れますが、アプリケーションの設計を妨げるものではありません。

また、テストについても今日は飛ばしましょう。これはこの投稿の主題ではありません。しかし、テストのしやすさは念頭に置いておき、途中で改善方法について触れます。

とにかく、この投稿は主にあなたがクリーンアーキテクチャの_概念_を理解することについてです。投稿の例は単純化されているので、コードをどのように書くべきかについての文字通りの指導ではありません。アイデアを理解し、それらの原則をプロジェクトにどう適用できるかについて考えてみてください。

投稿の最後には、クリーンアーキテクチャに関連し、フロントエンドで広く使用されるメソドロジーのリストがあります。プロジェクトのサイズに応じて最適なものを見つけられるでしょう。

これで、さっそく深掘りしていきましょう！

以上の内容を踏まえて、以下のものを翻訳してください。

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/bespoyasov/clean-architecture-on-frontend-4311