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
380
Other Decks in Technology
See All in Technology
プロセス改善による品質向上事例
tomasagi
1
1.8k
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.2k
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
250
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
130
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
490
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
300
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
FastConnect の冗長性
ocise
1
9.6k
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
110
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
730
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
67
4.6k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Side Projects
sachag
452
42k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
We Have a Design System, Now What?
morganepeng
51
7.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Gamification - CAS2011
davidbonilla
80
5.1k
Designing for Performance
lara
604
68k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Music & Morning Musume
bryan
46
6.3k
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