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
19k
会計フロントエンドの TypeScript 化 / Migrating frontend of freee Accounting to TypeScript
kemuridama
April 16, 2023
Tweet
Share
More Decks by kemuridama
See All by kemuridama
freee Tech Night がもうすぐ 5 周年を迎える話 / freee Tech Night will soon be 5th anniversary
kemuridama
0
190
会計freee が yarn から npm に出戻った本当の理由
kemuridama
12
19k
Other Decks in Technology
See All in Technology
スモールスタート、不都合な真実 〜 耳当たりの良い言葉に現場が振り回されないために/20240930-ssmjp-small-start
opelab
13
1.8k
TypeScript x Raycast x AIで変える開発者体験
nagauta
0
180
AWSの初級者向けAI・ML資格『AWS Certified AI Practitioner』の傾向と対策/So You Want To Pass AWS Certified AI Practitioner
quiver
0
120
小さな勉強会の始め方、広げ方、あるいは友達の作り方 / How to Start, Grow, and Build Connections with Small Study Groups
ar_tama
6
2.5k
エムスリー全チーム紹介資料 / Introduction of M3 All Teams
m3_engineering
1
280
OPENLOGI Company Profile
hr01
0
54k
ガバメントクラウド開発と変化と成長する組織 / Organizational change and growth in developing a government cloud
kazeburo
4
730
クレジットカードを製造する技術
yutadayo
81
45k
エムスリーマネジメントチーム紹介資料 / Introduction of M3 Management Team
m3_engineering
0
270
【shownet.conf_】ShowNet 2024 ~ Inter * Network ~
shownet
PRO
0
500
Case Study: Concurrent Counting
ennael
PRO
0
100
【shownet.conf_】持続可能な次世代Wi-Fi運用に向けて
shownet
PRO
0
340
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
Debugging Ruby Performance
tmm1
73
12k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
A Tale of Four Properties
chriscoyier
156
22k
A designer walks into a library…
pauljervisheath
202
24k
It's Worth the Effort
3n
183
27k
Testing 201, or: Great Expectations
jmmastey
38
7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.8k
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