{"id":917,"date":"2024-08-20T10:00:17","date_gmt":"2024-08-20T01:00:17","guid":{"rendered":"https:\/\/route-zero.com\/recruit\/route\/917\/"},"modified":"2025-02-27T10:45:45","modified_gmt":"2025-02-27T01:45:45","slug":"917","status":"publish","type":"route","link":"https:\/\/route-zero.com\/recruit\/route\/917\/","title":{"rendered":"JavaScript\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u304c\u308f\u304b\u3089\u306a\u3044\uff1f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5b9f\u4f8b\u3067\u3084\u3055\u3057\u304f\u89e3\u8aac\uff01"},"content":{"rendered":"
\n

JavaScript\u3092\u5b66\u3093\u3067\u3044\u308b\u3068\u3001\u300c\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u300d\u3068\u3044\u3046\u8a00\u8449\u306b\u51fa\u4f1a\u3046\u3053\u3068\u304c\u3088\u304f\u3042\u308a\u307e\u3059\u3088\u306d\u3002\u3067\u3082\u3001\u6700\u521d\u306f\u3061\u3087\u3063\u3068\u96e3\u3057\u304f\u611f\u3058\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u306e\u4ed5\u7d44\u307f\u3092\u512a\u3057\u304f\u89e3\u8aac\u3057\u3066\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u5b9f\u4f8b\u3092\u901a\u3057\u3066\u697d\u3057\u304f\u7406\u89e3\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\uff01<\/p>\n

\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3063\u3066\u4f55\uff1f<\/h2>\n

\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3068\u306f\u3001\u5225\u306e\u95a2\u6570\u306b\u6e21\u3055\u308c\u3066\u3001\u51e6\u7406\u304c\u7d42\u308f\u3063\u305f\u5f8c\u306b\u547c\u3073\u51fa\u3055\u308c\u308b\u95a2\u6570<\/strong>\u306e\u3053\u3068\u3067\u3059\u3002\u4f8b\u3048\u3070\u3001\u300c\u3053\u306e\u4f5c\u696d\u304c\u7d42\u308f\u3063\u305f\u3089\u6b21\u306b\u3053\u308c\u3092\u3084\u308b\u300d\u3068\u3044\u3046\u611f\u3058\u3067\u3001\u9806\u756a\u306b\u51e6\u7406\u3092\u9032\u3081\u305f\u3044\u3068\u304d\u306b\u4f7f\u3044\u307e\u3059\u3002<\/p>\n

\u7c21\u5358\u306a\u4f8b\u3092\u898b\u3066\u307f\u3088\u3046<\/h3>\n
function<\/span> greet<\/span>(name, callback<\/span>) <\/span>{\r\n  console<\/span>.log(`\u3053\u3093\u306b\u3061\u306f\u3001${name}<\/span>\u3055\u3093\uff01`<\/span>);\r\n  callback(); \/\/ \u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u5b9f\u884c<\/span>\r\n}\r\n\r\ngreet(\"\u592a\u90ce\"<\/span>, function<\/span>(<\/span>) <\/span>{\r\n  console<\/span>.log(\"\u6328\u62f6\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\uff01\"<\/span>);\r\n});<\/code><\/pre>\n
\u3053\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001\u300c\u3053\u3093\u306b\u3061\u306f\u3001\u592a\u90ce\u3055\u3093\uff01\u300d\u3068\u8868\u793a\u3057\u305f\u5f8c\u306b\u300c\u6328\u62f6\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\uff01\u300d\u3068\u3044\u3046\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u51fa\u307e\u3059\u3002\u3064\u307e\u308a\u3001greet \u95a2\u6570\u306e\u4e2d\u3067\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u304c\u547c\u3070\u308c\u3066\u3001\u5f8c\u306e\u51e6\u7406\u3092\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306e\u52d5\u304d\u3092\u4f53\u9a13\u3057\u3088\u3046<\/h2>\n
<\/p>\n
\"\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30a4\u30e1\u30fc\u30b8\"<\/figure>\n
\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u306e\u52d5\u304d\u306f\u3001\u5c11\u3057\u62bd\u8c61\u7684\u306b\u611f\u3058\u308b\u3053\u3068\u3082\u3042\u308a\u307e\u3059\u3002\u305d\u3053\u3067\u3001\u9806\u756a\u306b\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u3059\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/strong>\u3092\u901a\u3058\u3066\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306e\u5b9f\u969b\u306e\u4f7f\u3044\u65b9\u3092\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
\u30b3\u30fc\u30c9\u4f8b\uff1a\u30dc\u30c3\u30af\u30b9\u304c\u9806\u756a\u306b\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\uff06\u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8<\/h3>\n
\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3067\u306f\u30014\u3064\u306e\u30dc\u30c3\u30af\u30b9\u304c\u9806\u756a\u306b\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u3057\u3001\u3059\u3079\u3066\u7d42\u308f\u3063\u305f\u3089\u9006\u9806\u3067\u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u3057\u307e\u3059\u3002\u3053\u306e\u52d5\u304d\u306f\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u4f7f\u3063\u3066\u51e6\u7406\u3092\u5236\u5fa1\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"ja\"<\/span>>\r\n  <head>\r\n    <meta charset=\"UTF-8\"<\/span> \/>\r\n    <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1.0\"<\/span> \/>\r\n    <title>\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30b5\u30f3\u30d7\u30eb<\/title>\r\n    <style>\r\n      body {\r\n        font-family: Arial, sans-serif;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        min-height: 100<\/span>vh;\r\n        margin: 0<\/span>;\r\n        background-color: #f0f0f0;<\/span>\r\n      }\r\n\r\n      .box {\r\n        width: 80<\/span>px;\r\n        height: 80<\/span>px;\r\n        margin: 10<\/span>px;\r\n        background-color: #4caf50;<\/span>\r\n        opacity: 0<\/span>;\r\n        transform: scale(0.5<\/span>);\r\n        transition: all 0.7<\/span>s ease-in<\/span>-out<\/span>;\r\n      }\r\n\r\n      .box.active {\r\n        opacity: 1<\/span>;\r\n        transform: scale(1<\/span>);\r\n      }\r\n\r\n      .box.fade-out<\/span> {\r\n        opacity: 0<\/span>;\r\n        transform: scale(0.5<\/span>);\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <!-- \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5bfe\u8c61\u306e\u30dc\u30c3\u30af\u30b9 -->\r\n    <div class<\/span>=\"box\"<\/span> id=\"box1\"<\/span>><\/div>\r\n    <div class<\/span>=\"box\"<\/span> id=\"box2\"<\/span>><\/div>\r\n    <div class<\/span>=\"box\"<\/span> id=\"box3\"<\/span>><\/div>\r\n    <div class<\/span>=\"box\"<\/span> id=\"box4\"<\/span>><\/div>\r\n\r\n    <script>\r\n      \/\/ STEP 1: \u30da\u30fc\u30b8\u30ed\u30fc\u30c9\u6642\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u59cb<\/span>\r\n      window.onload = startAnimation;\r\n\r\n      \/\/ STEP 2: \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u59cb\u3059\u308b\u95a2\u6570<\/span>\r\n      function startAnimation<\/span>(<\/span>)<\/span> {\r\n        console.log(\"STEP 2: startAnimation\u95a2\u6570\u304c\u547c\u3073\u51fa\u3055\u308c\u307e\u3057\u305f\"<\/span>);\r\n        animateInSequentially(0<\/span>); \/\/ STEP 3\u3078\u9077\u79fb<\/span>\r\n      }\r\n\r\n      \/\/ STEP 3: \u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u3092\u9806\u756a\u306b\u5b9f\u884c\u3059\u308b\u95a2\u6570<\/span>\r\n      function animateInSequentially<\/span>(index<\/span>)<\/span> {\r\n        const<\/span> boxes = document.querySelectorAll(\".box\"<\/span>); \/\/ \u30dc\u30c3\u30af\u30b9\u3092\u53d6\u5f97<\/span>\r\n        if<\/span> (index < boxes.length) {\r\n          console.log(`STEP 3<\/span>: \u30dc\u30c3\u30af\u30b9${index + 1<\/span>}\u306e\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u3092\u958b\u59cb\u3057\u307e\u3059`);\r\n          animateIn(boxes[index], () => {\r\n            \/\/ STEP 4\u3078\u9077\u79fb<\/span>\r\n            animateInSequentially(index + 1<\/span>); \/\/ \u518d\u3073STEP 3\u3078\u9077\u79fb\uff08\u6b21\u306e\u30dc\u30c3\u30af\u30b9\u3092\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\uff09<\/span>\r\n          });\r\n        } else<\/span> {\r\n          console.log(\"STEP 4: \u3059\u3079\u3066\u306e\u30dc\u30c3\u30af\u30b9\u304c\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u5b8c\u4e86\u3001\u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u3092\u958b\u59cb\u3057\u307e\u3059\"<\/span>);\r\n          animateOutSequentially(boxes.length - 1<\/span>); \/\/ STEP 5\u3078\u9077\u79fb<\/span>\r\n        }\r\n      }\r\n\r\n      \/\/ STEP 4: \u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u3092\u5b9f\u884c\u3059\u308b\u95a2\u6570<\/span>\r\n      function animateIn<\/span>(element, callback<\/span>)<\/span> {\r\n        console.log(\"STEP 4: animateIn\u95a2\u6570\u304c\u547c\u3073\u51fa\u3055\u308c\u307e\u3057\u305f\"<\/span>);\r\n        element.classList.add<\/span>(\"active\"<\/span>); \/\/ \u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u958b\u59cb<\/span>\r\n        setTimeout(() => {\r\n          console.log(\"STEP 4: \u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\"<\/span>);\r\n          if<\/span> (callback) {\r\n            callback(); \/\/ \u547c\u3073\u51fa\u3057\u5143\u306e\u51e6\u7406\u306b\u623b\u308b\uff08STEP 3\u3078\u9077\u79fb\uff09<\/span>\r\n          }\r\n        }, 700<\/span>);\r\n      }\r\n\r\n      \/\/ STEP 5: \u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u3092\u9006\u9806\u306b\u5b9f\u884c\u3059\u308b\u95a2\u6570<\/span>\r\n      function animateOutSequentially<\/span>(index<\/span>)<\/span> {\r\n        const<\/span> boxes = document.querySelectorAll(\".box\"<\/span>); \/\/ \u30dc\u30c3\u30af\u30b9\u3092\u53d6\u5f97<\/span>\r\n        if<\/span> (index >= 0<\/span>) {\r\n          console.log(`STEP 5<\/span>: \u30dc\u30c3\u30af\u30b9${index + 1<\/span>}\u306e\u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u3092\u958b\u59cb\u3057\u307e\u3059`);\r\n          animateOut(boxes[index], () => {\r\n            \/\/ STEP 6\u3078\u9077\u79fb<\/span>\r\n            animateOutSequentially(index - 1<\/span>); \/\/ \u518d\u3073STEP 5\u3078\u9077\u79fb\uff08\u6b21\u306e\u30dc\u30c3\u30af\u30b9\u3092\u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\uff09<\/span>\r\n          });\r\n        } else<\/span> {\r\n          console.log(\"STEP 6: \u3059\u3079\u3066\u306e\u30dc\u30c3\u30af\u30b9\u304c\u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u5b8c\u4e86\u3057\u307e\u3057\u305f\"<\/span>);\r\n        }\r\n      }\r\n\r\n      \/\/ STEP 6: \u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u3092\u5b9f\u884c\u3059\u308b\u95a2\u6570<\/span>\r\n      function animateOut<\/span>(element, callback<\/span>)<\/span> {\r\n        console.log(\"STEP 6: animateOut\u95a2\u6570\u304c\u547c\u3073\u51fa\u3055\u308c\u307e\u3057\u305f\"<\/span>);\r\n        element.classList.remove<\/span>(\"active\"<\/span>); \/\/ \u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u89e3\u9664<\/span>\r\n        element.classList.add<\/span>(\"fade-out\"<\/span>); \/\/ \u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u958b\u59cb<\/span>\r\n        setTimeout(() => {\r\n          console.log(\"STEP 6: \u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\"<\/span>);\r\n          if<\/span> (callback) {\r\n            callback(); \/\/ \u547c\u3073\u51fa\u3057\u5143\u306e\u51e6\u7406\u306b\u623b\u308b\uff08STEP 5\u3078\u9077\u79fb\uff09<\/span>\r\n          }\r\n        }, 700<\/span>);\r\n      }\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
\u30b3\u30fc\u30c9\u306e\u52d5\u304d<\/h3>\n
    \n
  1. \n
    \u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u306e\u9806\u756a\u5236\u5fa1<\/strong><\/p>\n
      \n
    • \n
      startAnimation \u95a2\u6570\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u59cb\u3002<\/p>\n<\/li>\n
    • \n
      animateSequentially \u95a2\u6570\u304c\u30dc\u30c3\u30af\u30b9\u30921\u3064\u305a\u3064\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u3055\u305b\u3001\u5b8c\u4e86\u5f8c\u306b\u6b21\u306e\u30dc\u30c3\u30af\u30b9\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u4f7f\u7528\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
    • \n
      \u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u306e\u9006\u9806\u5236\u5fa1<\/strong><\/p>\n
        \n
      • \n
        \u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u304c\u5b8c\u4e86\u3057\u305f\u5f8c\u3001fadeOutSequentially \u95a2\u6570\u304c\u9006\u9806\u3067\u30dc\u30c3\u30af\u30b9\u3092\u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u3055\u305b\u308b\u3002<\/p>\n<\/li>\n
      • \n
        \u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u3082\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3067\u5236\u5fa1\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
      • \n
        \u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3067\u52d5\u304d\u3092\u3064\u306a\u3050<\/strong><\/p>\n
          \n
        • \n
          \u5404\u30dc\u30c3\u30af\u30b9\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u5b8c\u4e86\u3059\u308b\u305f\u3073\u306b\u3001\u6b21\u306e\u51e6\u7406\u3092\u547c\u3073\u51fa\u3059\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u304c\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
          \u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u304c\u6d3b\u304d\u308b\u5834\u9762<\/h3>\n
            \n
          • \n
            \u975e\u540c\u671f\u51e6\u7406\u306e\u9806\u5e8f\u5236\u5fa1<\/strong>
            \u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u4f7f\u3048\u3070\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3084API\u306e\u547c\u3073\u51fa\u3057\u306a\u3069\u3001\u975e\u540c\u671f\u51e6\u7406\u306e\u9806\u756a\u3092\u30b3\u30f3\u30c8\u30ed\u30fc\u30eb\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/li>\n
          • \n
            \u67d4\u8edf\u306a\u52d5\u4f5c\u5909\u66f4<\/strong>
            \u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306b\u7570\u306a\u308b\u95a2\u6570\u3092\u6e21\u3059\u3053\u3068\u3067\u3001\u51e6\u7406\u306e\u5185\u5bb9\u3092\u7c21\u5358\u306b\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/li>\n<\/ul>\n
            \u307e\u3068\u3081<\/h2>\n
            \u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u306f\u3001JavaScript\u3067\u51e6\u7406\u3092\u9806\u756a\u306b\u9032\u3081\u308b\u305f\u3081\u306e\u57fa\u672c\u7684\u306a\u4ed5\u7d44\u307f\u3067\u3059\u3002\u4eca\u56de\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u4f8b\u3092\u901a\u3058\u3066\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u306e\u91cd\u8981\u6027\u3068\u4f7f\u3044\u65b9\u3092\u4f53\u611f\u3067\u304d\u305f\u306e\u3067\u306f\u306a\u3044\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n
            \u305f\u3060\u3057\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u591a\u7528\u3059\u308b\u3068\u30b3\u30fc\u30c9\u304c\u8907\u96d1\u306b\u306a\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3068\u3057\u3066\u3001Promise \u3084 async\/await \u3092\u5b66\u3076\u3053\u3068\u3067\u3001\u3055\u3089\u306b\u8aad\u307f\u3084\u3059\u3044\u30b3\u30fc\u30c9\u304c\u66f8\u3051\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
            \u3053\u308c\u304b\u3089\u3082JavaScript\u3092\u697d\u3057\u307f\u306a\u304c\u3089\u5b66\u3093\u3067\u3044\u304d\u307e\u3057\u3087\u3046\uff01<\/p>\n<\/div>\n","protected":false},"featured_media":919,"template":"","_links":{"self":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/route\/917"}],"collection":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/route"}],"about":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/types\/route"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/route-zero.com\/recruit\/wp-json\/wp\/v2\/media?parent=917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}