Tweet
Tweet

Slide 1

Slide 1 text

本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。 主要ライブラリの実例に学ぶ、 TypeScript で実現する型安全な座標定義

Slide 2

Slide 2 text

© toggle holdings inc. 2
 原⼝ 公輔 所属 2024/06〜現在 トグルホールディングス株式会社 出⾝ ⿅児島県霧島市 フルスタックにTypeScriptで 開発しています！

Slide 3

Slide 3 text

© toggle holdings inc. 3
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 ある⼟地に建てられる 最⼤の建物を出⼒出来る SaaS を開発しています 座標定義に向き合ったきっかけ

Slide 4

Slide 4 text

© toggle holdings inc. 4
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 ⼟地位置情報は緯度経度 の２次元座標で表される 座標定義に向き合ったきっかけ

Slide 5

Slide 5 text

© toggle holdings inc. 5
 GeoJSON の Position を使った既存実装が存在 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 座標定義に向き合ったきっかけ

Slide 6

Slide 6 text

© toggle holdings inc. 6
 GeoJSON = GIS (地理情 報システム) データを記 述するための、JSONを 基にしたフォーマット 緯度経度座標は Position という number の配列で 表される 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 座標定義に向き合ったきっかけ

Slide 7

Slide 7 text

© toggle holdings inc. 7
 緯度経度の順序も次元数 も型内に情報が無く、 バグも発⽣ 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 座標定義に向き合ったきっかけ

Slide 8

Slide 8 text

© toggle holdings inc. 8
 著名ライブラリは、 どのような⼯夫を⾏っている？🤔

Slide 9

Slide 9 text

© toggle holdings inc. 9
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 各種ライブラリの特徴 Turf.js geolib Leaflet 主要な型 タプル (Position) オブジェクト + タプル オブジェクト/クラス + タプル ⼊⼒の型 タプル⼀本勝負 ユニオン型 + 交差型 + オーバーロード ユニオン型 + 交差型 + オーバーロード 柔軟性 ★☆☆ ★★★ ★★★ 型安全度 ★☆☆ ★★☆ ★★☆

Slide 10

Slide 10 text

© toggle holdings inc. 10
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 Turf.js とは ブラウザ‧Node.js で利⽤可能なGIS演算ライブラリ

Slide 11

Slide 11 text

© toggle holdings inc. 11
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 Turf.js の潔さとリスク

Slide 12

Slide 12 text

© toggle holdings inc. 12
 GeoJSON 準拠 = 互換性◎ 型安全性 = △ ● 順序ミス、次元数ミス は実⾏時まで検出不可 ● z座標⼊りの3次元配列 を関数に突っ込んでも z座標は無視される 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 Turf.js の潔さとリスク

Slide 13

Slide 13 text

© toggle holdings inc. 13
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 geolib とは Turf.js と同様、距離計算などを⾏うGIS演算ライブラリ

Slide 14

Slide 14 text

© toggle holdings inc. 14
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 geolib の交差型シールド

Slide 15

Slide 15 text

© toggle holdings inc. 15
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 ● 表記揺れを吸収 ● 緯度経度必須を型で保証 ○ 緯度: latitude 経度: longitude ● 配列 [lon, lat] も許容 → 結局順序は未検証 geolib の交差型シールド

Slide 16

Slide 16 text

© toggle holdings inc. 16
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 Leaflet とは Web地図ライブラリであり、GIS 演算のAPIも含んでいる

Slide 17

Slide 17 text

© toggle holdings inc. 17
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 Leaflet の柔軟戦略

Slide 18

Slide 18 text

© toggle holdings inc. 18
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 ● geolibと同様で 緯度経度必須を型で保証 ● オーバーロード関数の定 義が多数あり、柔軟性◎ ● 配列 [lon, lat] も許容 → 結局順序は未検証 Leaflet の柔軟戦略

Slide 19

Slide 19 text

© toggle holdings inc. 19
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 各種ライブラリの特徴の再掲 Turf.js geolib Leaflet 主要な型 タプル (Position) オブジェクト + タプル オブジェクト/クラス + タプル ⼊⼒の型 タプル⼀本勝負 ユニオン型 + 交差型 + オーバーロード ユニオン型 + 交差型 + オーバーロード 柔軟性 ★☆☆ ★★★ ★★★ 型安全度 ★☆☆ ★★☆ ★★☆

Slide 20

Slide 20 text

© toggle holdings inc. 20
 各種ライブラリの課題 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 配列 [longitude, latitude] も許容 → 結局順序は未検証

Slide 21

Slide 21 text

© toggle holdings inc. 21
 ぼくのかんがえた さいきょうの型定義

Slide 22

Slide 22 text

© toggle holdings inc. 22
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 提案：Branded Types を使った型による緯度経度の保証 ソフトウェアの利⽤を⽇本に限定すれば 緯度経度の値について、どちらなのか？を類推できるはず 国土地理院｢日本の東西南北端点の経度緯度｣ https://www.gsi.go.jp/KOKUJYOHO/center.html より引用

Slide 23

Slide 23 text

© toggle holdings inc. 23
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 提案：Branded Types を使った型による緯度経度の保証 ● 型に「ブランド」を付与 することで、型システム 上で区別できるようにす るテクニック ● 実際には存在しないプロ パティ（例: __brand） を使って表現します

Slide 24

Slide 24 text

© toggle holdings inc. 24
 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 提案：Branded Types を使った型による緯度経度の保証 ● 緯度経度を区別する Branded Types の導⼊ ● 型ガードと組み合わせる ことで、型レベルでの 緯度経度を保証

Slide 25

Slide 25 text

© toggle holdings inc. 25
 ● ユニオン型 + 交差型/オーバーロードにより 引数に柔軟性を持たせているライブラリが多数 ● Branded Types の導⼊により 緯度経度をより厳密に扱うことが出来る 主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義 まとめ