こんにちは。
経費精算サービス「マネーフォワード クラウド経費」の開発チームでフロントエンドエンジニアをしている坂本です。
クラウド経費ではJSのライブラリとしてReactを採用しているのですが、最近クラウド経費で React Component を実装する際のルールをまとめたので、その話を書こうと思います。
なぜルールをまとめようと思ったのか
Componentの分割ルールとしてAtomic Design、スタイルの管理としてstyled-components、GraphQL用のライブラリとしてApollo Clientを導入し実装を進めています。
昨年の10月までは挙げた３つとも使用していなかったので、試行錯誤しながら進めています。
チームメンバーの各々が試行錯誤しながら実装を進めていくので、最近はチーム内で認識の齟齬や持っている情報に差が出るようになりました。
そこで一旦現状を整理して、クラウド経費でReact Componentを実装する際の各種ルールをまとめよう、となりました。
出来上がったルール
まとめたルールは以下のようになりました。
- Atomic Designを意識する - 各レベルのルール - 自分のレベル以下の要素で構成する - 最初から完璧に設計する必要はない - ファイルの命名規則 - Functional Componentで実装する - Container ComponentとPresentational Componentに分けて実装する - Templates以下のComponentではuseQuery・useMutationを実行しない - global state と local stateの使い分け - スタイル管理 - その他 - export defaultを使用しない - Componentを作成する際はclassNameを受け取ることが可能なようにpropsを定義する - Material-UIを利用する - Componentの利用 - RailsのViewへのReact Componentの埋め込み - client/Components/other/以下のComponentは原則利用しない
以下ではインデックスの中からいくつかをピックアップして、詳細を書いていきます。