{"id":19324,"date":"2026-07-28T13:57:44","date_gmt":"2026-07-28T13:57:44","guid":{"rendered":"https:\/\/withcode.tech\/media\/?p=19324"},"modified":"2026-07-28T15:00:17","modified_gmt":"2026-07-28T15:00:17","slug":"javascript-not-working","status":"publish","type":"post","link":"https:\/\/withcode.tech\/media\/javascript-not-working\/","title":{"rendered":"JavaScript\u304c\u52d5\u304b\u306a\u3044\u539f\u56e0\u3068\u5bfe\u51e6\u6cd5\uff5c\u30a8\u30e9\u30fc\u306e\u8aad\u307f\u65b9"},"content":{"rendered":"

<\/p>\n

\n
\n
\"\"\u751f\u5f92<\/span><\/div>\n
\n
\n

JavaScript\u3092\u66f8\u3044\u305f\u306e\u306b\u5168\u7136\u52d5\u304b\u306a\u304f\u3066\u2026\u4f55\u304b\u3089\u78ba\u8a8d\u3059\u308c\u3070\u3044\u3044\u3067\u3059\u304b\uff1f<\/strong><\/p>\n

<\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\"\"\u30da\u30f3\u535a\u58eb<\/span><\/div>\n
\n
\n

\u307e\u305a\u306f\u30d6\u30e9\u30a6\u30b6\u306e\u30b3\u30f3\u30bd\u30fc\u30eb\u3067\u30a8\u30e9\u30fc\u3092\u8aad\u3080\u306e\u304c\u7b2c\u4e00\u6b69\u3060\u3088\u3002\u8aad\u307f\u8fbc\u307f\u9806\u30fb\u30bf\u30a4\u30dd\u30fb\u8981\u7d20\u53d6\u5f97\u306e\u30bf\u30a4\u30df\u30f3\u30b0\u306a\u3069\u3001\u539f\u56e0\u306f\u3060\u3044\u305f\u3044\u30d1\u30bf\u30fc\u30f3\u304c\u6c7a\u307e\u3063\u3066\u308b\u3002\u4eca\u65e5\u306f\u9806\u756a\u306b\u6f70\u3057\u3066\u3044\u3053\u3046\u3002<\/strong><\/p>\n

<\/span><\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n

JavaScript\u3092\u66f8\u3044\u305f\u306e\u306b\u4f55\u3082\u52d5\u304b\u306a\u3044\u2014\u2014\u3053\u306e\u72b6\u6cc1\u306fWeb\u5236\u4f5c\u306e\u73fe\u5834\u3067\u8ab0\u3082\u304c\u7d4c\u9a13\u3059\u308b\u58c1\u3067\u3059\u3002HTML\u3068CSS\u306a\u3089\u898b\u305f\u76ee\u3067\u3059\u3050\u6c17\u3065\u3051\u307e\u3059\u304c\u3001JavaScript\u306e\u30a8\u30e9\u30fc\u306f\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u306f\u4f55\u3082\u8868\u793a\u3055\u308c\u306a\u3044\u3053\u3068\u304c\u591a\u304f\u3001\u3069\u3053\u304c\u60aa\u3044\u306e\u304b\u898b\u5f53\u3082\u3064\u304b\u306a\u3044\u3068\u3044\u3046\u72b6\u6cc1\u306b\u9665\u308a\u304c\u3061\u3067\u3059\u3002<\/p>\n

\u5b9f\u306fJavaScript\u304c\u52d5\u304b\u306a\u3044\u539f\u56e0\u306e9\u5272\u306f\u3001\u8aad\u307f\u8fbc\u307f\u9806\u306e\u554f\u984c\u30fb\u30bf\u30a4\u30dd\uff08\u30b9\u30da\u30eb\u30df\u30b9\uff09\u30fbDOM\u64cd\u4f5c\u306e\u30bf\u30a4\u30df\u30f3\u30b0\u30fb\u5909\u6570\u306e\u30b9\u30b3\u30fc\u30d7\u306e\u3069\u308c\u304b\u3067\u3059\u3002\u672c\u8a18\u4e8b\u3067\u306f\u30d6\u30e9\u30a6\u30b6\u306e\u958b\u767a\u8005\u30c4\u30fc\u30eb\u306e\u4f7f\u3044\u65b9\u304b\u3089\u3001\u3088\u304f\u3042\u308b\u30a8\u30e9\u30fc\u306e\u8aad\u307f\u65b9\u3068\u4fee\u6b63\u30b3\u30fc\u30c9\u3001\u30c7\u30d0\u30c3\u30b0\u306e\u4f53\u7cfb\u7684\u306a\u624b\u9806\u307e\u3067\u8a73\u3057\u304f\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n

    \n
  • JavaScript\u304c\u52d5\u304b\u306a\u3044\u4e3b\u8981\u306a\u539f\u56e07\u3064\u3068\u305d\u306e\u89e3\u6c7a\u7b56<\/li>\n
  • \u30d6\u30e9\u30a6\u30b6\u306e\u30b3\u30f3\u30bd\u30fc\u30eb\u306e\u958b\u304d\u65b9\u3068\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u8aad\u307f\u65b9<\/li>\n
  • Uncaught TypeError\u3001ReferenceError\u306a\u3069\u4ee3\u8868\u7684\u30a8\u30e9\u30fc\u306e\u5bfe\u51e6\u6cd5<\/li>\n
  • console.log\u30fbdebugger\u30fbNetwork\u30bf\u30d6\u3092\u4f7f\u3063\u305f\u30c7\u30d0\u30c3\u30b0\u624b\u9806<\/li>\n
  • \u975e\u540c\u671f\u51e6\u7406\uff08Promise\u30fbasync\/await\uff09\u306e\u3088\u304f\u3042\u308b\u843d\u3068\u3057\u7a74<\/li>\n
  • \u30ad\u30e3\u30c3\u30b7\u30e5\u554f\u984c\u306e\u78ba\u8a8d\u65b9\u6cd5\u3068\u30cf\u30fc\u30c9\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5<\/li>\n<\/ul>\n
    \n

    \u30d6\u30e9\u30a6\u30b6\u306e\u30b3\u30f3\u30bd\u30fc\u30eb\u3092\u958b\u304f\u65b9\u6cd5<\/h2>\n
    \"\u30c7\u30d0\u30c3\u30b0\u306e\u5165\u53e3\"<\/figure>\n

    JavaScript\u306e\u30c7\u30d0\u30c3\u30b0\u306f\u30d6\u30e9\u30a6\u30b6\u306e\u958b\u767a\u8005\u30c4\u30fc\u30eb\uff08DevTools\uff09\u306e\u30b3\u30f3\u30bd\u30fc\u30eb\u30d1\u30cd\u30eb\u304b\u3089\u59cb\u307e\u308a\u307e\u3059\u3002\u30b3\u30f3\u30bd\u30fc\u30eb\u3092\u958b\u304f\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8\u3092\u899a\u3048\u308b\u3053\u3068\u304c\u6700\u521d\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u3059\u3002<\/p>\n\n\n\n\n\n\n\n\n
    OS\u30fb\u30d6\u30e9\u30a6\u30b6<\/th>\n\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8<\/th>\n<\/tr>\n<\/thead>\n
    Windows\uff08Chrome\/Edge\/Firefox\uff09<\/td>\nF12 \u307e\u305f\u306f Ctrl + Shift + I<\/td>\n<\/tr>\n
    Mac\uff08Chrome\/Edge\uff09<\/td>\nCommand + Option + I<\/td>\n<\/tr>\n
    Mac\uff08Safari\uff09<\/td>\nCommand + Option + C\uff08\u8981\uff1a\u958b\u767a\u30e1\u30cb\u30e5\u30fc\u6709\u52b9\u5316\uff09<\/td>\n<\/tr>\n
    \u53f3\u30af\u30ea\u30c3\u30af\u30e1\u30cb\u30e5\u30fc\u304b\u3089<\/td>\n\u53f3\u30af\u30ea\u30c3\u30af\u2192\u300c\u691c\u8a3c\u300d\u307e\u305f\u306f\u300c\u8981\u7d20\u3092\u8abf\u67fb\u300d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    DevTools\u304c\u958b\u3044\u305f\u3089\u300cConsole\u300d\u30bf\u30d6\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002\u8d64\u5b57\u3067\u30a8\u30e9\u30fc\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308c\u3070\u3001\u305d\u308c\u304cJavaScript\u304c\u52d5\u304b\u306a\u3044\u76f4\u63a5\u539f\u56e0\u3067\u3059\u3002\u4f55\u3082\u30a8\u30e9\u30fc\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u3001\u5f8c\u8ff0\u3059\u308b\u624b\u9806\u3067\u30a8\u30e9\u30fc\u306e\u767a\u751f\u5834\u6240\u3092\u7279\u5b9a\u3057\u307e\u3059\u3002<\/p>\n

    \u30b3\u30f3\u30bd\u30fc\u30eb\u30a8\u30e9\u30fc\u306e\u8aad\u307f\u65b9<\/h3>\n

    \u30b3\u30f3\u30bd\u30fc\u30eb\u306e\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u306f\u300c\u30a8\u30e9\u30fc\u306e\u7a2e\u985e\uff1a\u8aac\u660e\u3000at \u30d5\u30a1\u30a4\u30eb\u540d:\u884c\u756a\u53f7\u300d\u3068\u3044\u3046\u5f62\u5f0f\u3067\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u4f8b\u3048\u3070\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u8868\u793a\u3067\u3059\u3002<\/p>\n

    \n
    <!-- \u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u8868\u793a\u3055\u308c\u308b\u30a8\u30e9\u30fc\u306e\u4f8b -->\nUncaught TypeError: Cannot read properties of null (reading 'addEventListener')\n    at main.js:15:23\n\nUncaught ReferenceError: myFunction is not defined\n    at index.html:28:5\n\nUncaught SyntaxError: Unexpected token '}'\n    at main.js:42<\/code><\/pre>\n<\/div>\n
    \u30a8\u30e9\u30fc\u540d\u30fb\u8aac\u660e\u30fb\u30d5\u30a1\u30a4\u30eb\u540d\u30fb\u884c\u756a\u53f7\u306e4\u70b9\u3092\u78ba\u8a8d\u3057\u3001\u884c\u756a\u53f7\u306e\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068Sources\uff08\u307e\u305f\u306fDebugger\uff09\u30bf\u30d6\u3067\u8a72\u5f53\u30b3\u30fc\u30c9\u306b\u76f4\u63a5\u30b8\u30e3\u30f3\u30d7\u3067\u304d\u307e\u3059\u3002<\/p>\n
    \n
    \u539f\u56e01\uff1a\u8aad\u307f\u8fbc\u307f\u9806\u306e\u554f\u984c\uff08\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u4f4d\u7f6e\uff09<\/h2>\n
    \"\u8aad\u307f\u8fbc\u307f\u9806\u306e\u554f\u984c\u2192\u5bfe\u51e6\"<\/figure>\n
    JavaScript\u304c\u52d5\u304b\u306a\u3044\u6700\u3082\u591a\u3044\u539f\u56e0\u306e\u4e00\u3064\u304c\u3001script\u30bf\u30b0\u306e\u4f4d\u7f6e\u3067\u3059\u3002HTML\u306fDOM\u3092\u4e0a\u304b\u3089\u9806\u306b\u69cb\u7bc9\u3059\u308b\u305f\u3081\u3001`<head>`\u5185\u3067JavaScript\u3092\u8aad\u307f\u8fbc\u3093\u3067`document.getElementById`\u306a\u3069\u3092\u5b9f\u884c\u3059\u308b\u3068\u3001HTML\u8981\u7d20\u304c\u307e\u3060\u5b58\u5728\u3057\u306a\u3044\u72b6\u614b\u3067DOM\u64cd\u4f5c\u3057\u3088\u3046\u3068\u3057\u3066null\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3059\u3002<\/p>\n
    NG\u4f8b\u3068OK\u4f8b<\/h3>\n
    \n
    <!-- NG: head\u30bf\u30b0\u5185\u3067DOM\u3092\u53c2\u7167\u3057\u3088\u3046\u3068\u3057\u3066\u3044\u308b -->\n<head>\n  <script src=\"main.js\"><\/script>\n  <!-- main.js\u306e\u4e2d\u3067document.getElementById('btn')\u3092\u3057\u3066\u3082null\u306b\u306a\u308b -->\n<\/head>\n<body>\n  <button id=\"btn\">\u30af\u30ea\u30c3\u30af<\/button>\n<\/body>\n\n<!-- OK\u68481: body\u306e\u9589\u3058\u30bf\u30b0\u76f4\u524d\u306b\u7f6e\u304f -->\n<body>\n  <button id=\"btn\">\u30af\u30ea\u30c3\u30af<\/button>\n  <script src=\"main.js\"><\/script>\n<\/body>\n\n<!-- OK\u68482: defer\u5c5e\u6027\u3092\u4f7f\u3063\u3066head\u306b\u66f8\u304f\uff08\u63a8\u5968\uff09 -->\n<head>\n  <script src=\"main.js\" defer><\/script>\n<\/head>\n<body>\n  <button id=\"btn\">\u30af\u30ea\u30c3\u30af<\/button>\n<\/body><\/code><\/pre>\n<\/div>\n
    defer\u5c5e\u6027<\/span><\/strong>\u3092\u4ed8\u3051\u308b\u3068\u3001\u30b9\u30af\u30ea\u30d7\u30c8\u306fHTML\u306e\u30d1\u30fc\u30b9\u3092\u59a8\u3052\u305a\u306b\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3055\u308c\u3001DOM\u306e\u69cb\u7bc9\u304c\u5b8c\u4e86\u3057\u3066\u304b\u3089\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002\u73fe\u4ee3\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u306fhead\u306b`defer`\u3067\u66f8\u304f\u3053\u3068\u3067\u3059\u3002`async`\u5c5e\u6027\u3082\u3042\u308a\u307e\u3059\u304c\u3001\u3053\u3061\u3089\u306fDOM\u306e\u5b8c\u6210\u3092\u5f85\u305f\u305a\u306b\u5b9f\u884c\u3055\u308c\u308b\u305f\u3081\u3001DOM\u64cd\u4f5c\u3092\u542b\u3080\u30b9\u30af\u30ea\u30d7\u30c8\u306b\u306f\u4f7f\u3048\u307e\u305b\u3093\u3002<\/p>\n
    DOMContentLoaded\u30a4\u30d9\u30f3\u30c8\u3092\u4f7f\u3046\u65b9\u6cd5<\/h3>\n
    \u65e2\u5b58\u306e\u30b3\u30fc\u30c9\u3092\u5909\u66f4\u3057\u305f\u304f\u306a\u3044\u5834\u5408\u3084\u3001inline script\u306e\u5834\u5408\u306f`DOMContentLoaded`\u30a4\u30d9\u30f3\u30c8\u3067DOM\u69cb\u7bc9\u5f8c\u306b\u51e6\u7406\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n
    \n
    <head>\n  <script>\n    \/\/ DOMContentLoaded\u3067DOM\u69cb\u7bc9\u5f8c\u306b\u5b9f\u884c\n    document.addEventListener('DOMContentLoaded', function() {\n      var btn = document.getElementById('btn');\n      if (btn) {\n        btn.addEventListener('click', function() {\n          console.log('\u30af\u30ea\u30c3\u30af\u3055\u308c\u307e\u3057\u305f');\n        });\n      }\n    });\n  <\/script>\n<\/head>\n<body>\n  <button id=\"btn\">\u30af\u30ea\u30c3\u30af<\/button>\n<\/body><\/code><\/pre>\n<\/div>\n
    \n
    \u539f\u56e02\uff1a\u30d5\u30a1\u30a4\u30eb\u30d1\u30b9\u306e\u9593\u9055\u3044<\/h2>\n
    script\u30bf\u30b0\u306esrc\u5c5e\u6027\u306e\u30d1\u30b9\u304c\u9593\u9055\u3063\u3066\u3044\u308b\u3068\u3001JavaScript\u30d5\u30a1\u30a4\u30eb\u81ea\u4f53\u304c\u8aad\u307f\u8fbc\u307e\u308c\u307e\u305b\u3093\u3002\u3053\u306e\u5834\u5408\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u8d64\u3044\u30a8\u30e9\u30fc\u306f\u51fa\u306a\u3044\u304b\u3001\u300cFailed to load resource\u300d\u3068\u3044\u3046404\u30a8\u30e9\u30fc\u304c\u51fa\u307e\u3059\u3002<\/p>\n
    \n
    <!-- \u3088\u304f\u3042\u308b\u30d1\u30b9\u30df\u30b9\u306e\u4f8b -->\n\n<!-- NG: js\u30d5\u30a9\u30eb\u30c0\u306b\u3042\u308b\u306e\u306b\u30d1\u30b9\u304c\u9055\u3046 -->\n<script src=\"main.js\"><\/script>\n\n<!-- OK: \u6b63\u3057\u3044\u30d1\u30b9\u3092\u6307\u5b9a -->\n<script src=\"js\/main.js\"><\/script>\n\n<!-- NG: \u7d76\u5bfe\u30d1\u30b9\u3068\u76f8\u5bfe\u30d1\u30b9\u3092\u6df7\u540c -->\n<script src=\"\/js\/main.js\"><\/script>\n<!-- \uff08\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u3067\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u30eb\u30fc\u30c8\u304c\u9055\u3046\u3068\u8aad\u307f\u8fbc\u307e\u308c\u306a\u3044\uff09 -->\n\n<!-- \u78ba\u8a8d\u65b9\u6cd5\uff1aNetwork\u30bf\u30d6\u3067\u30b9\u30c6\u30fc\u30bf\u30b9\u30b3\u30fc\u30c9\u3092\u78ba\u8a8d -->\n<!-- 404\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308c\u3070\u30d1\u30b9\u304c\u9593\u9055\u3044 --><\/code><\/pre>\n<\/div>\n
    Network\u30bf\u30d6\u3067JS\u30d5\u30a1\u30a4\u30eb\u3092\u78ba\u8a8d\u3059\u308b\u306b\u306f\u3001DevTools\u3092\u958b\u3044\u3066Network\u30bf\u30d6\u3092\u30af\u30ea\u30c3\u30af \u2192 \u30da\u30fc\u30b8\u3092\u30ea\u30ed\u30fc\u30c9 \u2192 \u30ea\u30b9\u30c8\u306e\u4e2d\u304b\u3089JS\u30d5\u30a1\u30a4\u30eb\u3092\u63a2\u3057\u3066Status\u304c200\uff08\u6210\u529f\uff09\u304b404\uff08Not Found\uff09\u304b\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002404\u306e\u5834\u5408\u306f\u30d1\u30b9\u3092\u4fee\u6b63\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
    \n
    \u539f\u56e03\uff1a\u30bf\u30a4\u30dd\uff08\u30b9\u30da\u30eb\u30df\u30b9\uff09\u3068\u5927\u6587\u5b57\u30fb\u5c0f\u6587\u5b57\u306e\u9055\u3044<\/h2>\n
    JavaScript\u306f\u5927\u6587\u5b57\u30fb\u5c0f\u6587\u5b57\u3092\u533a\u5225\u3059\u308b\u8a00\u8a9e\u3067\u3059\u3002`getElementById`\u3092`getElementbyId`\u3068\u66f8\u3044\u305f\u308a\u3001\u5909\u6570\u540d\u3092`userName`\u3068`username`\u3067\u63fa\u3089\u304c\u3057\u305f\u308a\u3059\u308b\u3060\u3051\u3067\u52d5\u304b\u306a\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n
    \n
    <script>\n\/\/ NG\u4f8b\uff1a\u30bf\u30a4\u30dd\u306e\u30d1\u30bf\u30fc\u30f3\n\n\/\/ 1. \u30e1\u30bd\u30c3\u30c9\u540d\u306e\u5927\u6587\u5b57\u30df\u30b9\ndocument.getElementbyId('btn'); \/\/ NG: by\u304cBy\u3067\u3042\u308b\u3079\u304d\ndocument.getElementById('btn'); \/\/ OK\n\n\/\/ 2. \u30a4\u30d9\u30f3\u30c8\u540d\u306e\u8aa4\u308a\nbtn.addEventlistener('click', fn); \/\/ NG: listener\u306el\u304c\u5c0f\u6587\u5b57\nbtn.addEventListener('click', fn); \/\/ OK\n\n\/\/ 3. \u5909\u6570\u540d\u306e\u63fa\u3089\u304e\nvar userName = 'Taro';\nconsole.log(username); \/\/ NG: name\u304c\u5c0f\u6587\u5b57 \u2192 ReferenceError\n\n\/\/ 4. \u30bb\u30df\u30b3\u30ed\u30f3\u30fb\u62ec\u5f27\u306e\u5bfe\u5fdc\u30df\u30b9\uff08SyntaxError\uff09\nfunction greet() {\n  console.log('hello')\n\/\/ \u9589\u3058\u62ec\u5f27\u304c\u8db3\u308a\u306a\u3044 \u2192 SyntaxError\n<\/script><\/code><\/pre>\n<\/div>\n
    \u30b3\u30f3\u30bd\u30fc\u30eb\u306b`ReferenceError: xxx is not defined`\u304c\u51fa\u305f\u5834\u5408\u306f\u3001\u5909\u6570\u540d\u30fb\u95a2\u6570\u540d\u306e\u30b9\u30da\u30eb\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002`SyntaxError`\u306e\u5834\u5408\u306f\u3001\u30b3\u30fc\u30c9\u306e\u69cb\u6587\uff08\u62ec\u5f27\u30fb\u30af\u30a9\u30fc\u30c8\u30fb\u30bb\u30df\u30b3\u30ed\u30f3\uff09\u306e\u5bfe\u5fdc\u30df\u30b9\u3092\u7591\u3044\u307e\u3059\u3002<\/p>\n
    \n
    \u539f\u56e04\uff1anull\u53c2\u7167\u30a8\u30e9\u30fc\uff08getElementById\u5931\u6557\uff09<\/h2>\n
    \"null\u306b\u306a\u308b\u539f\u56e0\"<\/figure>\n
    JavaScript\u304c\u52d5\u304b\u306a\u3044\u539f\u56e0\u3067\u7279\u306b\u591a\u3044\u306e\u304c`Cannot read properties of null`\u30a8\u30e9\u30fc\u3067\u3059\u3002`document.getElementById`\u3084`querySelector`\u3067HTML\u8981\u7d20\u3092\u53d6\u5f97\u3057\u3088\u3046\u3068\u3057\u305f\u304c\u3001ID\u3084\u30bb\u30ec\u30af\u30bf\u304c\u4e00\u81f4\u3059\u308b\u8981\u7d20\u304c\u898b\u3064\u304b\u3089\u305a`null`\u304c\u8fd4\u308a\u3001\u305d\u306e`null`\u306b\u5bfe\u3057\u3066\u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3073\u51fa\u3057\u305f\u3053\u3068\u3067\u767a\u751f\u3057\u307e\u3059\u3002<\/p>\n
    \n
    <!-- NG: HTML\u306bid=\"submiy-btn\"\uff08\u30b9\u30da\u30eb\u30df\u30b9\uff09\u304c\u3042\u308b\u306e\u306b -->\n<!-- JS\u5074\u306fid=\"submit-btn\"\u3092\u63a2\u3057\u3066\u3044\u308b -->\n<button id=\"submiy-btn\">\u9001\u4fe1<\/button>\n\n<script>\n\/\/ getElementById('submit-btn')\u306fnull\u3092\u8fd4\u3059\nvar btn = document.getElementById('submit-btn');\nbtn.addEventListener('click', function() { \/\/ TypeError\u304c\u767a\u751f\n  console.log('\u9001\u4fe1');\n});\n<\/script>\n\n<!-- OK: null\u30c1\u30a7\u30c3\u30af\u3092\u5165\u308c\u308b -->\n<script>\nvar btn = document.getElementById('submit-btn');\nif (btn) {\n  btn.addEventListener('click', function() {\n    console.log('\u9001\u4fe1');\n  });\n} else {\n  console.warn('submit-btn \u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093');\n}\n<\/script>\n\n<!-- \u30aa\u30d7\u30b7\u30e7\u30ca\u30eb\u30c1\u30a7\u30fc\u30f3\uff08?.\uff09\u3092\u4f7f\u3046\u65b9\u6cd5\uff08ES2020+\uff09 -->\n<script>\ndocument.getElementById('submit-btn')\n  ?.addEventListener('click', function() {\n    console.log('\u9001\u4fe1');\n  });\n<\/script><\/code><\/pre>\n<\/div>\n
    \n
    \u539f\u56e05\uff1a\u5909\u6570\u30b9\u30b3\u30fc\u30d7\u306e\u554f\u984c<\/h2>\n
    \u5909\u6570\u304c\u3069\u3053\u3067\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u308b\u304b\u306b\u3088\u3063\u3066\u53c2\u7167\u3067\u304d\u308b\u7bc4\u56f2\uff08\u30b9\u30b3\u30fc\u30d7\uff09\u304c\u7570\u306a\u308a\u307e\u3059\u3002\u95a2\u6570\u306e\u5916\u3067\u4f7f\u304a\u3046\u3068\u3057\u305f\u5909\u6570\u304c\u95a2\u6570\u306e\u4e2d\u3067\u3057\u304b\u5ba3\u8a00\u3055\u308c\u3066\u3044\u306a\u3044\u5834\u5408\u3001`ReferenceError`\u304c\u767a\u751f\u3057\u307e\u3059\u3002<\/p>\n
    \n
    <script>\n\/\/ NG: \u95a2\u6570\u5185\u3067\u5ba3\u8a00\u3057\u305f\u5909\u6570\u3092\u5916\u304b\u3089\u53c2\u7167\u3057\u3088\u3046\u3068\u3057\u3066\u3044\u308b\nfunction fetchData() {\n  var result = '\u30c7\u30fc\u30bf\u53d6\u5f97\u5b8c\u4e86';\n}\nfetchData();\nconsole.log(result); \/\/ ReferenceError: result is not defined\n\n\/\/ OK1: \u95a2\u6570\u306e\u5916\u3067\u5ba3\u8a00\u3057\u3066\u304a\u304f\nvar result;\nfunction fetchData() {\n  result = '\u30c7\u30fc\u30bf\u53d6\u5f97\u5b8c\u4e86';\n}\nfetchData();\nconsole.log(result); \/\/ '\u30c7\u30fc\u30bf\u53d6\u5f97\u5b8c\u4e86'\n\n\/\/ OK2: \u623b\u308a\u5024\u3068\u3057\u3066\u53d7\u3051\u53d6\u308b\nfunction fetchData() {\n  return '\u30c7\u30fc\u30bf\u53d6\u5f97\u5b8c\u4e86';\n}\nvar result = fetchData();\nconsole.log(result); \/\/ '\u30c7\u30fc\u30bf\u53d6\u5f97\u5b8c\u4e86'\n\n\/\/ let\u3068const\u306e\u30d6\u30ed\u30c3\u30af\u30b9\u30b3\u30fc\u30d7\u3082\u6ce8\u610f\n{\n  let blockVar = '\u30d6\u30ed\u30c3\u30af\u5185\u306e\u307f';\n  const blockConst = '\u5b9a\u6570';\n}\nconsole.log(blockVar); \/\/ ReferenceError\n<\/script><\/code><\/pre>\n<\/div>\n
    \n
    \u539f\u56e06\uff1a\u975e\u540c\u671f\u51e6\u7406\u306e\u3088\u304f\u3042\u308b\u843d\u3068\u3057\u7a74<\/h2>\n
    fetch\u3084setTimeout\u306a\u3069\u975e\u540c\u671f\u51e6\u7406\u306e\u7d50\u679c\u3092\u540c\u671f\u7684\u306b\u4f7f\u304a\u3046\u3068\u3059\u308b\u30b3\u30fc\u30c9\u306f\u3001\u5024\u304c\u53d6\u5f97\u3055\u308c\u308b\u524d\u306b\u6b21\u306e\u51e6\u7406\u304c\u5b9f\u884c\u3055\u308c\u3066\u3057\u307e\u3044undefined\u306b\u306a\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n
    \n
    <script>\n\/\/ NG: fetch\u306e\u7d50\u679c\u3092\u540c\u671f\u7684\u306b\u53d6\u5f97\u3057\u3088\u3046\u3068\u3057\u3066\u3044\u308b\nvar data;\nfetch('https:\/\/api.example.com\/data')\n  .then(function(res) { return res.json(); })\n  .then(function(json) { data = json; });\n\nconsole.log(data); \/\/ undefined\uff08fetch\u304c\u307e\u3060\u5b8c\u4e86\u3057\u3066\u3044\u306a\u3044\uff09\n\n\/\/ OK1: then\u30c1\u30a7\u30fc\u30f3\u306e\u4e2d\u3067\u51e6\u7406\u3059\u308b\nfetch('https:\/\/api.example.com\/data')\n  .then(function(res) { return res.json(); })\n  .then(function(json) {\n    console.log(json); \/\/ \u3053\u3053\u3067\u51e6\u7406\u3059\u308b\n    updateUI(json);\n  })\n  .catch(function(err) {\n    console.error('\u53d6\u5f97\u30a8\u30e9\u30fc:', err);\n  });\n\n\/\/ OK2: async\/await\u3092\u4f7f\u3046\uff08\u8aad\u307f\u3084\u3059\u3044\uff09\nasync function loadData() {\n  try {\n    var res = await fetch('https:\/\/api.example.com\/data');\n    if (!res.ok) {\n      throw new Error('HTTP\u30a8\u30e9\u30fc: ' + res.status);\n    }\n    var json = await res.json();\n    console.log(json);\n    updateUI(json);\n  } catch (err) {\n    console.error('\u53d6\u5f97\u30a8\u30e9\u30fc:', err);\n  }\n}\n\nloadData();\n<\/script><\/code><\/pre>\n<\/div>\n
    \n
    \u539f\u56e07\uff1a\u30d6\u30e9\u30a6\u30b6\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u554f\u984c<\/h2>\n
    \u30b3\u30fc\u30c9\u3092\u4fee\u6b63\u3057\u305f\u306e\u306b\u53e4\u3044\u52d5\u4f5c\u306e\u307e\u307e\u3068\u3044\u3046\u5834\u5408\u3001\u30d6\u30e9\u30a6\u30b6\u304c\u30ad\u30e3\u30c3\u30b7\u30e5\u3057\u305f\u53e4\u3044JS\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002\u30cf\u30fc\u30c9\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5\u3067\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u7121\u8996\u3057\u3066\u518d\u8aad\u307f\u8fbc\u307f\u3057\u307e\u3059\u3002<\/p>\n\n\n\n\n\n\n\n\n
    OS<\/th>\n\u30cf\u30fc\u30c9\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5<\/th>\n<\/tr>\n<\/thead>\n
    Windows Chrome\/Edge<\/td>\nCtrl + Shift + R<\/td>\n<\/tr>\n
    Mac Chrome\/Edge<\/td>\nCommand + Shift + R<\/td>\n<\/tr>\n
    Windows Firefox<\/td>\nCtrl + F5<\/td>\n<\/tr>\n
    Mac Safari<\/td>\nCommand + Option + R<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u958b\u767a\u4e2d\u306fDevTools\u3092\u958b\u3044\u305f\u72b6\u614b\u3067Network\u30bf\u30d6\u306e\u300c\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u7121\u52b9\u5316\u300d\uff08Disable cache\uff09\u306b\u30c1\u30a7\u30c3\u30af\u3092\u5165\u308c\u3066\u304a\u304f\u3068\u3001\u5e38\u306b\u6700\u65b0\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3081\u307e\u3059\u3002\u672c\u756a\u74b0\u5883\u3067\u306fJS\u30d5\u30a1\u30a4\u30eb\u306eURL\u306b\u30d0\u30fc\u30b8\u30e7\u30f3\u30af\u30a8\u30ea\u3092\u4ed8\u3051\u308b\u3053\u3068\u3067\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u7834\u68c4\u3067\u304d\u307e\u3059\u3002<\/p>\n
    \n
    <!-- \u30af\u30a8\u30ea\u30d1\u30e9\u30e1\u30fc\u30bf\u3067\u30ad\u30e3\u30c3\u30b7\u30e5\u30d0\u30b9\u30c6\u30a3\u30f3\u30b0 -->\n<script src=\"main.js?v=20260728\"><\/script>\n\n<!-- \u30c7\u30d7\u30ed\u30a4\u3054\u3068\u306b\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u5909\u3048\u308b\u3068\u53e4\u3044\u30ad\u30e3\u30c3\u30b7\u30e5\u304c\u4f7f\u308f\u308c\u306a\u304f\u306a\u308b -->\n<script src=\"main.js?v=20260729\"><\/script><\/code><\/pre>\n<\/div>\n
    \n
    \u30c7\u30d0\u30c3\u30b0\u306e\u4f53\u7cfb\u7684\u306a\u624b\u9806<\/h2>\n
    \"\u539f\u56e0\u5207\u308a\u5206\u3051\u306e5\u624b\u9806\"<\/figure>\n
    JavaScript\u304c\u52d5\u304b\u306a\u3044\u3068\u304d\u306b\u52b9\u7387\u3088\u304f\u539f\u56e0\u3092\u7279\u5b9a\u3059\u308b\u305f\u3081\u306e\u624b\u9806\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n
    Step1\uff1a\u30b3\u30f3\u30bd\u30fc\u30eb\u30a8\u30e9\u30fc\u3092\u78ba\u8a8d\u3059\u308b<\/h3>\n
    \u307e\u305a\u958b\u767a\u8005\u30c4\u30fc\u30eb\u306eConsole\u30bf\u30d6\u3092\u958b\u304d\u3001\u8d64\u5b57\u306e\u30a8\u30e9\u30fc\u304c\u306a\u3044\u304b\u78ba\u8a8d\u3057\u307e\u3059\u3002\u30a8\u30e9\u30fc\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308c\u3070\u3001\u30a8\u30e9\u30fc\u540d\u3068\u884c\u756a\u53f7\u304b\u3089\u539f\u56e0\u3092\u7279\u5b9a\u3057\u307e\u3059\u3002\u30a8\u30e9\u30fc\u304c\u306a\u304f\u52d5\u304b\u306a\u3044\u5834\u5408\u306fStep2\u306b\u9032\u307f\u307e\u3059\u3002<\/p>\n
    Step2\uff1aconsole.log\u3067\u5024\u3092\u8ffd\u3046<\/h3>\n
    `console.log`\u306f\u6700\u3082\u57fa\u672c\u7684\u306a\u30c7\u30d0\u30c3\u30b0\u624b\u6bb5\u3067\u3059\u3002\u51e6\u7406\u306e\u5404\u30dd\u30a4\u30f3\u30c8\u3067\u5909\u6570\u306e\u5024\u3092\u51fa\u529b\u3057\u3001\u671f\u5f85\u901a\u308a\u306e\u5024\u304c\u5165\u3063\u3066\u3044\u308b\u304b\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n
    \n
    <script>\nfunction processData(input) {\n  console.log('1. input:', input); \/\/ \u5f15\u6570\u3092\u78ba\u8a8d\n\n  var trimmed = input.trim();\n  console.log('2. trimmed:', trimmed);\n\n  if (trimmed === '') {\n    console.log('3. \u7a7a\u306e\u5165\u529b \u2192 \u51e6\u7406\u4e2d\u65ad');\n    return;\n  }\n\n  var result = trimmed.toUpperCase();\n  console.log('4. result:', result);\n\n  return result;\n}\n\nvar btn = document.getElementById('btn');\nconsole.log('btn\u8981\u7d20:', btn); \/\/ null\u78ba\u8a8d\n\nbtn?.addEventListener('click', function() {\n  var input = document.getElementById('input-field')?.value;\n  console.log('input-field\u5024:', input);\n  var output = processData(input);\n  console.log('\u6700\u7d42\u51fa\u529b:', output);\n});\n<\/script><\/code><\/pre>\n<\/div>\n
    Step3\uff1adebugger\u6587\u3067\u30d6\u30ec\u30fc\u30af\u30dd\u30a4\u30f3\u30c8\u3092\u8a2d\u5b9a<\/h3>\n
    \u30b3\u30fc\u30c9\u306e\u7279\u5b9a\u306e\u5834\u6240\u3067\u5b9f\u884c\u3092\u4e00\u6642\u505c\u6b62\u3057\u3066\u3001\u305d\u306e\u6642\u70b9\u306e\u5909\u6570\u306e\u72b6\u614b\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002`debugger`\u3068\u66f8\u304f\u3060\u3051\u3067\u3001DevTools\u304c\u958b\u3044\u3066\u3044\u308b\u72b6\u614b\u3067\u305d\u306e\u884c\u3067\u5b9f\u884c\u304c\u6b62\u307e\u308a\u307e\u3059\u3002<\/p>\n
    \n
    <script>\nfunction calculateTotal(items) {\n  debugger; \/\/ \u3053\u3053\u3067\u5b9f\u884c\u304c\u4e00\u6642\u505c\u6b62\u3059\u308b\uff08DevTools\u304c\u958b\u3044\u3066\u3044\u308b\u5834\u5408\uff09\n  var total = 0;\n  for (var i = 0; i < items.length; i++) {\n    debugger; \/\/ \u30eb\u30fc\u30d7\u5185\u3067\u3082\u78ba\u8a8d\u3067\u304d\u308b\n    total += items[i].price;\n  }\n  return total;\n}\n\n\/\/ DevTools\u306eSources\u30bf\u30d6\u3067\u30b9\u30c6\u30c3\u30d7\u5b9f\u884c\u3057\u3066\u5909\u6570\u3092\u78ba\u8a8d\u3059\u308b\ncalculateTotal([\n  { name: '\u5546\u54c1A', price: 1000 },\n  { name: '\u5546\u54c1B', price: 2500 }\n]);\n<\/script><\/code><\/pre>\n<\/div>\n
    Step4\uff1aNetwork\u30bf\u30d6\u3067\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u78ba\u8a8d<\/h3>\n
    \u5916\u90e8API\u3084\u30d5\u30a1\u30a4\u30eb\u306e\u8aad\u307f\u8fbc\u307f\u306b\u554f\u984c\u304c\u3042\u308b\u5834\u5408\u306fNetwork\u30bf\u30d6\u3092\u4f7f\u3044\u307e\u3059\u3002\u30da\u30fc\u30b8\u3092\u30ea\u30ed\u30fc\u30c9\u3057\u3066Network\u30bf\u30d6\u3092\u958b\u304d\u3001\u5404\u30ea\u30af\u30a8\u30b9\u30c8\u306eStatus\u3068Response\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n