Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

kemuridama

April 16, 2023
Tweet

More Decks by kemuridama

Other Decks in Technology

Transcript

  1. 会計フロントエンドの
    TypeScript 化
    kemuridama
    2023年4⽉16⽇

    View full-size slide

  2. ここに円に切り抜いた画像を入れてく
    ださい
    kemuridama
    2018年新卒⼊社。
    配属後からずっと会計の開発に従事。現在は会計
    全体の開発⽣産性を上げるような技術的負債の解
    消や実装の標準化を⾏う会計基盤チームに所属。
    freee Tech Night 運営リーダー。
    会計アプリケーションエンジニア

    View full-size slide

  3.  
    freee会計は freee で唯⼀
    TypeScript 導⼊が進んでいない

    View full-size slide

  4.  
    2013/3/19 -> 2023/4/16
    ● freee会計はリリース 10 周年 🎉🎉🎉
    参照: https://corp.freee.co.jp/news/techcrunch.html

    View full-size slide

  5. 10 年間の技術スタックの遷移
    参照:
    https://speakerdeck.com/freee/10fen-dewakarufreee-enziniaxiang-kehui-she-shuo-ming-zi-liao

    View full-size slide

  6. 10 年間の技術スタックの遷移
    参照: https://speakerdeck.com/freee/10fen-dewakarufreee-enziniaxiang-kehui-she-shuo-ming-zi-liao
    CoffeeScript と Backbone.js が消え,
    TS or JS (+Flow) に移⾏しているように⾒える

    View full-size slide

  7.  
    実際…
    ● 最近は React で画⾯を作っている
    ● CoffeeScript は decaffeinate を使って JavaScript に変換できた※
    ● Backbone.js は未だ根強く残る
    ○ ということは jQuery も…
    ● eco という謎のテンプレートエンジン…
    ○ freee の⼈以外で知っている⼈に会ったことがない
    ※ https://developers.freee.co.jp/entry/goodbye-coffeescript

    View full-size slide

  8. 古いものが残り新しいものが増えた

    View full-size slide

  9.  
    現在の会計のフロントエンドの技術スタック
    ● React
    ● erb
    ● jQuery
    ● eco
    ● Reactive.js
    ● Backbone.js
    ● flux-utils
    ● React hooks
    ● Sass (SCSS)
    ○ Bootstrap
    ○ 内製の共通スタイ
    ルライブラリ
    ● styled-components
    UI
    ● JavaScript + Flow
    開発⾔語
    スタイリング ステート管理

    View full-size slide

  10. なんとかしないと…

    View full-size slide

  11. TypeScript 化をしつつ実装の標準化をしよう🥳

    View full-size slide

  12.  
    社内の他の TypeScript 化事例
    ● freee⼈事労務
    ○ もともとは JavaScript + Flow で書かれていた
    ○ 約 1,200 ファイルを flow2ts を使って機械的に変換※
    ● freee申告
    ○ 会計と同じような技術スタックだった
    ○ 機械的な変換は⾏わず徐々に TypeScript へ移⾏中
    ※ https://developers.freee.co.jp/entry/flow-to-typescript

    View full-size slide

  13. 会計はどうするか…🤔

    View full-size slide

  14.  
    前提
    ● JavaScript だけで 6,000 を超えるファイルがある
    ○ すべてが Flow による型付けが⾏われているわけではない
    ■ @flow がついているファイルでも coverage は 90% 程度
    ○ 中には CoffeeScript から機械的に変換されたファイルもある
    ■ もちろん型はついてない
    ● いろいろなライフサイクルを持つフレームワークが混ざっている
    ○ Backbone.js, React, flux-utils……
    ○ 新しく⼊ってきた⼈のキャッチアップコスト増⼤

    View full-size slide

  15.  
    flow2ts などのツールによる変換
    ● メリット
    ○ エンジニアの⼯数は最⼩限
    ● デメリット
    ○ 型がないコードは any になる
    ■ 今後メンテナンスされて型がつくかは怪しい
    ○ 混ざったフレームワークの統⼀は不可能
    ■ メンテナンスがかなり厳しい
    ■ 負債は残ったままになる

    View full-size slide

  16.  
    エンジニアが徐々に変換
    ● メリット
    ○ ロジックを 1 から書き直せる
    ○ 機械的な変換に⽐べれば今より型安全になる可能性が⾼い
    ■ any をわざわざ新しいコードベースで書こうとする⼈はいない
    ● デメリット
    ○ 時間が圧倒的にかかる
    ■ その分エンジニアの⼯数が必要

    View full-size slide

  17. どちらを選択する??

    View full-size slide

  18.  
    freee会計の TypeScript 化⽅針
    ● 機械的な変換を⾏わず, 開発過程で徐々に TypeScript に移⾏する
    ○ TypeScript 化に伴って古いフレームワークを⼀掃する
    ■ React Router も v3 と v5 混ざってたりしている😇
    ● ステート管理には Redux を採⽤する
    ○ flux-utils はすでに archived project なので使いたくない
    ○ Redux は社内の他のプロダクトでも採⽤されている
    ○ Redux DevTools などのデバッグツールも揃っている
    ○ アプリケーションが巨⼤なので single state のほうが管理しやすい

    View full-size slide

  19.  
    freee会計の TypeScript 化⽅針
    ● 機械的な変換を⾏わず, 開発過程で徐々に TypeScript に移⾏する
    ○ TypeScript 化に伴って古いフレームワークを⼀掃する
    ○ フレームワーク 以外にも React Router が v3 と v5 混ざってたりし
    ているので統⼀する
    ● ステート管理には Redux を採⽤する
    ○ flux-utils はすでに archived project
    ○ Redux は社内の他のプロダクトでも採⽤されている
    ○ アプリケーションが巨⼤なので single state で管理したほうが良い
    これを 3 年でやり遂げるのが⽬標です🔥

    View full-size slide

  20.  
    まとめ
    ● freee会計はリリースして 10 周年
    ○ 10 年間でいろいろなフレームワークが導⼊され負債となった
    ○ TypeScript も freee で唯⼀導⼊されていない
    ● TypeScript 化にもいくつかのアプローチが考えられる
    ○ ツールによる⾃動変換
    ○ エンジニアによる温かみのある移⾏
    ● freee会計は「エンジニアによる温かみのある移⾏」で TypeScript 化
    と実装の標準化を⽬指します
    ○ すでにいくつかの機能が TypeScript 化済み
    さらなるマジ価値の提供やサービスの安定化のため負債返済していくぞ

    View full-size slide