{"id":6399,"date":"2019-05-13T09:51:13","date_gmt":"2019-05-13T00:51:13","guid":{"rendered":"https:\/\/gunmagisgeek.com\/wordpress\/?p=6399"},"modified":"2020-05-02T21:13:37","modified_gmt":"2020-05-02T12:13:37","slug":"react-hooks-%e3%81%a8deck-gl-v-7%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6web%e5%9c%b0%e5%9b%b3%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%80%82","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/react\/6399","title":{"rendered":"React Hooks \u3068deck.gl v.7\u3092\u4f7f\u3063\u3066web\u5730\u56f3\u3092\u4f5c\u3063\u3066\u307f\u305f\u3002"},"content":{"rendered":"

\"DeckGL<\/a><\/p>\n

example<\/a><\/p>\n

\u4ee5\u524d\u7d39\u4ecb\u3057\u305f<\/a>Uber\u793e\u88fd\u306eWeb\u5730\u56f3\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u300cDeck.gl<\/a>\u300d\u306ever.7\u304c\u516c\u958b\u3055\u308c\u307e\u3057\u305f\u3002\u7d39\u4ecb\u3057\u305f\u9803\u306fver.5\u3060\u3063\u305f\u306e\u3067\u3060\u3044\u3076\u9593\u304c\u3042\u304d\u3001\u516c\u5f0f\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u30b5\u30a4\u30c8Vis Academy\u306e\u5185\u5bb9\u3082\u6539\u7de8\u3055\u308c\u3066\u3044\u305f\u306e\u3067\u6539\u3081\u3066\u4e00\u304b\u3089\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u3084\u308a\u76f4\u3057\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n

Vis Academy – Building a Geospatial App<\/a><\/p>\n

\u305f\u3060\u3001\u6539\u7de8\u3055\u308c\u305f\u3068\u306f\u3044\u3048\u4e00\u5ea6\u3084\u3063\u305f\u3053\u3068\u306e\u3042\u308b\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u305f\u3060\u306a\u305e\u308b\u306e\u3082\u306a\u3093\u306a\u306e\u3067\u3001\u516c\u5f0f\u3067\u306fclass\u30d9\u30fc\u30b9\u3067\u66f8\u304b\u308c\u3066\u3044\u308b\u30b3\u30fc\u30c9\u3092\u52c9\u5f37\u304c\u3066\u3089React Hooks\u306e\u6a5f\u80fd\u3092\u4f7f\u3063\u3066fanction\u30d9\u30fc\u30b9\u306b\u66f8\u304d\u63db\u3048\u306a\u304c\u3089\u9032\u3081\u3066\u307f\u3066\u3044\u307e\u3059\u3002<\/p>\n

\u4f8b\u3048\u3070\u7b2c1\u7ae0\u306e\u30b3\u30fc\u30c9\u306a\u3089\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u66f4\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n

\u5143\u306e\u30b3\u30fc\u30c9<\/strong><\/p>\n

import React, { Component } from 'react';\nimport MapGL from 'react-map-gl';\nimport {MapStylePicker} from '.\/controls';\n\nexport default class App extends Component {\n  state = {\n    style: 'mapbox:\/\/styles\/mapbox\/light-v9',\n    viewport: {\n      width: window.innerWidth,\n      height: window.innerHeight,\n      longitude: -74,\n      latitude: 40.7,\n      zoom: 11,\n      maxZoom: 16\n    }\n  }\n\n  componentDidMount() {\n    window.addEventListener('resize', this._resize);\n    this._resize();\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this._resize);\n  }\n\n  onStyleChange = (style) => {\n    this.setState({style});\n  }\n\n  _onViewportChange = (viewport) => {\n    this.setState({\n      viewport: { ...this.state.viewport, ...viewport }\n    });\n  }\n\n  _resize = () => {\n    this._onViewportChange({\n      width: window.innerWidth,\n      height: window.innerHeight\n    });\n  }\n\n  render() {\n    return (\n      <div>\n        <MapStylePicker onStyleChange={this.onStyleChange} currentStyle={this.state.style}\/>\n        <MapGL\n          {...this.state.viewport}\n          mapStyle={this.state.style}\n          onViewportChange={viewport => this._onViewportChange(viewport)}\n        >\n        <\/MapGL>\n      <\/div>\n    );\n  }\n<\/pre>\n
React Hooks \u4f7f\u3063\u3066\u307f\u305f\u30b3\u30fc\u30c9<\/strong><\/p>\n
import React, { useEffect, useState } from 'react';\nimport MapGL from 'react-map-gl';\n\nimport { MapStylePicker } from '.\/controls';\n\nconst MAPBOX_TOKEN = '';\n\nexport default () => {\n    const [ mapboxStyle, setMapStyle ] = useState('mapbox:\/\/styles\/mapbox\/light-v9');\n\n    const [ viewport, setViewport ] = useState({\n        width: window.innerWidth,\n        height: window.innerHeight,\n        longitude: -74,\n        latitude: 40.7,\n        zoom: 11,\n        maxZoom: 16\n    });\n\n    \/\/resize\n    useEffect(() => {\n        const handleResize = () => {\n            setViewport((v) => {\n                return {\n                    ...v,\n                    width: window.innerWidth,\n                    height: window.innerHeight\n                };\n            });\n        };\n        window.addEventListener('resize', handleResize);\n        return () => window.removeEventListener('resize', handleResize);\n    }, []);\n\n    return (\n        <div>\n            <MapStylePicker currentStyle={mapboxStyle} onStyleChange={setMapStyle} \/>\n            <MapGL\n                {...viewport}\n                mapStyle={mapboxStyle}\n                mapboxApiAccessToken={MAPBOX_TOKEN}\n                onViewportChange={(v) => setViewport(v)} \/\/ <-second callback argument warning\u304c\u51fa\u308b\u306e\u3067Wrap\n            \/>\n        <\/div>\n    );<\/pre>\n
\u3068\u306f\u3044\u3063\u3066\u3082\u3001React\u306b\u3064\u3044\u3066\u306fDeck.gl\u3092\u4f7f\u3044\u305f\u3044\u304c\u305f\u3081\u306b\u3061\u3087\u3053\u3063\u3068\u52c9\u5f37\u3057\u305f\u7a0b\u5ea6\u3067\u3001Hook\u3082\u3044\u307e\u3044\u3061\u3088\u304f\u308f\u304b\u3089\u306a\u3044\u307e\u307e\u96f0\u56f2\u6c17\u3067\u3064\u304b\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u305b\u3044\u305c\u3044useState\u3050\u3089\u3044\u3057\u304b\u4f7f\u3063\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\n
\u305d\u308c\u3067\u3082\u826f\u3051\u308c\u3070\u3001Github\u306b\u7ae0\u3054\u3068\u306e\u30b3\u30fc\u30c9\u3092\u7f6e\u3044\u3066\u304a\u3044\u305f\u306e\u3067\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u5168\u30b3\u30fc\u30c9<\/h2>\n
shimizu\/learning-vis-academy<\/a><\/p>\n
 <\/h2>\n
\u3061\u306a\u307f\u306bHexagon Layer\u3067\u30d0\u30b0\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u308c\u516c\u5f0f\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u3082\u540c\u3058\u3088\u3046\u306b\u52d5\u4f5c\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u3061\u3087\u3063\u3068\u307e\u3060\u539f\u56e0\u304c\u308f\u304b\u3063\u3066\u307e\u305b\u3093\u3002
\n\u3042\u3068\u3001control.js\u306e\u4e00\u90e8\u3067 Stateless function\u306b\u5909\u66f4\u3067\u304d\u3066\u306a\u3044\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u6b8b\u3063\u3066\u307e\u3059\u3002<\/p>\n
Deck.gl ver.7\u306b\u3064\u3044\u3066<\/h2>\n
\u500b\u4eba\u7684\u306b\u6c17\u306b\u306a\u3063\u305f\u70b9\u306b\u3064\u3044\u3066\u3060\u3051\u3002<\/p>\n
\u30d9\u30af\u30c8\u30eb\u30bf\u30a4\u30eb\u306b\u5bfe\u5fdc<\/strong>
\n\u6700\u5f8c\u306b\u89e6\u3063\u305f\u30d0\u30fc\u30b8\u30e7\u30f3\u304c5.2\u3060\u3063\u305f\u306e\u3067\u5b9f\u88c5\u3055\u308c\u305f\u306e\u304c\u3044\u3064\u306a\u306e\u304b\u306f\u308f\u304b\u308a\u307e\u305b\u3093\u304c\u3001\u5f85\u671b\u306etileLayer\u304c\u5b9f\u88c5\u3055\u308c\u3066\u3044\u307e\u3059\u3002
\n\u30b5\u30f3\u30d7\u30eb\u3067\u306fmapbox\u306e\u30d9\u30af\u30c8\u30eb\u30bf\u30a4\u30eb\u3092\u8aad\u307f\u3053\u3093\u3067\u3044\u3066\u3001\u30b3\u30fc\u30c9\u3092\u898b\u308b\u9650\u308a\u3067\u306f\u81ea\u5206\u3067\u4f5c\u6210\u3057\u305f\u30d9\u30af\u30c8\u30eb\u30bf\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u306e\u3082\u7c21\u5358\u305d\u3046\u3067\u3059\u3002
\n\u305f\u3060\u3001\u63cf\u753b\u90e8\u5206\u3067\u306f\u307e\u3060\u30d0\u30b0\u304c\u591a\u3044\u3088\u3046\u3067\u8868\u793a\u6b20\u3051\u304c\u304a\u304a\u304f\u3001\u307e\u305f\u52d5\u4f5c\u3082\u7d50\u69cb\u91cd\u3044\u3067\u3059\u3002<\/p>\n
Mapbox\u3078\u306e\u4f9d\u5b58\u5ea6\u304c\u6e1b\u5c11<\/strong>
\n\u4ee5\u524d\u306fDeck.gl OverLay \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4e2d\u306b\u5185\u5305\u3055\u308c\u3066\u3044\u305freact-map-gl\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u958b\u767a\u8005\u304c\u660e\u793a\u7684\u306b\u5229\u7528\u3059\u308b\u5f62\u3078\u3068\u5909\u66f4\u3055\u308c\u305f\u3088\u3046\u3067\u3059\u3002
\nTileLayer\u306e\u5b9f\u88c5\u3068\u76f8\u307e\u3063\u3066Mapbox\u4ee5\u5916\u306e\u30d9\u30fc\u30b9\u30de\u30c3\u30d7\u3092\u5229\u7528\u3057\u3084\u3059\u304f\u306a\u308a\u307e\u3057\u305f\u3002
\n\u3053\u308c\u306f\u3001Google Maps Platform\u306b\u3088\u308bDeck.gl\u30b5\u30dd\u30fc\u30c8\u304c\u6c7a\u5b9a<\/a>\u3057\u305f\u3053\u3068\u3082\u5f71\u97ff\u3057\u3066\u3044\u308b\u306e\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n
React component vs Pure JavaScript library<\/strong>
\nDeck.gl\u306fver.52\u3088\u308a\u3001React\u3092\u7528\u3044\u306a\u304f\u3066\u3082\u901a\u5e38\u306eJavaScript\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u3057\u3066\u5229\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u516c\u5f0f\u30b5\u30a4\u30c8\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3067\u306f\u4eca\u306e\u3068\u3053\u308d\u3001\u4e21\u65b9\u3067\u306e\u4f7f\u3044\u65b9\u304c\u4f75\u8a18\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u6700\u65b0\u306e\u6a5f\u80fd\u306b\u95a2\u3057\u3066\u306fPure JavaScript library\u3068\u3057\u3066\u4f7f\u3063\u305f\u5834\u5408\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3057\u304b\u8a18\u8f09\u3055\u308c\u3066\u3044\u306a\u3044\u3082\u306e\u304c\u3042\u308a\u307e\u3059\u3002
\n\u4f8b\u3048\u3070Google Maps Platform\u3092Deck.gl\u3067\u5229\u7528\u3059\u308b\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u306fPure JavaScript library\u3067\u306e\u30b3\u30fc\u30c9\u3057\u304b\u516c\u958b\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002
\n\uff08\u3068\u3044\u3046\u3088\u308a\u3001\u4eca\u306e\u3068\u3053\u308dReact\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u3057\u3066Deck.gl\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u7d50\u5408\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u306a\u3044\u3063\u307d\u3044\uff09
\n\u4eca\u5f8c\u3069\u3061\u3089\u306e\u4f7f\u3044\u65b9\u304c\u30e1\u30a4\u30f3\u30b9\u30c8\u30ea\u30fc\u30e0\u306b\u306a\u3063\u3066\u3044\u304f\u306e\u304b\u308f\u304b\u308a\u307e\u305b\u3093\u304c\u3001\u500b\u4eba\u7684\u306b\u306fReact\u3092\u52c9\u5f37\u3059\u308b\u305f\u3081\u306e\u826f\u3044\u52d5\u6a5f\u306b\u306a\u3063\u3066\u3044\u305f\u306e\u3067\u3001React\u96e2\u308c\u304c\u9032\u3080\u3053\u3068\u306b\u306a\u308b\u3068\u3061\u3087\u3063\u3068\u6b8b\u5ff5\u304b\u3082\u3002<\/p>\n
React Hooks\u306b\u3064\u3044\u3066<\/h2>\n
useState\u4f7f\u3046\u3060\u3051\u3067\u3082\u30b3\u30fc\u30c9\u304c\u3060\u3044\u3076\u30b9\u30c3\u30ad\u30ea\u3068\u6574\u7406\u3055\u308c\u307e\u3059\u3002
\n\u4f8b\u3048\u3070\u3001”Building a Geospatial App”\u306e\u6700\u7d42\u7ae0\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u90e8\u5206\u306e\u30b3\u30fc\u30c9\u3092\u6bd4\u8f03\u3059\u308b\u3060\u3051\u3067\u3082\u3001\u3060\u3044\u3076\u8aad\u307f\u3084\u3059\u304f\u306a\u3063\u305f\u306e\u3067\u306f\u306a\u3044\u304b\u3068\u3002<\/p>\n
render() {\n    const { viewState, controller = true } = this.props;\n    const data = this.state.points;\n    if (!data.length) {\n      return null;\n    }\n    const { hover, settings } = this.state;\n    return (\n      <div>\n        {hover.hoveredObject && (\n          <div\n            style={{\n              ...tooltipStyle,\n              transform: `translate(${hover.x}px, ${hover.y}px)`\n            }}\n          >\n            <div>{hover.label}<\/div>\n          <\/div>\n        )}\n        <MapStylePicker\n          onStyleChange={this.onStyleChange}\n          currentStyle={this.state.style}\n        \/>\n        <LayerControls\n          settings={this.state.settings}\n          propTypes={HEXAGON_CONTROLS}\n          onChange={settings => this._updateLayerSettings(settings)}\n        \/>\n        <DeckGL\n          {...this.state.settings}\n          onWebGLInitialized={this._onWebGLInitialize}\n          layers={renderLayers({\n            data: this.state.points,\n            hour: this.state.highlightedHour || this.state.selectedHour,\n            onHover: hover => this._onHover(hover),\n            settings: this.state.settings\n          })}\n          initialViewState={INITIAL_VIEW_STATE}\n          viewState={viewState}\n          controller={controller}\n        >\n          <StaticMap mapStyle={this.state.style} \/>\n        <\/DeckGL>\n        <Charts {...this.state} \n          highlight={hour => this._onHighlight(hour)}\n          select={hour => this._onSelect(hour)}\n        \/>\n      <\/div>\n    );\n  }<\/pre>\n
\n    return (\n        <div>\n            {hover.hoveredObject && (\n                <div\n                    style={{\n                        ...tooltipStyle,\n                        transform: `translate(${hover.x}px, ${hover.y}px)`\n                    }}\n                >\n                    <div>{hover.label}<\/div>\n                <\/div>\n            )}\n            <MapStylePicker currentStyle={mapboxStyle} onStyleChange={setMapStyle} \/>\n            <LayerControls settings={layerSettings} propTypes={HEXAGON_CONTROLS} onChange={setLayerSetting} \/>\n            <MapGL\n                {...viewport}\n                mapStyle={mapboxStyle}\n                mapboxApiAccessToken={MAPBOX_TOKEN}\n                onViewportChange={(v) => setViewport(v)} \n            >\n                <DeckGL\n                    layers={renderLayers({\n                        data: data.points,\n                        hour: data.selectedHour,\n                        settings: layerSettings,\n                        onHover: onHover\n                    })}\n                    viewState={viewport}\n                    onViewportChange={setViewport}\n                    initialViewState={INITIAL_VIEW_STATE}\n                \/>\n                <Charts {...data} highlight={onHighlight} select={onSelect} \/>\n            <\/MapGL>\n        <\/div>\n    );<\/pre>\n
this\u6d88\u3048\u308b\u3060\u3051\u3067\u3082\u3001\u3060\u3044\u3076\u30b9\u30c3\u30ad\u30ea\u3057\u305f\u611f\u3058\u306b\u3002
\n\u500b\u4eba\u7684\u306bJS\u3067\u30af\u30e9\u30b9\u30d9\u30fc\u30b9\u306e\u30b3\u30fc\u30c9\u66f8\u304f\u306e\u3042\u307e\u308a\u597d\u304d\u3067\u306f\u306a\u304b\u3063\u305f\u306e\u3067\u3001React Hooks\u4f7f\u3063\u3066\u884c\u304d\u305f\u3044\u306a\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
example \u4ee5\u524d\u7d39\u4ecb\u3057\u305fUber\u793e\u88fd\u306eWeb\u5730…<\/p>\n","protected":false},"author":1,"featured_media":6400,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,71],"tags":[],"class_list":["post-6399","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deck-gl","category-react","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/6399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/comments?post=6399"}],"version-history":[{"count":0,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/6399\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/6400"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=6399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=6399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=6399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}