ストアが紡ぐ地図アプリケーション

2024.08.30『Svelte Japan Online Meetup #4』で発表
#svelte #mierune #sveltejapan #sveltesapporo

Transcript

1. ストアが紡ぐ 地図アプリケーション 2024.08.30 Svelte Japan Online Meetup #4 MIREUNE ブーチョ
2. MIERUNE フロントエンドエンジニア ブーチョ ⁨⁩⁨⁩⁨⁩⁨⁩⁨⁩⁨⁩3年前に札幌に移住 夏は登山、冬はスキーに勤しんでいる 本業は『パウダーハント』 2024.08.30 Svelte Japan Online Meetup #4
3. MIERUNE について 位置情報に特化した様々なソリューションを提供 https://speakerdeck.com/sorami/svelte-japan-online-meetup-number-3 Svelte Japan Online Meetup #3 では 技術リードが採用の経緯を発表！ 札幌初?! 2024年より、Svelteを全社標準スタックとして採用 2024.08.30 Svelte Japan Online Meetup #4
4. MIERUNE について 2024.08.30 Svelte Japan Online Meetup #4 札幌時計台初?! 時計台LT 札幌にお越しの際は ぜひMIERUNE BBQへ
5. 入社当時、標準スタックであったVue.js 3と仲良くやっていた シンプルさ（容易なバインディング・疎結合の実現）に 衝撃を受けた。 ⁨⁩より本質に注力出来る・議論できる そんなわたしとVue.js 3の間を引き裂くかのように開かれた 「社内勉強会でSvelteチュートリアル」 わたしとSvelte 2024.08.30 Svelte Japan Online Meetup #4
6. 01 svelteのストア 02 地図アプリのつらみ 03 ストアの活用 2024.08.30 Svelte Japan Online Meetup #4 ストアが紡ぐ 地図アプリケーション
7. 2024.08.30 Svelte Japan Online Meetup #4 しばしば起こる 状態管理ライブラリなに使う問題 React Redux Recoil Zustand Jotai ... Vue.js Vuex Pinia ... または inject・provider? svelteのストア
8. 2024.08.30 Svelte Japan Online Meetup #4 Svelteでは ビルドインのsvelte/store → 一貫性のある開発体験・開発の高速化・依存関係の簡素化 svelteのストア
9. 2024.08.30 Svelte Japan Online Meetup #4 ストアの概念 svelte/storeモジュール ストア ストアコントラクト カスタムストア svelteのストア 値を格納する場所 Svelteが提供するストア機能のモジュール writable, readable, derivedを用いてストアを作成 基本的なインターフェイス subscribe, set, update 独自実装するストア
10. 2024.08.30 Svelte Japan Online Meetup #4 svelteのストア svelte/storeモジュール ストア ストアコントラクト カスタムストア 定義 writable, readable, derivedに準拠 利用方法を定義 データベースを作る・蔵書APIを作る 本を取る・追加する 新たな利用方法を定義 subscribe, set, update
11. 地図アプリのつらみ 2024.08.30 Svelte Japan Online Meetup #4 例えば↓の3D地図アプリ Svelte4+CesiumJSで構築 　　　　　　　　　が提供する 3D地理空間データの可視化を提供する オープンソースJavaScriptライブラリ CesiumJSとは・・・ fyi: Svelte5では依存関係が複雑で利用は 厳しい
13. サイドバーで 地形の切り替え レイヤー表示切り替え 計測モーダル 面積・体積の計測 断面図の作成 2024.08.30 Svelte Japan Online Meetup #4
14. 地図アプリのつらみ 2024.08.30 Svelte Japan Online Meetup #4 描画中の地図（インスタンス） サイドバー 計測モーダル レイヤー・地形モデル 更新 データ(標高・レイヤー) 取得
15. 地図アプリのつらみ 2024.08.30 Svelte Japan Online Meetup #4 src/
 ├─ routes
 │ └─ +page.svelte // ルートコンポーネント
 └─ components
 ├─ MapPane.svelte // 地図描画用コンポーネント
 ├─ Sidebar.svelte // サイドバー用コンポーネント
 └─ measurement
 ├─ MeasurementModal.svelte // 計測モーダル 
 ├─ Distance.svelte // 距離測定用コンポーネント
 └─ Elevation.svelte // 標高取得用コンポーネント
16. 2024.08.30 Svelte Japan Online Meetup #4 データバインドの複雑化&密結合 +page.svelte MapPane.svelte 地図画面 MeasureModal.svelte 計測モーダル Elevation.svelte 標高計測モーダル ⁨ ⁩ Distance.svelte 距離計測モーダル Sidebar.svelte サイドバー src/
 ├─ routes
 │ └─ +page.svelte // ルートコンポーネント
 └─ components
 ├─ ├─ Sidebar.svelte // サイドバー用コンポーネント
 └─ measurement
 ├─ MeasurementModal.svelte // 計測モーダル 
 ├─ Distance.svelte // 距離測定用コンポーネント
 └─ Elevation.svelte // 標高取得用コンポーネント MapPane.svelte // 地図描画用コンポーネント
 地図インスタンス・関数 地図アプリのつらみ 機能が増えるほど このようなバケツリレーが 往々にして起こりうる
17. ストアの活用 2024.08.30 Svelte Japan Online Meetup #4 +page.svelte MapPane.svelte 地図画面 MeasureModal.svelte 計測モーダル Elevation.svelte 標高計測モーダル Elevation.svelte 標高計測モーダル ⁨⁩Distance.svelte 距離計測モーダル ⁨⁩Distance.svelte 距離計測モーダル Sidebar.svelte サイドバー 地図インスタンス・関数 地図インスタンス ストア 購読(subsctibe) update カスタムストア関数 get カスタムストア関数 MapPane.svelte 地図画面 Sidebar.svelte サイドバー 計算ロジック
18. ストアの活用 2024.08.30 Svelte Japan Online Meetup #4 疎結合の実現 保守性・拡張性の担保 “Svelteらしい”コードに バケツリレーの解消 Elevation.svelte 標高計測モーダル ⁨⁩Distance.svelte 距離計測モーダル 地図インスタンス ストア 購読(subsctibe) update カスタムストア関数 get カスタムストア関数 MapPane.svelte 地図画面 Sidebar.svelte サイドバー 計算ロジック
19. まとめ 2024.08.30 Svelte Japan Online Meetup #4 ストアコンストラクト・カスタムストアの活用は 　　地図アプリケーション開発において重要な役割を果たすだろう 一方でストア・カスタムストア自体の肥大化や 　　　　　　ストア間での結合には十分に考慮されるべきであろう SvelteとCesiumJSの組み合わせは最高
20. 宣伝 Svelte Sapporo 10月に#1やります （何も決まってないです） 2024.08.30 Svelte Japan Online Meetup #4