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
130
マネーフォワード クラウド経費 フロントエンド分離はじめました
Money Forward, Inc.
September 06, 2023
Tweet
Share
More Decks by Money Forward, Inc.
See All by Money Forward, Inc.
MEet Flutter Add-to-App: Unlocking Our Productivity
moneyforward
0
84
マネーフォワードが取り組む グローバルテックカンパニーへの挑戦 / Money Forward’s Challenge to Become a Global Tech Company
moneyforward
0
120
マネーフォワードのエンジニアリング進化論 / The Evolution of Engineering at Money Forward
moneyforward
0
210
Rubyにおける並行処理 / Concurrency in Ruby
moneyforward
0
79
通知基盤におけるKafka活用事例 / Kafka Case Study on the Notification Platform
moneyforward
0
150
マネーフォワードにおけるデータ戦略 / Data Strategy at Money Forward
moneyforward
0
130
FiftyOneを用いたOCRモデルの比較 / Comparing OCR Models using FiftyOne
moneyforward
0
52
グローバル環境における効果的なチームワーク / Effective Teamwork in a Global Environment
moneyforward
0
55
複数拠点・複数チームにおけるデリバリのボトルネックと解消方法について
moneyforward
0
310
Other Decks in Technology
See All in Technology
LINEヤフー新卒採用 コーディングテスト解説 実装問題編
lycorp_recruit_jp
1
13k
LINE-ChatGPT 倫理問題を整理する全力肯定彼氏くん [LuC4]に訪れたサービス開始以来の最大の危機
o_ob
2
170
【完全版】Dify - LINE Bot連携 考え方と実用テクニック
uezo
2
620
tenntennはなんでnewmoにnew社したの? - YAPC::Hakodate 2024
tenntenn
PRO
0
340
JAWS PANKRATION 2024 配信システムの紹介
yoshimi0227
0
110
外部カンファレンスで登壇しよう! 〜「強い」エンジニアへの一歩を踏み出す〜
logica0419
4
110
LeSSはスクラムではない!?LeSSにおけるスクラムマスターの振る舞い方とは / Scrum Master Behavior in LeSS
toma_sm
0
210
とある事業会社にとっての Kaggler の魅力
hakubishin3
7
1.2k
Microsoft 365 でデータセキュリティを強化しよう
sophiakunii
2
360
エムスリー全チーム紹介資料 / Introduction of M3 All Teams
m3_engineering
1
340
さくっと実践!Postmanを活用した高品質で持続可能なAPI管理
yokawasa
2
110
Develop to Survive - YAPC::Hakodate 2024 Keynote
moznion
8
3.2k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
600
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
30
1.7k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Become a Pro
speakerdeck
PRO
24
4.9k
Documentation Writing (for coders)
carmenintech
65
4.4k
Adopting Sorbet at Scale
ufuk
73
9k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Raft: Consensus for Rubyists
vanstee
136
6.6k
How GitHub (no longer) Works
holman
311
140k
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