React Night #1 Reactプロジェクトに秩序をもたらす

2021/01/25 React Night #1 で登壇した際の発表資料です。

https://misokatsu-web.connpass.com/event/196285/

発表時の映像は https://www.youtube.com/watch?v=W-VHz71ygkc&feature=youtu.be から見れます

Transcript

1. Aiji Uejima @aiji42 React プロジェクトに 秩序をもたらす React Night #1
2. Hello! I Am 上島 愛史 うえじま あいじ
3. プライベートで毎日触るくらい React が大好きです
4. 一方業務では React に対する ネガティブな面も見ている
5. “React プロジェクトは　　　　　　　　　 カオスになりやすい” “
6. ディレクトリルールがない 要因① カオスになりやすい
7. 引用: https://ja.reactjs.org/docs/faq-structure.html 公式ドキュメントによると
8. 引用: https://ja.reactjs.org/docs/faq-structure.html 公式ドキュメントによると
9. Proof of Concept Build and Scrap の思想が強い
10. デザインとロジックが 交錯しがち 要因② カオスになりやすい
11. コンポーネント内にデータ取 得の処理が書かれたり ビジネスに関する知識を 密に持ってしまったり
12. どれだけレビューで打ち返したり ディレクトリルールで縛っても 規模拡大に応じて結合も増えていく
13. 引用: https://medium.com/javascript-in-plain-english/react-vue-and-business-logic-19df105698a2
14. テスト容易性・変更容易性の 低下を招いている
15. React の問題というより “フロントエンド”領域の 宿命なのかもしれない (Facebook や Vercel の動向に期待)
16. 書き方・構成の統制がないと スキル差が保守性低下に直結しやすい まとめると
17. “React プロジェクトは　　　　　　　　　 カオスになりやすい” “
18. ここまでを踏まえて
19. 私が実際に行った カオスを排除し 秩序を保つ仕組みと それを支えるツールに について発表
20. 解決策は2つ
21. monorepo scaffold 誰もが同一構成で 書き始める仕掛け作りで スキルギャップを吸収 とビジネスロジック の世界を分けることで 物理的に知識を分離する Solution 1 2
22. monorepo scaffold 誰もが同一構成で 書き始める仕掛け作りで スキルギャップを吸収 とビジネスロジック の世界を分けることで 物理的に知識を分離する Solution 1 2
23. Single repo UI UI UI UI UI Logic Logic Logic Logic カオスなリポジトリ UIとロジックが密結合している テストしづらい 全員が同時に同一リポジトリで 開発を行う
24. Logic repo UI UI UI UI UI Logic Logic Logic Logic Logic UI repo 解決へのアプローチ リポジトリを分けて物理的に分離し 互いの知識を共有しない
25. Logic repo UI UI UI UI UI Logic Logic Logic Logic Logic UI repo 分業を可能にし テスタビリティも向上する
26. Logic repo UI UI UI UI UI Logic Logic Logic Logic Logic UI repo ビルドしたものを互いに レジストリにパブリッシュ
27. Business repo Logic packages UI packages Logic UI Logic UI Logic UI ビジネス用のリポジトリで初めて コレボレーションし結合する
28. Business repo Logic packages UI packages Logic UI Logic UI Logic UI ロジックを分離したことで デザインの再利用もできる UI UI Other repos
29. PROS デザイナー コーダー の参画のハードルが下がる リポジトリを分断することで、知識が混ざらない そうすることでテスト容易性が生まれる ・ は でビジュアルテストを、 は によるユニットテストを 他のプロジェクトからもデザインの再利用が可能
30. CONS 組織も合わせて形を変えないと不健全な状態になるコンウェイ 最終的なビジネスコンポーネントに結合するまで、 ビジネスの要求に応えられているかの品質が保証できない 最終的にリリースまでのリードタイムが長くなる
31. CONS 組織も合わせて形を変えないと不健全な状態になるコンウェイ 最終的なビジネスコンポーネントに結合するまで、 ビジネスの要求に応えられているかの品質が保証できない 最終的にリリースまでのリードタイムが長くなる モノレポを採用して 問題を解消する
32. 引用: https://blog.spacemarket.com/code/web-frontend-repository-composition-monorepo-or-manyrepo/
33. Mono repo Logic repo UI repo Business repo すべてのリポジトリを一つの リポジトリ内で管理 分業方法は変わらない
34. Mono repo Logic repo UI repo Business repo Developing dependency ローカルでの開発中は リンクでリポジトリ間の 依存解決が行われる (yarn workspace / Lerna) リアルタイムでパッケージの 変更と組込みを同時に行える
35. Mono repo Logic repo UI repo Business repo Released dependency Other repos リリース時には レジストリ経由での 依存解決に切り替わる
36. 実際に採用している構成 /ui /api /hooks /utils /core U L L L B BFFとの通信 カスタムフック (コンポーネントからAPIリクエストを隠蔽する ) 便利な共通関数 デザイン ビジネスドメイン
37. 実際に採用している構成 /ui /api /hooks /utils /core U L L L B BFFとの通信 カスタムフック (コンポーネントからAPIリクエストを隠蔽する ) 便利な共通関数 デザイン ビジネスドメイン ツールを利用し破綻を防いでいる
38. モノレポ戦略を 支援するツール
39. モノレポマネジメントを フレームワーク的 アプローチで行えるようにす るツール https://lerna.js.org/
40. を採用 すると、 を自動生 成してくれる 自動CHANGELOG を採用すると、 パブリッシュ時のバージョン を自動的に選択 してくれる 自動バージョニング ローカルではシンボリックリン クによりリポジトリ間を参照して くれるため、変更を即時反映し てくれる 依存関係の解決 テスト、ビルド、開発サーバ立 ち上げなど、各リポジトリのコ マンドを一斉実行可能 依存関係を解釈し、実行順序 を自動的判断してくれる コマンド一斉実行 や 、 な ど、どのリポジトリでも使用す るものは、共通化できるため、 バージョン管理が楽 パッケージの共有 Introduce Lerna
41. https://qiita.com/kimamula/items/0b 4dff363933bfe74506 https://qiita.com/hisasann/items/929 b6702df1d6e871ce7 詳しく知りたい方はこちらをどうぞ
42. Lernaを利用しモノレポ戦略で 物理的にUIとロジックを 混ぜない仕組みを作った 1 Conclude
43. monorepo scaffold 誰もが同一構成で 書き始める仕掛け作りで スキルギャップを吸収 とビジネスロジック の世界を分けることで 物理的に知識を分離する Solution 1 2
44. コンポーネントを作成する際 手順や考えるべきことが多い 処理をカスタムフックにする ノーマルの関数で書く 依存処理をコンポーネントファイル内に書く ファイルを分ける ファイル、 ファイルを書く 書かない えとせとら えとせとら の型定義を する しない
45. Rails には scaffold という 必要なファイルを用意してくれる コマンドがある
46. React にも Scaffoldを 採用しよう
47. https://zenn.dev/takepepe/articles/hygen -template-generator https://qiita.com/usagi-f/items/ea4ecf7ec6a 6b52567e3 記事を参考に React 版 scaffold を作成
48. 対話的にコンポーネントの構 成ファイルを自動生成できる ツール Hygen http://www.hygen.io/
49. Introduce Hygen テンプレートの内容はチーム内で カスタマイズして登録して使う テンプレート内に や のファ イルも設置できる ディレクトリを分けて複数パターン 登録可能
50. DEMO
51. Hygenを利用し自動的に 高品質な状態から 開発着手できるようにした 2 Conclude
52. monorepo scaffold 誰もが同一構成で 書き始める仕掛け作りで スキルギャップを吸収 とビジネスロジック の世界を分けることで 物理的に知識を分離する Solution 1 2
53. Lernaを利用しモノレポ戦略で 物理的にUIとロジックを 混ぜない仕組みを作った 1 Conclude
54. Hygenを利用し自動的に 高品質な状態から 開発着手できるようにした 2 Conclude
55. Any questions? Thanks!