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.3k
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
600
stand.fmの最近の取り組み: アプリ起動速度の改善/improvement-of-speed-startup-app
standfm
4
2.7k
ReactNative製アプリがAndroidだと遅いという問題に立ち向かった話/the problem that React Native apps are slow on Android
standfm
1
3.3k
LIVEの負荷対策と監視について / About LIVE load countermeasures and monitoring
standfm
0
8.6k
声でつながる、 優しい世界を創るUI/UX
standfm
4
540
stand.fm(Android)におけるreact-native-track-playerの改善/Improvement of react-native-track-player on standfm Android app
standfm
0
360
stand.fmにおける開発体験とパフォーマンスの向上 / Development Experience and Performance improvement
standfm
1
7.5k
React NativeアプリでコラボLIVE配信 / Collaboration Live Streaming with React Native App
standfm
1
4.1k
エンジニア向け会社紹介資料 / company deck for engineers
standfm
7
67k
Other Decks in Technology
See All in Technology
生成AI時代のデータ基盤
shibuiwilliam
4
2.8k
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
9
3.7k
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
270
進捗
ydah
2
230
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
1.3k
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
200
AI エージェントとはそもそも何か? - 技術背景から Amazon Bedrock AgentCore での実装まで- / AI Agent Unicorn Day 2025
hariby
3
670
JuniorからSeniorまで: DevOpsエンジニアの成長ロードマップ
yuriemori
2
360
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
2
310
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
110
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
180
2025年にHCP Vaultを学び直して見えた景色 / Lessons and New Perspectives from Relearning HCP Vault in 2025
aeonpeople
0
140
Featured
See All Featured
Scaling GitHub
holman
463
140k
Being A Developer After 40
akosma
90
590k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Six Lessons from altMBA
skipperchong
28
4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Unsuck your backbone
ammeep
671
58k
Embracing the Ebb and Flow
colly
87
4.8k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Building Adaptive Systems
keathley
43
2.7k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
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