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
1.8k
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
440
Atomic Design とテストの○○な話
takfjp
2
1.7k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.5k
FARM スタックに触れてみる
takfjp
0
1.2k
React Testing Library の Query について整理してみた
takfjp
0
420
React.js 消えるライフサイクルメソッドについて
takfjp
0
110
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
2.9k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
390
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
290
Other Decks in Programming
See All in Programming
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
180
Featured
See All Featured
Building Adaptive Systems
keathley
40
2.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Bash Introduction
62gerente
610
210k
GraphQLとの向き合い方2022年版
quramy
44
13k
Why Our Code Smells
bkeepers
PRO
335
57k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Gamification - CAS2011
davidbonilla
80
5.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Scaling GitHub
holman
459
140k
Facilitating Awesome Meetings
lara
51
6.2k
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()の中になるべくコールバックを記述しないように
だけど地図は面白い!