{"id":8975,"date":"2025-09-12T17:06:42","date_gmt":"2025-09-12T08:06:42","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?p=8975"},"modified":"2026-01-08T11:13:26","modified_gmt":"2026-01-08T02:13:26","slug":"post-8975","status":"publish","type":"post","link":"https:\/\/code-plus.jp\/gp\/post-8975\/","title":{"rendered":"3466\u500b\u306eDOM\u8981\u7d20\u3067\u3082\u8efd\u5feb\u306b\u52d5\u4f5c\uff01\u5927\u91cf\u30c7\u30fc\u30bf\u8868\u793a\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u30c6\u30af\u30cb\u30c3\u30af"},"content":{"rendered":"<p>Material Symbols\u306e\u5168\u30a2\u30a4\u30b3\u30f3\uff083466\u500b\uff09\u3092\u4e00\u89a7\u8868\u793a\u3059\u308bWeb\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3057\u3066\u3044\u305f\u969b\u3001\u6df1\u523b\u306a\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u554f\u984c\u306b\u76f4\u9762\u3057\u307e\u3057\u305f\u3002\u5404\u30a2\u30a4\u30b3\u30f3\u306b\u30b3\u30d4\u30fc\u6a5f\u80fd\u3092\u4ed8\u3051\u308b\u305f\u3081\u3001\u5168\u3066\u306e\u8981\u7d20\u306b\u500b\u5225\u306e\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3092\u767b\u9332\u3057\u3066\u3044\u305f\u3068\u3053\u308d\u3001\u30af\u30ea\u30c3\u30af\u6642\u306e\u53cd\u5fdc\u304c\u8457\u3057\u304f\u60aa\u5316\u3057\u3066\u3057\u307e\u3063\u305f\u306e\u3067\u3059\u3002<\/p>\r\n<h3 class=\"fz-ml\">\u5143\u306e\u554f\u984c\u306e\u3042\u308b\u30b3\u30fc\u30c9<\/h3>\r\n<pre><code class=\"language-javascript\">\/\/ \u554f\u984c\u306e\u3042\u308b\u30a2\u30d7\u30ed\u30fc\u30c1\r\nlet arrCopyables = Array.prototype.slice.call(document.querySelectorAll(&quot;.be-copyable&quot;));\r\n\r\nlet fnCopyableNUJA = function () {\r\n  for (let n = 0; n &lt; arrCopyables.length; n++) {\r\n    arrCopyables[n].addEventListener(&#39;click&#39;, function (event) {\r\n      \/\/ \u500b\u5225\u306e\u8981\u7d20\u3054\u3068\u306b\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3092\u767b\u9332\r\n      event.preventDefault();\r\n      var dataCopy = event.currentTarget.getAttribute(&quot;data-copy&quot;);\r\n      navigator.clipboard.writeText(dataCopy);\r\n    });\r\n  }\r\n}();\r\n<\/code><\/pre>\r\n<p>\u3053\u306e\u65b9\u6cd5\u3067\u306f\u30013466\u500b\u306e\u8981\u7d20\u00d72\uff08\u30a2\u30a4\u30b3\u30f3\u672c\u4f53\u3068Code\u30dc\u30bf\u30f3\uff09= <b class=\"bold\">\u7d047000\u500b\u306e\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc<\/b>\u304c\u30d6\u30e9\u30a6\u30b6\u306b\u767b\u9332\u3055\u308c\u308b\u3053\u3068\u306b\u306a\u308a\u3001\u30e1\u30e2\u30ea\u4f7f\u7528\u91cf\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306b\u5927\u304d\u304f\u5f71\u97ff\u3057\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\r\n<h2 class=\"fz-xl\">\u89e3\u6c7a\u7b561: \u30a4\u30d9\u30f3\u30c8\u30c7\u30ea\u30b2\u30fc\u30b7\u30e7\u30f3\u3067\u5287\u7684\u6539\u5584<\/h2>\r\n<p>\u6700\u521d\u306b\u53d6\u308a\u7d44\u3093\u3060\u306e\u306f<b class=\"bold\">\u30a4\u30d9\u30f3\u30c8\u30c7\u30ea\u30b2\u30fc\u30b7\u30e7\u30f3<\/b>\u306e\u5c0e\u5165\u3067\u3059\u3002\u500b\u5225\u8981\u7d20\u3067\u306f\u306a\u304f\u3001\u89aa\u8981\u7d20\uff08document\uff09\u306b1\u3064\u3060\u3051\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3092\u767b\u9332\u3057\u3001\u30a4\u30d9\u30f3\u30c8\u30d0\u30d6\u30ea\u30f3\u30b0\u3092\u5229\u7528\u3057\u3066\u51e6\u7406\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\r\n<h3 class=\"fz-ml\">\u6539\u5584\u3055\u308c\u305f\u30b3\u30fc\u30c9<\/h3>\r\n<pre><code class=\"language-javascript\">\/\/ \u30a4\u30d9\u30f3\u30c8\u30c7\u30ea\u30b2\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u7528\u3057\u305f\u6539\u5584\u7248\r\ndocument.addEventListener(&#39;click&#39;, function(event) {\r\n  const copyableElement = event.target.closest(&#39;.be-copyable&#39;);\r\n  if (!copyableElement) return;\r\n  \r\n  event.preventDefault();\r\n  const dataCopy = copyableElement.getAttribute(&quot;data-copy&quot;);\r\n  \r\n  if (!dataCopy) return;\r\n  \r\n  navigator.clipboard.writeText(dataCopy).then(() =&gt; {\r\n    showCopyMessage();\r\n    copyableElement.classList.add(&#39;copied&#39;);\r\n    setTimeout(() =&gt; {\r\n      copyableElement.classList.remove(&#39;copied&#39;);\r\n    }, 1000);\r\n  }).catch(err =&gt; {\r\n    console.error(&quot;Could not copy text:&quot;, err);\r\n  });\r\n});\r\n<\/code><\/pre>\r\n<h3 class=\"fz-ml\">\u30a4\u30d9\u30f3\u30c8\u30c7\u30ea\u30b2\u30fc\u30b7\u30e7\u30f3\u306e\u52b9\u679c<\/h3>\r\n<ul style=\"list-style-type:bullet;\">\r\n<li><b class=\"bold\">\u30e1\u30e2\u30ea\u4f7f\u7528\u91cf<\/b>: 7000\u500b \u2192 1\u500b\u306e\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc<\/li>\r\n<li><b class=\"bold\">\u521d\u671f\u5316\u901f\u5ea6<\/b>: \u5927\u5e45\u306a\u9ad8\u901f\u5316<\/li>\r\n<li><b class=\"bold\">\u30af\u30ea\u30c3\u30af\u53cd\u5fdc\u901f\u5ea6<\/b>: \u5287\u7684\u306a\u6539\u5584<\/li>\r\n<\/ul>\r\n<h2 class=\"fz-xl\">\u89e3\u6c7a\u7b562: \u4eee\u60f3\u30b9\u30af\u30ed\u30fc\u30eb\u3067\u521d\u671f\u8868\u793a\u3092\u9ad8\u901f\u5316<\/h2>\r\n<p>\u30a4\u30d9\u30f3\u30c8\u30c7\u30ea\u30b2\u30fc\u30b7\u30e7\u30f3\u3067\u30af\u30ea\u30c3\u30af\u6642\u306e\u554f\u984c\u306f\u89e3\u6c7a\u3057\u307e\u3057\u305f\u304c\u30013466\u500b\u306e\u8981\u7d20\u3092\u4e00\u5ea6\u306b\u8868\u793a\u3059\u308b\u3068\u521d\u671f\u63cf\u753b\u306b\u6642\u9593\u304c\u304b\u304b\u308b\u554f\u984c\u304c\u6b8b\u3063\u3066\u3044\u307e\u3057\u305f\u3002\u305d\u3053\u3067<b class=\"bold\">\u4eee\u60f3\u30b9\u30af\u30ed\u30fc\u30eb<\/b>\uff08\u6bb5\u968e\u8aad\u307f\u8fbc\u307f\uff09\u3092\u5b9f\u88c5\u3057\u307e\u3057\u305f\u3002<\/p>\r\n<h3 class=\"fz-ml\">\u4eee\u60f3\u30b9\u30af\u30ed\u30fc\u30eb\u306e\u5b9f\u88c5<\/h3>\r\n<pre><code class=\"language-javascript\">class VirtualIconGrid {\r\n  constructor() {\r\n    this.itemsPerPage = 200; \/\/ \u4e00\u5ea6\u306b200\u500b\u305a\u3064\u8868\u793a\r\n    this.currentPage = 0;\r\n    this.allData = [...iconData]; \/\/ \u5168\u30c7\u30fc\u30bf\r\n    this.filteredData = [...iconData]; \/\/ \u30d5\u30a3\u30eb\u30bf\u6e08\u307f\u30c7\u30fc\u30bf\r\n    this.isLoading = false;\r\n  }\r\n  \r\n  renderPage() {\r\n    if (this.isLoading) return;\r\n    \r\n    this.isLoading = true;\r\n    const startIndex = this.currentPage * this.itemsPerPage;\r\n    const endIndex = Math.min(startIndex + this.itemsPerPage, this.filteredData.length);\r\n    const pageData = this.filteredData.slice(startIndex, endIndex);\r\n    \r\n    const html = pageData.map(item =&gt; this.createIconCard(item)).join(&#39;&#39;);\r\n    \r\n    if (this.currentPage === 0) {\r\n      this.container.innerHTML = html;\r\n    } else {\r\n      this.container.insertAdjacentHTML(&#39;beforeend&#39;, html);\r\n    }\r\n    \r\n    this.currentPage++;\r\n    this.isLoading = false;\r\n  }\r\n  \r\n  setupInfiniteScroll() {\r\n    window.addEventListener(&#39;scroll&#39;, () =&gt; {\r\n      const scrollPercent = (window.scrollY + window.innerHeight) \/ document.body.scrollHeight;\r\n      \r\n      if (scrollPercent &gt; 0.9 &amp;&amp; !this.isLoading) {\r\n        const remainingItems = this.filteredData.length - (this.currentPage * this.itemsPerPage);\r\n        if (remainingItems &gt; 0) {\r\n          this.renderPage();\r\n        }\r\n      }\r\n    });\r\n  }\r\n}\r\n<\/code><\/pre>\r\n<h3 class=\"fz-ml\">\u4eee\u60f3\u30b9\u30af\u30ed\u30fc\u30eb\u306e\u52b9\u679c<\/h3>\r\n<ul style=\"list-style-type:bullet;\">\r\n<li><b class=\"bold\">\u521d\u671f\u8868\u793a\u6642\u9593<\/b>: \u5927\u5e45\u77ed\u7e2e\uff083466\u500b \u2192 200\u500b\u306e\u63cf\u753b\uff09<\/li>\r\n<li><b class=\"bold\">\u30e1\u30e2\u30ea\u4f7f\u7528\u91cf<\/b>: \u52b9\u7387\u7684\u306a\u4f7f\u7528<\/li>\r\n<li><b class=\"bold\">\u30b9\u30af\u30ed\u30fc\u30eb\u4f53\u9a13<\/b>: \u81ea\u7136\u306a\u7121\u9650\u30b9\u30af\u30ed\u30fc\u30eb<\/li>\r\n<\/ul>\r\n<h2 class=\"fz-xl\">\u89e3\u6c7a\u7b563: \u691c\u7d22\u6a5f\u80fd\u3068\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30d5\u30a3\u30eb\u30bf\u30ea\u30f3\u30b0<\/h2>\r\n<p>\u5927\u91cf\u306e\u30c7\u30fc\u30bf\u3092\u6271\u3046\u969b\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u76ee\u7684\u306e\u8981\u7d20\u3092\u7d20\u65e9\u304f\u898b\u3064\u3051\u3089\u308c\u308b\u691c\u7d22\u6a5f\u80fd\u304c\u3042\u308b\u3068\u4fbf\u5229\u3067\u3059\u3002<\/p>\r\n<pre><code class=\"language-javascript\">setupEventListeners() {\r\n  \/\/ \u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u691c\u7d22\r\n  this.searchInput.addEventListener(&#39;input&#39;, (e) =&gt; {\r\n    const query = e.target.value.toLowerCase().trim();\r\n    \r\n    if (query === &#39;&#39;) {\r\n      this.filteredData = [...this.allData];\r\n    } else {\r\n      this.filteredData = this.allData.filter(item =&gt;\r\n        item.name.toLowerCase().includes(query)\r\n      );\r\n    }\r\n    \r\n    \/\/ \u691c\u7d22\u6642\u306f\u6700\u521d\u304b\u3089\u30ea\u30bb\u30c3\u30c8\r\n    this.currentPage = 0;\r\n    this.container.innerHTML = &#39;&#39;;\r\n    this.renderPage();\r\n  });\r\n}\r\n<\/code><\/pre>\r\n<h2 class=\"fz-xl\">CSS\u306e\u6700\u9069\u5316<\/h2>\r\n<p>JavaScript\u306e\u6700\u9069\u5316\u3068\u5408\u308f\u305b\u3066\u3001CSS\u3067\u3082\u63cf\u753b\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u307e\u3057\u305f\u3002<\/p>\r\n<pre><code class=\"language-css\">\/* GPU\u52a0\u901f\u3068Containment\u306e\u6d3b\u7528 *\/\r\n.be-copyable {\r\n  transform: translateZ(0); \/* GPU\u52a0\u901f *\/\r\n  transition: opacity 0.2s ease, transform 0.2s ease;\r\n}\r\n\r\n.card {\r\n  contain: layout style paint; \/* CSS Containment *\/\r\n}\r\n\r\n.cards-wrapper {\r\n  contain: layout;\r\n}\r\n\r\n\/* \u30b9\u30af\u30ed\u30fc\u30eb\u6700\u9069\u5316 *\/\r\n.cards-container {\r\n  overflow-anchor: none;\r\n}\r\n<\/code><\/pre>\r\n<h3 class=\"fz-ml\">CSS\u6700\u9069\u5316\u306e\u30dd\u30a4\u30f3\u30c8<\/h3>\r\n<ol style=\"list-style-type:decimal;\">\r\n<li><b class=\"bold\">GPU\u52a0\u901f<\/b>: <code>transform: translateZ(0)<\/code>\u3067\u30cf\u30fc\u30c9\u30a6\u30a7\u30a2\u52a0\u901f\u3092\u6709\u52b9\u5316<\/li>\r\n<li><b class=\"bold\">CSS Containment<\/b>: \u30d6\u30e9\u30a6\u30b6\u306e\u63cf\u753b\u6700\u9069\u5316\u3092\u652f\u63f4<\/li>\r\n<li><b class=\"bold\">\u30b9\u30af\u30ed\u30fc\u30eb\u30a2\u30f3\u30ab\u30ea\u30f3\u30b0\u7121\u52b9\u5316<\/b>: \u5927\u91cf\u8981\u7d20\u3067\u306e\u4e0d\u8981\u306a\u518d\u8a08\u7b97\u3092\u9632\u6b62<\/li>\r\n<\/ol>\r\n<p>\u5927\u91cf\u306eDOM\u30c7\u30fc\u30bf\u3092\u6271\u3046\u969b\u306f\u3001\u3053\u308c\u3089\u306e\u30c6\u30af\u30cb\u30c3\u30af\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u30e6\u30fc\u30b6\u30fc\u306b\u3068\u3063\u3066\u5feb\u9069\u306a\u4f53\u9a13\u3092\u63d0\u4f9b\u3067\u304d\u307e\u3059\u3002<\/p>\r\n\r\n<a href=\"https:\/\/code-plus.jp\/cdn\/commons\/fonts\/material-design-icons\/\" class=\"linkbox my-1.5r\">\r\n<picture class=\"linkbox-thumbnail\">\r\n<img decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/code-plus.jp\/gp\/wp-content\/uploads\/SS-2025-09-12-17.04.48.png\" alt=\"\" loading=\"lazy\" \/>\r\n<\/picture>\r\n<h4 class=\"linkbox-title fz-md\">Material-Symbols Samples 3466<\/h4>\r\n<u class=\"linkbox-more\">\u7d9a\u304d\u3092\u8aad\u3080<\/u>\r\n<\/a>","protected":false},"excerpt":{"rendered":"3466\u500b\u306eMaterial Symbols\u30a2\u30a4\u30b3\u30f3\u3092\u8efd\u5feb\u306b\u8868\u793a\u3059\u308b\u65b9\u6cd5\u3002\u30a4\u30d9\u30f3\u30c8\u30c7\u30ea\u30b2\u30fc\u30b7\u30e7\u30f3\u3001\u4eee\u60f3\u30b9\u30af\u30ed\u30fc\u30eb\u3001\u6bb5\u968e\u8aad\u307f\u8fbc\u307f\u306a\u3069\u5b9f\u8df5\u7684\u306a\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6539\u5584\u30c6\u30af\u30cb\u30c3\u30af\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002","protected":false},"author":1,"featured_media":8981,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","footnotes":"","vk-ltc-link":"","vk-ltc-target":"0"},"categories":[12],"tags":[343,351,350,345,344,113,115],"class_list":["post-8975","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript","tag-343","tag-351","tag-350","tag-345","tag-344","tag-javascript","tag-dom"],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/8975","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=8975"}],"version-history":[{"count":0,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/8975\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/8981"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=8975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=8975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=8975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}