flat-face https://blog.hatena.ne.jp/flat-face/ ABEJA Tech Blog https://tech-blog.abeja.asia/ フロントエンド はじめに 方針 具体例 作るもの ドメインロジック（クラススタイル） reducer（クラススタイル） コンポーネント上での値の更新（クラススタイル） ドメインロジック（関数スタイル） reducer（関数スタイル） コンポーネント上での値の更新（関数スタイル） 思考実験を通して感じたこと クラススタイルと関数スタイルの違い ドメインロジックの凝集 UIロジックの凝集 コンポーネントの役割 最後に 参考：コード全文 はじめに プラットフォームアプリケーショングループで開発を担当している平原です。 Next.jsのフロントエンドの開発を行っているときに、 複雑化してきたことでバグが出やすくなって… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Ftech-blog.abeja.asia%2Fentry%2Ffrontend-logic-refactor-202510" title="【リファクタリング】フロントエンドのロジックを凝集して、UIコンポーネントから切り離してみた - ABEJA Tech Blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/m/michiaki_ogawa/20251022/20251022234546.png Hatena Blog https://hatena.blog 2025-10-24 12:00:00 rich https://tech-blog.abeja.asia/entry/frontend-logic-refactor-202510 1.0 100%