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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Hello! I Am 上島愛史うえじまあいじ

Slide 3

Slide 3 text

プライベートで毎日触るくらい React が大好きです

Slide 4

Slide 4 text

一方業務では React に対するネガティブな面も見ている

Slide 5

Slide 5 text

“React プロジェクトは　　　　　　　　　カオスになりやすい” “

Slide 6

Slide 6 text

ディレクトリルールがない要因① カオスになりやすい

Slide 7

Slide 7 text

引用: https://ja.reactjs.org/docs/faq-structure.html 公式ドキュメントによると

Slide 8

Slide 8 text

引用: https://ja.reactjs.org/docs/faq-structure.html 公式ドキュメントによると

Slide 9

Slide 9 text

Proof of Concept Build and Scrap の思想が強い

Slide 10

Slide 10 text

デザインとロジックが交錯しがち要因② カオスになりやすい

Slide 11

Slide 11 text

コンポーネント内にデータ取得の処理が書かれたりビジネスに関する知識を密に持ってしまったり

Slide 12

Slide 12 text

どれだけレビューで打ち返したりディレクトリルールで縛っても規模拡大に応じて結合も増えていく

Slide 13

Slide 13 text

引用: https://medium.com/javascript-in-plain-english/react-vue-and-business-logic-19df105698a2

Slide 14

Slide 14 text

テスト容易性・変更容易性の低下を招いている

Slide 15

Slide 15 text

React の問題というより “フロントエンド”領域の宿命なのかもしれない (Facebook や Vercel の動向に期待)

Slide 16

Slide 16 text

書き方・構成の統制がないとスキル差が保守性低下に直結しやすいまとめると

Slide 17

Slide 17 text

“React プロジェクトは　　　　　　　　　カオスになりやすい” “

Slide 18

Slide 18 text

ここまでを踏まえて

Slide 19

Slide 19 text

私が実際に行ったカオスを排除し秩序を保つ仕組みとそれを支えるツールにについて発表

Slide 20

Slide 20 text

解決策は2つ

Slide 21

Slide 21 text

monorepo scaffold 誰もが同一構成で書き始める仕掛け作りでスキルギャップを吸収とビジネスロジックの世界を分けることで物理的に知識を分離する Solution 1 2

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Single repo UI UI UI UI UI Logic Logic Logic Logic カオスなリポジトリ UIとロジックが密結合しているテストしづらい全員が同時に同一リポジトリで開発を行う

Slide 24

Slide 24 text

Logic repo UI UI UI UI UI Logic Logic Logic Logic Logic UI repo 解決へのアプローチリポジトリを分けて物理的に分離し互いの知識を共有しない

Slide 25

Slide 25 text

Logic repo UI UI UI UI UI Logic Logic Logic Logic Logic UI repo 分業を可能にしテスタビリティも向上する

Slide 26

Slide 26 text

Logic repo UI UI UI UI UI Logic Logic Logic Logic Logic UI repo ビルドしたものを互いにレジストリにパブリッシュ

Slide 27

Slide 27 text

Business repo Logic packages UI packages Logic UI Logic UI Logic UI ビジネス用のリポジトリで初めてコレボレーションし結合する

Slide 28

Slide 28 text

Business repo Logic packages UI packages Logic UI Logic UI Logic UI ロジックを分離したことでデザインの再利用もできる UI UI Other repos

Slide 29

Slide 29 text

PROS デザイナーコーダーの参画のハードルが下がるリポジトリを分断することで、知識が混ざらないそうすることでテスト容易性が生まれる・はでビジュアルテストを、はによるユニットテストを他のプロジェクトからもデザインの再利用が可能

Slide 30

Slide 30 text

CONS 組織も合わせて形を変えないと不健全な状態になるコンウェイ最終的なビジネスコンポーネントに結合するまで、ビジネスの要求に応えられているかの品質が保証できない最終的にリリースまでのリードタイムが長くなる

Slide 31

Slide 31 text

CONS 組織も合わせて形を変えないと不健全な状態になるコンウェイ最終的なビジネスコンポーネントに結合するまで、ビジネスの要求に応えられているかの品質が保証できない最終的にリリースまでのリードタイムが長くなるモノレポを採用して問題を解消する

Slide 32

Slide 32 text

引用: https://blog.spacemarket.com/code/web-frontend-repository-composition-monorepo-or-manyrepo/

Slide 33

Slide 33 text

Mono repo Logic repo UI repo Business repo すべてのリポジトリを一つのリポジトリ内で管理分業方法は変わらない

Slide 34

Slide 34 text

Mono repo Logic repo UI repo Business repo Developing dependency ローカルでの開発中はリンクでリポジトリ間の依存解決が行われる (yarn workspace / Lerna) リアルタイムでパッケージの変更と組込みを同時に行える

Slide 35

Slide 35 text

Mono repo Logic repo UI repo Business repo Released dependency Other repos リリース時にはレジストリ経由での依存解決に切り替わる

Slide 36

Slide 36 text

実際に採用している構成 /ui /api /hooks /utils /core U L L L B BFFとの通信カスタムフック (コンポーネントからAPIリクエストを隠蔽する ) 便利な共通関数デザインビジネスドメイン

Slide 37

Slide 37 text

実際に採用している構成 /ui /api /hooks /utils /core U L L L B BFFとの通信カスタムフック (コンポーネントからAPIリクエストを隠蔽する ) 便利な共通関数デザインビジネスドメインツールを利用し破綻を防いでいる

Slide 38

Slide 38 text

モノレポ戦略を支援するツール

Slide 39

Slide 39 text

モノレポマネジメントをフレームワーク的アプローチで行えるようにするツール https://lerna.js.org/

Slide 40

Slide 40 text

を採用すると、を自動生成してくれる自動CHANGELOG を採用すると、パブリッシュ時のバージョンを自動的に選択してくれる自動バージョニングローカルではシンボリックリンクによりリポジトリ間を参照してくれるため、変更を即時反映してくれる依存関係の解決テスト、ビルド、開発サーバ立ち上げなど、各リポジトリのコマンドを一斉実行可能依存関係を解釈し、実行順序を自動的判断してくれるコマンド一斉実行や、など、どのリポジトリでも使用するものは、共通化できるため、バージョン管理が楽パッケージの共有 Introduce Lerna

Slide 41

Slide 41 text

https://qiita.com/kimamula/items/0b 4dff363933bfe74506 https://qiita.com/hisasann/items/929 b6702df1d6e871ce7 詳しく知りたい方はこちらをどうぞ

Slide 42

Slide 42 text

Lernaを利用しモノレポ戦略で物理的にUIとロジックを混ぜない仕組みを作った 1 Conclude

Slide 43

Slide 43 text

Slide 44

Slide 44 text

コンポーネントを作成する際手順や考えるべきことが多い処理をカスタムフックにするノーマルの関数で書く依存処理をコンポーネントファイル内に書くファイルを分けるファイル、ファイルを書く書かないえとせとらえとせとらの型定義をするしない

Slide 45

Slide 45 text

Rails には scaffold という必要なファイルを用意してくれるコマンドがある

Slide 46

Slide 46 text

React にも Scaffoldを採用しよう

Slide 47

Slide 47 text

https://zenn.dev/takepepe/articles/hygen -template-generator https://qiita.com/usagi-f/items/ea4ecf7ec6a 6b52567e3 記事を参考に React 版 scaffold を作成

Slide 48

Slide 48 text

対話的にコンポーネントの構成ファイルを自動生成できるツール Hygen http://www.hygen.io/

Slide 49

Slide 49 text

Introduce Hygen テンプレートの内容はチーム内でカスタマイズして登録して使うテンプレート内にやのファイルも設置できるディレクトリを分けて複数パターン登録可能

Slide 50

Slide 50 text

DEMO

Slide 51

Slide 51 text

Hygenを利用し自動的に高品質な状態から開発着手できるようにした 2 Conclude

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Lernaを利用しモノレポ戦略で物理的にUIとロジックを混ぜない仕組みを作った 1 Conclude

Slide 54

Slide 54 text

Hygenを利用し自動的に高品質な状態から開発着手できるようにした 2 Conclude

Slide 55

Slide 55 text

Any questions? Thanks!