{"id":7084,"date":"2020-12-15T10:01:26","date_gmt":"2020-12-15T01:01:26","guid":{"rendered":"https:\/\/gunmagisgeek.com\/blog\/?p=7084"},"modified":"2020-12-29T16:11:03","modified_gmt":"2020-12-29T07:11:03","slug":"create-react-app%e3%82%b3%e3%83%9e%e3%83%b3%e3%83%89%e3%81%aedeckgl%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e3%82%92%e4%bd%9c%e6%88%90%e3%81%97%e3%81%be%e3%81%97%e3%81%9f%e3%80%82","status":"publish","type":"post","link":"https:\/\/gunmagisgeek.com\/blog\/deck-gl\/7084","title":{"rendered":"create-react-app\u30b3\u30de\u30f3\u30c9\u306edeck.gl\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4f5c\u308a\u307e\u3057\u305f\u3002"},"content":{"rendered":"\n<p>\u7d76\u8cdb\u63a8\u3057\u4e8b\u4e2d\u306e<a href=\"https:\/\/deck.gl\/\" data-type=\"URL\" data-id=\"https:\/\/deck.gl\/\">deck.gl<\/a>\u306a\u306e\u3067\u3059\u304c\u3001\u3088\u304f\u300c\u59cb\u3081\u308b\u30cf\u30fc\u30c9\u30eb\u304c\u9ad8\u3044\u300d\u3068\u3044\u308f\u308c\u308b\u306e\u3067create-react-app\u306e\u30ab\u30b9\u30bf\u30e0\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>npm\u306b\u4e0a\u3052\u3066\u3042\u308b\u306e\u3067\u3001\uff11\u30b3\u30de\u30f3\u30c9\u6253\u3064\u3060\u3051\u3067deck.gl\u306e\u30b3\u30fc\u30c9\u3092\u66f8\u304d\u59cb\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">create-react-app\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n\n\n\n<p>cra(create-react-app)\u306freact\u304c\u516c\u5f0f\u3067\u63d0\u4f9b\u3057\u3066\u3044\u308b\u958b\u767a\u74b0\u5883\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3059\u308b\u305f\u3081\u306e\u30b3\u30de\u30f3\u30c9\u3067\u3059\u3002node.js\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308b\u74b0\u5883\u3067\u3001npm\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u3063\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:tex decode:true \">npm install -g create-react-app<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>\u53c2\u8003\uff1a<a href=\"https:\/\/ja.reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\" data-type=\"URL\" data-id=\"https:\/\/ja.reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\">\u65b0\u3057\u3044 React \u30a2\u30d7\u30ea\u3092\u4f5c\u308b \u2013 React <\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">deck.gl\u306e\u958b\u767a\u74b0\u5883\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h2>\n\n\n\n<p>cra\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u3063\u3066\u3001deck.gl\u306e\u958b\u767a\u74b0\u5883\u3092\u4f5c\u308a\u307e\u3059\u3002&#8211;template\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u4f7f\u3063\u3066\u30ab\u30b9\u30bf\u30e0\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8(<a href=\"https:\/\/www.npmjs.com\/package\/@shimizu\/cra-template-deckgl\" data-type=\"URL\" data-id=\"https:\/\/www.npmjs.com\/package\/@shimizu\/cra-template-deckgl\">@shimizu\/cra-template-deckgl<\/a>)\u3092\u6307\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:tex decode:true \">npx create-react-app my-app --template @shimizu\/cra-template-deckgl<\/pre><\/div>\n\n\n\n<p>\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3068my-app\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304c\u4f5c\u6210\u3055\u308c\u958b\u767a\u74b0\u5883\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u307e\u3059\u3002\u30d5\u30a1\u30a4\u30eb\u306e\u69cb\u6210\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u3063\u3066\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:ps decode:true \">.\n\u251c\u2500\u2500 node_modules\/\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 public\n\u2502   \u251c\u2500\u2500 favicon.ico\n\u2502   \u2514\u2500\u2500 index.html\n\u251c\u2500\u2500 src\n\u2502   \u251c\u2500\u2500 App.js\n\u2502   \u251c\u2500\u2500 components\n\u2502   \u2502   \u2514\u2500\u2500 RenderLayers.js\n\u2502   \u251c\u2500\u2500 index.js\n\u2502   \u2514\u2500\u2500 styles.css\n\u2514\u2500\u2500 yarn.lock<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u306e\u8d77\u52d5<\/h2>\n\n\n\n<p>my-app\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u3001npm start\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3068\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u304c\u8d77\u52d5\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:ps decode:true \">cd my-app\nnpm start<\/pre><\/div>\n\n\n\n<p>\u540c\u6642\u306b\u30d6\u30e9\u30a6\u30b6\u304c\u8d77\u52d5\u3057deck.gl\u30a2\u30d7\u30ea\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"631\" src=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/cra-deckgl-1024x631.jpg\" alt=\"\" class=\"wp-image-7086\" srcset=\"https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/cra-deckgl-1024x631.jpg 1024w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/cra-deckgl-243x150.jpg 243w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/cra-deckgl-768x473.jpg 768w, https:\/\/gunmagisgeek.com\/blog\/wp-content\/uploads\/2020\/12\/cra-deckgl.jpg 1519w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u521d\u671f\u72b6\u614b\u3067\u306fOpenStreetMap\u306e\u5730\u56f3\u30bf\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u30b3\u30fc\u30c9\u304cRenderLayers.js\u306b\u8a18\u8f09\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u5f8c\u306f<a href=\"https:\/\/deck.gl\/docs\/api-reference\/layers\" data-type=\"URL\" data-id=\"https:\/\/deck.gl\/docs\/api-reference\/layers\">\u30ec\u30a4\u30e4\u30fc<\/a>\u3092\u8ffd\u52a0\u3059\u308b\u306a\u3069\u3057\u3066\u8a66\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p>\u53c2\u8003\uff1a<\/p>\n\n\n\n<p><a href=\"https:\/\/deck.gl\/docs\/get-started\/getting-started\" data-type=\"URL\" data-id=\"https:\/\/deck.gl\/docs\/get-started\/getting-started\">deck.gl | Installing and Running Examples<\/a><\/p>\n\n\n\n<p><a href=\"http:\/\/vis.academy\/#\/\">Vis Academy<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30d3\u30eb\u30c9<\/h2>\n\n\n\n<p>\u958b\u767a\u304c\u7d42\u308f\u3063\u305f\u3089\u3001web\u306b\u516c\u958b\u3067\u304d\u308b\u5f62\u306b\u30d3\u30eb\u30c9\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u30d3\u30eb\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055<\/p>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:ps decode:true \">npm run build<\/pre><\/div>\n\n\n\n<p>build\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304c\u4f5c\u6210\u3055\u308c\u308b\u306e\u3067\u3001\u305d\u306e\u4e2d\u8eab\u3092web\u30b5\u30fc\u30d0\u30fc\u306b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3059\u308c\u3070\u4f5c\u6210\u3057\u305f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u516c\u958b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u7d76\u8cdb\u63a8\u3057\u4e8b\u4e2d\u306edeck.gl\u306a\u306e\u3067\u3059\u304c\u3001\u3088\u304f\u300c\u59cb\u3081&hellip;<\/p>\n","protected":false},"author":1,"featured_media":7087,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73],"tags":[],"class_list":["post-7084","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deck-gl","has-post-thumbnail-archive"],"_links":{"self":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/7084","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=7084"}],"version-history":[{"count":22,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/7084\/revisions"}],"predecessor-version":[{"id":7111,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/posts\/7084\/revisions\/7111"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media\/7087"}],"wp:attachment":[{"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/media?parent=7084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/categories?post=7084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gunmagisgeek.com\/blog\/wp-json\/wp\/v2\/tags?post=7084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}