マネーフォワードにジョインして3ヶ月で取り組んだフロントエンドの改善と所感

こちらはMoney Forward Advent Calendar 2019の13日目の記事です。マネーフォワードクラウド経費というBtoB向けサービスのフロントエンドエンジニアとして2019年9月に入社し3ヶ月が立ちました。開発はすべて福岡支社で行われており、私も福岡で働いています。試用期間を終えちょうどアドベントカレンダーの時期であったので3ヶ月で取り組んだことと所感を残しておこうと思います。

まずは取り組んだことについてまとめていきます。

フロントエンド開発環境の改善

👉 既存の問題発見と解決策・ロードマップの共有

まずは既存のフロントエンドにおける開発の問題点についてヒアリングし、解決する方法を考えチームに共有しました。

現在のフロントエンド開発における問題点として大きく2つありました。

Ruby on Rails(以下Rails)アプリ内のJavaScript(CoffeeScript)が複雑でメンテナンスしにくい
フロントエンドのソースコードをRailsから切り離してReact.jsにしていこうとしていたが担当者が退職し進まなくなった

これらの問題の解決のため、まずは開発基盤の整備によるメンテナンスしやすさの向上を進めていくことにしました。フロントエンド改善における意義と、全体として何をいつまでに取り組んでいくかのロードマップやをドキュメントに残しておくことで「なぜ改善が必要なのか」に迷ったときに立ち戻れるようにしています。

今時点の最終ゴールとしてはRailsはWebAPIのみ、フロントエンドはSPAとして独立したものにすることを目標に進めていますが、既存機能もたくさんあるのでとても長いプロジェクトになると思います。

また、前述の通りReact.jsでの開発が一部導入されていたため、より開発が進めやすくするためにコンポーネントの粒度やディレクトリ構成などのルールを考え、共有し議論しながらまとめていきました。

当然進めていくなかで思った通りに進まないところもあるので、臨機応変に対応しつつチームに共有し合意を得ながら進めています。

👉 開発基盤の整備

・ディレクトリ構成の変更

SPAではなくRailsのView上で部分的にReact.jsのコンポーネントを利用していますが、一部汎用的なコンポーネントはあるものの、画面ごとに独自に作られたコンポーネントが多くメンテナンスしづらい状態でした。できるだけ汎用的にコンポーネントを実装しやすいようにRailsのそれに近かったディレクトリ構成をフレームワークに近い形に変更しました。現在のディレクトリ構成は以下です。

client/
 ├─ .storybook/ ... Storybookの設定ファイル
 ├─ assets/ ... 画像などの静的ファイル
 ├─ components/ ... React.jsのコンポーネントを置く
 ├─ consts/ ... 各種定数をまとめる
 ├─ docs/ ... 各種ドキュメントをまとめる
 ├─ lib/ ... 共通処理などを実装する
 ├─ locales/ ... I18n用の設定ファイル
 ├─ pages/ ... pageコンポーネント(Atomic Designのpagesレベル)
 ├─ stores/ ... Reduxのソースコード
 ├─ tests/ ... テストコード
 └─ types/ ... 型定義ファイルを置く

components/以下はAtomic Designの考えにもとづいて整理し抽象化することでより汎用的に使えることを目指しています。Atomic Designを採用したのはチームに経験者がいたというのと、これからチームで開発する際に意思を統一しやすい概念であるというところから採用しています。

・react_on_railsの導入

しばらくはRailsのView上でのコンポーネント利用になるため、できるだけRailsからReactコンポーネントを使いやすくするためのライブラリとしてreact_on_railsというgemを導入しました。react-railsというライブラリもあったのですが、Webpackerを利用する前提のものだったので見送りました（Webpackerはもともと使われていませんでした）。

簡単な使用方法としてはReactコンポーネントが実装されているビルド後のJavaScriptを読み込んだ状態で、Railsのview(controllerも可)内でreact_componentメソッドで使用したいコンポーネント名を文字列で渡すと使用することができ、Propsとしてサーバーサイドのセットすることができます。

= react_component('FooComponent', props: {bar: 'baz'})

やっていることとしてはHTMLのdata属性にJSONに変換したサーバーサイドのデータをセットしておき、コンポーネントのPropsとして渡す際にObjectに変換しているようです。

また、Rails側のI18n設定（config/locales）をJavaScriptに変換しクライアント側で使えるようにする機能も持っているのでこちらも使用しています。

reactonrailsの導入により部分的にReactコンポーネントに置き換えることが容易になりました。サーバーサイドレンダリングにも対応しているので必要な場合は利用することも想定しています。

・クロスブラウザE2Eテストの導入

フロントエンド環境をドラスティックに変更していくにあたり、意図せずIE11で動作しないということが発生したため、クロスブラウザでのE2EテストをGitHub Actionsを利用し自動化しました。詳細は社のエンジニアブログに書いています。

・TypeScriptの部分導入、既存実装のFlowからの全移行

既存ではFlowでの型チェックが導入されていました。私の入社以前からTypeScirptへの移行は検討されていましたが、進んでいなかったこともあり移行しました。TypeScriptのアドベントカレンダーで書いたのですが、まずは新しく実装するコンポーネントはTypeScriptで書けるよう並行運用ができるようにしました。

その後、既存のソースコードをすべてTypeScriptに移行し先日リリースすることができたので、Railsと切り離しているJavaScriptに関してはすべてTypeScriptへの移行が完了しています。（any使ったところもたくさんあるけど）

・その他

あとは以下のような修正も行ないました。

テストランナーをmochaからJestに変更し、容易にスナップショットテストができるようにした
CommonJS形式のモジュールのexport/import方法が混在していたためES Modules形式に統一
Storybookの導入

コンポーネント開発をチームとしてやっていくぞということでAtomic Designの読書会を始めました。書籍は「Atomic Design ～堅牢で使いやすいUIを効率良く設計する」です。デザイナーも参加しており、スキルアップのみならずコンポーネントで開発することのメリットを共有することでモチベーションアップにもつながっていると感じています。読書会のメンバー内でコンポーネントの粒度設計のレビューをするなど実際のプロダクトに活かされていきています。

また週1回のフロントエンドの座談会も始め、日々の開発で困っていることの相談や新しい知識のインプットなどを行なっています。

👉 今後について

開発基盤を整備し既存のコードを少しリファクタリングしましたが、これからが本番で、Rails上のCoffeeScriptやSassをReact.js側に移行していきながらUI自体の改善も行なっていく必要があります。既存のデザインもリニューアルしていくプロジェクトも動いているので、便乗しつつReactコンポーネントへのリファクタリングを今後進めていきます。

さらに昨今はデザインやアクセシビリティ向上の重要性も高まっているため、デザイナーと連携しながらデザインシステムの構築などの技術的支援もやっていきたいと考えています。

マネーフォワード福岡オフィスに入って3ヶ月の所感

入社して3ヶ月、仕事をしてきて感じていることを書きます。

裁量を持って仕事ができる環境

これまでの体制としてRailsのエンジニアが中心で、フロントエンドに課題感を持っていたもののなかなか進まない状態でした。その課題感と私のやりたいことが合致したこともあり、提案したことに対してすごく前向きに捉えていただきすごく仕事が進めやすい環境です。同時に責任感もすごく感じるので、やりがいを持って仕事に取り組めています。

裁量労働制ありがたい

裁量労働制なので、2人の子供を育てている身としてとてもありがたい環境です。私はだいたい朝9時半ごろ出社して18〜19時前後に退社していますが、家族の体調不良などあれば臨機応変に対応できます。試用期間が終わればリモートワークもできるのでこれから利用していきます。

エンジニアチーム全体で技術に貪欲

興味がある技術はどんどん触れてみようという意思を感じます。私自身もすごくいい影響を受けています。Tech Talkという福岡オフィスのエンジニアが不定期に集まり、開発環境の効率化やスクラムの話などなんでもよいので技術共有する会があります。私も https://qiita.com/kimromi/items/0a690856051b5bf11766 でお話しました。バックエンドのエンジニアもReact.jsやTypeScriptのキャッチアップも各自やっていてありがたいです。

Slackなどの非同期コミュニケーションが少ない

社内ドキュメントツールとして esa.io を使っていて、全職種がドキュメントを残す文化があります。必要な情報は結構まとまっているので、まずesaで検索してみると大概の情報はあります。そのためか、Slackなどでの非同期のコミュニケーションが少ない（前職が多めだったのかもしれない）と感じました。最初は少し寂しさもあったのですが、最近は慣れてきて逆に仕事に集中できているなと感じます。

フロントエンドエンジニア、デザイナーが少ない（福岡）

現在福岡オフィスにはフロントエンドエンジニアはインターンシップの学生さん含め3人、デザイナーは1人しかいません。ちなみに私は2019年12月からフロントエンドとデザイナーをまとめるチームのリーダーになりました。バックエンドエンジニアを巻き込みつつ仕事していますが、フロントエンド、デザイナーは足りていません！興味を持った方は是非こちらからよろしくお願いします。

ということで引き続き頑張っていこうと思います。