React Componentの実装ルールを決めてみた

こんにちは。
経費精算サービス「マネーフォワード クラウド経費」の開発チームでフロントエンドエンジニアをしている坂本です。

クラウド経費ではJSのライブラリとしてReactを採用しているのですが、最近クラウド経費で React Component を実装する際のルールをまとめたので、その話を書こうと思います。

 

なぜルールをまとめようと思ったのか

Componentの分割ルールとしてAtomic Design、スタイルの管理としてstyled-components、GraphQL用のライブラリとしてApollo Clientを導入し実装を進めています。
昨年の10月までは挙げた3つとも使用していなかったので、試行錯誤しながら進めています。

チームメンバーの各々が試行錯誤しながら実装を進めていくので、最近はチーム内で認識の齟齬や持っている情報に差が出るようになりました。
そこで一旦現状を整理して、クラウド経費で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は原則利用しない

以下ではインデックスの中からいくつかをピックアップして、詳細を書いていきます。

続きを読む

Ruby の Enumerator とたわむれる

こんにちは!
マネーフォワード クラウド経費 というサービスで Rails エンジニアをやっている野田 (@quanon_jp) と申します。

クラウド経費の開発拠点は福岡にあるのですが、福岡拠点では不定期で tech talk というカジュアルな社内 LT 会を行っています。
先日、この会で Ruby の Enumerator クラスについてお話しました (個人的に大好きなんです 💖) 。

今回はその内容を本エンジニアブログでもお伝えできればと思います。

 

バージョン情報

この記事のコード例では Ruby 2.7 を用います。

$ ruby -v
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-darwin18]

 

外部イテレータと内部イテレータ

配列などのコレクションの要素を列挙する仕組みとして イテレータ があります。
これは外部イテレータと内部イテレータに二分できます。

続きを読む