会計フロントエンドの 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 化済み さらなるマジ価値の提供やサービスの安定化のため負債返済していくぞ

No content