Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
マネーフォワード クラウド経費 フロントエンド分離はじめました
Search
Money Forward, Inc.
September 06, 2023
Technology
0
170
マネーフォワード クラウド経費 フロントエンド分離はじめました
Money Forward, Inc.
September 06, 2023
Tweet
Share
More Decks by Money Forward, Inc.
See All by Money Forward, Inc.
スケールし続ける事業とサービスを支える組織とアーキテクチャの生き残り戦略 / The survival strategy for Money Forward’s engineering.
moneyforward
0
550
MEet Flutter Add-to-App: Unlocking Our Productivity
moneyforward
0
260
マネーフォワードが取り組む グローバルテックカンパニーへの挑戦 / Money Forward’s Challenge to Become a Global Tech Company
moneyforward
0
360
マネーフォワードのエンジニアリング進化論 / The Evolution of Engineering at Money Forward
moneyforward
0
640
Rubyにおける並行処理 / Concurrency in Ruby
moneyforward
0
280
通知基盤におけるKafka活用事例 / Kafka Case Study on the Notification Platform
moneyforward
0
480
マネーフォワードにおけるデータ戦略 / Data Strategy at Money Forward
moneyforward
0
400
FiftyOneを用いたOCRモデルの比較 / Comparing OCR Models using FiftyOne
moneyforward
0
220
グローバル環境における効果的なチームワーク / Effective Teamwork in a Global Environment
moneyforward
0
390
Other Decks in Technology
See All in Technology
Restarting_SRE_Road_to_SRENext_.pdf
_awache
0
140
AIエージェント完全に理解した
segavvy
4
250
30代エンジニアが考える、エンジニア生存戦略~~セキュリティを添えて~~
masakiokuda
4
2k
Reactを段階的に覗いてみる
ytaisei
2
930
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
290
「エンジニアマネージャー」の役割を担っている / 担ってみたい方へのキャリアパスガイド
coconala_engineer
1
240
PHPでアクターモデルを活用したSagaパターンの実践法 / php-saga-pattern-with-actor-model
ytake
0
1k
開発組織全体で意識するSLI/SLOを実装している話
zepprix
1
800
AWS のポリシー言語 Cedar を活用した高速かつスケーラブルな認可技術の探求 #phperkaigi / PHPerKaigi 2025
ytaka23
7
1.5k
DevOps文化を育むQA 〜カルチャーバブルを生み出す戦略〜 / 20250317 Atsushi Funahashi
shift_evolve
1
110
Redefine_Possible
upsider_tech
0
220
Compose MultiplatformにおけるiOSネイティブ実装のベストプラクティス
enomotok
1
200
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
35
3.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
176
52k
Designing Experiences People Love
moore
140
23k
Visualization
eitanlees
146
15k
Statistics for Hackers
jakevdp
797
220k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Adopting Sorbet at Scale
ufuk
75
9.3k
Transcript
マネーフォワード クラウド経費 フロントエンド分離はじめました Money Forward Tech Event vol.1 2023/07/26 カシフクトモヤ
自己紹介 樫福智哉(カシフクトモヤ) 2023年4月 株式会社マネーフォワード に入社 徳島出身、Iターンで東京から福岡に引越し
趣味: ゲーム(最近はゼルダ、ピクミン)、博物館巡り GitHub: https://github.com/tnyo43 𝕏: https://twitter.com/cashfooooou
おことわり まだ始まったばかりのプロジェクトでリリースはしていないです。 「こんなプロジェクトを始めたよ」「こんなことを考えて取り組んでいるよ」という共有です。
マネーフォワード クラウド経費の紹介 経費精算を自動化するシステム スマートフォン・PCで操作可能で、各種サービス自動連携やレシート内容の自動読み取りなど、 手入力の手間を徹底して省くことができる。 2016年2月にサービス提供開始( 現在8年目) 面倒だった経費精算にかかる時間を1/10※に 経費明細のデータ
連携で自動入力 ※当社調べ 領収書画像データの 自動取得 独自の銀行API連携機能で 振込処理が効率化
歴史が長いからこそのつらさ • レガシーな技術 ◦ ある時点で最善の選択をしても、すぐによりよい技術が登場する ◦ そもそも技術の刷新は難しい ▪ 通常の機能開発の片手間でやるには規模が大きすぎる ▪
過去に技術的な改善を試みたが、完全には対応しきれなかった • 例: slim + coffeescript, React (jsx, tsx)で書かれたコードが混在 • コードが密結合 ◦ フロントエンドとバックエンド、一見関係なさそうなフロントエンドのコードが密結合 ▪ 小規模に見える変更が簡単にできるとは限らない ▪ アーキテクチャレベルの対応が必要 ◦ そもそもテストしづらい ので、十分テストされている状態を作ることが難しい ▪ デグレが発生してしまう
フロントエンド分離はじめました 2023年3月から、フロントエンドの負債解消プロジェクト 「フロントエンド分離」 発足 やること • コード品質の向上 • フロントエンドとバックエンドの分離 •
モダンな技術の導入 ... などなど 期待する効果 • バックエンドとの疎結合化 • デプロイの独立 • テスタビリティ向上 + カバレッジ向上 • フロントエンドの性能改善 ... などなど
フロントエンド分離のここがすごい! • 今後の長期的な開発を見据えて、しっかりリソースを割く • 内部品質を高くするために、独立性を高くする • モダンな技術を取り入れる
フロントエンド分離のここがすごい! 今後の長期的な開発を見据えて、しっかりリソースを割く 現在、4人のエンジニアがフロントエンド分離に専属で取り組んでいる。 完遂まで年単位でリソースを割くことを決断している。 品質を高くすることが目的なので、品質に妥協をしない。 • プロダクトを長く育てていく意思がある • 会社の体力があるからこそできること 意外と難しい
つい瞬間的なスピードを求 めて妥協しがち
フロントエンド分離のここがすごい! 内部品質を高くするために、独立性を高くする 機能ごとにパッケージを分けて小さくビルドする。 安全な開発ができる状況を目指す。 • パッケージ同士を疎結合にして、責務・影響を最小限に留める ◦ 内部品質の向上 ▪ 理解容易性
▪ 変更容易性 ▪ テスタビリティ ◦ ユーザへ届ける価値が高まる ▪ リリースまでにかかる時間が短くなる ▪ 障害の修正までにかかる時間が短くなる ディレクトリを分けることより も強い制約
フロントエンド分離のここがすごい! モダンな技術を取り入れる ユーザ体験/開発体験を向上させることを目的に、新しい技術を積極的に取り入れていく • React + Next.js (フロントエンドフレームワーク、 App Router
も導入中) • turbo (ビルドシステム) • URQL (GraphQL クライアント) • Jest + Testing Library (UI を含めた自動テスト) • Storybook (UI カタログ、 VRT) • Mock Service Worker (ローカル環境、テスト環境のためのモックサーバー)
フロントエンド分離の行く末は、君の目で確かめてくれ! フロントエンド分離プロジェクトは、まだ始まったばかり。 今後どのように進んでいくかは神のみぞ知る ...。 • テックブログやイベントで発信をしていく予定 ◦ Moneyforward Developers Blog
◦ Zenn ◦ connpass • We are hiring! ◦ 他にもいろんな技術改善プロジェクトがあります ◦ この後の懇親会でぜひ声をかけてください ◦ 採用情報 ◦ 発表者の 𝕏: @cashfooooou