マネーフォワード クラウド経費 フロントエンド分離はじめました

Transcript

1. マネーフォワード クラウド経費 フロントエンド分離はじめました Money Forward Tech Event vol.1 2023/07/26 カシフクトモヤ
2. 自己紹介 樫福智哉（カシフクトモヤ） 
 
 2023年4月 株式会社マネーフォワード に入社 
 徳島出身、Iターンで東京から福岡に引越し 
 趣味: ゲーム（最近はゼルダ、ピクミン）、博物館巡り 
 GitHub: https://github.com/tnyo43 
 𝕏: https://twitter.com/cashfooooou 

3. おことわり まだ始まったばかりのプロジェクトでリリースはしていないです。 「こんなプロジェクトを始めたよ」「こんなことを考えて取り組んでいるよ」という共有です。
4. マネーフォワード クラウド経費の紹介 経費精算を自動化するシステム スマートフォン・PCで操作可能で、各種サービス自動連携やレシート内容の自動読み取りなど、 手入力の手間を徹底して省くことができる。 2016年2月にサービス提供開始（ 現在8年目） 
 面倒だった経費精算にかかる時間を1/10※に 経費明細のデータ 連携で自動入力 ※当社調べ 領収書画像データの 自動取得 独自の銀行API連携機能で 振込処理が効率化
5. 歴史が長いからこそのつらさ • レガシーな技術 ◦ ある時点で最善の選択をしても、すぐによりよい技術が登場する ◦ そもそも技術の刷新は難しい ▪ 通常の機能開発の片手間でやるには規模が大きすぎる ▪ 過去に技術的な改善を試みたが、完全には対応しきれなかった • 例： slim + coffeescript, React (jsx, tsx)で書かれたコードが混在 • コードが密結合 ◦ フロントエンドとバックエンド、一見関係なさそうなフロントエンドのコードが密結合 ▪ 小規模に見える変更が簡単にできるとは限らない ▪ アーキテクチャレベルの対応が必要 ◦ そもそもテストしづらい ので、十分テストされている状態を作ることが難しい ▪ デグレが発生してしまう
6. フロントエンド分離はじめました 2023年3月から、フロントエンドの負債解消プロジェクト 「フロントエンド分離」 発足 やること • コード品質の向上 • フロントエンドとバックエンドの分離 • モダンな技術の導入　　　　　　　　　 ... などなど 期待する効果 • バックエンドとの疎結合化 • デプロイの独立 • テスタビリティ向上 + カバレッジ向上 • フロントエンドの性能改善　　　　　　 ... などなど
7. フロントエンド分離のここがすごい！ • 今後の長期的な開発を見据えて、しっかりリソースを割く • 内部品質を高くするために、独立性を高くする • モダンな技術を取り入れる
8. フロントエンド分離のここがすごい！ 今後の長期的な開発を見据えて、しっかりリソースを割く 現在、4人のエンジニアがフロントエンド分離に専属で取り組んでいる。 完遂まで年単位でリソースを割くことを決断している。 品質を高くすることが目的なので、品質に妥協をしない。 • プロダクトを長く育てていく意思がある • 会社の体力があるからこそできること 意外と難しい つい瞬間的なスピードを求 めて妥協しがち
9. フロントエンド分離のここがすごい！ 内部品質を高くするために、独立性を高くする 機能ごとにパッケージを分けて小さくビルドする。 安全な開発ができる状況を目指す。 • パッケージ同士を疎結合にして、責務・影響を最小限に留める ◦ 内部品質の向上 ▪ 理解容易性 ▪ 変更容易性 ▪ テスタビリティ ◦ ユーザへ届ける価値が高まる ▪ リリースまでにかかる時間が短くなる ▪ 障害の修正までにかかる時間が短くなる ディレクトリを分けることより も強い制約
10. フロントエンド分離のここがすごい！ モダンな技術を取り入れる ユーザ体験/開発体験を向上させることを目的に、新しい技術を積極的に取り入れていく • React + Next.js （フロントエンドフレームワーク、 App Router も導入中） • turbo （ビルドシステム） • URQL （GraphQL クライアント） • Jest + Testing Library （UI を含めた自動テスト） • Storybook （UI カタログ、 VRT） • Mock Service Worker （ローカル環境、テスト環境のためのモックサーバー）
11. フロントエンド分離の行く末は、君の目で確かめてくれ！ フロントエンド分離プロジェクトは、まだ始まったばかり。 今後どのように進んでいくかは神のみぞ知る ...。 • テックブログやイベントで発信をしていく予定 ◦ Moneyforward Developers Blog ◦ Zenn ◦ connpass • We are hiring! ◦ 他にもいろんな技術改善プロジェクトがあります ◦ この後の懇親会でぜひ声をかけてください ◦ 採用情報 ◦ 発表者の 𝕏: @cashfooooou