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
16k
会計フロントエンドの 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
150
会計freee が yarn から npm に出戻った本当の理由
kemuridama
12
18k
Other Decks in Technology
See All in Technology
KubeCon EU: Unlocking new Platform Experiences with Open Interfaces
salaboy
1
380
私のRSpecの書き方 / How I write RSpec
tmtms
4
840
ビジネスとコード品質の接合点 そしてコード品質がそこに及ぼす影響 / The Intersections of Business and Engineering, and The Impact of Code Quality There
mtx2s
10
1k
技術広報として2023年度に頑張ったこと / What we did well in FY2023 as a DevRel
pauli
5
490
Building a RAG app to chat with your data (on Azure)
pamelafox
0
120
Autify Company Deck
autifyhq
1
30k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
社内共通ルールを値オブジェクトにして社内ライブラリとして運用してみた話
leveragestech
2
1.2k
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
150
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
12k
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
GraphQLに入門してみた
chiroruxx
2
130
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
GitHub's CSS Performance
jonrohan
1023
450k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
Navigating Team Friction
lara
177
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
The Cult of Friendly URLs
andyhume
73
5.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
Atom: Resistance is Futile
akmur
258
25k
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