会計フロントエンドの TypeScript 化 / Migrating frontend of freee Accounting to TypeScript

Transcript

1. 会計フロントエンドの TypeScript 化 kemuridama 2023年4⽉16⽇
2. ここに円に切り抜いた画像を入れてく ださい kemuridama 2018年新卒⼊社。 配属後からずっと会計の開発に従事。現在は会計 全体の開発⽣産性を上げるような技術的負債の解 消や実装の標準化を⾏う会計基盤チームに所属。 freee Tech Night 運営リーダー。 会計アプリケーションエンジニア
3. 　 freee会計は freee で唯⼀ TypeScript 導⼊が進んでいない
4. 　 2013/3/19 -> 2023/4/16 • freee会計はリリース 10 周年 🎉🎉🎉 参照: https://corp.freee.co.jp/news/techcrunch.html
5. 10 年間の技術スタックの遷移 参照: https://speakerdeck.com/freee/10fen-dewakarufreee-enziniaxiang-kehui-she-shuo-ming-zi-liao
6. 10 年間の技術スタックの遷移 参照: https://speakerdeck.com/freee/10fen-dewakarufreee-enziniaxiang-kehui-she-shuo-ming-zi-liao CoffeeScript と Backbone.js が消え, TS or JS (+Flow) に移⾏しているように⾒える
7. 　 実際… • 最近は React で画⾯を作っている • CoffeeScript は decaffeinate を使って JavaScript に変換できた※ • Backbone.js は未だ根強く残る ◦ ということは jQuery も… • eco という謎のテンプレートエンジン… ◦ freee の⼈以外で知っている⼈に会ったことがない ※ https://developers.freee.co.jp/entry/goodbye-coffeescript
8. 古いものが残り新しいものが増えた
9. 　 現在の会計のフロントエンドの技術スタック • React • erb • jQuery • eco • Reactive.js • Backbone.js • flux-utils • React hooks • Sass (SCSS) ◦ Bootstrap ◦ 内製の共通スタイ ルライブラリ • styled-components UI • JavaScript + Flow 開発⾔語 スタイリング ステート管理
10. なんとかしないと…
11. TypeScript 化をしつつ実装の標準化をしよう🥳
12. 　 社内の他の TypeScript 化事例 • freee⼈事労務 ◦ もともとは JavaScript + Flow で書かれていた ◦ 約 1,200 ファイルを flow2ts を使って機械的に変換※ • freee申告 ◦ 会計と同じような技術スタックだった ◦ 機械的な変換は⾏わず徐々に TypeScript へ移⾏中 ※ https://developers.freee.co.jp/entry/flow-to-typescript
13. 会計はどうするか…🤔
14. 　 前提 • JavaScript だけで 6,000 を超えるファイルがある ◦ すべてが Flow による型付けが⾏われているわけではない ▪ @flow がついているファイルでも coverage は 90% 程度 ◦ 中には CoffeeScript から機械的に変換されたファイルもある ▪ もちろん型はついてない • いろいろなライフサイクルを持つフレームワークが混ざっている ◦ Backbone.js, React, flux-utils…… ◦ 新しく⼊ってきた⼈のキャッチアップコスト増⼤
15. 　 flow2ts などのツールによる変換 • メリット ◦ エンジニアの⼯数は最⼩限 • デメリット ◦ 型がないコードは any になる ▪ 今後メンテナンスされて型がつくかは怪しい ◦ 混ざったフレームワークの統⼀は不可能 ▪ メンテナンスがかなり厳しい ▪ 負債は残ったままになる
16. 　 エンジニアが徐々に変換 • メリット ◦ ロジックを 1 から書き直せる ◦ 機械的な変換に⽐べれば今より型安全になる可能性が⾼い ▪ any をわざわざ新しいコードベースで書こうとする⼈はいない • デメリット ◦ 時間が圧倒的にかかる ▪ その分エンジニアの⼯数が必要
17. どちらを選択する？？
18. 　 freee会計の TypeScript 化⽅針 • 機械的な変換を⾏わず, 開発過程で徐々に TypeScript に移⾏する ◦ TypeScript 化に伴って古いフレームワークを⼀掃する ▪ React Router も v3 と v5 混ざってたりしている😇 • ステート管理には Redux を採⽤する ◦ flux-utils はすでに archived project なので使いたくない ◦ Redux は社内の他のプロダクトでも採⽤されている ◦ Redux DevTools などのデバッグツールも揃っている ◦ アプリケーションが巨⼤なので single state のほうが管理しやすい
19. 　 freee会計の TypeScript 化⽅針 • 機械的な変換を⾏わず, 開発過程で徐々に TypeScript に移⾏する ◦ TypeScript 化に伴って古いフレームワークを⼀掃する ◦ フレームワーク 以外にも React Router が v3 と v5 混ざってたりし ているので統⼀する • ステート管理には Redux を採⽤する ◦ flux-utils はすでに archived project ◦ Redux は社内の他のプロダクトでも採⽤されている ◦ アプリケーションが巨⼤なので single state で管理したほうが良い これを 3 年でやり遂げるのが⽬標です🔥
20. 　 まとめ • freee会計はリリースして 10 周年 ◦ 10 年間でいろいろなフレームワークが導⼊され負債となった ◦ TypeScript も freee で唯⼀導⼊されていない • TypeScript 化にもいくつかのアプローチが考えられる ◦ ツールによる⾃動変換 ◦ エンジニアによる温かみのある移⾏ • freee会計は「エンジニアによる温かみのある移⾏」で TypeScript 化 と実装の標準化を⽬指します ◦ すでにいくつかの機能が TypeScript 化済み さらなるマジ価値の提供やサービスの安定化のため負債返済していくぞ