主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義

TSKaigi 2025 の LT「主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義」の発表資料です。
https://2025.tskaigi.org/talks/Tirol_JPN

Transcript

1. 本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。 主要ライブラリの実例に学ぶ、 TypeScript で実現する型安全な座標定義
2. © toggle holdings inc. 2
 原⼝ 公輔 所属 2024/06〜現在 トグルホールディングス株式会社 出⾝ ⿅児島県霧島市 フルスタックにTypeScriptで 開発しています！
3. © toggle holdings inc. 3
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 ある⼟地に建てられる 最⼤の建物を出⼒出来る SaaS を開発しています 座標定義に向き合ったきっかけ
4. © toggle holdings inc. 4
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 ⼟地位置情報は緯度経度 の２次元座標で表される 座標定義に向き合ったきっかけ
5. © toggle holdings inc. 5
 GeoJSON の Position を使った既存実装が存在 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 座標定義に向き合ったきっかけ
6. © toggle holdings inc. 6
 GeoJSON = GIS (地理情 報システム) データを記 述するための、JSONを 基にしたフォーマット 緯度経度座標は Position という number の配列で 表される 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 座標定義に向き合ったきっかけ
7. © toggle holdings inc. 7
 緯度経度の順序も次元数 も型内に情報が無く、 バグも発⽣ 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 座標定義に向き合ったきっかけ
8. © toggle holdings inc. 8
 著名ライブラリは、 どのような⼯夫を⾏っている？🤔
9. © toggle holdings inc. 9
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 各種ライブラリの特徴 Turf.js geolib Leaflet 主要な型 タプル (Position) オブジェクト + タプル オブジェクト/クラス + タプル ⼊⼒の型 タプル⼀本勝負 ユニオン型 + 交差型 + オーバーロード ユニオン型 + 交差型 + オーバーロード 柔軟性 ★☆☆ ★★★ ★★★ 型安全度 ★☆☆ ★★☆ ★★☆
10. © toggle holdings inc. 10
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 Turf.js とは ブラウザ‧Node.js で利⽤可能なGIS演算ライブラリ
11. © toggle holdings inc. 11
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 Turf.js の潔さとリスク
12. © toggle holdings inc. 12
 GeoJSON 準拠 = 互換性◎ 型安全性 = △ • 順序ミス、次元数ミス は実⾏時まで検出不可 • z座標⼊りの3次元配列 を関数に突っ込んでも z座標は無視される 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 Turf.js の潔さとリスク
13. © toggle holdings inc. 13
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 geolib とは Turf.js と同様、距離計算などを⾏うGIS演算ライブラリ
14. © toggle holdings inc. 14
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 geolib の交差型シールド
15. © toggle holdings inc. 15
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 • 表記揺れを吸収 • 緯度経度必須を型で保証 ◦ 緯度: latitude 経度: longitude • 配列 [lon, lat] も許容 → 結局順序は未検証 geolib の交差型シールド
16. © toggle holdings inc. 16
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 Leaflet とは Web地図ライブラリであり、GIS 演算のAPIも含んでいる
17. © toggle holdings inc. 17
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 Leaflet の柔軟戦略
18. © toggle holdings inc. 18
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 • geolibと同様で 緯度経度必須を型で保証 • オーバーロード関数の定 義が多数あり、柔軟性◎ • 配列 [lon, lat] も許容 → 結局順序は未検証 Leaflet の柔軟戦略
19. © toggle holdings inc. 19
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 各種ライブラリの特徴の再掲 Turf.js geolib Leaflet 主要な型 タプル (Position) オブジェクト + タプル オブジェクト/クラス + タプル ⼊⼒の型 タプル⼀本勝負 ユニオン型 + 交差型 + オーバーロード ユニオン型 + 交差型 + オーバーロード 柔軟性 ★☆☆ ★★★ ★★★ 型安全度 ★☆☆ ★★☆ ★★☆
20. © toggle holdings inc. 20
 各種ライブラリの課題 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 配列 [longitude, latitude] も許容 → 結局順序は未検証
21. © toggle holdings inc. 21
 ぼくのかんがえた さいきょうの型定義
22. © toggle holdings inc. 22
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 提案：Branded Types を使った型による緯度経度の保証 ソフトウェアの利⽤を⽇本に限定すれば 緯度経度の値について、どちらなのか？を類推できるはず 国土地理院｢日本の東西南北端点の経度緯度｣ https://www.gsi.go.jp/KOKUJYOHO/center.html より引用
23. © toggle holdings inc. 23
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 提案：Branded Types を使った型による緯度経度の保証 • 型に「ブランド」を付与 することで、型システム 上で区別できるようにす るテクニック • 実際には存在しないプロ パティ（例: __brand） を使って表現します
24. © toggle holdings inc. 24
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 提案：Branded Types を使った型による緯度経度の保証 • 緯度経度を区別する Branded Types の導⼊ • 型ガードと組み合わせる ことで、型レベルでの 緯度経度を保証
25. © toggle holdings inc. 25
 • ユニオン型 + 交差型/オーバーロードにより 引数に柔軟性を持たせているライブラリが多数 • Branded Types の導⼊により 緯度経度をより厳密に扱うことが出来る 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 まとめ