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
stand.fmのTypeScriptへの移行と活用/migrating-to-typescr...
Search
stand.fm
November 10, 2021
Technology
0
2.2k
stand.fmのTypeScriptへの移行と活用/migrating-to-typescript-standfm
stand.fm
November 10, 2021
Tweet
Share
More Decks by stand.fm
See All by stand.fm
stand.fm会社紹介資料
standfm
0
410
stand.fmの最近の取り組み: アプリ起動速度の改善/improvement-of-speed-startup-app
standfm
3
2.5k
ReactNative製アプリがAndroidだと遅いという問題に立ち向かった話/the problem that React Native apps are slow on Android
standfm
1
2.9k
LIVEの負荷対策と監視について / About LIVE load countermeasures and monitoring
standfm
0
8.2k
声でつながる、 優しい世界を創るUI/UX
standfm
4
480
stand.fm(Android)におけるreact-native-track-playerの改善/Improvement of react-native-track-player on standfm Android app
standfm
0
300
stand.fmにおける開発体験とパフォーマンスの向上 / Development Experience and Performance improvement
standfm
1
7.2k
React NativeアプリでコラボLIVE配信 / Collaboration Live Streaming with React Native App
standfm
1
3.7k
エンジニア向け会社紹介資料 / company deck for engineers
standfm
7
66k
Other Decks in Technology
See All in Technology
Autify Company Deck
autifyhq
1
39k
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
170
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
570
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
3.9k
Nix入門パラダイム編
asa1984
2
200
Shift-from-React-to-Vue
calm1205
1
1.2k
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
190
クライアントサイドでよく使われる Debounce処理 をサーバサイドで3回実装した話
yoshiori
1
140
Java x Spring Boot Warm up
kazu_kichi_67
2
480
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
170
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
425
64k
We Have a Design System, Now What?
morganepeng
50
7.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Done Done
chrislema
181
16k
Facilitating Awesome Meetings
lara
49
6k
Transcript
stand.fmのTypeScriptへの 移行と活用 株式会社stand.fm エンジニア 外松 俊尚 2021/11/10 TECH STAND #6 TypeScript
外松 俊尚 stand.fm エンジニア React NativeやNode.jsでプロダクト開発 愛媛からフルリモート @toshi__toma
stand.fmは誰でもかんたんに アプリで収録・LIVE配信ができる音声 プラットフォーム
いまの stand.fm プロジェクト • アプリ、Web、サーバーサイド全てJavaScript ◦ React Native, React(React Native
for Web), Node.js ◦ メインはFlow、一部はTypeScript • Monorepo (npm パッケージ) • プロジェクトごとにTypeScriptへの移行を開始 ◦ 新しくプロジェクトを作る時はTypeScript
TypeScriptへの移行
TypeScript移行のモチベーション • ライブラリの型定義 • TypeScriptが得意なメンバーが増えた印象 • 標準の組み込み関数の型推論 • Monorepo内で依存してるパッケージの型定義 •
開発体験 • etc
移行の調査 • 定期的にFlow辛い・TypeScript移行するのどうだろ って話はあったけど、なかなか進まなかった ◦ どれくらい大変なのか分からない ◦ 実際何が必要なのか分からない • 3日間という期間を決めて調査してみた
移行の調査 • 一番難しそうなプロジェクト(アプリとメインのapiサーバー)で実験 ◦ お試しで移行作業してみたり、必要なタスクを整理してドキュメ ントにまとめる • Flowでの型定義はある程度ちゃんと書いてあったので、比較的ス ムーズにできそう(strict: true)
• ある程度やることの見通しがたったので、移行を開始
flow to TypeScript 1. 周辺ツールやビルド設定 2. flowtsでTSに変換 3. 型エラーを修正 •
検討した移行ツール ◦ flowts: https://github.com/zxbodya/flowts ◦ flow-to-ts: https://github.com/Khan/flow-to-ts
型エラーリストの作成 • メインは型エラーの対応 • どんな種類の型エラーがどれくらいでるのか? • tscのデフォルトの出力だと厳しい
型エラーリストの作成 • @aivenio/tsc-output-parser ◦ tscの出力をJSON形式に ◦ https://github.com/aiven/tsc-output-parser • JSONを集計 ◦
ファイル単位のエラー数 ◦ エラーの種類ごとの数 • どんな種類のエラーがどれくらいでるのか見通しがたった
Typeカバレッジ • FlowからTypeScriptへ移行して型付けのカバレッジがどうなるか 気になった • 型推論される箇所が増えそうなイメージはあった
Typeカバレッジ • カバレッジの変化を確認 ◦ flow-coverage-report ▪ https://github.com/rpl/flow-coverage-report ◦ typescript-coverage-report ▪
https://github.com/alexcanessa/typescript-coverage-report • flowtsでTS化するだけでカバレッジが上がった ◦ 最大で30%ほど上がったプロジェクトがあった
TypeScriptの活用
ライブラリの型定義 • Flow Project: ライブラリの型定義が用意されてない場合 ◦ any or TypeScriptの型定義からFlowの型定義に変換 (flowgen)
◦ 不完全 & 追従が手間 • TS Project: ライブラリ本体で型定義が用意されてない場合は DefinitelyTypedからインストール • 移行時: 足りない@typesパッケージをまとめてインストール
ライブラリの型定義ファイルのバージョン • typesync ◦ packge.jsonのtypes, typingsが無い & @types/packageが ある パッケージをインストール
• インストールするバージョン ◦ typesyncはライブラリ本体のパッケージのsemverを尊重 ◦ もちろん、semverが揃ってないものもある ▪ 個別に型定義ファイルのヘッダーをチェックしたり ▪ 可能な限り対応するバージョンは揃えた
Monorepo内での依存とビルド • Flow Project: Babelでビルド ◦ build時は依存しているパッケージもビルドが必要 • 依存関係を管理 ◦
ビルドコマンドに依存するプロジェクトのビルドを追加 ▪ 全部ビルドするのにも時間がかかる ◦ 新しく依存するプロジェクトが増えた時にもれやすい
Project References • Project Referencesを活用 ◦ references: [], composite: true,
declaration: true • tsc --buildで依存しているプロジェクトも含めて適切な順番でビル ド(incremental build) • Babelのままだと使えないので、TS化のタイミングでビルドをtscに 移行
Monorepo内のパッケージの型定義 • Flow Project: 依存してるプロジェクトの型定義はanyだった • --declaration ◦ ビルド時に型定義ファイルを出力 •
package.json > typings or typesを設定 • より型安全になった
エラーハンドリング • 関数で発生しうるエラーも型で宣言して適切にハンドリングしたい • Either型 ◦ type Either<T, U> =
<Left<T> | Right<U>> ◦ 成功時・失敗時の型を表現 • 特に異常系が発生しやすい層では、Either型を返すように ◦ DBアクセスなど
Either型 • fp-ts: https://github.com/gcanti/fp-ts ◦ TSで関数型プログラミング ◦ isRight, isLeft, tryCatch,
etc
まとめ • stand.fmはFlowからTypeScriptへの移行中 • 移行は始まったばかりなので、やることは大量にある • TypeScriptの機能を活用して、開発体験や型安全性を高めていき たい
We are hiring! エンジニア積極的に募集中です https://corp.stand.fm/recruit 詳細はこちら • CTO候補 • VPoE候補
• クライアントエンジニア • バックエンドエンジニア • 機械学習エンジニア • 配信基盤エンジニア • QAエンジニア • エンジニアリングマネージャー • UI/UXデザイナー 積極募集しているプロダクト開発メンバー
None