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
ストアが紡ぐ地図アプリケーション
Search
ブーチョ
August 30, 2024
Technology
1
130
ストアが紡ぐ地図アプリケーション
2024.08.30『Svelte Japan Online Meetup #4』で発表
#svelte #mierune #sveltejapan #sveltesapporo
ブーチョ
August 30, 2024
Tweet
Share
More Decks by ブーチョ
See All by ブーチョ
君も受託系GISエンジニアにならないか
sudataka
2
450
Other Decks in Technology
See All in Technology
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
860
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
140
2.5Dモデルのすべて
yu4u
2
930
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
130
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
62k
JEDAI Meetup! Databricks AI/BI概要
databricksjapan
0
270
脳波を用いた嗜好マッチングシステム
hokkey621
0
160
現場で役立つAPIデザイン
nagix
35
13k
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
260
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
1.6k
人はなぜISUCONに夢中になるのか
kakehashi
PRO
6
1.7k
EDRの検知の仕組みと検知回避について
chayakonanaika
2
180
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Being A Developer After 40
akosma
89
590k
Visualization
eitanlees
146
15k
4 Signs Your Business is Dying
shpigford
182
22k
Music & Morning Musume
bryan
46
6.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Rails Girls Zürich Keynote
gr2m
94
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
GitHub's CSS Performance
jonrohan
1030
460k
Documentation Writing (for coders)
carmenintech
67
4.6k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
ストアが紡ぐ 地図アプリケーション 2024.08.30 Svelte Japan Online Meetup #4 MIREUNE ブーチョ
MIERUNE フロントエンドエンジニア ブーチョ 3年前に札幌に移住 夏は登山、冬はスキーに勤しんでいる 本業は『パウダーハント』 2024.08.30 Svelte Japan Online
Meetup #4
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
MIERUNE について 2024.08.30 Svelte Japan Online Meetup #4 札幌時計台初?! 時計台LT
札幌にお越しの際は ぜひMIERUNE BBQへ
入社当時、標準スタックであったVue.js 3と仲良くやっていた シンプルさ(容易なバインディング・疎結合の実現)に 衝撃を受けた。 より本質に注力出来る・議論できる そんなわたしとVue.js 3の間を引き裂くかのように開かれた 「社内勉強会でSvelteチュートリアル」 わたしとSvelte 2024.08.30
Svelte Japan Online Meetup #4
01 svelteのストア 02 地図アプリのつらみ 03 ストアの活用 2024.08.30 Svelte Japan Online
Meetup #4 ストアが紡ぐ 地図アプリケーション
2024.08.30 Svelte Japan Online Meetup #4 しばしば起こる 状態管理ライブラリなに使う問題 React Redux
Recoil Zustand Jotai ... Vue.js Vuex Pinia ... または inject・provider? svelteのストア
2024.08.30 Svelte Japan Online Meetup #4 Svelteでは ビルドインのsvelte/store → 一貫性のある開発体験・開発の高速化・依存関係の簡素化
svelteのストア
2024.08.30 Svelte Japan Online Meetup #4 ストアの概念 svelte/storeモジュール ストア ストアコントラクト
カスタムストア svelteのストア 値を格納する場所 Svelteが提供するストア機能のモジュール writable, readable, derivedを用いてストアを作成 基本的なインターフェイス subscribe, set, update 独自実装するストア
2024.08.30 Svelte Japan Online Meetup #4 svelteのストア svelte/storeモジュール ストア ストアコントラクト
カスタムストア 定義 writable, readable, derivedに準拠 利用方法を定義 データベースを作る・蔵書APIを作る 本を取る・追加する 新たな利用方法を定義 subscribe, set, update
地図アプリのつらみ 2024.08.30 Svelte Japan Online Meetup #4 例えば↓の3D地図アプリ Svelte4+CesiumJSで構築 が提供する
3D地理空間データの可視化を提供する オープンソースJavaScriptライブラリ CesiumJSとは・・・ fyi: Svelte5では依存関係が複雑で利用は 厳しい
None
サイドバーで 地形の切り替え レイヤー表示切り替え 計測モーダル 面積・体積の計測 断面図の作成 2024.08.30 Svelte Japan Online
Meetup #4
地図アプリのつらみ 2024.08.30 Svelte Japan Online Meetup #4 描画中の地図(インスタンス) サイドバー 計測モーダル
レイヤー・地形モデル 更新 データ(標高・レイヤー) 取得
地図アプリのつらみ 2024.08.30 Svelte Japan Online Meetup #4 src/ ├─ routes
│ └─ +page.svelte // ルートコンポーネント └─ components ├─ MapPane.svelte // 地図描画用コンポーネント ├─ Sidebar.svelte // サイドバー用コンポーネント └─ measurement ├─ MeasurementModal.svelte // 計測モーダル ├─ Distance.svelte // 距離測定用コンポーネント └─ Elevation.svelte // 標高取得用コンポーネント
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 // 地図描画用コンポーネント 地図インスタンス・関数 地図アプリのつらみ 機能が増えるほど このようなバケツリレーが 往々にして起こりうる
ストアの活用 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 サイドバー 計算ロジック
ストアの活用 2024.08.30 Svelte Japan Online Meetup #4 疎結合の実現 保守性・拡張性の担保 “Svelteらしい”コードに
バケツリレーの解消 Elevation.svelte 標高計測モーダル Distance.svelte 距離計測モーダル 地図インスタンス ストア 購読(subsctibe) update カスタムストア関数 get カスタムストア関数 MapPane.svelte 地図画面 Sidebar.svelte サイドバー 計算ロジック
まとめ 2024.08.30 Svelte Japan Online Meetup #4 ストアコンストラクト・カスタムストアの活用は 地図アプリケーション開発において重要な役割を果たすだろう 一方でストア・カスタムストア自体の肥大化や
ストア間での結合には十分に考慮されるべきであろう SvelteとCesiumJSの組み合わせは最高
宣伝 Svelte Sapporo 10月に#1やります (何も決まってないです) 2024.08.30 Svelte Japan Online Meetup
#4