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-typescript-standfm
Search
stand.fm
November 10, 2021
Technology
0
2.1k
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
360
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.8k
LIVEの負荷対策と監視について / About LIVE load countermeasures and monitoring
standfm
0
8k
声でつながる、 優しい世界を創るUI/UX
standfm
4
470
stand.fm(Android)におけるreact-native-track-playerの改善/Improvement of react-native-track-player on standfm Android app
standfm
0
280
stand.fmにおける開発体験とパフォーマンスの向上 / Development Experience and Performance improvement
standfm
1
7.1k
React NativeアプリでコラボLIVE配信 / Collaboration Live Streaming with React Native App
standfm
1
3.6k
エンジニア向け会社紹介資料 / company deck for engineers
standfm
7
66k
Other Decks in Technology
See All in Technology
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
地理情報とAPIのトレンド
nagix
0
160
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
120
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
Azure AI ことはじめ
tsubakimoto_s
0
130
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1026
450k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
A designer walks into a library…
pauljervisheath
201
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
Making Projects Easy
brettharned
111
5.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Designing for humans not robots
tammielis
247
25k
Six Lessons from altMBA
skipperchong
24
3.2k
Speed Design
sergeychernyshev
9
270
How to train your dragon (web standard)
notwaldorf
79
5.5k
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