{"id":2007,"date":"2023-03-03T00:00:00","date_gmt":"2023-03-02T15:00:00","guid":{"rendered":"https:\/\/www.ishikawasekkei.com\/?p=2007"},"modified":"2023-07-29T10:20:07","modified_gmt":"2023-07-29T01:20:07","slug":"first-javascript","status":"publish","type":"post","link":"https:\/\/www.ishikawasekkei.com\/index.php\/2023\/03\/03\/first-javascript\/","title":{"rendered":"\u521d\u3081\u3066\u306eJavaScript \u8aad\u66f8\u4e2d\u3067\u3059"},"content":{"rendered":"\n<p>\u3053\u3093\u306b\u3061\u306f\u3001\u77f3\u5ddd\u3055\u3093\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u6700\u8fd1\u3001\u601d\u3046\u3068\u3053\u308d\u304c\u3042\u3063\u3066\u3001JavaScript\u306e\u52c9\u5f37\u3092\u59cb\u3081\u307e\u3057\u305f\u3002\u4eca\u8aad\u3093\u3067\u3044\u308b\u306e\u306f\u3001\u305d\u3046\u300c<a href=\"https:\/\/www.oreilly.co.jp\/books\/9784873117836\/\" target=\"_blank\" rel=\"noopener\" title=\"\u521d\u3081\u3066\u306eJavaScript \u7b2c3\u7248\">\u521d\u3081\u3066\u306eJavaScript \u7b2c3\u7248<\/a>\u300d\u3067\u3059\u3002Angular\u3092\u4f7f\u3044\u59cb\u3081\u305f\u306e\u3067\u672c\u6765\u306fTypeScript\u306e\u52c9\u5f37\u3001\u3068\u8a00\u3044\u305f\u3044\u3068\u3053\u308d\u3067\u3059\u304c\u3001\u4e00\u518a\u672c\u3092\u8aad\u3093\u3067\u3001\u5148\u306bJavaScript\u3060\u306a\u3001\u3068\u3044\u3046\u6c17\u6301\u3061\u306b\u306a\u3063\u305f\u306e\u3067\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u3044\u3084\uff5e\u3001JavaScript\u3001\u601d\u3063\u3066\u3044\u305f\u3088\u308a\u3082\u3001\u8272\u3005\u3068\u3067\u304d\u308b\u306e\u3067\u3059\u306d\u3047\u3002\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30ea\u30c6\u30e9\u30eb\u3068\u304b\u3001\u30af\u30ed\u30fc\u30b8\u30e3\u3068\u304b\u3001\u5b8c\u5168\u306bPython\u3060\u3051\u306e\u3082\u306e\u3060\u3068\u601d\u3063\u3066\u3044\u305f\u306e\u3067\u3059\u3051\u3069\u3001\u3044\u3084\u3001\u8996\u91ce\u304c\u72ed\u304b\u3063\u305f\u3067\u3059\u306d\uff01\u53cd\u7701\u3057\u307e\u3057\u305f\u3002<br><br>\u305b\u3063\u304b\u304f\u52c9\u5f37\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u8272\u3005\u3068\u62ab\u9732\u3057\u305f\u3044\u3088\u306d\u3047\u3001\u3068\u3044\u3046\u6c17\u6301\u3061\u306b\u306a\u3063\u3066\u304d\u305f\u3068\u3053\u308d\u3067\u6c17\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u305d\u3046\u3044\u3048\u3070WordPress\u306e\u3053\u306e\u30da\u30fc\u30b8\u3001JavaScript\u3092\u4f7f\u7528\u3067\u304d\u308b\u306e\u3067\u3057\u3087\u3046\u304b\u3002\u5148\u65e5\u8abf\u3079\u305f\u3068\u3053\u308d\u3001\u30d6\u30ed\u30c3\u30af\u3092\u9078\u629e\u3059\u308c\u3070\u3067\u304d\u308b\u3001\u3068\u3044\u3046\u3053\u3068\u304c\u3069\u3053\u304b\u306b\u66f8\u304b\u308c\u3066\u3044\u307e\u3057\u305f\u306e\u3067\u3001\u3061\u3087\u3063\u3068\u8a66\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30d6\u30ed\u30c3\u30af\u306e\u8ffd\u52a0<\/h2>\n\n\n\n<p>\u307e\u305a\u306f\u3001\u30d6\u30ed\u30c3\u30af\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002\u300c\u30ab\u30b9\u30bf\u30e0HTML\u300d\u304c\u9078\u3079\u308b\u306e\u3067\u3001\u3053\u3061\u3089\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"473\" height=\"418\" src=\"https:\/\/www.ishikawasekkei.com\/wp-content\/uploads\/2022\/12\/image-1.png\" alt=\"\" class=\"wp-image-2039\" srcset=\"https:\/\/www.ishikawasekkei.com\/wp-content\/uploads\/2022\/12\/image-1.png 473w, https:\/\/www.ishikawasekkei.com\/wp-content\/uploads\/2022\/12\/image-1-300x265.png 300w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><figcaption class=\"wp-element-caption\">\u300c\u30d6\u30ed\u30c3\u30af\u3092\u8ffd\u52a0\u300d\u304b\u3089\u300c\u30ab\u30b9\u30bf\u30e0HTML\u300d\u3092\u9078\u629e<\/figcaption><\/figure>\n\n\n\n<p>\u3059\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u300cHTML\u3092\u5165\u529b\u2026\u300d\u3068\u306a\u308a\u307e\u3059\u306e\u3067\u3001\u3053\u3053\u3078\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u8a18\u8f09\u3057\u3066\u884c\u304d\u307e\u3059\u3002\u300c\u30d7\u30ec\u30d3\u30e5\u30fc\u300d\u3092\u62bc\u3059\u3068\u5b9f\u884c\u7d50\u679c\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"728\" height=\"161\" src=\"https:\/\/www.ishikawasekkei.com\/wp-content\/uploads\/2022\/12\/image-2.png\" alt=\"\" class=\"wp-image-2040\" srcset=\"https:\/\/www.ishikawasekkei.com\/wp-content\/uploads\/2022\/12\/image-2.png 728w, https:\/\/www.ishikawasekkei.com\/wp-content\/uploads\/2022\/12\/image-2-300x66.png 300w\" sizes=\"auto, (max-width: 728px) 100vw, 728px\" \/><figcaption class=\"wp-element-caption\">HTML\u3092\u5165\u529b<\/figcaption><\/figure>\n\n\n\n<p>\u5165\u529b\u3057\u3066\u4fdd\u5b58\u3057\u305f\u3068\u3053\u308d\u3001\u7c21\u5358\u306b\u3067\u304d\u307e\u3057\u305f\uff01<\/p>\n\n\n\n<p>\u30101\u3064\u76ee\u3011<\/p>\n\n\n\n<div id=\"container20230303_1\"><\/div>\n<script src=\"https:\/\/unpkg.com\/konva@8\/konva.min.js\"><\/script>\n<script>\n      var width = 640;\/\/window.innerWidth;\n      var height = 200;\/\/window.innerHeight;\n\n      var stage = new Konva.Stage({\n        container: 'container20230303_1',\n        width: width,\n        height: height,\n      });\n      stage.container().style.backgroundColor = 'aliceblue';\n      var layer = new Konva.Layer();\n      stage.add(layer);\n\n      var rect1 = new Konva.Rect({\n        x: 60,\n        y: 60,\n        width: 100,\n        height: 90,\n        fill: 'red',\n        name: 'rect',\n        draggable: true,\n      });\n      layer.add(rect1);\n\n      var rect2 = new Konva.Rect({\n        x: 250,\n        y: 100,\n        width: 150,\n        height: 90,\n        fill: 'green',\n        name: 'rect',\n        draggable: true,\n      });\n      layer.add(rect2);\n\n      var tr = new Konva.Transformer();\n      layer.add(tr);\n\n      \/\/ by default select all shapes\n      tr.nodes([rect1, rect2]);\n\n      \/\/ add a new feature, lets add ability to draw selection rectangle\n      var selectionRectangle = new Konva.Rect({\n        fill: 'rgba(0,0,255,0.5)',\n        visible: false,\n      });\n      layer.add(selectionRectangle);\n\n      var x1, y1, x2, y2;\n      stage.on('mousedown touchstart', (e) => {\n        \/\/ do nothing if we mousedown on any shape\n        if (e.target !== stage) {\n          return;\n        }\n        e.evt.preventDefault();\n        x1 = stage.getPointerPosition().x;\n        y1 = stage.getPointerPosition().y;\n        x2 = stage.getPointerPosition().x;\n        y2 = stage.getPointerPosition().y;\n\n        selectionRectangle.visible(true);\n        selectionRectangle.width(0);\n        selectionRectangle.height(0);\n      });\n\n      stage.on('mousemove touchmove', (e) => {\n        \/\/ do nothing if we didn't start selection\n        if (!selectionRectangle.visible()) {\n          return;\n        }\n        e.evt.preventDefault();\n        x2 = stage.getPointerPosition().x;\n        y2 = stage.getPointerPosition().y;\n\n        selectionRectangle.setAttrs({\n          x: Math.min(x1, x2),\n          y: Math.min(y1, y2),\n          width: Math.abs(x2 - x1),\n          height: Math.abs(y2 - y1),\n        });\n      });\n\n      stage.on('mouseup touchend', (e) => {\n        \/\/ do nothing if we didn't start selection\n        if (!selectionRectangle.visible()) {\n          return;\n        }\n        e.evt.preventDefault();\n        \/\/ update visibility in timeout, so we can check it in click event\n        setTimeout(() => {\n          selectionRectangle.visible(false);\n        });\n\n        var shapes = stage.find('.rect');\n        var box = selectionRectangle.getClientRect();\n        var selected = shapes.filter((shape) =>\n          Konva.Util.haveIntersection(box, shape.getClientRect())\n        );\n        tr.nodes(selected);\n      });\n\n      \/\/ clicks should select\/deselect shapes\n      stage.on('click tap', function (e) {\n        \/\/ if we are selecting with rect, do nothing\n        if (selectionRectangle.visible()) {\n          return;\n        }\n\n        \/\/ if click on empty area - remove all selections\n        if (e.target === stage) {\n          tr.nodes([]);\n          return;\n        }\n\n        \/\/ do nothing if clicked NOT on our rectangles\n        if (!e.target.hasName('rect')) {\n          return;\n        }\n\n        \/\/ do we pressed shift or ctrl?\n        const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;\n        const isSelected = tr.nodes().indexOf(e.target) >= 0;\n\n        if (!metaPressed && !isSelected) {\n          \/\/ if no key pressed and the node is not selected\n          \/\/ select just one\n          tr.nodes([e.target]);\n        } else if (metaPressed && isSelected) {\n          \/\/ if we pressed keys and node was selected\n          \/\/ we need to remove it from selection:\n          const nodes = tr.nodes().slice(); \/\/ use slice to have new copy of array\n          \/\/ remove node from array\n          nodes.splice(nodes.indexOf(e.target), 1);\n          tr.nodes(nodes);\n        } else if (metaPressed && !isSelected) {\n          \/\/ add the node into selection\n          const nodes = tr.nodes().concat([e.target]);\n          tr.nodes(nodes);\n        }\n      });\n<\/script>\n\n\n\n<p>\u30102\u3064\u76ee\u3011<\/p>\n\n\n\n<style>\ndiv#container20230303_2 {\n  height: 200px;\n  width: 116%;\n  background-color: ivory;\n}\n<\/style>\n<div id=\"container20230303_2\"><\/div>\n<script src=\"https:\/\/unpkg.com\/konva@8\/konva.min.js\"><\/script>\n<script>\nvar height = 200;\nvar width = window.innerWidth;\n      var resourceColor = 'rgb(185, 247, 247)';\n      var eventColor = 'rgb(245, 200, 247)';\n      var stage = new Konva.Stage({container: 'container20230303_2', width: width, height: height, draggable:true});\n      stage.on('contextmenu', function (e) {\n        e.evt.preventDefault();\n      });\n      var layer = new Konva.Layer();\n      stage.add(layer);\n      function newBox(title, type) {\n        return new Konva.Rect({\n          cornerRadius: 10,\n          fill: type === \"resource\" ? resourceColor : eventColor,\n          stroke: 'black',\n          strokeWidth: 1,\n          name: 'rect',\n          draggable: true,\n          sceneFunc: function (context, shape) {\n            shape._sceneFunc(context);\n            context.beginPath();\n            context.moveTo(0,20);\n            context.lineTo(shape.getAttr('width'),20);\n            context.moveTo(shape.getAttr('width')\/2,20);\n            context.lineTo(shape.getAttr('width')\/2,shape.getAttr('height'));\n            context.stroke();\n            context.closePath();\n            context.font = '12px sans-serif';\n            context.fillStyle = \"rgb(0, 0, 0)\"\n            context.fillText(title,25,17);\n          }\n        });\n      };\n      var rect1 = newBox(\"\u30ea\u30bd\u30fc\u30b9\", \"resource\");\n      rect1.setAttrs({x: 60, y: 60, width: 100, height: 90});\n      layer.add(rect1);\n      var rect2 = newBox(\"\u30a4\u30d9\u30f3\u30c8\", \"event\");\n      rect2.setAttrs({x: 260, y: 60, width: 100, height: 90});\n      layer.add(rect2);\nrect2.on('click', (event) => {console.log('clicked!', event);});\n<\/script>\n\n\n\n<p>\u3067\u304d\u307e\u3057\u305f\u306d\uff01<\/p>\n\n\n\n<p>\u7c21\u5358\u3067\u3057\u305f\u266a<\/p>\n\n\n\n<p>\u4eca\u56de\u5165\u529b\u3057\u305f\u30b9\u30af\u30ea\u30d7\u30c8\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u307e\u305a\u306f\u3010\uff11\u3064\u76ee\u3011\u3067\u3059\u3002\u307b\u307c<a href=\"https:\/\/konvajs.org\/docs\/select_and_transform\/Basic_demo.html\" target=\"_blank\" rel=\"noopener\" title=\"\">\u3053\u3061\u3089\u306e\u30b9\u30af\u30ea\u30d7\u30c8<\/a>\u3092\u30b3\u30d4\u30da\u3057\u305f\u3082\u306e\u3067\u3059\u3002Konva.js\u3068\u3044\u3046\u3001HTML5 2d canvas\u306e\u305f\u3081\u306eJavascript\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u7d39\u4ecb\u3057\u3066\u3044\u308b\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3067\u3059\u3002<br>HTML\u8981\u7d20\u306eid\u304c\u30da\u30fc\u30b8\u5168\u4f53\u306b\u304b\u304b\u308f\u3063\u3066\u304f\u308b\u306e\u3067\u3001id\u306f\u3001container20230303_1\u306b\u5909\u66f4\u3057\u307e\u3057\u305f\u3002\uff08\u3059\u307f\u307e\u305b\u3093\u3001\u5f8c\u3067\u6c17\u3065\u304d\u307e\u3057\u305f\u3002\u8abf\u5b50\u306b\u306e\u3063\u3066\u3001\u4ed6\u306e\u8a18\u4e8b\u3067\u3082container\u3092\u4f7f\u3063\u305f\u3068\u3053\u308d\u3001\u4e00\u89a7\u3067\u898b\u305f\u3068\u304d\u306b\u304b\u3076\u3063\u3066\u5909\u306a\u3053\u3068\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u3002\u3002\u3002\uff09<\/p>\n\n\n\n<p>\u6b21\u306b\u3010\uff12\u3064\u76ee\u3011\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3067\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;style>\ndiv#container20230303_2 {\n  height: 200px;\n  width: 116%;\n  background-color: ivory;\n}\n&lt;\/style>\n&lt;div id=\"container20230303_2\">&lt;\/div>\n&lt;script src=\"https:\/\/unpkg.com\/konva@8\/konva.min.js\">&lt;\/script>\n&lt;script>\nvar height = 200;\nvar width = window.innerWidth;\n      var resourceColor = 'rgb(185, 247, 247)';\n      var eventColor = 'rgb(245, 200, 247)';\n      var stage = new Konva.Stage({container: 'container20230303_2', width: width, height: height, draggable:true});\n      stage.on('contextmenu', function (e) {\n        e.evt.preventDefault();\n      });\n      var layer = new Konva.Layer();\n      stage.add(layer);\n      function newBox(title, type) {\n        return new Konva.Rect({\n          cornerRadius: 10,\n          fill: type === \"resource\" ? resourceColor : eventColor,\n          stroke: 'black',\n          strokeWidth: 1,\n          name: 'rect',\n          draggable: true,\n          sceneFunc: function (context, shape) {\n            shape._sceneFunc(context);\n            context.beginPath();\n            context.moveTo(0,20);\n            context.lineTo(shape.getAttr('width'),20);\n            context.moveTo(shape.getAttr('width')\/2,20);\n            context.lineTo(shape.getAttr('width')\/2,shape.getAttr('height'));\n            context.stroke();\n            context.closePath();\n            context.font = '12px sans-serif';\n            context.fillStyle = \"rgb(0, 0, 0)\"\n            context.fillText(title,25,17);\n          }\n        });\n      };\n      var rect1 = newBox(\"\u30ea\u30bd\u30fc\u30b9\", \"resource\");\n      rect1.setAttrs({x: 60, y: 60, width: 100, height: 90});\n      layer.add(rect1);\n      var rect2 = newBox(\"\u30a4\u30d9\u30f3\u30c8\", \"event\");\n      rect2.setAttrs({x: 260, y: 60, width: 100, height: 90});\n      layer.add(rect2);\nrect2.on('click', (event) => {console.log('clicked!', event);});\n&lt;\/script><\/pre>\n\n\n\n<p>\u7c21\u5358\u306b\u8272\u3005\u306a\u3053\u3068\u304c\u3067\u304d\u308b\u306e\u3067\u3001\u5922\u304c\u5e83\u304c\u308a\u307e\u3059\u306d\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u3093\u306b\u3061\u306f\u3001\u77f3\u5ddd\u3055\u3093\u3067\u3059\u3002 \u6700\u8fd1\u3001\u601d\u3046\u3068\u3053\u308d\u304c\u3042\u3063\u3066\u3001JavaScript\u306e\u52c9\u5f37\u3092\u59cb\u3081\u307e\u3057\u305f\u3002\u4eca\u8aad\u3093\u3067\u3044\u308b\u306e\u306f\u3001\u305d\u3046\u300c\u521d\u3081\u3066\u306eJavaScript \u7b2c3\u7248\u300d\u3067\u3059\u3002Angular\u3092\u4f7f\u3044\u59cb\u3081\u305f\u306e\u3067\u672c\u6765\u306fTypeScript\u306e &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.ishikawasekkei.com\/index.php\/2023\/03\/03\/first-javascript\/\" class=\"more-link\"><span class=\"screen-reader-text\">&#8220;\u521d\u3081\u3066\u306eJavaScript \u8aad\u66f8\u4e2d\u3067\u3059&#8221; \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,8,2],"tags":[],"class_list":["post-2007","post","type-post","status-publish","format-standard","hentry","category-home-page","category-program","category-blog"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/posts\/2007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/comments?post=2007"}],"version-history":[{"count":32,"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/posts\/2007\/revisions"}],"predecessor-version":[{"id":2129,"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/posts\/2007\/revisions\/2129"}],"wp:attachment":[{"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/media?parent=2007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/categories?post=2007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ishikawasekkei.com\/index.php\/wp-json\/wp\/v2\/tags?post=2007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}