Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Money Forward, Inc.

September 06, 2023
Tweet

More Decks by Money Forward, Inc.

Other Decks in Technology

Transcript

  1. 自己紹介 樫福智哉(カシフクトモヤ) 
 
 2023年4月 株式会社マネーフォワード に入社 
 徳島出身、Iターンで東京から福岡に引越し 


    趣味: ゲーム(最近はゼルダ、ピクミン)、博物館巡り 
 GitHub: https://github.com/tnyo43 
 𝕏: https://twitter.com/cashfooooou 

  2. 歴史が長いからこそのつらさ • レガシーな技術 ◦ ある時点で最善の選択をしても、すぐによりよい技術が登場する ◦ そもそも技術の刷新は難しい ▪ 通常の機能開発の片手間でやるには規模が大きすぎる ▪

    過去に技術的な改善を試みたが、完全には対応しきれなかった • 例: slim + coffeescript, React (jsx, tsx)で書かれたコードが混在 • コードが密結合 ◦ フロントエンドとバックエンド、一見関係なさそうなフロントエンドのコードが密結合 ▪ 小規模に見える変更が簡単にできるとは限らない ▪ アーキテクチャレベルの対応が必要 ◦ そもそもテストしづらい ので、十分テストされている状態を作ることが難しい ▪ デグレが発生してしまう
  3. フロントエンド分離はじめました 2023年3月から、フロントエンドの負債解消プロジェクト 「フロントエンド分離」 発足 やること • コード品質の向上 • フロントエンドとバックエンドの分離 •

    モダンな技術の導入          ... などなど 期待する効果 • バックエンドとの疎結合化 • デプロイの独立 • テスタビリティ向上 + カバレッジ向上 • フロントエンドの性能改善       ... などなど
  4. フロントエンド分離のここがすごい! 内部品質を高くするために、独立性を高くする 機能ごとにパッケージを分けて小さくビルドする。 安全な開発ができる状況を目指す。 • パッケージ同士を疎結合にして、責務・影響を最小限に留める ◦ 内部品質の向上 ▪ 理解容易性

    ▪ 変更容易性 ▪ テスタビリティ ◦ ユーザへ届ける価値が高まる ▪ リリースまでにかかる時間が短くなる ▪ 障害の修正までにかかる時間が短くなる ディレクトリを分けることより も強い制約
  5. フロントエンド分離のここがすごい! モダンな技術を取り入れる ユーザ体験/開発体験を向上させることを目的に、新しい技術を積極的に取り入れていく • React + Next.js (フロントエンドフレームワーク、 App Router

    も導入中) • turbo (ビルドシステム) • URQL (GraphQL クライアント) • Jest + Testing Library (UI を含めた自動テスト) • Storybook (UI カタログ、 VRT) • Mock Service Worker (ローカル環境、テスト環境のためのモックサーバー)
  6. フロントエンド分離の行く末は、君の目で確かめてくれ! フロントエンド分離プロジェクトは、まだ始まったばかり。 今後どのように進んでいくかは神のみぞ知る ...。 • テックブログやイベントで発信をしていく予定 ◦ Moneyforward Developers Blog

    ◦ Zenn ◦ connpass • We are hiring! ◦ 他にもいろんな技術改善プロジェクトがあります ◦ この後の懇親会でぜひ声をかけてください ◦ 採用情報 ◦ 発表者の 𝕏: @cashfooooou