{"id":4654,"date":"2025-12-27T15:52:03","date_gmt":"2025-12-27T06:52:03","guid":{"rendered":"https:\/\/dennie.tokyo\/it\/?p=4654"},"modified":"2025-12-27T16:22:29","modified_gmt":"2025-12-27T07:22:29","slug":"%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88","status":"publish","type":"post","link":"https:\/\/dennie.tokyo\/it\/?p=4654","title":{"rendered":"\u30a4\u30d9\u30f3\u30c8\u5165\u9580"},"content":{"rendered":"\n<p>\u4f8b\u3048\u3070\u4efb\u610f\u306e\u30dc\u30c3\u30af\u30b9\u8981\u7d20\u5bfe\u3057\u3066\u3001\u30af\u30ea\u30c3\u30af\u3057\u305f\u3089\u4f55\u304b\u3092\u3055\u305b\u305f\u3044\u4e8b\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>\u30dc\u30c3\u30af\u30b9\u8981\u7d20\u306b\u5bfe\u3057\u3066\u30af\u30ea\u30c3\u30af\u3057\u3066\u3082\u3001\u305d\u306e\u307e\u307e\u3067\u306f\u4f55\u3082\u8d77\u304d\u307e\u305b\u3093\u3002<br>\u30a4\u30d9\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u3001\u4efb\u610f\u306e\u51e6\u7406\u3092\u5b9f\u884c\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u4eca\u56de\u306f\u7c21\u5358\u306b\u5b9f\u4f8b\u3092\u6319\u3052\u306a\u304c\u3089\u30a4\u30d9\u30f3\u30c8\u306b\u3064\u3044\u3066\u7c21\u5358\u306b\u8aac\u660e\u3057\u3088\u3046\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\u3084\u308a\u305f\u3044\u4e8b<\/h1>\n\n\n\n<p>\u56db\u89d2\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3089\u56db\u89d2\u306e\u8272\u304c\u5909\u308f\u308b\u3088\u3046\u306a\u52d5\u4f5c\u3092\u3055\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<style>\n.box_test {\n  width: 50px;\n  height: 50px;\n  background-color: black;\n}\n\n.active {\n  background-color: blue;\n}\n<\/style>\n<div class=\"box_test\">\n<\/div>\n<script>\nconst elements = document.getElementsByClassName('box_test');\nfor (let element of elements) {\n  element.addEventListener('click', function (e) {\n    element.classList.toggle('active');\n  });\n}\n<\/script>\n\n\n\n<h1 class=\"wp-block-heading\">\u5b9f\u88c5<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">HTML<\/h2>\n\n\n\n<p>\u4f8b\u3068\u3057\u3066\u3001\u4efb\u610f\u306e\u30dc\u30c3\u30af\u30b9\u8981\u7d20\u3092\u4e00\u3064\u4f5c\u6210\u3057\u307e\u3059\u3002<br>\u4eca\u56de\u4f7f\u7528\u3059\u308bjavascript\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306f index.js \u30d5\u30a1\u30a4\u30eb\u306b\u8a18\u8f09\u3057\u3001\u8aad\u307f\u8fbc\u3080\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002scc\u3082\u540c\u69d8\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;!doctype html&gt;\n&lt;html lang=&quot;ja&quot;&gt;\n\n&lt;head&gt;\n    &lt;meta charset=&quot;utf-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n    &lt;title&gt;sample&lt;\/title&gt;\n    &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt;\n    &lt;script defer=&quot;defer&quot; src=&quot;index.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;div class=&quot;box_test&quot;&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">CSS<\/h2>\n\n\n\n<p>\u4f8b\u3068\u3057\u3066\u3001\u30dc\u30c3\u30af\u30b9\u8981\u7d20\u306b\u4efb\u610f\u306e\u5927\u304d\u3055\u3068\u8272\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-css\" data-lang=\"CSS\"><code>.box_test {\n  width: 50px;\n  height: 50px;\n  background-color: black;\n}\n\n.active {\n  background-color: blue;\n}<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript<\/h2>\n\n\n\n<p>\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const elements = document.getElementsByClassName(&#39;box_test&#39;);\nfor (let element of elements) {\n  element.addEventListener(&#39;click&#39;, function (e) {\n    element.classList.toggle(&#39;active&#39;);\n  });\n}<\/code><\/pre><\/div>\n\n\n\n<h1 class=\"wp-block-heading\">\u8aac\u660e<\/h1>\n\n\n\n<p>\u4eca\u56de\u306f\u300c\u30a4\u30d9\u30f3\u30c8\u300d\u306e\u8a71\u306a\u306e\u3067 javascript \u306b\u7126\u70b9\u3092\u5f53\u3066\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u8981\u7d20\u306e\u53d6\u5f97<\/h2>\n\n\n\n<p>\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u30af\u30e9\u30b9\u540d\u304b\u3089\u8981\u7d20\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-plain\"><code>const elements = document.getElementsByClassName(&#39;box_test&#39;);<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u8981\u7d20\u306e\u53d6\u308a\u51fa\u3057<\/h2>\n\n\n\n<p>\u30af\u30e9\u30b9\u540d\u306f\u8907\u6570\u306e\u8981\u7d20\u306b\u8a2d\u5b9a\u3059\u308b\u4e8b\u304c\u51fa\u6765\u307e\u3059\u3002\u306a\u306e\u3067\u30af\u30e9\u30b9\u540d\u3067\u8981\u7d20\u3092\u53d6\u5f97\u3059\u308b\u3068\u3001\u8907\u6570\u3042\u308b\u524d\u63d0\u3067\u8981\u7d20\u304c\u53d6\u5f97\u3055\u308c\u308b\u70ba\u3001\u7e70\u308a\u8fd4\u3057\u3092\u4f7f\u7528\u3057\u3066\u4e00\u3064\u4e00\u3064\u306e\u8981\u7d20\u3092\u53d6\u308a\u51fa\u3059\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>for (let element of elements) {\n  ....\n}<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u30a4\u30d9\u30f3\u30c8\u306e\u8ffd\u52a0<\/h2>\n\n\n\n<p>\u4eca\u56de\u306e\u672c\u984c\u3067\u3059\u3002\u53d6\u308a\u51fa\u3057\u305f\u5404\u3005\u306e\u8981\u7d20\u306b\u30a4\u30d9\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<strong>addEventListener<\/strong> \u3092\u4f7f\u7528\u3059\u308b\u3068\u30a4\u30d9\u30f3\u30c8\u3092\u8ffd\u52a0\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>element.addEventListener(&#39;click&#39;, function (e) {\n  element.classList.toggle(&#39;active&#39;);\n});<\/code><\/pre><\/div>\n\n\n\n<h1 class=\"wp-block-heading\">\u6700\u5f8c\u306b<\/h1>\n\n\n\n<p>\u7279\u306b\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4f8b\u3048\u3070\u4efb\u610f\u306e\u30dc\u30c3\u30af\u30b9\u8981\u7d20\u5bfe\u3057\u3066\u3001\u30af\u30ea\u30c3\u30af\u3057\u305f\u3089\u4f55\u304b\u3092\u3055\u305b\u305f\u3044\u4e8b\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n","protected":false},"author":1,"featured_media":4348,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-4654","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/4654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4654"}],"version-history":[{"count":11,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/4654\/revisions"}],"predecessor-version":[{"id":4666,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/posts\/4654\/revisions\/4666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=\/wp\/v2\/media\/4348"}],"wp:attachment":[{"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dennie.tokyo\/it\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}