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
110
ストアが紡ぐ地図アプリケーション
2024.08.30『Svelte Japan Online Meetup #4』で発表
#svelte #mierune #sveltejapan #sveltesapporo
ブーチョ
August 30, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
[トレノケ雲の会 mod.13] 3回目のre:Inventで気づいたこと -CloudOperationsを添えて-
shintaro_fukatsu
0
120
20240522 - 躍遷創作理念 @ PicCollage Workshop
dpys
0
260
終了の危機にあった15年続くWebサービスを全力で存続させる - phpcon2024
yositosi
28
24k
AWS re:Invent 2024 recap
hkoketsu
0
740
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
340
多様なメトリックとシステムの健全性維持
masaaki_k
0
130
TypeScript開発にモジュラーモノリスを持ち込む
sansantech
PRO
3
800
「完全に理解したTalk」完全に理解した
segavvy
1
240
型情報を用いたLintでコード品質を向上させる
sansantech
PRO
2
180
AIエージェントに脈アリかどうかを分析させてみた
sonoda_mj
2
120
スケールし続ける事業とサービスを支える組織とアーキテクチャの生き残り戦略 / The survival strategy for Money Forward’s engineering.
moneyforward
0
170
多領域インシデントマネジメントへの挑戦:ハードウェアとソフトウェアの融合が生む課題/Challenge to multidisciplinary incident management: Issues created by the fusion of hardware and software
bitkey
PRO
2
140
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
222
9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Writing Fast Ruby
sferik
628
61k
Building Your Own Lightsaber
phodgson
104
6.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Bash Introduction
62gerente
609
210k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
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