{"id":450,"date":"2022-08-25T20:17:23","date_gmt":"2022-09-19T06:34:32","guid":{"rendered":"https:\/\/www.silicloud.com\/ja\/blog\/index.php\/2023\/11\/30\/web-workers%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6cpu%e3%81%ab%e8%b2%a0%e8%8d%b7%e3%81%ae%e3%81%8b%e3%81%8b%e3%82%8b%e3%82%bf%e3%82%b9%e3%82%af%e3%82%92%e5%87%a6%e7%90%86%e3%81%99%e3%82%8b\/"},"modified":"2025-07-31T23:41:38","modified_gmt":"2025-07-31T14:41:38","slug":"web-workers%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6cpu%e3%81%ab%e8%b2%a0%e8%8d%b7%e3%81%ae%e3%81%8b%e3%81%8b%e3%82%8b%e3%82%bf%e3%82%b9%e3%82%af%e3%82%92%e5%87%a6%e7%90%86%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/ja\/blog\/web-workers%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6cpu%e3%81%ab%e8%b2%a0%e8%8d%b7%e3%81%ae%e3%81%8b%e3%81%8b%e3%82%8b%e3%82%bf%e3%82%b9%e3%82%af%e3%82%92%e5%87%a6%e7%90%86%e3%81%99%e3%82%8b\/","title":{"rendered":"Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u306e\u65b9\u6cd5"},"content":{"rendered":"<p>\u8457\u8005\u306f\u3001Girls Who Code \u3092\u300cWrite for Donations\uff08\u5bc4\u4ed8\u306e\u305f\u3081\u306e\u57f7\u7b46\u6d3b\u52d5\uff09\u300d\u30d7\u30ed\u30b0\u30e9\u30e0\u306e\u4e00\u74b0\u3068\u3057\u3066\u5bc4\u4ed8\u306e\u53d7\u53d6\u5148\u306b\u9078\u3073\u307e\u3057\u305f\u3002<\/p>\n<h3>\u30a4\u30f3\u30c8\u30ed\u30c0\u30af\u30b7\u30e7\u30f3<\/h3>\n<p>\u65e5\u672c\u8a9e\u3067\u306f\u6b21\u306e\u3088\u3046\u306b\u8868\u73fe\u3067\u304d\u307e\u3059\uff1a<br \/>\nJavaScript\u306f\u4e00\u8cab\u6027\u306e\u3042\u308b\u30b9\u30ec\u30c3\u30c91\u3064\u3060\u3051\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u304b\u3089\u3001\u901a\u5e38\u300c\u30b7\u30f3\u30b0\u30eb\u30b9\u30ec\u30c3\u30c9\u8a00\u8a9e\u300d\u3068\u547c\u3070\u308c\u307e\u3059\u3002\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30b3\u30fc\u30c9\u306f\u4e00\u9023\u306e\u9806\u756a\u30671\u3064\u306e\u30b9\u30ec\u30c3\u30c9\u3067\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002\u8907\u6570\u306e\u30b3\u30a2\u3092\u6301\u3064\u30c7\u30d0\u30a4\u30b9\u3067\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u3044\u308b\u5834\u5408\u3001JavaScript\u306f1\u3064\u306e\u30b3\u30a2\u3057\u304b\u4f7f\u7528\u3057\u307e\u305b\u3093\u3002\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3067\u30bf\u30b9\u30af\u304c\u5b9f\u884c\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u3001\u6b21\u306b\u304f\u308b\u30bf\u30b9\u30af\u306f\u30bf\u30b9\u30af\u304c\u5b8c\u4e86\u3059\u308b\u307e\u3067\u5f85\u305f\u306a\u3051\u308c\u3070\u306a\u308a\u307e\u305b\u3093\u3002\u30bf\u30b9\u30af\u304c\u6642\u9593\u304c\u304b\u304b\u308b\u3068\u3001\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3092\u30d6\u30ed\u30c3\u30af\u3057\u3001\u6b8b\u308a\u306e\u30bf\u30b9\u30af\u306e\u5b9f\u884c\u304c\u3067\u304d\u306a\u304f\u306a\u308a\u307e\u3059\u3002\u4e00\u90e8\u306e\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u30bf\u30b9\u30af\u306f\u3001CPU\u3092\u591a\u304f\u4f7f\u7528\u3059\u308b\u30bf\u30b9\u30af\u3067\u3042\u308a\u3001CPU\u306e\u51e6\u7406\u8ca0\u8377\u304c\u9ad8\u3044\u30bf\u30b9\u30af\u3067\u3059\u3002\u4f8b\u3048\u3070\u3001\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u51e6\u7406\u3001\u6570\u5024\u8a08\u7b97\u3001\u30d3\u30c7\u30aa\u3084\u753b\u50cf\u306e\u5727\u7e2e\u306a\u3069\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>CPU\u306b\u4f9d\u5b58\u3057\u305f\u30bf\u30b9\u30af\u306b\u52a0\u3048\u3066\u3001\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u3057\u306a\u3044I\/O\u306b\u4f9d\u5b58\u3057\u305f\u30bf\u30b9\u30af\u3082\u3042\u308a\u307e\u3059\u3002\u3053\u308c\u3089\u306eI\/O\u306b\u4f9d\u5b58\u3057\u305f\u30bf\u30b9\u30af\u306f\u3001\u4e3b\u306b\u30aa\u30da\u30ec\u30fc\u30c6\u30a3\u30f3\u30b0\u30b7\u30b9\u30c6\u30e0(OS)\u3078\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u767a\u884c\u3068\u5fdc\u7b54\u306e\u5f85\u6a5f\u306b\u6642\u9593\u3092\u8cbb\u3084\u3057\u307e\u3059\u3002\u4f8b\u3048\u3070\u3001Fetch API\u304c\u30b5\u30fc\u30d0\u30fc\u306b\u884c\u3046\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u30ea\u30af\u30a8\u30b9\u30c8\u3067\u3059\u3002Fetch API\u3092\u4f7f\u7528\u3057\u3066\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u30ea\u30bd\u30fc\u30b9\u3092\u53d6\u5f97\u3059\u308b\u5834\u5408\u3001\u30aa\u30da\u30ec\u30fc\u30c6\u30a3\u30f3\u30b0\u30b7\u30b9\u30c6\u30e0\u304c\u30bf\u30b9\u30af\u3092\u5f15\u304d\u7d99\u304e\u3001Fetch API\u306fOS\u306e\u5fdc\u7b54\u3092\u5f85\u3061\u307e\u3059\u3002\u3053\u306e\u9593\u3001Fetch API\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306f\u30ad\u30e5\u30fc\u306b\u30aa\u30d5\u30ed\u30fc\u30c9\u3055\u308c\u3001OS\u306e\u5fdc\u7b54\u3092\u5f85\u6a5f\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u304c\u89e3\u653e\u3055\u308c\u3001\u4ed6\u306e\u5f8c\u7d9a\u306e\u30bf\u30b9\u30af\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u5fdc\u7b54\u304c\u53d7\u4fe1\u3055\u308c\u308b\u3068\u3001Fetch API\u306e\u547c\u3073\u51fa\u3057\u306b\u95a2\u9023\u3059\u308b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u304c\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u4e0a\u3067\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002I\/O\u306b\u4f9d\u5b58\u3057\u305f\u30bf\u30b9\u30af\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306f\u3001\u30aa\u30da\u30ec\u30fc\u30c6\u30a3\u30f3\u30b0\u30b7\u30b9\u30c6\u30e0\u304c\u30bf\u30b9\u30af\u3092\u5b8c\u4e86\u3059\u308b\u306e\u306b\u304b\u304b\u308b\u6642\u9593\u306b\u4f9d\u5b58\u3059\u308b\u305f\u3081\u3001Fetch\u306e\u3088\u3046\u306a\u307b\u3068\u3093\u3069\u306eI\/O\u306b\u4f9d\u5b58\u3057\u305f\u30bf\u30b9\u30af\u306f\u3001\u30d7\u30ed\u30df\u30b9\u3092\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3059\u3002\u30d7\u30ed\u30df\u30b9\u306f\u3001\u30bf\u30b9\u30af\u304c\u5b8c\u4e86\u3057\u5fdc\u7b54\u3092\u8fd4\u3059\u3068\u304d\u306b\u5b9f\u884c\u3055\u308c\u308b\u3079\u304d\u95a2\u6570\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n<p>\u305d\u306e\u4e00\u65b9\u3067\u3001I\/O \u30d0\u30a6\u30f3\u30c9\u306e\u30bf\u30b9\u30af\u306f OS \u306e\u5fdc\u7b54\u3092\u5f85\u3064\u305f\u3081\u306b\u30a2\u30a4\u30c9\u30eb\u72b6\u614b\u306b\u306a\u308a\u307e\u3059\u304c\u3001CPU \u30d0\u30a6\u30f3\u30c9\u306e\u30bf\u30b9\u30af\u306f\u30bf\u30b9\u30af\u306e\u5b8c\u4e86\u307e\u3067 CPU \u3092\u5360\u6709\u3057\u3001\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3092\u30d6\u30ed\u30c3\u30af\u3057\u307e\u3059\u3002\u3053\u308c\u3089\u3092\u30d7\u30ed\u30df\u30b9\u3067\u30e9\u30c3\u30d7\u3057\u3066\u3082\u3001\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u306f\u4f9d\u7136\u3068\u3057\u3066\u30d6\u30ed\u30c3\u30af\u3055\u308c\u307e\u3059\u3002\u3055\u3089\u306b\u3001\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u306e\u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\uff08UI\uff09\u304c\u30d5\u30ea\u30fc\u30ba\u3057\u3001JavaScript \u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u3082\u306e\u304c\u6a5f\u80fd\u3057\u306a\u304f\u306a\u308b\u305f\u3081\u3001\u30e6\u30fc\u30b6\u30fc\u306f\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u304c\u30d6\u30ed\u30c3\u30af\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u306b\u6c17\u4ed8\u304f\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u554f\u984c\u306e\u89e3\u6c7a\u7b56\u3068\u3057\u3066\u3001\u30d6\u30e9\u30a6\u30b6\u306fWeb Workers API\u3092\u5c0e\u5165\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u5185\u3067\u30de\u30eb\u30c1\u30b9\u30ec\u30c3\u30c9\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u307e\u3057\u305f\u3002Web Workers\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001CPU\u8ca0\u8377\u306e\u9ad8\u3044\u30bf\u30b9\u30af\u3092\u5225\u306e\u30b9\u30ec\u30c3\u30c9\u306b\u30aa\u30d5\u30ed\u30fc\u30c9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u3001\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3092\u89e3\u653e\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u306fJavaScript\u30b3\u30fc\u30c9\u30921\u3064\u306e\u30c7\u30d0\u30a4\u30b9\u30b3\u30a2\u4e0a\u3067\u5b9f\u884c\u3057\u3001\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u30aa\u30d5\u30ed\u30fc\u30c9\u3055\u308c\u305f\u30bf\u30b9\u30af\u306f\u5225\u306e\u30b3\u30a2\u4e0a\u3067\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002\u4e21\u65b9\u306e\u30b9\u30ec\u30c3\u30c9\u306f\u30e1\u30c3\u30bb\u30fc\u30b8\u30d1\u30c3\u30b7\u30f3\u30b0\u3092\u901a\u3058\u3066\u901a\u4fe1\u3057\u3001\u30c7\u30fc\u30bf\u3092\u5171\u6709\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3092\u30d6\u30ed\u30c3\u30af\u3059\u308bCPU\u30d0\u30a6\u30f3\u30c9\u30bf\u30b9\u30af\u3092\u4f5c\u6210\u3057\u3001\u305d\u308c\u304c\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u306b\u3069\u306e\u3088\u3046\u306b\u5f71\u97ff\u3092\u4e0e\u3048\u308b\u304b\u3092\u89b3\u5bdf\u3057\u307e\u3059\u3002\u305d\u3057\u3066\u3001\u30d7\u30ed\u30df\u30b9\u3092\u4f7f\u7528\u3057\u3066CPU\u30d0\u30a6\u30f3\u30c9\u30bf\u30b9\u30af\u3092\u975e\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u306b\u3059\u308b\u8a66\u307f\u306f\u5931\u6557\u3057\u307e\u3059\u3002\u6700\u5f8c\u306b\u3001\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3092\u30d6\u30ed\u30c3\u30af\u305b\u305a\u306bCPU\u30d0\u30a6\u30f3\u30c9\u30bf\u30b9\u30af\u3092\u5225\u306e\u30b9\u30ec\u30c3\u30c9\u306b\u30aa\u30d5\u30ed\u30fc\u30c9\u3059\u308b\u305f\u3081\u306b\u3001\u30a6\u30a7\u30d6\u30ef\u30fc\u30ab\u30fc\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<h2>\u524d\u63d0\u6761\u4ef6<\/h2>\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306b\u5f93\u3046\u305f\u3081\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u3082\u306e\u304c\u5fc5\u8981\u3067\u3059.<\/p>\n<ul class=\"post-ul\">\n<li>A machine with two or more cores with a modern web browser installed.<\/li>\n<li>A local Node.js environment on your system, which you can setup with How To Install Node.js on Ubuntu 22.04. On other operating systems, follow the appropriate guide on How To Install Node.js and Create a Local Development Environment.<\/li>\n<li>Knowledge of the event loop, callbacks, and Promises, which you can learn by reading Understanding the Event Loop, Callbacks, Promises, and Async\/Await in JavaScript.<\/li>\n<li>You will also need a basic knowledge of HTML, CSS, and JavaScript, which you can find in our How To Build a Website With HTML series, How To Build a Website With CSS series, and in How To Code in JavaScript.<\/li>\n<\/ul>\n<h2>\u30b9\u30c6\u30c3\u30d71 \u2013 \u30a6\u30a7\u30d6\u30ef\u30fc\u30ab\u30fc\u3092\u4f7f\u308f\u305a\u306bCPU\u8ca0\u8377\u306e\u3042\u308b\u30bf\u30b9\u30af\u3092\u4f5c\u6210\u3059\u308b<\/h2>\n<p>\u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u306eCPU\u30d0\u30a6\u30f3\u30c9\u30bf\u30b9\u30af\u3068\u975e\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u30bf\u30b9\u30af\u304c\u542b\u307e\u308c\u305f\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u3053\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u306f3\u3064\u306e\u30dc\u30bf\u30f3\u304c\u3042\u308a\u307e\u3059\u3002\u6700\u521d\u306e\u30dc\u30bf\u30f3\u306f\u3001\u7d0450\u5104\u4ef6\u306e\u7e70\u308a\u8fd4\u3057\u3092\u884c\u3046for\u30eb\u30fc\u30d7\u3067\u3042\u308b\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u30bf\u30b9\u30af\u3092\u958b\u59cb\u3057\u307e\u3059\u30022\u756a\u76ee\u306e\u30dc\u30bf\u30f3\u306f\u3001\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u4e0a\u306e\u5024\u3092\u5897\u3084\u3057\u30013\u756a\u76ee\u306e\u30dc\u30bf\u30f3\u306f\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u306e\u80cc\u666f\u8272\u3092\u5909\u66f4\u3057\u307e\u3059\u3002\u5024\u3092\u5897\u3084\u3059\u30dc\u30bf\u30f3\u3068\u80cc\u666f\u8272\u3092\u5909\u66f4\u3059\u308b\u30dc\u30bf\u30f3\u306f\u975e\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u3067\u3059\u3002<\/p>\n<p>\u59cb\u3081\u306b\u3001mkdir\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">mkdir<\/span> <mark>workers_demo<\/mark><\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>cd\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u3063\u3066\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token builtin class-name\">cd<\/span> <mark>workers_demo<\/mark><\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>nano\u3084\u304a\u6c17\u306b\u5165\u308a\u306e\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u3092\u4f7f\u7528\u3057\u3066\u3001index.html\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">nano<\/span> index.html<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u300cindex.html\u300d\u30d5\u30a1\u30a4\u30eb\u306b\u306f\u3001\u6b21\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u3001\u30dc\u30bf\u30f3\u3068\u51fa\u529b\u3092\u8868\u793a\u3059\u308b\u300cdiv\u300d\u8981\u7d20\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u30ef\u30fc\u30ab\u30fc\u306e\u30c7\u30e2\/index.html<\/div>\n<pre class=\"post-pre\"><code><span class=\"token doctype\"><span class=\"token punctuation\">&lt;!<\/span><span class=\"token doctype-tag\">DOCTYPE<\/span> <span class=\"token name\">html<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>html<\/span> <span class=\"token attr-name\">lang<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>en<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta<\/span> <span class=\"token attr-name\">charset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>UTF-8<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta<\/span> <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>viewport<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">content<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>width=device-width, initial-scale=1.0<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>title<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Web Workers<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>title<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>stylesheet<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>main.css<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>head<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>body<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>wrapper<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>total-count<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>buttons<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>btn btn-blocking<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>blockbtn<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Blocking Task<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>btn btn-nonblocking<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>incrementbtn<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Increment<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>btn btn-nonblocking<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>changebtn<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n          Change Background\r\n        <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>output<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>main.js<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>body<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>html<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<\/code><\/pre>\n<p>\u30d8\u30c3\u30c0\u30fc\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001main.css\u306e\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3092\u53c2\u7167\u3057\u3001\u30a2\u30d7\u30ea\u306e\u30b9\u30bf\u30a4\u30eb\u304c\u542b\u307e\u308c\u307e\u3059\u3002\u30dc\u30c7\u30a3\u30bf\u30b0\u3067\u306f\u3001total-count\u3068\u3044\u3046\u30af\u30e9\u30b9\u3092\u6301\u3064div\u8981\u7d20\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002\u3053\u306e\u8981\u7d20\u306b\u306f\u3001\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u308b\u305f\u3073\u306b\u5897\u52a0\u3059\u308b\u5024\u304c\u542b\u307e\u308c\u307e\u3059\u3002\u6b21\u306b\u30013\u3064\u306e\u30dc\u30bf\u30f3\u8981\u7d20\u3092\u5b50\u8981\u7d20\u3068\u3057\u3066\u6301\u3064\u5225\u306ediv\u8981\u7d20\u304c\u4f5c\u6210\u3055\u308c\u307e\u3059\u3002\u6700\u521d\u306e\u30dc\u30bf\u30f3\u306f\u3001\u30d6\u30ed\u30c3\u30af\u3059\u308bCPU\u96c6\u7d04\u578b\u306e\u30bf\u30b9\u30af\u3092\u958b\u59cb\u3057\u307e\u3059\u30022\u756a\u76ee\u306e\u30dc\u30bf\u30f3\u3067\u306f\u3001total-count\u30af\u30e9\u30b9\u3092\u6301\u3064div\u8981\u7d20\u306e\u5024\u304c\u5897\u52a0\u3057\u30013\u756a\u76ee\u306e\u30dc\u30bf\u30f3\u3067\u306fJavaScript\u30b3\u30fc\u30c9\u304c\u5b9f\u884c\u3055\u308c\u3066\u80cc\u666f\u8272\u304c\u5909\u66f4\u3055\u308c\u307e\u3059\u3002\u3053\u308c\u30892\u3064\u306e\u30bf\u30b9\u30af\u306f\u3001\u975e\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u3067\u3059\u3002<\/p>\n<p>\u6b21\u306ediv\u8981\u7d20\u306b\u306f\u3001CPU\u306b\u8ca0\u8377\u3092\u304b\u3051\u308b\u30bf\u30b9\u30af\u306e\u51fa\u529b\u304c\u542b\u307e\u308c\u307e\u3059\u3002\u6700\u5f8c\u306b\u3001body\u30bf\u30b0\u306e\u7d42\u308f\u308a\u306e\u524d\u306b\u3001JavaScript\u30b3\u30fc\u30c9\u304c\u542b\u307e\u308c\u3066\u3044\u308bmain.js\u30d5\u30a1\u30a4\u30eb\u3092\u53c2\u7167\u3057\u307e\u3059\u3002<\/p>\n<p>\u8981\u7d20\u306b\u306fID\u3068\u30af\u30e9\u30b9\u304c\u3042\u308b\u3053\u3068\u306b\u6c17\u4ed8\u304f\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002\u3053\u306e\u30b9\u30c6\u30c3\u30d7\u306e\u5f8c\u3067\u3001JavaScript\u3067\u8981\u7d20\u3092\u53c2\u7167\u3059\u308b\u305f\u3081\u306b\u305d\u308c\u3089\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<p>\u4eca\u3001\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u7d42\u4e86\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u30e1\u30a4\u30f3.css\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3001\u958b\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">nano<\/span> main.css<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u30e1\u30a4\u30f3\u306e main.css \u30d5\u30a1\u30a4\u30eb\u306b\u3001\u6b21\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8ffd\u52a0\u3057\u3066\u8981\u7d20\u3092\u30b9\u30bf\u30a4\u30eb\u5316\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u30ef\u30fc\u30ab\u30fc\u306e\u30c7\u30e2\uff0f\u30e1\u30a4\u30f3.css<\/div>\n<pre class=\"post-pre\"><code><span class=\"token selector\">body<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.wrapper<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">max-width<\/span><span class=\"token punctuation\">:<\/span> 600px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> 0 auto<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">.total-count<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> 34px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 32px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">text-align<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.buttons<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> 1px solid green<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 1rem<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.btn<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 1rem<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.btn-blocking<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #f44336<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">#changebtn<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #4caf50<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<\/code><\/pre>\n<p>\u30dc\u30bf\u30f3\u306f\u3001\u30bd\u30ea\u30c3\u30c9\u306a\u7dd1\u8272\u306e\u67a0\u7dda\u3068\u8584\u3044\u30d1\u30c7\u30a3\u30f3\u30b0\u3067\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u3057\u304b\u3057\u3001\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u30bf\u30b9\u30af\u306f\u3001\u7570\u306a\u308b\u80cc\u666f\u8272\u3092\u4f7f\u7528\u3059\u308b .btn-blocking \u30b9\u30bf\u30a4\u30eb\u3067\u3055\u3089\u306b\u5b9a\u7fa9\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>CSS\u30b9\u30bf\u30a4\u30eb\u3092\u5b9a\u7fa9\u3057\u305f\u3089\u3001HTML\u8981\u7d20\u3092\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306b\u3059\u308b\u305f\u3081\u306bJavaScript\u30b3\u30fc\u30c9\u3092\u66f8\u304d\u307e\u3059\u3002\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u7d42\u4e86\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u30a8\u30c7\u30a3\u30bf\u3067main.js\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">nano<\/span> main.js<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u30e1\u30a4\u30f3\u306ejs\u30d5\u30a1\u30a4\u30eb\u306b\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u3001DOM\u8981\u7d20\u3092\u53c2\u7167\u3059\u308b\u3002<\/p>\n<div>\u30ef\u30fc\u30ab\u30fc\u30ba\u30c7\u30e2\/main.js<\/div>\n<pre class=\"post-pre\"><code><span class=\"token keyword\">const<\/span> blockingBtn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"blockbtn\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> incrementBtn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"incrementbtn\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> changeColorBtn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"changebtn\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> output <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\".output\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> totalCountEl <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\".total-count\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<\/code><\/pre>\n<p>\u6700\u521d\u306e3\u884c\u3067\u306f\u3001document\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306egetElementByID\uff08\uff09\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001\u30dc\u30bf\u30f3\u306eID\u3092\u53c2\u7167\u3057\u3066\u3044\u307e\u3059\u3002\u6700\u5f8c\u306e2\u884c\u3067\u306f\u3001document\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306equerySelector\uff08\uff09\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u3001div\u8981\u7d20\u306e\u30af\u30e9\u30b9\u540d\u3092\u53c2\u7167\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u6b21\u306b\u3001incrementBtn\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u6642\u306bdiv\u8981\u7d20\u306e\u5024\u3092\u5897\u3084\u3059\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3092\u5b9a\u7fa9\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u52b4\u50cd\u8005\u306e\u30c7\u30e2\u30f3\u30b9\u30c8\u30ec\u30fc\u30b7\u30e7\u30f3\/main.js<\/div>\n<pre class=\"post-pre\"><code><span class=\"token operator\">...<\/span>\r\ntotalCountEl<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\nincrementBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">incrementValue<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">let<\/span> counter <span class=\"token operator\">=<\/span> totalCountEl<span class=\"token punctuation\">.<\/span>textContent<span class=\"token punctuation\">;<\/span>\r\n  counter<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\r\n  totalCountEl<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> counter<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<\/code><\/pre>\n<p>\u307e\u305a\u3001totalCountEl\u8981\u7d20\u306e\u30c6\u30ad\u30b9\u30c8\u30b3\u30f3\u30c6\u30f3\u30c4\u30920\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u305d\u3057\u3066\u3001DOM\u306eaddEventListener()\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066incrementBtn\u30dc\u30bf\u30f3\u306b\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3092\u4ed8\u3051\u307e\u3059\u3002\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u306f2\u3064\u306e\u5f15\u6570\u3092\u53d6\u308a\u307e\u3059\uff1a\u30ea\u30b9\u30f3\u3059\u308b\u30a4\u30d9\u30f3\u30c8\u3068\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3067\u3059\u3002\u3053\u3053\u3067\u306f\u3001\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u306f\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u3092\u30ea\u30b9\u30f3\u3057\u3001\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u304c\u767a\u751f\u3057\u305f\u6642\u306bincrementValue()\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u547c\u3073\u51fa\u3057\u307e\u3059\u3002<\/p>\n<p>incrementValue()\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u5185\u3067\u3001DOM\u304b\u3089totalCountEl\u306e\u30c6\u30ad\u30b9\u30c8\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u5024\u3092\u53d6\u5f97\u3057\u3001\u305d\u308c\u3092\u30ab\u30a6\u30f3\u30bf\u30fc\u5909\u6570\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u305d\u306e\u5f8c\u3001\u5024\u30921\u5897\u3084\u3057\u3066\u3001totalCountEl\u8981\u7d20\u306e\u30c6\u30ad\u30b9\u30c8\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u5897\u3084\u3057\u305f\u5024\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p>\u6b21\u306b\u3001\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092changeColorBtn\u30dc\u30bf\u30f3\u306b\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u3001\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3068\u304d\u306b\u80cc\u666f\u8272\u304c\u30e9\u30f3\u30c0\u30e0\u306b\u5909\u66f4\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n<div>\u30ef\u30fc\u30ab\u30fc\u30ba\u30c7\u30e2\/\u30e1\u30a4\u30f3.js<\/div>\n<pre class=\"post-pre\"><code><span class=\"token operator\">...<\/span>\r\nchangeColorBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">changeBackgroundColor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  colors <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">\"#009688\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\"#ffc107\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\"#dadada\"<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token keyword\">const<\/span> randomIndex <span class=\"token operator\">=<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> colors<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">)<\/span>\r\n  <span class=\"token keyword\">const<\/span> randomColor <span class=\"token operator\">=<\/span> colors<span class=\"token punctuation\">[<\/span>randomIndex<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n  document<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>background <span class=\"token operator\">=<\/span> randomColor<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<\/code><\/pre>\n<p>\u524d\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u304cchangeColorBtn\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306b\u3001changeBackgroundColor\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u5b9f\u884c\u3059\u308b\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3067\u306f\u3001colors\u5909\u6570\u30923\u3064\u306eHEX\u30ab\u30e9\u30fc\u5024\u306e\u914d\u5217\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u305d\u3057\u3066\u3001Math.random()\u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3073\u51fa\u3057\u3001\u305d\u306e\u7d50\u679c\u3092\u914d\u5217\u306e\u9577\u3055\u306e\u5024\u3068\u4e57\u7b97\u3057\u3066\u30010\u304b\u3089\u914d\u5217\u306e\u8981\u7d20\u65703\u307e\u3067\u306e\u30e9\u30f3\u30c0\u30e0\u306a\u6570\u5024\u3092\u751f\u6210\u3057\u307e\u3059\u3002\u305d\u306e\u30e9\u30f3\u30c0\u30e0\u306a\u5024\u306f\u3001Math.Floor()\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u6700\u3082\u8fd1\u3044\u6574\u6570\u306b\u4e38\u3081\u3089\u308c\u3001randomIndex\u5909\u6570\u306b\u683c\u7d0d\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u305d\u306e\u5f8c\u3001\u30e9\u30f3\u30c0\u30e0\u306a\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u3092\u4f7f\u7528\u3057\u3066\u914d\u5217\u304b\u3089\u5024\u3092\u9078\u629e\u3057\u3001\u305d\u308c\u3092\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306ebody.style.background\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p>\u3042\u306a\u305f\u304c\u975e\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u30bf\u30b9\u30af\u3092\u5b9f\u884c\u3059\u308b2\u3064\u306e\u30dc\u30bf\u30f3\u3092\u5b9f\u88c5\u3057\u305f\u306e\u3067\u3001\u6b8b\u308a\u306e\u30dc\u30bf\u30f3\u306b\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3092\u8ffd\u52a0\u3057\u3066\u3001CPU\u3092\u4f7f\u7528\u3059\u308b\u30bf\u30b9\u30af\u3092\u958b\u59cb\u3057\u307e\u3059\u3002\u30eb\u30fc\u30d7\u306f50\u5104\u56de\u7e70\u308a\u8fd4\u3055\u308c\u3001\u305d\u306e\u7d50\u679c\u306fDOM\u306b\u4fdd\u5b58\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u307e\u3060main.js\u30d5\u30a1\u30a4\u30eb\u306b\u3044\u308b\u5834\u5408\u3001\u6b21\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u3001\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u30bf\u30b9\u30af\u3092\u958b\u59cb\u3059\u308b\u30dc\u30bf\u30f3\u306b\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3092\u4ed8\u3051\u307e\u3059\u3002<\/p>\n<div>\u30ef\u30fc\u30ab\u30fc\u30c7\u30e2\/main.js<\/div>\n<pre class=\"post-pre\"><code><span class=\"token operator\">...<\/span>\r\nblockingBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">blockMainThread<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">let<\/span> counter <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">5_000_000_000<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n    counter<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token punctuation\">}<\/span>\r\n  output<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Result: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>counter<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<\/code><\/pre>\n<p>\u524d\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001blockMainThread()\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u5b9f\u884c\u3059\u308b\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3092\u30a2\u30bf\u30c3\u30c1\u3057\u307e\u3059\u3002\u95a2\u6570\u5185\u90e8\u3067\u3001\u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u5024\u30920\u306b\u8a2d\u5b9a\u3057\u3001\u305d\u306e\u5f8c\u300150\u5104\u56de\u7e70\u308a\u8fd4\u3059\u30eb\u30fc\u30d7\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u5404\u7e70\u308a\u8fd4\u3057\u3067\u3001\u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u5024\u306f1\u305a\u3064\u5897\u52a0\u3057\u307e\u3059\u3002\u30eb\u30fc\u30d7\u304c\u7d42\u4e86\u3057\u305f\u5f8c\u3001\u8a08\u7b97\u7d50\u679c\u306f\u51fa\u529b\u8981\u7d20\u306b\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306e\u5b8c\u5168\u306a\u30d5\u30a1\u30a4\u30eb\u304c\u4e00\u81f4\u3059\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<div>\u30ef\u30fc\u30ab\u30fc\u30ba\u306e\u30e1\u30a4\u30f3.js<\/div>\n<pre class=\"post-pre\"><code><span class=\"token keyword\">const<\/span> blockingBtn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"blockbtn\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> incrementBtn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"incrementbtn\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> changeColorBtn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"changebtn\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> output <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\".output\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> totalCountEl <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\".total-count\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\ntotalCountEl<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\nincrementBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">incrementValue<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">let<\/span> counter <span class=\"token operator\">=<\/span> totalCountEl<span class=\"token punctuation\">.<\/span>textContent<span class=\"token punctuation\">;<\/span>\r\n  counter<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\r\n  totalCountEl<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> counter<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\nchangeColorBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">changeBackgroundColor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  colors <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">\"#009688\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\"#ffc107\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\"#dadada\"<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token keyword\">const<\/span> randomIndex <span class=\"token operator\">=<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> colors<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">)<\/span>\r\n  <span class=\"token keyword\">const<\/span> randomColor <span class=\"token operator\">=<\/span> colors<span class=\"token punctuation\">[<\/span>randomIndex<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n  document<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>background <span class=\"token operator\">=<\/span> randomColor<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\nblockingBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">blockMainThread<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">let<\/span> counter <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">5_000_000_000<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n    counter<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token punctuation\">}<\/span>\r\n  output<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Result: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>counter<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<\/code><\/pre>\n<p>\u30b3\u30fc\u30c9\u5165\u529b\u304c\u7d42\u4e86\u3057\u305f\u3089\u3001\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u7d42\u4e86\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u30b9\u30c6\u30c3\u30d73\u3067Web Workers\u3092\u4f7f\u7528\u3059\u308b\u969b\u306bCORS\u30a8\u30e9\u30fc\u3092\u56de\u907f\u3059\u308b\u305f\u3081\u306b\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u7528\u306e\u30a6\u30a7\u30d6\u30b5\u30fc\u30d0\u30fc\u3092\u4f5c\u6210\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u30b5\u30fc\u30d0\u30fc\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\">npx serve <span class=\"token builtin class-name\">.<\/span><\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u300cy\u300d\u3092\u5165\u529b\u3057\u3066\u78ba\u8a8d\u3057\u3001\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u306f\u30b5\u30fc\u30d0\u30fc\u304c\u5b9f\u884c\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u3092\u793a\u3059\u300cServing!\u300d\u3068\u3044\u3046\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<div class=\"secondary-code-label\" title=\"Output\">Output<\/div>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u2502 \u2502 Serving! \u2502 \u2502 \u2502 \u2502 &#8211; Local: http:\/\/localhost:3000 \u2502 \u2502 &#8211; On Your Network: http:\/\/your_ip_address:3000 \u2502 \u2502 \u2502 \u2502 Copied local address to clipboard! \u2502 \u2502 \u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u304a\u597d\u307f\u306e\u30a6\u30a7\u30d6\u30d6\u30e9\u30a6\u30b6\u3092\u958b\u3044\u3066\u3001http:\/\/localhost:3000\/index.html\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div class=\"post-conf-note\">\n<p class=\"post-conf-desc\">Note<\/p>\n<div>\u6ce8\u8a18: \u30ea\u30e2\u30fc\u30c8\u30b5\u30fc\u30d0\u30fc\u3067\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u9032\u3081\u3066\u3044\u308b\u5834\u5408\u3001\u30dd\u30fc\u30c8\u30d5\u30a9\u30ef\u30fc\u30c7\u30a3\u30f3\u30b0\u3092\u4f7f\u7528\u3057\u3066\u30d6\u30e9\u30a6\u30b6\u3067index.html\u30d5\u30a1\u30a4\u30eb\u3092\u8868\u793a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n\u73fe\u5728\u306e\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u30a6\u30a7\u30d6\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\u3057\u3066\u304f\u3060\u3055\u3044\uff1a<br \/>\nnpx serve .<\/div>\n<p>\u7d9a\u884c\u3059\u308b\u306b\u306fy\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<br \/>\n\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u306f\u4ee5\u4e0b\u306e\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u30a6\u30a7\u30d6\u30b5\u30fc\u30d0\u30fc\u3078\u306e\u30a2\u30af\u30bb\u30b9\u306b\u306f\u5f71\u97ff\u3057\u307e\u305b\u3093\uff1a<br \/>\nOutputERROR: Cannot copy server address to clipboard: Couldn&#8217;t find the `xsel` binary and fallback didn&#8217;t work. On Debian\/Ubuntu you can install xsel with : sudo apt install xsel.<\/p>\n<p>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510<br \/>\n\u2502 \u2502<br \/>\n\u2502 \u30b5\u30fc\u30d3\u30f3\u30b0\u4e2d\uff01 \u2502<br \/>\n\u2502 \u2502<br \/>\n\u2502 &#8211; \u30ed\u30fc\u30ab\u30eb: http:\/\/localhost:3000 \u2502<br \/>\n\u2502 &#8211; \u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u5185\u306e\u30a2\u30c9\u30ec\u30b9: http:\/\/your_ip_address:3000 \u2502<br \/>\n\u2502 \u2502<br \/>\n\u2502 \u30ed\u30fc\u30ab\u30eb\u30a2\u30c9\u30ec\u30b9\u3092\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\uff01 \u2502<br \/>\n\u2502 \u2502<br \/>\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/p>\n<p>\u30ed\u30fc\u30ab\u30eb\u30de\u30b7\u30f3\u3067\u5225\u306e\u30bf\u30fc\u30df\u30ca\u30eb\u3092\u958b\u304d\u3001\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\uff1a<br \/>\nssh -L 3000:localhost:3000 your_non_root_user@your_server_ip<\/p>\n<p>\u30d6\u30e9\u30a6\u30b6\u306b\u623b\u308a\u3001http:\/\/localhost:3000\/index.html\u306b\u79fb\u52d5\u3057\u3066\u30a2\u30d7\u30ea\u306e\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<\/div>\n<p>\u30da\u30fc\u30b8\u304c\u30ed\u30fc\u30c9\u3055\u308c\u308b\u3068\u3001\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u30bf\u30b9\u30af\u3001\u30a4\u30f3\u30af\u30ea\u30e1\u30f3\u30c8\u3001\u80cc\u666f\u5909\u66f4\u306e\u30dc\u30bf\u30f3\u3092\u5099\u3048\u305f\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002 \u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u5897\u52a0\u306f\u3001\u307e\u3060\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u3044\u306a\u3044\u305f\u3081\u30010\u304b\u3089\u59cb\u307e\u308a\u307e\u3059\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/65646586daa94e2bdf7b4691\/65-0.png\" alt=\"Screencapture of the homepage with the \" \/><\/div>\n<p>\u6700\u521d\u306b\u3001\u6570\u56de\u300c\u5897\u52a0\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u3001\u5404\u30af\u30ea\u30c3\u30af\u3054\u3068\u306b\u30da\u30fc\u30b8\u4e0a\u306e\u6570\u5b57\u3092\u66f4\u65b0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/65646586daa94e2bdf7b4691\/67-0.png\" alt=\"Screencapture of the homepage with the number incremented to seven after clicking the \" \/><\/div>\n<p>\u6b21\u306b\u3001\u30da\u30fc\u30b8\u306e\u80cc\u666f\u8272\u3092\u5909\u66f4\u3059\u308b\u305f\u3081\u306b\u300c\u80cc\u666f\u3092\u5909\u66f4\u300d\u30dc\u30bf\u30f3\u3092\u6570\u56de\u30af\u30ea\u30c3\u30af\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/65646586daa94e2bdf7b4691\/69-0.png\" alt=\"Screencapture of the homepage with background color changed to green after clicking the \" \/><\/div>\n<p>\u6700\u5f8c\u306b\u3001\u30d6\u30ed\u30c3\u30af\u30bf\u30b9\u30af\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3001\u7121\u4f5c\u70ba\u306b\u5897\u52a0\u30dc\u30bf\u30f3\u3068\u80cc\u666f\u5909\u66f4\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002\u3059\u308b\u3068\u30da\u30fc\u30b8\u304c\u53cd\u5fdc\u3057\u306a\u304f\u306a\u308a\u3001\u30dc\u30bf\u30f3\u306f\u6a5f\u80fd\u3057\u306a\u304f\u306a\u308a\u307e\u3059\u3002\u3053\u306e\u51cd\u7d50\u306f\u3001\u30d6\u30ed\u30c3\u30af\u30bf\u30b9\u30af\u30dc\u30bf\u30f3\u304cCPU\u8ca0\u8377\u306e\u9ad8\u3044\u30bf\u30b9\u30af\u3092\u958b\u59cb\u3057\u3001\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u304c\u89e3\u653e\u3055\u308c\u308b\u307e\u3067\u4ed6\u306e\u30b3\u30fc\u30c9\u304c\u5b9f\u884c\u3055\u308c\u306a\u3044\u305f\u3081\u3067\u3059\u3002\u3057\u3070\u3089\u304f\u6642\u9593\u304c\u7d4c\u904e\u3057\u3001CPU\u8ca0\u8377\u306e\u9ad8\u3044\u30bf\u30b9\u30af\u304c\u7d42\u4e86\u3059\u308b\u3068\u3001\u30da\u30fc\u30b8\u306b\u306f\u300c\u7d50\u679c\uff1a5000000000\u300d\u3068\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u3053\u306e\u6642\u70b9\u3067\u4ed6\u306e\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u518d\u3073\u52d5\u4f5c\u3092\u958b\u59cb\u3057\u307e\u3059\u3002<\/p>\n<p>\u3054\u7d4c\u9a13\u306e\u901a\u308a\u3001\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u30bf\u30b9\u30af\u306f\u30e6\u30fc\u30b6\u30fc\u306b\u3059\u3050\u306b\u308f\u304b\u308a\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4f7f\u3044\u52dd\u624b\u306b\u60aa\u5f71\u97ff\u3092\u53ca\u307c\u3059\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3092\u4ecb\u3057\u3066\u30a2\u30d7\u30ea\u3092\u51cd\u7d50\u3055\u305b\u308b\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u30bf\u30b9\u30af\u3092\u6301\u3064\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u305f\u4eca\u3001CPU\u3092\u4f7f\u7528\u3059\u308b\u30bf\u30b9\u30af\u3092\u975e\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u30bf\u30b9\u30af\u306b\u5909\u63db\u3059\u308b\u305f\u3081\u306b\u30d7\u30ed\u30df\u30b9\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<h2>\u30b9\u30c6\u30c3\u30d72 &#8211; \u30d7\u30ed\u30df\u30b9\u3092\u4f7f\u7528\u3057\u3066CPU\u30d0\u30a6\u30f3\u30c9\u30bf\u30b9\u30af\u306e\u30aa\u30d5\u30ed\u30fc\u30c9<\/h2>\n<p>Fetch API\u3084\u4ed6\u306e\u30d7\u30ed\u30df\u30b9\u30d9\u30fc\u30b9\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066I\/O\u30bf\u30b9\u30af\u3092\u51e6\u7406\u3059\u308b\u3053\u3068\u306f\u3001CPU\u306b\u8ca0\u8377\u3092\u304b\u3051\u308b\u30bf\u30b9\u30af\u3092\u30d7\u30ed\u30df\u30b9\u3067\u5305\u3080\u3053\u3068\u3067\u975e\u540c\u671f\u306b\u3067\u304d\u308b\u3068\u3044\u3046\u9593\u9055\u3063\u305f\u5370\u8c61\u3092\u4e0e\u3048\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\u5148\u8ff0\u306e\u3088\u3046\u306b\u3001I\/O\u30bf\u30b9\u30af\u306f\u975e\u540c\u671f\u3067\u3042\u308b\u306e\u306f\u3001\u305d\u308c\u3089\u304cOS\u306b\u3088\u3063\u3066\u51e6\u7406\u3055\u308c\u3001\u30bf\u30b9\u30af\u304c\u5b8c\u4e86\u3057\u305f\u3068\u304d\u306bJavaScript\u30a8\u30f3\u30b8\u30f3\u306b\u901a\u77e5\u3055\u308c\u308b\u304b\u3089\u3067\u3059\u3002OS\u304cI\/O\u30bf\u30b9\u30af\u3092\u51e6\u7406\u3059\u308b\u9593\u3001I\/O\u30bf\u30b9\u30af\u306b\u95a2\u9023\u3059\u308b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306fOS\u304b\u3089\u306e\u5fdc\u7b54\u3092\u5f85\u3061\u306a\u304c\u3089\u30ad\u30e5\u30fc\u306b\u5165\u308a\u307e\u3059\u3002\u30ad\u30e5\u30fc\u3067\u5f85\u6a5f\u3057\u3066\u3044\u308b\u9593\u3001\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u306f\u5168\u3066\u306e\u5f8c\u7d9a\u306e\u30bf\u30b9\u30af\u3092\u51e6\u7406\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002OS\u304b\u3089\u306e\u5fdc\u7b54\u304c\u6765\u305f\u6642\u70b9\u3067\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306f\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3067\u5b9f\u884c\u3055\u308c\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306e\u4e26\u884c\u5b9f\u884c\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n<p>\u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001CPU\u30d0\u30a6\u30f3\u30c9\u30bf\u30b9\u30af\u3092\u975e\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u306b\u3059\u308b\u305f\u3081\u306b\u3001\u7d04\u675f\uff08promise\uff09\u3067CPU\u96c6\u4e2d\u7684\u306a\u30bf\u30b9\u30af\u3092\u30e9\u30c3\u30d7\u3057\u307e\u3059\u3002<\/p>\n<p>\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u30fc\u3067main.js\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">nano<\/span> main.js<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>main.js\u30d5\u30a1\u30a4\u30eb\u306b\u306f\u3001Promise\u3067CPU\u306e\u8ca0\u8377\u304c\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u5305\u3080calculateCount()\u95a2\u6570\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u3001\u5f37\u8abf\u3055\u308c\u305f\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u5f93\u696d\u54e1\u306e\u30c7\u30e2\/\u30e1\u30a4\u30f3.js<\/div>\n<pre class=\"post-pre\"><code><span class=\"token operator\">...<\/span>\r\n<mark><span class=\"token keyword\">function<\/span> <span class=\"token function\">calculateCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/mark>\r\n  <mark><span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Promise<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">resolve<span class=\"token punctuation\">,<\/span> reject<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/mark>\r\n    <mark><span class=\"token keyword\">let<\/span> counter <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><\/mark>\r\n    <mark><span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">5_000_000_000<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/mark>\r\n      <mark>counter<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span><\/mark>\r\n    <mark><span class=\"token punctuation\">}<\/span><\/mark>\r\n    <mark><span class=\"token function\">resolve<\/span><span class=\"token punctuation\">(<\/span>counter<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark>\r\n  <mark><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark>\r\n<mark><span class=\"token punctuation\">}<\/span><\/mark>\r\n\r\nblockingBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">blockMainThread<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token operator\">...<\/span><span class=\"token punctuation\">.<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span>\r\n<\/code><\/pre>\n<p>calculateCount()\u95a2\u6570\u306f\u30d7\u30ed\u30df\u30b9\u3092\u8fd4\u3057\u307e\u3059\u3002\u3053\u306e\u95a2\u6570\u3067\u306f\u3001new Promise\u69cb\u6587\u3092\u4f7f\u7528\u3057\u3066\u30d7\u30ed\u30df\u30b9\u3092\u521d\u671f\u5316\u3057\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u53d7\u3051\u5165\u308c\u308bresolve\u3068reject\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u5f15\u6570\u306b\u53d6\u308a\u307e\u3059\u3002\u30d1\u30e9\u30e1\u30fc\u30bf\u306f\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u5185\u306e\u64cd\u4f5c\u306e\u6210\u529f\u307e\u305f\u306f\u5931\u6557\u3092\u51e6\u7406\u3057\u307e\u3059\u3002\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306b\u306fCPU\u306e\u8ca0\u8377\u304c\u304b\u304b\u308b\u30eb\u30fc\u30d7\u304c\u542b\u307e\u308c\u3066\u304a\u308a\u300150\u5104\u56de\u7e70\u308a\u8fd4\u3057\u307e\u3059\u3002\u30eb\u30fc\u30d7\u304c\u7d42\u4e86\u3057\u305f\u5f8c\u3001\u7d50\u679c\u3092resolve\u30e1\u30bd\u30c3\u30c9\u3067\u547c\u3073\u51fa\u3057\u307e\u3059\u3002<\/p>\n<p>\u300ccalculateCount()\u300d\u95a2\u6570\u3067CPU\u30d0\u30a6\u30f3\u30c9\u306a\u30bf\u30b9\u30af\u3092\u6301\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u30cf\u30a4\u30e9\u30a4\u30c8\u3055\u308c\u305f\u30b3\u30fc\u30c9\u3092\u524a\u9664\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u30ef\u30fc\u30ab\u30fc\u30ba\u30c7\u30e2\/main.js<\/div>\n<pre class=\"post-pre\"><code><span class=\"token operator\">...<\/span>\r\nblockingBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">blockMainThread<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <mark><span class=\"token keyword\">let<\/span> counter <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><\/mark>\r\n  <mark><span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">5_000_000_000<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/mark>\r\n    <mark>counter<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span><\/mark>\r\n  <mark><span class=\"token punctuation\">}<\/span><\/mark>\r\n  output<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Result: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>counter<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<\/code><\/pre>\n<p>\u30b3\u30fc\u30c9\u3092\u524a\u9664\u3057\u305f\u5f8c\u3001blockMainThread()\u95a2\u6570\u5185\u3067calculateCount()\u95a2\u6570\u3092\u547c\u3073\u51fa\u3057\u307e\u3059\u3002\u3053\u306e\u95a2\u6570\u306fPromise\u3092\u8fd4\u3059\u305f\u3081\u3001Promise\u3092\u6d88\u8cbb\u3059\u308b\u305f\u3081\u306basync\/await\u306e\u69cb\u6587\u3092\u4f7f\u7528\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>calculateCount()\u95a2\u6570\u3092\u975e\u540c\u671f\u306b\u3059\u308b\u305f\u3081\u306b\u3001main\u30b9\u30ec\u30c3\u30c9\u3092\u30d6\u30ed\u30c3\u30af\u3059\u308b\u305f\u3081\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u3001calculateCount()\u95a2\u6570\u3092\u547c\u3073\u51fa\u3057\u307e\u3059\u3002<\/p>\n<div>\u30ef\u30fc\u30ab\u30fc\u30ba\u30c7\u30e2\/ main.js<\/div>\n<pre class=\"post-pre\"><code><span class=\"token operator\">...<\/span>\r\nblockingBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <mark><span class=\"token keyword\">async<\/span><\/mark> <span class=\"token keyword\">function<\/span> <span class=\"token function\">blockMainThread<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <mark><span class=\"token keyword\">const<\/span> counter <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">calculateCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark>\r\n  output<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Result: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>counter<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<\/code><\/pre>\n<p>\u524d\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001async\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u4f7f\u7528\u3057\u3066blockMainThread()\u95a2\u6570\u3092\u975e\u540c\u671f\u306b\u3059\u308b\u305f\u3081\u306b\u3001\u95a2\u6570\u306e\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u306b\u4ed8\u3051\u307e\u3059\u3002\u95a2\u6570\u5185\u90e8\u3067\u3001await\u30ad\u30fc\u30ef\u30fc\u30c9\u3092\u4f7f\u7528\u3057\u3066calculateCount()\u95a2\u6570\u3092\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3057\u3001\u95a2\u6570\u3092\u547c\u3073\u51fa\u3057\u307e\u3059\u3002await\u6f14\u7b97\u5b50\u306f\u3001Promise\u304c\u89e3\u6c7a\u3059\u308b\u307e\u3067\u5f85\u6a5f\u3057\u307e\u3059\u3002\u89e3\u6c7a\u3057\u305f\u3089\u3001\u30ab\u30a6\u30f3\u30bf\u30fc\u5909\u6570\u304c\u8fd4\u3055\u308c\u305f\u5024\u306b\u8a2d\u5b9a\u3055\u308c\u3001\u51fa\u529b\u306ediv\u8981\u7d20\u304cCPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u306e\u7d50\u679c\u306b\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u4eca\u3001\u3042\u306a\u305f\u306e\u5b8c\u5168\u306a\u30d5\u30a1\u30a4\u30eb\u306f\u4ee5\u4e0b\u3068\u4e00\u81f4\u3059\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<div>\u30ef\u30fc\u30ab\u30fc\u30ba_\u30c7\u30e2\/main.js<\/div>\n<pre class=\"post-pre\"><code><span class=\"token keyword\">const<\/span> blockingBtn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"blockbtn\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> incrementBtn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"incrementbtn\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> changeColorBtn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"changebtn\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> output <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\".output\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> totalCountEl <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\".total-count\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\ntotalCountEl<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\nincrementBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">incrementValue<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">let<\/span> counter <span class=\"token operator\">=<\/span> totalCountEl<span class=\"token punctuation\">.<\/span>textContent<span class=\"token punctuation\">;<\/span>\r\n  counter<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\r\n  totalCountEl<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> counter<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\nchangeColorBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">changeBackgroundColor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  colors <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">\"#009688\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\"#ffc107\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\"#dadada\"<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token keyword\">const<\/span> randomIndex <span class=\"token operator\">=<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> colors<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">)<\/span>\r\n  <span class=\"token keyword\">const<\/span> randomColor <span class=\"token operator\">=<\/span> colors<span class=\"token punctuation\">[<\/span>randomIndex<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n  document<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>background <span class=\"token operator\">=<\/span> randomColor<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token keyword\">function<\/span> <span class=\"token function\">calculateCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Promise<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">resolve<span class=\"token punctuation\">,<\/span> reject<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token keyword\">let<\/span> counter <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">5_000_000_000<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n      counter<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token punctuation\">}<\/span>\r\n    <span class=\"token function\">resolve<\/span><span class=\"token punctuation\">(<\/span>counter<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\nblockingBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">blockMainThread<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">const<\/span> counter <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">calculateCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n  output<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Result: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>counter<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<\/code><\/pre>\n<p>\u5909\u66f4\u3092\u5b8c\u4e86\u3057\u305f\u3089\u3001\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u7d42\u4e86\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u30b5\u30fc\u30d0\u30fc\u304c\u307e\u3060\u7a3c\u50cd\u3057\u3066\u3044\u308b\u72b6\u614b\u3067\u3001\u30d6\u30e9\u30a6\u30b6\u3067http:\/\/localhost:3000\/index.html\u3092\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5\u3057\u3066\u304f\u3060\u3055\u3044\u3002Increment\u30dc\u30bf\u30f3\u3068Change Background\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u305d\u306e\u5f8c\u3001Blocking Task\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3001\u4ed6\u306e\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u304f\u3060\u3055\u3044\u3002CPU\u30d0\u30a6\u30f3\u30c9\u30bf\u30b9\u30af\u304c\u5b9f\u884c\u4e2d\u3067\u3082\u3001\u4ed6\u306e\u30dc\u30bf\u30f3\u306f\u53cd\u5fdc\u3057\u307e\u305b\u3093\u3002\u3053\u308c\u306b\u3088\u308a\u3001CPU\u30d0\u30a6\u30f3\u30c9\u30bf\u30b9\u30af\u3092Promise\u3067\u30e9\u30c3\u30d7\u3057\u3066\u3082\u30bf\u30b9\u30af\u304c\u975e\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u306b\u306a\u3089\u306a\u3044\u3053\u3068\u304c\u8a3c\u660e\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>CPU\u304c\u8ca0\u8377\u3092\u304b\u3051\u3089\u308c\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3001\u975e\u540c\u671f\u51e6\u7406\u3092\u4f7f\u3063\u3066\u89e3\u6c7a\u3057\u3088\u3046\u3068\u8a66\u307f\u305f\u304c\u5931\u6557\u3057\u305f\u306e\u3067\u3001Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u96c6\u4e2d\u30bf\u30b9\u30af\u3092\u975e\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u306b\u3057\u307e\u3059\u3002<\/p>\n<h2>\u30b9\u30c6\u30c3\u30d73 &#8211; Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u8ca0\u8377\u306e\u9ad8\u3044\u30bf\u30b9\u30af\u3092\u30aa\u30d5\u30ed\u30fc\u30c9\u3059\u308b<\/h2>\n<p>\u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001CPU\u306b\u8ca0\u8377\u304c\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092offload\u3059\u308b\u305f\u3081\u306b\u3001CPU\u306b\u8ca0\u8377\u304c\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092worker.js\u30d5\u30a1\u30a4\u30eb\u306b\u79fb\u52d5\u3057\u3066\u3001\u5c02\u7528\u306e\u30ef\u30fc\u30ab\u30fc\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002main.js\u30d5\u30a1\u30a4\u30eb\u3067\u306f\u3001worker.js\u30d5\u30a1\u30a4\u30eb\u306e\u30d1\u30b9\u3092\u6307\u5b9a\u3057\u3066\u5c02\u7528\u306eWeb\u30ef\u30fc\u30ab\u30fc\u3092\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\u3057\u307e\u3059\u3002Web\u30ef\u30fc\u30ab\u30fc\u304c\u521d\u671f\u5316\u3055\u308c\u308b\u3068\u3001CPU\u306b\u8ca0\u8377\u304c\u304b\u304b\u308b\u30bf\u30b9\u30af\u306f\u5225\u306e\u30b9\u30ec\u30c3\u30c9\u306boffload\u3055\u308c\u3001\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u306f\u6b8b\u308a\u306e\u30bf\u30b9\u30af\u3092\u51e6\u7406\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u6700\u521d\u306b\u3001worker.js\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">nano<\/span> worker.js<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>\u3042\u306a\u305f\u306eworker.js\u30d5\u30a1\u30a4\u30eb\u306b\u3001\u6b21\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<div>\u52b4\u50cd\u8005\u306e\u65b9\u3005\u306f\u3001worker.js\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u3044\u307e\u3059\u3002<\/div>\n<pre class=\"post-pre\"><code><span class=\"token keyword\">let<\/span> counter <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">5_000_000_000<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  counter<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<\/code><\/pre>\n<p>\u3053\u308c\u307e\u3067\u4f7f\u3063\u3066\u304d\u305fCPU\u30d0\u30a6\u30f3\u30c9\u30bf\u30b9\u30af\u306f\u3001\u524d\u8ff0\u306e\u30b3\u30fc\u30c9\u30d6\u30ed\u30c3\u30af\u306b\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u30b3\u30fc\u30c9\u306f\u4eca\u304b\u3089\u5225\u306e\u30b9\u30ec\u30c3\u30c9\u3067\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\u8a08\u7b97\u7d50\u679c\u306b\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u304c\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u306b\u3001Worker\u30a4\u30f3\u30bf\u30d5\u30a7\u30fc\u30b9\u306epostMessage()\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3057\u3066\u30c7\u30fc\u30bf\u3092\u542b\u3080\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u300cworker.js\u300d\u30d5\u30a1\u30a4\u30eb\u306b\u3001\u30cf\u30a4\u30e9\u30a4\u30c8\u3055\u308c\u305f\u884c\u3092\u8ffd\u52a0\u3057\u3066\u30c7\u30fc\u30bf\u3092\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u306b\u9001\u4fe1\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u30ef\u30fc\u30ab\u30fc\u306e\u30c7\u30e2\/worker.js<\/div>\n<pre class=\"post-pre\"><code><span class=\"token keyword\">let<\/span> counter <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">5_000_000_000<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  counter<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<mark><span class=\"token function\">postMessage<\/span><span class=\"token punctuation\">(<\/span>counter<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark>\r\n<\/code><\/pre>\n<p>\u3053\u306e\u884c\u3067\u306f\u3001CPU\u306b\u8ca0\u8377\u3092\u304b\u3051\u308b\u30bf\u30b9\u30af\u306e\u8a08\u7b97\u7d50\u679c\u3092\u542b\u3080\u30ab\u30a6\u30f3\u30bf\u30fc\u5909\u6570\u3092\u4f7f\u7528\u3057\u3066\u3001postMessage() \u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3073\u51fa\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>CPU\u306b\u8ca0\u8377\u3092\u304b\u3051\u308b\u30bf\u30b9\u30af\u3092worker.js\u306b\u79fb\u52d5\u3057\u305f\u306e\u3067\u3001main.js\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<ol>\n<li data-prefix=\"$\"><span class=\"token function\">nano<\/span> main.js<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><\/code><\/pre>\n<p>main.js\u30d5\u30a1\u30a4\u30eb\u304b\u3089\u3001CPU\u8ca0\u8377\u306e\u9ad8\u3044\u30bf\u30b9\u30af\u304c\u30cf\u30a4\u30e9\u30a4\u30c8\u3055\u308c\u305f\u884c\u3092\u524a\u9664\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u30ef\u30fc\u30ab\u30fc\u30ba\u30c7\u30e2\/\u30e1\u30a4\u30f3.js<\/div>\n<pre class=\"post-pre\"><code><span class=\"token operator\">...<\/span>\r\n<mark><span class=\"token keyword\">function<\/span> <span class=\"token function\">calculateCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/mark>\r\n  <mark><span class=\"token keyword\">return<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Promise<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">resolve<span class=\"token punctuation\">,<\/span> reject<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/mark>\r\n    <mark><span class=\"token keyword\">let<\/span> counter <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><\/mark>\r\n    <mark><span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">5_000_000_000<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/mark>\r\n      <mark>counter<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span><\/mark>\r\n    <mark><span class=\"token punctuation\">}<\/span><\/mark>\r\n    <mark><span class=\"token function\">resolve<\/span><span class=\"token punctuation\">(<\/span>counter<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark>\r\n  <mark><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark>\r\n<mark><span class=\"token punctuation\">}<\/span><\/mark>\r\n\r\nblockingBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <mark><span class=\"token keyword\">async<\/span><\/mark> <span class=\"token keyword\">function<\/span> <span class=\"token function\">blockMainThread<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <mark><span class=\"token keyword\">const<\/span> counter <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">calculateCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark>\r\n  output<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Result: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><mark>counter<\/mark><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<\/code><\/pre>\n<p>blockMainThread\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u5185\u306b\u3001\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u3001\u30ef\u30fc\u30ab\u30fc\u3092\u521d\u671f\u5316\u3057\u3001\u30ef\u30fc\u30ab\u30fc\u30b9\u30ec\u30c3\u30c9\u304b\u3089\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u53d7\u4fe1\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<div>\u30ef\u30fc\u30ab\u30fc\u30ba\u30fb\u30c7\u30e2\/\u30e1\u30a4\u30f3.js<\/div>\n<pre class=\"post-pre\"><code>blockingBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">blockMainThread<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <mark><span class=\"token keyword\">const<\/span> worker <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Worker<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"worker.js\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark>\r\n  <mark>worker<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onmessage<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">msg<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/mark>\r\n    output<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Result: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><mark>msg<span class=\"token punctuation\">.<\/span>data<\/mark><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\r\n  <mark><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/mark>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<\/code><\/pre>\n<p>\u6700\u521d\u306b\u3001\u4ee5\u524d\u306b\u4f5c\u6210\u3057\u305fworker.js\u30d5\u30a1\u30a4\u30eb\u3078\u306e\u30d1\u30b9\u3092\u6307\u5b9a\u3057\u3066\u3001Worker\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u6b21\u306b\u3001Worker\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u306eonmessage\u30d7\u30ed\u30d1\u30c6\u30a3\u3092worker\u30b9\u30ec\u30c3\u30c9\u306b\u95a2\u9023\u4ed8\u3051\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001worker\u30b9\u30ec\u30c3\u30c9\u304b\u3089\u9001\u3089\u308c\u3066\u304f\u308b\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u53d7\u4fe1\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3082\u3057\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u5c4a\u304f\u3068\u3001message\u30a4\u30d9\u30f3\u30c8\u304c\u767a\u706b\u3057\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u304c\u30e1\u30c3\u30bb\u30fc\u30b8\u30c7\u30fc\u30bfmsg\u3092\u5f15\u6570\u3068\u3057\u3066\u547c\u3073\u51fa\u3055\u308c\u307e\u3059\u3002\u3053\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3067\u306f\u3001Web Worker\u304b\u3089\u53d7\u3051\u53d6\u3063\u305f\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u4f7f\u3063\u3066\u51fa\u529b\u30c6\u30ad\u30b9\u30c8\u306e\u5185\u5bb9\u3092\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<p>\u5b8c\u5168\u306a\u30d5\u30a1\u30a4\u30eb\u306f\u3001\u6b21\u306e\u30b3\u30fc\u30c9\u30d6\u30ed\u30c3\u30af\u3068\u4e00\u81f4\u3059\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<div>\u52b4\u50cd\u8005\u305f\u3061_\u30c7\u30e2\/main.js<\/div>\n<pre class=\"post-pre\"><code><span class=\"token keyword\">const<\/span> blockingBtn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"blockbtn\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> incrementBtn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"incrementbtn\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> changeColorBtn <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"changebtn\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> output <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\".output\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">const<\/span> totalCountEl <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\".total-count\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\ntotalCountEl<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\nincrementBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">incrementValue<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">let<\/span> counter <span class=\"token operator\">=<\/span> totalCountEl<span class=\"token punctuation\">.<\/span>textContent<span class=\"token punctuation\">;<\/span>\r\n  counter<span class=\"token operator\">++<\/span><span class=\"token punctuation\">;<\/span>\r\n  totalCountEl<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> counter<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\nchangeColorBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">changeBackgroundColor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  colors <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token string\">\"#009688\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\"#ffc107\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\"#dadada\"<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token keyword\">const<\/span> randomIndex <span class=\"token operator\">=<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">floor<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> colors<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">)<\/span>\r\n  <span class=\"token keyword\">const<\/span> randomColor <span class=\"token operator\">=<\/span> colors<span class=\"token punctuation\">[<\/span>randomIndex<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n  document<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>background <span class=\"token operator\">=<\/span> randomColor<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\nblockingBtn<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"click\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">blockMainThread<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token keyword\">const<\/span> worker <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Worker<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"worker.js\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n  worker<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onmessage<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">msg<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n    output<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Result: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>msg<span class=\"token punctuation\">.<\/span>data<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<\/code><\/pre>\n<p>\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u7d42\u4e86\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u30b5\u30fc\u30d0\u30fc\u304c\u7a3c\u50cd\u3057\u3066\u3044\u308b\u72b6\u614b\u3067\u3001\u30a6\u30a7\u30d6\u30d6\u30e9\u30a6\u30b6\u306b\u623b\u3063\u3066 http:\/\/localhost:3000\/index.html \u3092\u8a2a\u308c\u3066\u304f\u3060\u3055\u3044\u3002\u30da\u30fc\u30b8\u306f\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u6b63\u5e38\u306b\u8aad\u307f\u8fbc\u307e\u308c\u307e\u3059\u3002<\/p>\n<p>\u307e\u305a\u3001\u30a4\u30f3\u30af\u30ea\u30e1\u30f3\u30c8\u30dc\u30bf\u30f3\u3068\u80cc\u666f\u5909\u66f4\u30dc\u30bf\u30f3\u3092\u6570\u56de\u30af\u30ea\u30c3\u30af\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u6b21\u306b\u3001CPU\u3092\u4f7f\u7528\u3059\u308b\u30bf\u30b9\u30af\u3092\u958b\u59cb\u3059\u308b\u305f\u3081\u306b\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u30bf\u30b9\u30af\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3001\u4ed6\u306e\u30dc\u30bf\u30f3\u3092\u7d9a\u3051\u3066\u30af\u30ea\u30c3\u30af\u3057\u3066\u304f\u3060\u3055\u3044\u3002CPU\u3092\u591a\u304f\u4f7f\u7528\u3059\u308b\u30bf\u30b9\u30af\u304c\u5b9f\u884c\u4e2d\u3067\u3082\u3001\u3053\u308c\u3089\u306e\u30dc\u30bf\u30f3\u306f\u554f\u984c\u306a\u304f\u52d5\u4f5c\u3057\u307e\u3059\u3002<\/p>\n<p>\u5c02\u7528\u306eWeb Worker\u3092\u4f7f\u7528\u3057\u3066\u3001CPU\u306e\u8ca0\u8377\u304c\u9ad8\u3044\u30bf\u30b9\u30af\u3092\u975e\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u306b\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<h2>\u7d50\u8ad6<\/h2>\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3092\u30d6\u30ed\u30c3\u30af\u3059\u308bCPU\u30d0\u30a6\u30f3\u30c9\u30bf\u30b9\u30af\u3092\u958b\u59cb\u3059\u308b\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002\u305d\u306e\u5f8c\u3001\u975e\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u306aCPU\u30d0\u30a6\u30f3\u30c9\u30bf\u30b9\u30af\u3092\u4f5c\u308b\u305f\u3081\u306b\u30d7\u30ed\u30df\u30b9\u3092\u4f7f\u7528\u3057\u3088\u3046\u3068\u3057\u307e\u3057\u305f\u304c\u3001\u3046\u307e\u304f\u3044\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u6700\u7d42\u7684\u306b\u306f\u3001\u5c02\u7528\u306eWeb Worker\u3092\u4f7f\u7528\u3057\u3066\u3001CPU\u30d0\u30a6\u30f3\u30c9\u30bf\u30b9\u30af\u3092\u5225\u306e\u30b9\u30ec\u30c3\u30c9\u306b\u30aa\u30d5\u30ed\u30fc\u30c9\u3057\u3066\u975e\u30d6\u30ed\u30c3\u30ad\u30f3\u30b0\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3068\u3057\u3066\u3001\u5c02\u7528\u306eWeb\u30ef\u30fc\u30ab\u30fc\u306b\u8a73\u7d30\u306a\u60c5\u5831\u3092\u63d0\u4f9b\u3057\u3066\u3044\u308bWeb Workers API\u3092\u8a2a\u308c\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u5c02\u7528\u306eWeb\u30ef\u30fc\u30ab\u30fc\u306b\u52a0\u3048\u3066\u3001Web Workers API\u306b\u306fShared Workers\u3084Service Workers\u3082\u542b\u307e\u308c\u3066\u304a\u308a\u3001\u30aa\u30d5\u30e9\u30a4\u30f3\u30a2\u30af\u30bb\u30b9\u306e\u63d0\u4f9b\u3084\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u5411\u4e0a\u306b\u5229\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>Node.js\u3092\u4f7f\u7528\u3059\u308c\u3070\u3001\u300eNode.js\u3067\u30de\u30eb\u30c1\u30b9\u30ec\u30c3\u30c9\u3092\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u300f\u3067\u30ef\u30fc\u30ab\u30fc\u30b9\u30ec\u30c3\u30c9\u306e\u4f7f\u3044\u65b9\u3092\u5b66\u3076\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8457\u8005\u306f\u3001Girls Who Code \u3092\u300cWrite for Donations\uff08\u5bc4\u4ed8\u306e\u305f\u3081\u306e\u57f7\u7b46\u6d3b\u52d5\uff09\u300d\u30d7\u30ed\u30b0\u30e9\u30e0\u306e\u4e00\u74b0\u3068\u3057\u3066\u5bc4\u4ed8\u306e\u53d7\u53d6\u5148\u306b\u9078\u3073\u307e\u3057\u305f\u3002 \u30a4\u30f3\u30c8\u30ed\u30c0\u30af\u30b7\u30e7\u30f3 \u65e5\u672c\u8a9e\u3067\u306f\u6b21\u306e\u3088\u3046\u306b\u8868\u73fe\u3067\u304d\u307e\u3059\uff1a Java [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[26,61],"class_list":["post-450","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-26","tag-61"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u306e\u65b9\u6cd5 - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u306e\u65b9\u6cd5\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/ja\/blog\/web-workers\u3092\u4f7f\u7528\u3057\u3066cpu\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u3059\u308b\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u306e\u65b9\u6cd5\" \/>\n<meta property=\"og:description\" content=\"Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u306e\u65b9\u6cd5\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/ja\/blog\/web-workers\u3092\u4f7f\u7528\u3057\u3066cpu\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u3059\u308b\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-19T06:34:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-31T14:41:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/65646586daa94e2bdf7b4691\/65-0.png\" \/>\n<meta name=\"author\" content=\"\u6d77\u6597, \u8475\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6d77\u6597, \u8475\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"42\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/web-workers%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6cpu%e3%81%ab%e8%b2%a0%e8%8d%b7%e3%81%ae%e3%81%8b%e3%81%8b%e3%82%8b%e3%82%bf%e3%82%b9%e3%82%af%e3%82%92%e5%87%a6%e7%90%86%e3%81%99%e3%82%8b\/\",\"url\":\"https:\/\/www.silicloud.com\/ja\/blog\/web-workers%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6cpu%e3%81%ab%e8%b2%a0%e8%8d%b7%e3%81%ae%e3%81%8b%e3%81%8b%e3%82%8b%e3%82%bf%e3%82%b9%e3%82%af%e3%82%92%e5%87%a6%e7%90%86%e3%81%99%e3%82%8b\/\",\"name\":\"Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u306e\u65b9\u6cd5 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#website\"},\"datePublished\":\"2022-09-19T06:34:32+00:00\",\"dateModified\":\"2025-07-31T14:41:38+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/20cfc053626f4d45c0fa7a4e7964b5b6\"},\"description\":\"Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u306e\u65b9\u6cd5\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/web-workers%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6cpu%e3%81%ab%e8%b2%a0%e8%8d%b7%e3%81%ae%e3%81%8b%e3%81%8b%e3%82%8b%e3%82%bf%e3%82%b9%e3%82%af%e3%82%92%e5%87%a6%e7%90%86%e3%81%99%e3%82%8b\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/ja\/blog\/web-workers%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6cpu%e3%81%ab%e8%b2%a0%e8%8d%b7%e3%81%ae%e3%81%8b%e3%81%8b%e3%82%8b%e3%82%bf%e3%82%b9%e3%82%af%e3%82%92%e5%87%a6%e7%90%86%e3%81%99%e3%82%8b\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/web-workers%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6cpu%e3%81%ab%e8%b2%a0%e8%8d%b7%e3%81%ae%e3%81%8b%e3%81%8b%e3%82%8b%e3%82%bf%e3%82%b9%e3%82%af%e3%82%92%e5%87%a6%e7%90%86%e3%81%99%e3%82%8b\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/ja\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u306e\u65b9\u6cd5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/ja\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"ja\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/20cfc053626f4d45c0fa7a4e7964b5b6\",\"name\":\"\u6d77\u6597, \u8475\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/25aec9a18954b6bfb7e4f7219c2923d62c6f0c9f4d5c0171228fe41751c0ab7a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/25aec9a18954b6bfb7e4f7219c2923d62c6f0c9f4d5c0171228fe41751c0ab7a?s=96&d=mm&r=g\",\"caption\":\"\u6d77\u6597, \u8475\"},\"url\":\"https:\/\/www.silicloud.com\/ja\/blog\/author\/kaitoaoi\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.silicloud.com\/ja\/blog\/web-workers%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6cpu%e3%81%ab%e8%b2%a0%e8%8d%b7%e3%81%ae%e3%81%8b%e3%81%8b%e3%82%8b%e3%82%bf%e3%82%b9%e3%82%af%e3%82%92%e5%87%a6%e7%90%86%e3%81%99%e3%82%8b\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u306e\u65b9\u6cd5 - Blog - Silicon Cloud","description":"Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u306e\u65b9\u6cd5\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/ja\/blog\/web-workers\u3092\u4f7f\u7528\u3057\u3066cpu\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u3059\u308b\/","og_locale":"ja_JP","og_type":"article","og_title":"Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u306e\u65b9\u6cd5","og_description":"Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u306e\u65b9\u6cd5\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002","og_url":"https:\/\/www.silicloud.com\/ja\/blog\/web-workers\u3092\u4f7f\u7528\u3057\u3066cpu\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u3059\u308b\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2022-09-19T06:34:32+00:00","article_modified_time":"2025-07-31T14:41:38+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/65646586daa94e2bdf7b4691\/65-0.png"}],"author":"\u6d77\u6597, \u8475","twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"\u6d77\u6597, \u8475","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"42\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/ja\/blog\/web-workers%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6cpu%e3%81%ab%e8%b2%a0%e8%8d%b7%e3%81%ae%e3%81%8b%e3%81%8b%e3%82%8b%e3%82%bf%e3%82%b9%e3%82%af%e3%82%92%e5%87%a6%e7%90%86%e3%81%99%e3%82%8b\/","url":"https:\/\/www.silicloud.com\/ja\/blog\/web-workers%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6cpu%e3%81%ab%e8%b2%a0%e8%8d%b7%e3%81%ae%e3%81%8b%e3%81%8b%e3%82%8b%e3%82%bf%e3%82%b9%e3%82%af%e3%82%92%e5%87%a6%e7%90%86%e3%81%99%e3%82%8b\/","name":"Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u306e\u65b9\u6cd5 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/ja\/blog\/#website"},"datePublished":"2022-09-19T06:34:32+00:00","dateModified":"2025-07-31T14:41:38+00:00","author":{"@id":"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/20cfc053626f4d45c0fa7a4e7964b5b6"},"description":"Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u306e\u65b9\u6cd5\u3092\u5206\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3002\u5b9f\u8df5\u7684\u306a\u4f8b\u3068\u30b3\u30fc\u30c9\u3001\u6ce8\u610f\u70b9\u3092\u542b\u3081\u3066\u521d\u5fc3\u8005\u306b\u3082\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u8aac\u660e\u3057\u307e\u3059\u3002","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/ja\/blog\/web-workers%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6cpu%e3%81%ab%e8%b2%a0%e8%8d%b7%e3%81%ae%e3%81%8b%e3%81%8b%e3%82%8b%e3%82%bf%e3%82%b9%e3%82%af%e3%82%92%e5%87%a6%e7%90%86%e3%81%99%e3%82%8b\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/ja\/blog\/web-workers%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6cpu%e3%81%ab%e8%b2%a0%e8%8d%b7%e3%81%ae%e3%81%8b%e3%81%8b%e3%82%8b%e3%82%bf%e3%82%b9%e3%82%af%e3%82%92%e5%87%a6%e7%90%86%e3%81%99%e3%82%8b\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/ja\/blog\/web-workers%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6cpu%e3%81%ab%e8%b2%a0%e8%8d%b7%e3%81%ae%e3%81%8b%e3%81%8b%e3%82%8b%e3%82%bf%e3%82%b9%e3%82%af%e3%82%92%e5%87%a6%e7%90%86%e3%81%99%e3%82%8b\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/ja\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Workers\u3092\u4f7f\u7528\u3057\u3066CPU\u306b\u8ca0\u8377\u306e\u304b\u304b\u308b\u30bf\u30b9\u30af\u3092\u51e6\u7406\u306e\u65b9\u6cd5"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/ja\/blog\/#website","url":"https:\/\/www.silicloud.com\/ja\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"ja"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/20cfc053626f4d45c0fa7a4e7964b5b6","name":"\u6d77\u6597, \u8475","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.silicloud.com\/ja\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/25aec9a18954b6bfb7e4f7219c2923d62c6f0c9f4d5c0171228fe41751c0ab7a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/25aec9a18954b6bfb7e4f7219c2923d62c6f0c9f4d5c0171228fe41751c0ab7a?s=96&d=mm&r=g","caption":"\u6d77\u6597, \u8475"},"url":"https:\/\/www.silicloud.com\/ja\/blog\/author\/kaitoaoi\/"},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.silicloud.com\/ja\/blog\/web-workers%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%a6cpu%e3%81%ab%e8%b2%a0%e8%8d%b7%e3%81%ae%e3%81%8b%e3%81%8b%e3%82%8b%e3%82%bf%e3%82%b9%e3%82%af%e3%82%92%e5%87%a6%e7%90%86%e3%81%99%e3%82%8b\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts\/450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/comments?post=450"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts\/450\/revisions"}],"predecessor-version":[{"id":325792,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/posts\/450\/revisions\/325792"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/media?parent=450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/categories?post=450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/ja\/blog\/wp-json\/wp\/v2\/tags?post=450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}