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
550
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.2k
LIVEの負荷対策と監視について / About LIVE load countermeasures and monitoring
standfm
0
8.5k
声でつながる、 優しい世界を創るUI/UX
standfm
4
530
stand.fm(Android)におけるreact-native-track-playerの改善/Improvement of react-native-track-player on standfm Android app
standfm
0
340
stand.fmにおける開発体験とパフォーマンスの向上 / Development Experience and Performance improvement
standfm
1
7.5k
React NativeアプリでコラボLIVE配信 / Collaboration Live Streaming with React Native App
standfm
1
4k
エンジニア向け会社紹介資料 / company deck for engineers
standfm
7
67k
Other Decks in Technology
See All in Technology
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
750
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
大規模PaaSにおける監視基盤の構築と効率化の道のり
lycorptech_jp
PRO
0
190
OpenJDKエコシステムと開発中の機能を紹介 2025夏版
chiroito
1
730
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
2
690
GoogleのAI Agent
shukob
0
160
Eight Engineering Unit 紹介資料
sansan33
PRO
0
3.2k
AIエージェント実践集中コース LT
okaru
1
140
RDRA3.0を知ろう
kanzaki
3
450
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
やさしいClaude Code入門
minorun365
PRO
37
28k
データプレーンプログラミングとは? DPU&スイッチASICの開発経験から語る
ebiken
PRO
1
270
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
We Have a Design System, Now What?
morganepeng
52
7.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
750
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
Balancing Empowerment & Direction
lara
1
91
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
890
Mobile First: as difficult as doing things right
swwweet
223
9.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