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
190
ストアが紡ぐ地図アプリケーション
2024.08.30『Svelte Japan Online Meetup #4』で発表
#svelte #mierune #sveltejapan #sveltesapporo
ブーチョ
August 30, 2024
Tweet
Share
More Decks by ブーチョ
See All by ブーチョ
自分Mapray、もう試した? 使わへんと絶対損やで!知らんけどな
sudataka
0
54
君も受託系GISエンジニアにならないか
sudataka
4
790
Other Decks in Technology
See All in Technology
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
1
170
ロールが細分化された組織でSREは何をするか?
tgidgd
1
470
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
240
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
200
TROCCO今昔
gtnao
0
170
無理しない AI 活用サービス / #jazug
koudaiii
0
110
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
140
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
27
7.6k
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
210
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
110
AIでテストプロセス自動化に挑戦する
sakatakazunori
1
620
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
For a Future-Friendly Web
brad_frost
179
9.8k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Making Projects Easy
brettharned
116
6.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
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