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]

 

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

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

続きを読む

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

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

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

 

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

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

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

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

続きを読む

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

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

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

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

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

 

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

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

 

Dependabotを使用しています。

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

続きを読む

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

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

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

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

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

 

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

 

基本ルール

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

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

続きを読む

2020年のマネーフォワード

こちらは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人を超え、外国人エンジニアも増えました。
年齢や性別、地域や国籍を問わないエンジニアのダイバーシティーとエンジニア同士のリスペクトに溢れる開発組織を構築することができました。

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

 

2019年の社会の流れとマネーフォワード

キャッシュレス化

2019年はQRコード決済の普及や消費増税に伴って実施された「キャッシュレス・ポイント還元事業」によりキャッシュレス化が一気に加速しています。

それに引っ張られるように『マネーフォワード ME』の利用者数の伸びも加速しています。

続きを読む

怠惰な拠点長が取り組むペーパーレス・オペレーションレス

こんにちは。京都開発拠点の村上です。
全社アドベントカレンダー (エンジニアのマネーフォワード2019)に続き2本目のブログです。

京都開発拠点は2019年2月に、2名でオープンしました。

拠点をオープンするとはどういうことか。
そう、それは総務の方が1名もいないという事です!

さぁ与えられた新しい場所は未開の地です。自ら動かねば誰も何も与えてくれません。

備品も無ければ、掃除も自分たちです。
宅急便の手配や、経費の東京への郵送等…開発以外の仕事も盛りだくさん!


ついに京都に開発拠点を開設!オープニングイベントに行ってきたよ

京都拠点構築において 総務業務が苦手(面倒くさがり)な拠点長(私) がどうやって乗り越えてきたかをご紹介します!
今回紹介するサービスは以下の8つです。

  • Adobe Scan
  • マネーフォワードクラウド経費
  • ヤマトビジネスメンバーズ
  • ソロエルアリーナ (askul)
  • クラウドサイン
  • 三井住友パーチェシングカード
  • パスワードマネージャー
  • Googleフォーム

アフィリサイトっぽくなりましたが、アフィリリンクは1つもありません…

続きを読む

オフィスの便利ツール紹介:拠点間の常時接続Webミーティング

マネーフォワードのコーポレートインフラを語るアドベントカレンダー
Money Forward CorporateIT Advent Calendar 2019、12/17(火)の窓です。


こんにちは。
コーポレートインフラ担当の坂本です。

この記事では、マネーフォワードで活用されている
『重要インフラではないけどちょっと便利なオフィスツール』
を紹介します。

第三弾は『拠点間Webミーティングの常時接続』をご紹介。

拠点間の常時接続Webミーティング

九州・沖縄支社(福岡)と本社(東京)との、拠点間の常時接続Webミーティング機器。
(本社から九州・沖縄支社を見ている様子、卓球台が映ってますね)

続きを読む

駆け出しQA と Bug Bash 〜ワイワイするって難しい〜

こちらは Money Forward Advent Calendar 2019 17日目の記事です。
昨日はがーこさんの 「BtoB事業の中の編集者」として半年でoutputしたもの でした。

改めましてこんにちは!
マネーフォワード クラウド会計確定申告 で QA エンジニアをやっている Yoya と申します。
この春、こちらへの入社を機にソフトウェアテストの世界に飛び込んだ元 Web エンジニアです。

がむしゃらに走ってきた半年間、特にインパクトの強かったイベントが Bug Bash でした。

プレ開催での反省

Bug Bash イベントの概要自体は、セキュリティエンジニアで主催者の木村さんが 15日目の記事 でまとめているので、そちらをご覧いただければと思います。

続きを読む

オフィスの便利ツール紹介:iPadでOne Tap会議室予約

マネーフォワードのコーポレートインフラを語るアドベントカレンダー
Money Forward CorporateIT Advent Calendar 2019、12/13(金)の窓です。


こんにちは。
コーポレートインフラ担当の坂本です。

この記事では、マネーフォワードで活用されている
『重要インフラではないけどちょっと便利なオフィスツール』
を紹介します。

第二弾は『iPadでOne Tap会議室予約』をご紹介。

iPadでOne Tap会議室予約

マネーフォワードの会議室にはiPadが設置されています。
会議室の利用状況を表示しており、会議室が空いていればOne Tapで会議室が予約できます。

続きを読む