クリーンアーキテクチャって難しいですね。DDDとの違いもまだ良くわかってませんが、 その構成や思想に触れ、ええやん！と思ったので何とかフロントでも採用できないかなぁと思い、 色々調べてまとめましたので、晒してみようと思います。 参考サイト ▼ 実装クリーンアーキテクチャ https://qiita.com/nrslib/items/a5f902c4defc83bd46b8 ▼ フロントエンドでClean Architectureを適用してみる(+サンプルコード) https://qiita.com/ttiger55/items/50d88e9dbf3039d7ab66 ▼ Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する https://blog.uhy.ooo/entry/2020-05-16/recoil-first-impression/ ファイル構成 SWR を使ってデータをfetchする場合は、こんなまどろっこしいことしなくても、 APIサーバーにClean Architectureを採用すれば問題ないと思いますが、 フロントが直接AWSやFirebaseなどからデータを読み書きするサーバーレスのような構成の場合は、 各ドメイン層は独立したinterfaceを持ち、疎結合になっていると便利かなと思いました。 また、Presentation層はReact Custom HookでUIに反映させてます。 呼び出すときに UseCase を引数に渡すことで、関係のない UseCase を実行しないようにしてます。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 domain/ ├── driver │ └── userDriver.ts ├── entity │ └── user.ts ├── interface │ ├── driver │ │ └── UserDriver.

続きを読む

Invariant failed: You should not use <Link> outside a <Router>というエラー <Link to={path}> を含んでいるコンポーネントをStorybookに追加すると以下のようなエラーが出ます。 Invariant failed: You should not use <Link> outside a <Router> Error: Invariant failed: You should not use <Link> outside a <Router> at invariant (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:133623:11) at http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:124464:86 at updateContextConsumer (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:115964:19) at beginWork$1 (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:116347:14) at HTMLUnknownElement.callCallback (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:96456:14) at Object.invokeGuardedCallbackDev (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:96505:16) at invokeGuardedCallback (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:96560:31) at beginWork$$1 (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:121900:7) at performUnitOfWork (http://localhost:9009/vendors~main.1df07f438181fe4f3aec.bundle.js:120815:12) at workLoopSync (http://localhost:9009/vendors~main.1df07f438181f そこで役に立つのが、 storybook-react-router というモジュールです。 StorybookのDecoratorに追加するだけで、上記のエラーが解消されます。 https://www.npmjs.com/package/storybook-react-router

続きを読む

.jsxと.stories.jsを同じディレクトリに置くと怒られる airbnbのeslintを使うと、React Componentは拡張子 .jsx を強制します。 Storybookを使う時、 .jsx と同じディレクトリに .stories.js 置きたい場合があると思いますが、 拡張子が .js なので、story内でReact Componentを使うと怒られます。 ESLint: JSX not allowed in files with extension '.js'(react/jsx-filename-extension) .eslintrc の rules にreact/jsx-filename-extension の設定を追加することで回避することができます。 .eslintrc 1 2 3 4 5 6 7 8 "rules": { "react/jsx-filename-extension": [ "error", { "extensions": [".jsx", ".stories.js"] } ] }

続きを読む