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
React + Firebase でヒートマップを実装する
Search
takf
January 13, 2018
Programming
1
2k
React + Firebase でヒートマップを実装する
2018.01.12 まぼろしのJS勉強会 #2 「細かすぎて伝わらないUI実装選手権」
takf
January 13, 2018
Tweet
Share
More Decks by takf
See All by takf
Denoに入門していきなりAleph.jsを触ってみた
takfjp
0
490
Atomic Design とテストの○○な話
takfjp
2
1.8k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.6k
FARM スタックに触れてみる
takfjp
0
1.5k
React Testing Library の Query について整理してみた
takfjp
0
480
React.js 消えるライフサイクルメソッドについて
takfjp
0
130
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
3.1k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
410
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
320
Other Decks in Programming
See All in Programming
Rancher と Terraform
fufuhu
2
550
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
390
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.3k
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
160
AIコーディングAgentとの向き合い方
eycjur
0
270
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
OSS開発者という働き方
andpad
5
1.7k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
340
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
Design Foundational Data Engineering Observability
sucitw
3
200
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
RDoc meets YARD
okuramasafumi
4
170
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Making Projects Easy
brettharned
117
6.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
We Have a Design System, Now What?
morganepeng
53
7.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Transcript
React + Firebase で ヒートマップを実装する 2018.01.12 まぼろしのJS勉強会 #2 「細かすぎて伝わらないUI 実装選手権」
今日発表する事・つかうもの Reactをベースにヒートマップを実装します ・データベース:Firebase Realtime Database ・Firebase CLI ・地図API:Leaflet.JS ・↑のヒートマップ用ライブラリ:leaflet-heatmap +
heatmap.js ・ジオコーディング用ライブラリ:leaflet-geosearch
Leaflet.JSについて(http://leafletjs.com/) JSで動く軽量なオープンソースの地図ライブラリ OpenStreetMapをベースにしている (https://www.openstreetmap.org/) GoogleMapsAPIなどと同様にマーカー、ポップアップを実装可能 MapTilerというアプリを使えばオリジナル地図を実地図に重ね合わせることもできる (https://www.maptiler.com/)
江ノ電の各駅の利用者数を地図上で可視化したい!
データ取得の流れ(理想形) JSON ・駅名 ・平均乗降客数 / 日 Realtime Database 地図APIにプッシュ Geocoding
(駅名から 緯度・経度を取得)
実際の実装は・・・ JSON Realtime Database 再びDBにプッシュ Geocoding (駅名から 緯度・経度を取得) 緯度・経度を取得、 データを加工
Firebaseへの接続方法
None
//親コンポーネント class App extends Component { componentDidMount(){ handleMap() //DOMがマウントされた後に Mapを扱う関数を呼び出し }
render() { return ( <div className="App"> <div id="map"></div> //Mapを扱うために空のdivを作る <Footer /> //「Footer」と表示するだけのコンポーネント </div> ); } } export default App;
Reactにおける地図の実装 ・地図用の<div>を親コンポーネントでrender() ー> componentDidMount() で地図の呼び出し -> 地図単体は実DOMとして扱う
import L from ‘leaflet’ let heatmapData = { max: 100000,
min: 0, data: [] } export const handleMap = () => { //表示範囲の固定 const bounds = new L.LatLngBounds( new L.LatLng(35.33862, 139.48608), new L.LatLng(35.30338, 139.55258)) //地図のタイルレイヤ const baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }) //ヒートマップのレイヤ const heatmapLayer = new HeatmapOverlay({ container: document.getElementById('map') }) //<div id=’map’>にマウントする
const heatmapRef = firebaseApp.database().ref('heatmapVal') //FirebaseのDBを購読 heatmapRef.once('value', (snapshot) => { //
snapshot で中身を引き抜くことができる if(snapshot) { const val = snapshot.val() Object.keys(val).forEach((key) => { let j = Math.random() heatmapData.data.push({lat: Number(val[key]['lat']), lng: Number(val[key]['lng']), count: val[key]['count']*10}) //緯度・経度・データ量を配列にプッシュ }) heatmapLayer.setData(heatmapData) //ヒートマップにデータをセット } }) //Mapの定義 let map = new L.map('map', { // import L from ‘leaflet’ center: {lat:35.31625, lng:139.51852}, zoom: 18, layers: [baseLayer, heatmapLayer] }) //地図のタイルレイヤとヒートマップのレイヤを重ねる .fitBounds(bounds) }
なぜかこうなってしまった
地図APIの難しい点 ・Reactは仮想DOMを扱うのに対し、地図は実DOMである -> Reactのコンポーネントと地図上のデータを連携させるにはやや苦労がある ・React-Leaflet というライブラリがある程度吸収してくれるけど・・・ -> 実DOMをReactコンポーネントっぽく書けるが痒いところには手が届かない ・地図の操作で意図しないライフサイクルが動く場合があり、注意が必要 ->
render()の中になるべくコールバックを記述しないように
だけど地図は面白い!