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

投稿日時: 2020年2月18日投稿者: engineers_blog

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

クラウド経費では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は原則利用しない

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

続きを読む →

Ruby の Enumerator とたわむれる

投稿日時: 2020年2月4日投稿者: engineers_blog

こんにちは！
マネーフォワードクラウド経費というサービスで 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]

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

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

続きを読む →

とあるエンジニアのマネフォ的 1日の過ごし方

投稿日時: 2020年1月31日投稿者: engineers_blog

こんにちは！
『マネーフォワードクラウド勤怠』のエンジニアの @bino98 です。

今回は、 マネーフォワードで働くエンジニアの1日の過ごし方 をご紹介させていただきます。
この記事を通して「マネーフォワードで働く」イメージを少しでも持っていただければ幸いです。

過ごし方の基となった人物の特徴

この記事の出来事は以下の人物の1日の出来事を中心に、できる限り働き方をイメージして頂きやすくするために、一部内容を再構成しています。

名前は山本貴文(@bino98)。東京都在住。
2019年5月から、マネーフォワードの一員になり半年が経過
マネーフォワードクラウド勤怠を作るメンバの一員
最近子どもが生まれ、家に帰ると子どもが喜ぶ。その姿を観ると、とても癒やされる。

マネーフォワードでは、リモートワークによる勤務も認められています。
今回は出社する場合です。

続きを読む →

時間がかかっていた依存パッケージの更新フローをカイゼンした話

投稿日時: 2020年1月29日投稿者: engineers_blog

こんにちは！
2019年7月に中途入社した @ktmouk と申します。

HRプロダクト領域の開発を担当しています。

アプリを開発するのが好きで、
プライベートでも『Hackaru』という時間を管理できるアプリを開発しています。

今回は初めてブログを書かせていただきます。
本稿では、依存パッケージの更新業務のフローを改善した話を紹介します！

依存パッケージの更新とは

HRプロダクト開発チームでは、毎週火曜日〜金曜日に依存パッケージの更新をしています。
Gemfileやpackage.jsonのような、プロダクトで使用しているパッケージをバージョンアップする作業です。
中には脆弱性を修正するような重要な更新も含まれているので、定期的にアップデートするのは大切な作業になります。

Dependabotを使用しています。

依存パッケージのバージョンアップには、「Dependabot」を使用しています。
「Dependabot」を使えば、依存しているパッケージの新しいバージョンを検知して自動でプルリクエストを作成してくれます！とても便利。

続きを読む →

新卒が社内懇親会での失敗をリベンジした話

投稿日時: 2020年1月21日投稿者: engineers_blog

こんにちは、2019年新卒の渡辺です。

私たち新卒は、半年前の社内懇親会にて「MFクイズダービー」というゲームを企画し、進行に必要なアプリを開発・運営しました。
しかし、ゲームの進行中にサービスがダウンしてしまい、最後まで終えることができず、散々な結果になりました。

＜その時の戦いの記録はこちら＞
新卒が社内懇親会アプリを開発したら、障害対応まで経験できた話

前回の反省から『このままで終わることはできない！！』とリベンジをすることになりました。

ゲーム名も『超★ウルトラMFクイズダービー』にアップデート

基本ルール

解答者チームと投票者チームに分かれる。
4択のクイズが出題される。
解答者チームは投票者チームに分からないように解答する。
投票者チームは正解する解答者チームを予想し、自分の持ち点からいくらポイントを預けるか決め、投票する。
投票した解答者チームが正解した場合は預けたポイント x 倍率の得点を獲得。不正解だった場合は預けたポイントは没収される。倍率は各問題、解答者チームごとに異なる。

この流れを4回繰り返し、総得点が最も多い投票者チームを表彰する、というゲームです。

続きを読む →

2020年のマネーフォワード

投稿日時: 2019年12月25日投稿者: engineers_blog

こちらはMoney Forward Advent Calendar 2019 25日目の記事です。

こんにちは、マネーフォワード CTOの中出(なかで)です。
2019年の振り返りと2020年の抱負を書いてみたいと思います。

2019年のマネーフォワードの振り返り

2019年を一言で表すと拡大の一年でした。

Advent Calendar 1日目の記事や 2日目の記事の通り、2019年のマネーフォワードは将来の事業成長のために積極的に開発組織への投資を行いました。

1月にはマネーフォワード Vietnamで100名体制の開発組織を構築するための開発拠点をオープンし、2月には福岡に続く国内開発拠点を京都に開設、3月にはマネーフォワードの持つデータを元に新たな価値を創造するためMoney Forward Labを立ち上げ、すでに研究者がいくつかの研究を開始しており研究成果が形になってきています。

またエンジニア・デザイナーは1年間で160人規模から280人規模に拡大し、2018年から積極的に採用を始めた新卒エンジニアも40人を超え、外国人エンジニアも増えました。
年齢や性別、地域や国籍を問わないエンジニアのダイバーシティーとエンジニア同士のリスペクトに溢れる開発組織を構築することができました。

多くの優秀で才能と熱意あふれる仲間に恵まれ、プロダクト開発や基盤開発、技術的負債の解消など多くのことに同時に取り組めるようになりました。