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
200
ストアが紡ぐ地図アプリケーション
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
1
180
自分Mapray、もう試した? 使わへんと絶対損やで!知らんけどな
sudataka
0
100
君も受託系GISエンジニアにならないか
sudataka
4
900
Other Decks in Technology
See All in Technology
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
220
アイテムレビュー機能導入からの学びと改善
zozotech
PRO
0
190
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
このままAIが発展するだけでAGI達成可能な理由
frievea
0
120
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.8k
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
370
Introdução a Service Mesh usando o Istio
aeciopires
0
200
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
320
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
150
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
230
Click A, Buy B: Rethinking Conversion Attribution in ECommerce Recommendations
lycorptech_jp
PRO
0
100
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
0
140
Featured
See All Featured
Bash Introduction
62gerente
615
210k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
How to Think Like a Performance Engineer
csswizardry
27
2k
RailsConf 2023
tenderlove
30
1.3k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Building Adaptive Systems
keathley
44
2.8k
Become a Pro
speakerdeck
PRO
29
5.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Rails Girls Zürich Keynote
gr2m
95
14k
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