{"id":11857,"date":"2024-07-27T22:40:16","date_gmt":"2024-07-27T13:40:16","guid":{"rendered":"https:\/\/www.webcyou.com\/?p=11857"},"modified":"2024-07-27T22:40:17","modified_gmt":"2024-07-27T13:40:17","slug":"javascript%e3%81%a7%e3%80%81dom%e3%82%92%e6%94%be%e3%82%8a%e6%8a%95%e3%81%92%e3%82%8b%e5%87%a6%e7%90%86","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=11857","title":{"rendered":"JavaScript\u3067\u3001DOM\u3092\u653e\u308a\u6295\u3052\u308b\u51e6\u7406"},"content":{"rendered":"\n

\u3069\u3082\u3067\u3059\u3002<\/p>\n

\u4eca\u56de\u306f\u3001JavaScript\u3067\u3001DOM\uff08HTML\uff09\u3092\u653e\u308a\u6295\u3052\u308b\u51e6\u7406\u306b\u3064\u3044\u3066\u3067\u3059\u3002<\/p>\n

\u5148\u306b\u304a\u898b\u305b\u3059\u308b\u3068\u3001\u3053\u306e\u69d8\u306a\u51e6\u7406\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n

\"\"<\/p>\n

\u7279\u6bb5\u96e3\u3057\u3044\u51e6\u7406\u306a\u3069\u3067\u306f\u306a\u3044\u306e\u3067\u3059\u304c\u3001\u3042\u308b\u65e5\u30e1\u30f3\u30d0\u30fc\u306b\u5b9f\u88c5\u3092\u304a\u9858\u3044\u3057\u305f\u3068\u3053\u308d\u300c\u3067\u304d\u306a\u3044\u3002<\/strong>\u300d\u3068\u8fd4\u3063\u3066\u304d\u305f\u306e\u3067\u3001\u3048\u3002\u306a\u3093\u3067\u3068\u601d\u3063\u305f\u6b21\u7b2c\u3067\u306f\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n

\u904e\u53bb\u306b\u3082\u3053\u306e\u51e6\u7406\u306b\u3064\u3044\u3066\u3001\u5927\u5206\u6614\u306b\u66f8\u3044\u305f\u899a\u3048\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u300c\u3067\u304d\u306a\u3044\u300d\u3068\u8a00\u308f\u308c\u305f\u306e\u304c\u7d50\u69cb\u305a\u3063\u3068\u3072\u3063\u304b\u304b\u3063\u3066\u3044\u3066\u4eca\u56de\u6539\u3081\u3066\u8a18\u4e8b\u5316\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n

\u81ea\u5206\u304c\u4ed5\u4e8b\u3067\u300c\u3067\u304d\u306a\u3044\u300d\u3068\u8a00\u3063\u3066\u3053\u306a\u304b\u3063\u305f\u306e\u3082\u3042\u308b\u304b\uff08\u300c\u6280\u8853\u7684\u306b\u306f\u53ef\u80fd\u3067\u3059\u300d\uff09\u3001\u305d\u3046\u3044\u3063\u3066\u3057\u307e\u3046\u3068\u30a8\u30f3\u30b8\u30cb\u30a2\u306e\u4fa1\u5024\u3092\u81ea\u5206\u3067\u4e0b\u3052\u3066\u3044\u308b\u3053\u3068\u3068\u540c\u3058\u3060\u305e\u3002\u3068\u601d\u3044\u307e\u3057\u305f\u304c\u3001\u8001\u5bb3\u3068\u601d\u308f\u308c\u305f\u304f\u306a\u3044\u306e\u3067\uff08\u7b11\uff09\u305d\u308c\u306f\u544a\u3052\u305a\u3002\u300c\u3058\u3083\u3041\u3044\u3044\u3088\u300d\u3068\u8a00\u3063\u3066\u3057\u307e\u3063\u305f\u3002<\/p>\n

\u00a0<\/p>\n

\u305d\u3082\u305d\u3082\u3001\u304a\u9858\u3044\u3057\u305f\u51e6\u7406\u3068\u3057\u3066\u306f\u3001\u4e0a\u8a18\u306e\u5186\u5f62\u306e\u79fb\u52d5\u3088\u308a\u3082\u3082\u3063\u3068\u7c21\u6613\u306a\u3082\u306e\u3067\u3001\u30bf\u30d6\u3092\u6301\u3061\u4e0a\u3052\u308b\u51e6\u7406\u306a\u306e\u3067\u3001\u4e0a\u4e0b\u306e\u79fb\u52d5\u3057\u304b\u306a\u3044\u3067\u3059\u3002<\/p>\n

\"\"<\/p>\n

\u203b \u30c4\u30de\u30df\u3092\u6301\u3061\u4e0a\u3052\u308b\u3068\u5168\u4f53\u304c\u6301\u3061\u4e0a\u304c\u308b\u5f62\u3002\u3064\u307e\u3080\u306e\u3068\u653e\u308a\u4e0a\u3052\u3067\u79fb\u52d5\u3002<\/p>\n

\u30af\u30ea\u30c3\u30af\u3067\u306e\u4e0a\u4e0b\u306e\u79fb\u52d5\u306f\u5b9f\u88c5\u3067\u304d\u305f\u307f\u305f\u3044\u306a\u306e\u3067\u3059\u304c\u3001\u63b4\u3093\u3067\u6295\u3052\u308b\u304c\u3069\u3046\u3084\u3089\u96e3\u3057\u304b\u3063\u305f\u307f\u305f\u3044\u3067\u3059\u3002<\/p>\n

\u51e6\u7406\u5b9f\u88c5<\/h4>\n

\u305d\u308c\u3067\u306f\u5b9f\u88c5\u3057\u3066\u3044\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u307e\u305a\u8003\u3048\u65b9\u3068\u3057\u3066\u3001<\/p>\n

\u8cea\u91cf\u306f\u5b58\u5728\u3057\u306a\u3044\u3082\u306e\u3068\u3057\u307e\u3059\u3002\u306a\u306e\u3067\u5927\u304d\u3055\u306b\u3088\u3063\u3066\u904b\u52d5\u91cf\u306e\u5909\u5316\u3082\u3057\u306a\u3044\u5f62\u3068\u3059\u308b\u306e\u3067\u3001\u904b\u52d5\u306e\u6cd5\u5247\u3088\u308a\u3088\u308a\u7c21\u6613\u306a\u3082\u306e\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n

\u3057\u304b\u3057\u306a\u304c\u3089\u6469\u64e6\u529b\u306a\u3069\u304c\u306a\u3044\u3068DOM\uff08\u5186\u5f62\uff09\u304c\u6b62\u307e\u3089\u306a\u3044\u306e\u3067\u3001\u7a7a\u6c17\u62b5\u6297\u304c\u5b58\u5728\u3059\u308b\u3082\u306e\u3068\u3057\u307e\u3059\u3002<\/p>\n

\u307e\u305f\u3001\u91cd\u529b\u3082\u5b58\u5728\u3057\u306a\u3044\u3082\u306e\u3068\u3057\u307e\u3059\u3002\u306a\u306e\u3067\u3001\u958b\u59cb\u4f4d\u7f6e\u3001\u7d42\u4e86\u4f4d\u7f6e\u3001\u6642\u9593\u3001\u8ddd\u96e2\u304c\u7b97\u51fa\u3067\u304d\u308c\u3070\u7c21\u6f54\u3059\u308b\u3088\u3046\u306a\u7c21\u6613\u306a\u5185\u5bb9\u3068\u306a\u3063\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n

\"\"<\/p>\n

\u4f55\u306f\u3068\u3082\u3042\u308c\u3001\u64cd\u4f5c\u306b\u6271\u3046\u5186\u5f62\u3092\u751f\u6210\u3057\u307e\u3059\u3002\uff08CSS\u306f\u7701\u7565\uff09<\/p>\n

<body>\n  <div id=\"circle\"><\/div>\n  <script> const circle = document.getElementById('circle'); <\/script>\n<\/body><\/pre>\n
\u305d\u308c\u305e\u308c\u306e\u5909\u6570\u3068\u7a7a\u6c17\u62b5\u6297\u306e\u4fc2\u6570\uff08\u4efb\u610f\u306e\u5024\uff09\u3092\u7528\u610f\u3057\u307e\u3059\u3002<\/p>\n
let isDragging = false;\nlet startX, startY, startLeft, startTop, startTime;\nlet endX, endY, endTime;\nlet velocityX, velocityY;\nconst airResistance = 0.01;<\/pre>\n
\u307e\u305a\u306f\u3001\u5186\u5f62\u3092\u63b4\u3080\u51e6\u7406\u3002\u5186\u5f62\u306eDOM\u306b\u5bfe\u3057\u3066\u30de\u30a6\u30b9\u30c0\u30a6\u30f3\u30a4\u30d9\u30f3\u30c8\u3092\u30a2\u30bf\u30c3\u30c1\u3057\u307e\u3059\u3002<\/p>\n
circle.addEventListener('mousedown', (e) => {\n  isDragging = true;\n  startX = e.clientX;\n  startY = e.clientY;\n  startLeft = circle.offsetLeft;\n  startTop = circle.offsetTop;\n  startTime = Date.now();\n  document.addEventListener('mousemove', onMouseMove);\n  document.addEventListener('mouseup', onMouseUp);\n});<\/pre>\n
\u7d9a\u3044\u3066\u3001\u30c9\u30e9\u30c3\u30b0\uff08\u5186\u5f62\u79fb\u52d5\uff09\u306e\u51e6\u7406\u3002<\/p>\n
function onMouseMove(e) {\n  if (isDragging) {\n    const currentX = e.clientX;\n    const currentY = e.clientY;\n    circle.style.left = `${startLeft + currentX - startX}px`;\n    circle.style.top = `${startTop + currentY - startY}px`;\n  }\n}<\/pre>\n
\u5186\u5f62\u306e\u3069\u306e\u4f4d\u7f6e\u3092\u63b4\u3093\u3067\u3082\u305d\u306e\u307e\u307e\u79fb\u52d5\u3067\u304d\u308b\u3088\u3046\u306b\u51e6\u7406\u3002<\/p>\n
\u7d9a\u3044\u3066\u30de\u30a6\u30b9\u30a2\u30c3\u30d7\u306e\u51e6\u7406<\/p>\n
function onMouseUp(e) {\n  if (isDragging) {\n    isDragging = false;\n    endX = e.clientX;\n    endY = e.clientY;\n    endTime = Date.now();\n    const elapsedTime = (endTime - startTime) \/ 1000;\n    velocityX = (endX - startX) \/ elapsedTime;\n    velocityY = (endY - startY) \/ elapsedTime;\n    document.removeEventListener('mousemove', onMouseMove);\n    document.removeEventListener('mouseup', onMouseUp);\n    applyPhysics();\n  }\n}<\/pre>\n
elapsedTime\u306f\u7d4c\u904e\u6642\u9593\u3068\u306a\u308a\u3001\/ 1000\u3092\u884c\u3044\u79d2\u306b\u5909\u63db\u3002<\/span><\/p>\n
x, y\u3068\u5404\u305d\u308c\u305e\u308c<\/span>\u30de\u30a6\u30b9\u30a2\u30c3\u30d7\u3055\u308c\u305f\u4f4d\u7f6e\u3092\u6700\u521d\u306b\u30af\u30ea\u30c3\u30af\u3057\u305f\u4f4d\u7f6e\u3067\u5f15\u304d\u3001\u7d4c\u904e\u6642\u9593\u3067\u5272\u3063\u3066\u901f\u5ea6\u3092\u6c42\u3081\u307e\u3059\u3002<\/span><\/p>\n
\u6700\u5f8c\u306b\u3001applyPhysics\u3067\u5186\u5f62\u306e\u79fb\u52d5\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n
function applyPhysics() {\n  const move = () => {\n    const currentLeft = parseFloat(circle.style.left);\n    const currentTop = parseFloat(circle.style.top);\n    if (Math.abs(velocityX) > 0.1 || Math.abs(velocityY) > 0.1) {\n      velocityX *= (1 - airResistance);\n      velocityY *= (1 - airResistance);\n      circle.style.left = `${currentLeft + velocityX * 0.01}px`;\n      circle.style.top = `${currentTop + velocityY * 0.01}px`;\n      requestAnimationFrame(move);\n    }\n  };\n  move();\n}<\/pre>\n
x, y\u3068\u5404\u305d\u308c\u305e\u308c\u901f\u5ea6\u3092\u52a0\u7b97\u3057\u3001\u79fb\u52d5\u3055\u305b\u3066\u3044\u307e\u3059\u3002<\/span>\u7a7a\u6c17\u62b5\u6297\u3067\u3042\u308b\u3001airResistance\u3067\u901f\u5ea6\u3092\u6e1b\u901f\u3057\u3001\u52a0\u901f\u5ea6\u304c\u306a\u304f\u306a\u308b\u307e\u3067requestAnimationFrame\u3067move\u306e\u518d\u5e30\u51e6\u7406\u3092\u884c\u3044\u307e\u3059\u3002<\/span><\/p>\n
\u3068\u3001\u8a00\u3046\u3053\u3068\u3067\u51fa\u6765\u4e0a\u304c\u308a\u3002<\/p>\n
\u3057\u304b\u3057\u306a\u304c\u3089\u73fe\u72b6\u3060\u3068\u3001\u76f4\u7dda\u4e0a\u306e\u79fb\u52d5\u306a\u3069\u306f\u826f\u3044\u304c\u3001\u8907\u96d1\u306a\u52d5\u304d\u3084\u9577\u6642\u9593\u63b4\u3093\u3067\u52d5\u304b\u3059\u3068\u3059\u3050\u306b\u5909\u306a\u65b9\u5411\u3078\u3068\u884c\u304f\u3002<\/p>\n
\u3053\u308c\u306f\u3001\u6700\u521d\u306b\u5186\u5f62\u3092\u63b4\u3093\u3060\uff08\u30af\u30ea\u30c3\u30af\uff09\u3057\u305f\u5834\u6240\u3092\u5143\u306b\u3057\u3066\u3057\u307e\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u306e\u6642\u70b9\u304b\u3089\u306e\u6642\u9593\u3084\u7d4c\u8def\u306f\u5186\u5f62\u3092\u96e2\u3057\u305f\u5f8c\uff08\u30de\u30a6\u30b9\u30a2\u30c3\u30d7\uff09\u306e\u5186\u5f62\u306e\u904b\u52d5\u306b\u306f\u76f4\u63a5\u95a2\u4fc2\u306f\u306a\u304f\u3001\u5186\u5f62\u3092\u96e2\u3059\u524d\uff08\u30de\u30a6\u30b9\u30a2\u30c3\u30d7\uff09\u306e\u6570\u79d2\u524d\u306e\u7d4c\u8def\u304c\u5f71\u97ff\u3059\u308b\u304b\u3089\u3067\u3059\u3002<\/p>\n
\u305d\u3053\u3067\u3001\u6570\u30b9\u30c6\u30c3\u30d7\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u3057\u3001\u305d\u3053\u304b\u3089\u5186\u5f62\u306e\u30d9\u30af\u30c8\u30eb\u3092\u7b97\u51fa\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
\u307e\u305a\u3001\u7d4c\u8def\u306e\u30dd\u30a4\u30f3\u30c8\u3092\u4f55\u500b\u78ba\u4fdd\u3059\u308b\u304b\u306e\u5b9a\u6570sampleSize\u3068\u3001\u305d\u306e\u30c7\u30fc\u30bf\u3092\u4fdd\u6301\u3059\u308bpositions\u3092\u5b9a\u7fa9\u3002<\/p>\n
let positions = [];\nconst sampleSize = 5;<\/pre>\n
\u30de\u30a6\u30b9\u30c0\u30a6\u30f3\u30a4\u30d9\u30f3\u30c8\u3067positions\u3092\u521d\u671f\u5316\u3057\u307e\u3059\u3002<\/p>\n
positions = []; <\/pre>\n
\u7d9a\u3044\u3066\u30de\u30a6\u30b9\u30c0\u30a6\u30f3\u30a4\u30d9\u30f3\u30c8\u306e\u51e6\u7406\u3092\u5909\u66f4<\/p>\n
function onMouseMove(e) {\n  if (isDragging) {\n    const x = e.clientX;\n    const y = e.clientY;\n    positions.push({ x, y, time: Date.now() });\n\n    \/\/ \u4f4d\u7f6e\u30c7\u30fc\u30bf\u3092\u4e00\u5b9a\u9593\u9694\u3067\u53d6\u5f97\n    if (positions.length > sampleSize) {\n      positions.shift();\n    }\n    circle.style.left = `${startLeft + x - startX}px`;\n    circle.style.top = `${startTop + y - startY}px`;\n  }\n}<\/pre>\n
\u7d4c\u8def\u306e\u30dd\u30a4\u30f3\u30c8\u3092\u4f55\u500b\u78ba\u4fdd\u3059\u308b\u304b\u3092\u5b9a\u7fa9\u3057\u305f\u5b9a\u6570sampleSize\u306e\u6570\u3060\u3051\u30b5\u30f3\u30d7\u30ea\u30f3\u30b0\u3002<\/p>\n
\u30de\u30a6\u30b9\u30a2\u30c3\u30d7\u30a4\u30d9\u30f3\u30c8\u3067positions\u306e\u6700\u5f8c\u3068\u6700\u521d\u3092\u53d6\u5f97\u3057\u3001x, y\u306edelta\u3001velocity\u3092\u7b97\u51fa\u3002<\/p>\n
function onMouseUp(e) {\n  if (isDragging) {\n    isDragging = false;\n    const endTime = Date.now();\n    const elapsedTime = (endTime - startTime) \/ 1000;\n    if (positions.length > 1) {\n      const lastPos = positions[positions.length - 1];\n      const firstPos = positions[0];\n      const deltaX = lastPos.x - firstPos.x;\n      const deltaY = lastPos.y - firstPos.y;\n      velocityX = deltaX \/ elapsedTime;\n      velocityY = deltaY \/ elapsedTime;\n    }\n    document.removeEventListener('mousemove', onMouseMove);\n    document.removeEventListener('mouseup', onMouseUp);\n    applyPhysics();\n  }\n}<\/pre>\n
applyPhysics\u30e1\u30bd\u30c3\u30c9\u306f\u524d\u56de\u3068\u540c\u69d8\u3002<\/p>\n
\n
\u3068\u3057\u305f\u3068\u3053\u308d\u3067\u3001\u8a18\u4e8b\u6700\u521d\u306e\u30a2\u30cb\u30e1\u306e\u69d8\u306a\u5f62\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<\/div>\n
\u00a0<\/p>\n
\u3053\u308c\u3067\u5b8c\u74a7\u304b\u3002\u3068\u3044\u3046\u3068\u305d\u3046\u3067\u3082\u306a\u304f\u6e7e\u66f2\u306e\u30de\u30a6\u30b9\u306e\u7d4c\u8def\u3092\u53d6\u308b\u3068\u3001\u3061\u3087\u3063\u3068\u610f\u56f3\u3057\u305f\u5f62\u306b\u306f\u306a\u3089\u306a\u304b\u3063\u305f\u308a\u3082\u3059\u308b\u306e\u3067\u3001\u3082\u3063\u3068\u4f5c\u308a\u8fbc\u3080\u306e\u3067\u3042\u308c\u3070\u3001\u9060\u5fc3\u529b\u3082\u8003\u616e\u3057\u305f\u8a08\u7b97\u306a\u3069\u3082\u542b\u3081\u3066\u3070\u826f\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n
\u6b21\u56de\u3001\u305d\u3061\u3082\u8003\u616e\u3067\u304d\u305f\u5b9f\u88c5\u3092\u7d39\u4ecb\u3067\u304d\u308c\u3070\u3068\u601d\u3063\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n
\u3067\u306f\u3067\u306f\u3041\u3002<\/p>\n
\u307e\u305f\u307e\u305f\u3041\u3002<\/p>\n
\u00a0<\/p>\n
\u00a0<\/p>\n
\u00a0<\/p>\n
\u00a0<\/p>\n
\u00a0<\/p>\n
\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"
\u3069\u3082\u3067\u3059\u3002 \u4eca\u56de\u306f\u3001JavaScript\u3067\u3001DOM\uff08HTML\uff09\u3092\u653e\u308a\u6295\u3052\u308b\u51e6\u7406\u306b\u3064\u3044\u3066\u3067\u3059\u3002 \u5148\u306b\u304a\u898b\u305b\u3059\u308b\u3068\u3001\u3053\u306e\u69d8\u306a\u51e6\u7406\u306b\u306a\u308a\u307e\u3059\u3002 \u7279\u6bb5\u96e3\u3057\u3044\u51e6\u7406\u306a\u3069\u3067\u306f\u306a\u3044\u306e\u3067\u3059\u304c\u3001\u3042\u308b\u65e5\u30e1\u30f3\u30d0\u30fc\u306b\u5b9f\u88c5\u3092\u304a\u9858\u3044\u3057\u305f\u3068\u3053\u308d\u300c\u3067\u304d\u306a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[177,176,166,47,45,178,78,114,118],"class_list":["post-11857","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-css3","tag-html5","tag-iphone","tag-javascript-2","tag-web","tag-178","tag-78","tag-114","tag-118"],"_links":{"self":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/11857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11857"}],"version-history":[{"count":3,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/11857\/revisions"}],"predecessor-version":[{"id":11863,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/11857\/revisions\/11863"}],"wp:attachment":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}