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
会計フロントエンドの TypeScript 化 / Migrating frontend of...
Search
kemuridama
April 16, 2023
Technology
0
23k
会計フロントエンドの TypeScript 化 / Migrating frontend of freee Accounting to TypeScript
kemuridama
April 16, 2023
Tweet
Share
More Decks by kemuridama
See All by kemuridama
freeeのエンジニアとReactチュートリアルを学ぼう
kemuridama
0
150
freee Tech Night がもうすぐ 5 周年を迎える話 / freee Tech Night will soon be 5th anniversary
kemuridama
0
260
会計freee が yarn から npm に出戻った本当の理由
kemuridama
12
19k
Other Decks in Technology
See All in Technology
AWSで推進するデータマネジメント
kawanago
0
720
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
150
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
4
1.2k
見てわかるテスト駆動開発
recruitengineers
PRO
6
2.3k
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
130
生成AI時代のデータ基盤
shibuiwilliam
1
1.4k
Oracle Cloud Infrastructure:2025年8月度サービス・アップデート
oracle4engineer
PRO
0
160
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
2
1.4k
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
410
AI エージェントとはそもそも何か? - 技術背景から Amazon Bedrock AgentCore での実装まで- / AI Agent Unicorn Day 2025
hariby
1
270
DeNA での思い出 / Memories at DeNA
orgachem
PRO
6
1.9k
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
430
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
A Modern Web Designer's Workflow
chriscoyier
696
190k
It's Worth the Effort
3n
187
28k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Docker and Python
trallard
45
3.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Pragmatic Product Professional
lauravandoore
36
6.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Transcript
会計フロントエンドの TypeScript 化 kemuridama 2023年4⽉16⽇
ここに円に切り抜いた画像を入れてく ださい kemuridama 2018年新卒⼊社。 配属後からずっと会計の開発に従事。現在は会計 全体の開発⽣産性を上げるような技術的負債の解 消や実装の標準化を⾏う会計基盤チームに所属。 freee Tech Night
運営リーダー。 会計アプリケーションエンジニア
freee会計は freee で唯⼀ TypeScript 導⼊が進んでいない
2013/3/19 -> 2023/4/16 • freee会計はリリース 10 周年 🎉🎉🎉 参照:
https://corp.freee.co.jp/news/techcrunch.html
10 年間の技術スタックの遷移 参照: https://speakerdeck.com/freee/10fen-dewakarufreee-enziniaxiang-kehui-she-shuo-ming-zi-liao
10 年間の技術スタックの遷移 参照: https://speakerdeck.com/freee/10fen-dewakarufreee-enziniaxiang-kehui-she-shuo-ming-zi-liao CoffeeScript と Backbone.js が消え, TS or
JS (+Flow) に移⾏しているように⾒える
実際… • 最近は React で画⾯を作っている • CoffeeScript は decaffeinate
を使って JavaScript に変換できた※ • Backbone.js は未だ根強く残る ◦ ということは jQuery も… • eco という謎のテンプレートエンジン… ◦ freee の⼈以外で知っている⼈に会ったことがない ※ https://developers.freee.co.jp/entry/goodbye-coffeescript
古いものが残り新しいものが増えた
現在の会計のフロントエンドの技術スタック • React • erb • jQuery • eco
• Reactive.js • Backbone.js • flux-utils • React hooks • Sass (SCSS) ◦ Bootstrap ◦ 内製の共通スタイ ルライブラリ • styled-components UI • JavaScript + Flow 開発⾔語 スタイリング ステート管理
なんとかしないと…
TypeScript 化をしつつ実装の標準化をしよう🥳
社内の他の TypeScript 化事例 • freee⼈事労務 ◦ もともとは JavaScript +
Flow で書かれていた ◦ 約 1,200 ファイルを flow2ts を使って機械的に変換※ • freee申告 ◦ 会計と同じような技術スタックだった ◦ 機械的な変換は⾏わず徐々に TypeScript へ移⾏中 ※ https://developers.freee.co.jp/entry/flow-to-typescript
会計はどうするか…🤔
前提 • JavaScript だけで 6,000 を超えるファイルがある ◦ すべてが Flow
による型付けが⾏われているわけではない ▪ @flow がついているファイルでも coverage は 90% 程度 ◦ 中には CoffeeScript から機械的に変換されたファイルもある ▪ もちろん型はついてない • いろいろなライフサイクルを持つフレームワークが混ざっている ◦ Backbone.js, React, flux-utils…… ◦ 新しく⼊ってきた⼈のキャッチアップコスト増⼤
flow2ts などのツールによる変換 • メリット ◦ エンジニアの⼯数は最⼩限 • デメリット ◦
型がないコードは any になる ▪ 今後メンテナンスされて型がつくかは怪しい ◦ 混ざったフレームワークの統⼀は不可能 ▪ メンテナンスがかなり厳しい ▪ 負債は残ったままになる
エンジニアが徐々に変換 • メリット ◦ ロジックを 1 から書き直せる ◦ 機械的な変換に⽐べれば今より型安全になる可能性が⾼い
▪ any をわざわざ新しいコードベースで書こうとする⼈はいない • デメリット ◦ 時間が圧倒的にかかる ▪ その分エンジニアの⼯数が必要
どちらを選択する??
freee会計の TypeScript 化⽅針 • 機械的な変換を⾏わず, 開発過程で徐々に TypeScript に移⾏する ◦
TypeScript 化に伴って古いフレームワークを⼀掃する ▪ React Router も v3 と v5 混ざってたりしている😇 • ステート管理には Redux を採⽤する ◦ flux-utils はすでに archived project なので使いたくない ◦ Redux は社内の他のプロダクトでも採⽤されている ◦ Redux DevTools などのデバッグツールも揃っている ◦ アプリケーションが巨⼤なので single state のほうが管理しやすい
freee会計の TypeScript 化⽅針 • 機械的な変換を⾏わず, 開発過程で徐々に TypeScript に移⾏する ◦
TypeScript 化に伴って古いフレームワークを⼀掃する ◦ フレームワーク 以外にも React Router が v3 と v5 混ざってたりし ているので統⼀する • ステート管理には Redux を採⽤する ◦ flux-utils はすでに archived project ◦ Redux は社内の他のプロダクトでも採⽤されている ◦ アプリケーションが巨⼤なので single state で管理したほうが良い これを 3 年でやり遂げるのが⽬標です🔥
まとめ • freee会計はリリースして 10 周年 ◦ 10 年間でいろいろなフレームワークが導⼊され負債となった ◦
TypeScript も freee で唯⼀導⼊されていない • TypeScript 化にもいくつかのアプローチが考えられる ◦ ツールによる⾃動変換 ◦ エンジニアによる温かみのある移⾏ • freee会計は「エンジニアによる温かみのある移⾏」で TypeScript 化 と実装の標準化を⽬指します ◦ すでにいくつかの機能が TypeScript 化済み さらなるマジ価値の提供やサービスの安定化のため負債返済していくぞ
None