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 freee Accounting to TypeScript
Search
kemuridama
April 16, 2023
Technology
0
18k
会計フロントエンドの 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
180
会計freee が yarn から npm に出戻った本当の理由
kemuridama
12
18k
Other Decks in Technology
See All in Technology
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
270
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
120
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
地理情報とAPIのトレンド
nagix
0
160
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
スレットハンティングについて知っておきたいこと
hacket
0
130
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
750
Featured
See All Featured
Side Projects
sachag
451
42k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
BBQ
matthewcrist
82
9k
For a Future-Friendly Web
brad_frost
173
9.2k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
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