2021/01/25 React Night #1 で登壇した際の発表資料です。
https://misokatsu-web.connpass.com/event/196285/
発表時の映像は https://www.youtube.com/watch?v=W-VHz71ygkc&feature=youtu.be から見れます
Aiji Uejima @aiji42React プロジェクトに秩序をもたらすReact Night #1
View Slide
Hello!I Am 上島 愛史うえじま あいじ
プライベートで毎日触るくらいReact が大好きです
一方業務ではReact に対するネガティブな面も見ている
“React プロジェクトは カオスになりやすい”“
ディレクトリルールがない要因①カオスになりやすい
引用: https://ja.reactjs.org/docs/faq-structure.html公式ドキュメントによると
Proof of ConceptBuild and Scrapの思想が強い
デザインとロジックが交錯しがち要因②カオスになりやすい
コンポーネント内にデータ取得の処理が書かれたりビジネスに関する知識を密に持ってしまったり
どれだけレビューで打ち返したりディレクトリルールで縛っても規模拡大に応じて結合も増えていく
引用: https://medium.com/javascript-in-plain-english/react-vue-and-business-logic-19df105698a2
テスト容易性・変更容易性の低下を招いている
React の問題というより“フロントエンド”領域の宿命なのかもしれない(Facebook や Vercel の動向に期待)
書き方・構成の統制がないとスキル差が保守性低下に直結しやすいまとめると
ここまでを踏まえて
私が実際に行ったカオスを排除し秩序を保つ仕組みとそれを支えるツールにについて発表
解決策は2つ
monorepo scaffold誰もが同一構成で書き始める仕掛け作りでスキルギャップを吸収とビジネスロジックの世界を分けることで物理的に知識を分離するSolution1 2
Single repoUIUIUIUIUILogicLogicLogicLogicカオスなリポジトリUIとロジックが密結合しているテストしづらい全員が同時に同一リポジトリで開発を行う
Logic repoUIUIUIUIUI Logic LogicLogicLogicLogicUI repo解決へのアプローチリポジトリを分けて物理的に分離し互いの知識を共有しない
Logic repoUIUIUIUIUI Logic LogicLogicLogicLogicUI repo分業を可能にしテスタビリティも向上する
Logic repoUIUIUIUIUI Logic LogicLogicLogicLogicUI repoビルドしたものを互いにレジストリにパブリッシュ
Business repoLogicpackagesUIpackagesLogicUILogicUILogicUIビジネス用のリポジトリで初めてコレボレーションし結合する
Business repoLogicpackagesUIpackagesLogicUILogicUILogicUIロジックを分離したことでデザインの再利用もできるUIUIOther repos
PROSデザイナー コーダー の参画のハードルが下がるリポジトリを分断することで、知識が混ざらないそうすることでテスト容易性が生まれる・ は でビジュアルテストを、 は によるユニットテストを他のプロジェクトからもデザインの再利用が可能
CONS組織も合わせて形を変えないと不健全な状態になるコンウェイ最終的なビジネスコンポーネントに結合するまで、ビジネスの要求に応えられているかの品質が保証できない最終的にリリースまでのリードタイムが長くなる
CONS組織も合わせて形を変えないと不健全な状態になるコンウェイ最終的なビジネスコンポーネントに結合するまで、ビジネスの要求に応えられているかの品質が保証できない最終的にリリースまでのリードタイムが長くなるモノレポを採用して問題を解消する
引用: https://blog.spacemarket.com/code/web-frontend-repository-composition-monorepo-or-manyrepo/
Mono repoLogic repoUI repoBusiness repoすべてのリポジトリを一つのリポジトリ内で管理分業方法は変わらない
Mono repoLogic repoUI repoBusiness repoDevelopingdependencyローカルでの開発中はリンクでリポジトリ間の依存解決が行われる(yarn workspace / Lerna)リアルタイムでパッケージの変更と組込みを同時に行える
Mono repoLogic repoUI repoBusiness repoReleaseddependencyOther reposリリース時にはレジストリ経由での依存解決に切り替わる
実際に採用している構成/ui/api/hooks/utils/coreULLLBBFFとの通信カスタムフック(コンポーネントからAPIリクエストを隠蔽する )便利な共通関数デザインビジネスドメイン
実際に採用している構成/ui/api/hooks/utils/coreULLLBBFFとの通信カスタムフック(コンポーネントからAPIリクエストを隠蔽する )便利な共通関数デザインビジネスドメインツールを利用し破綻を防いでいる
モノレポ戦略を支援するツール
モノレポマネジメントをフレームワーク的アプローチで行えるようにするツールhttps://lerna.js.org/
を採用すると、 を自動生成してくれる自動CHANGELOGを採用すると、パブリッシュ時のバージョンを自動的に選択してくれる自動バージョニングローカルではシンボリックリンクによりリポジトリ間を参照してくれるため、変更を即時反映してくれる依存関係の解決テスト、ビルド、開発サーバ立ち上げなど、各リポジトリのコマンドを一斉実行可能依存関係を解釈し、実行順序を自動的判断してくれるコマンド一斉実行や 、 など、どのリポジトリでも使用するものは、共通化できるため、バージョン管理が楽パッケージの共有Introduce Lerna
https://qiita.com/kimamula/items/0b4dff363933bfe74506https://qiita.com/hisasann/items/929b6702df1d6e871ce7詳しく知りたい方はこちらをどうぞ
Lernaを利用しモノレポ戦略で物理的にUIとロジックを混ぜない仕組みを作った1Conclude
コンポーネントを作成する際手順や考えるべきことが多い処理をカスタムフックにする ノーマルの関数で書く依存処理をコンポーネントファイル内に書く ファイルを分けるファイル、 ファイルを書く 書かないえとせとら えとせとらの型定義を する しない
Rails には scaffold という必要なファイルを用意してくれるコマンドがある
React にも Scaffoldを採用しよう
https://zenn.dev/takepepe/articles/hygen-template-generatorhttps://qiita.com/usagi-f/items/ea4ecf7ec6a6b52567e3記事を参考に React 版 scaffold を作成
対話的にコンポーネントの構成ファイルを自動生成できるツールHygenhttp://www.hygen.io/
Introduce Hygenテンプレートの内容はチーム内でカスタマイズして登録して使うテンプレート内に や のファイルも設置できるディレクトリを分けて複数パターン登録可能
DEMO
Hygenを利用し自動的に高品質な状態から開発着手できるようにした2Conclude
Any questions?Thanks!
aiji42
takasehideki
smt7174
smasato
masasuzu
takesection
oracle4engineer
yokawasa
joker1007
line_developers_tw
is_ryo
revcomm_inc
paigeccino
jonrohan
mza
scottboms
gr2m
62gerente
tanoku
akosma
lara
morganepeng
palkan
kevinliebholz