{"id":153,"date":"2025-04-26T19:20:37","date_gmt":"2025-04-26T10:20:37","guid":{"rendered":"https:\/\/suyasuyahirohiro.com\/?p=153"},"modified":"2025-04-28T11:45:37","modified_gmt":"2025-04-28T02:45:37","slug":"%e4%b8%80%e6%99%82%e5%81%9c%e6%ad%a2%e6%a9%9f%e8%83%bd%e3%81%ae%e8%bf%bd%e5%8a%a0","status":"publish","type":"post","link":"https:\/\/suyasuyahirohiro.com\/?p=153","title":{"rendered":"\u4e00\u6642\u505c\u6b62\u6a5f\u80fd\u306e\u8ffd\u52a0"},"content":{"rendered":"\n

\u4e00\u5ea6\u52d5\u3044\u305f\u30bf\u30a4\u30de\u30fc\u3092\u6b62\u3081\u3089\u308c\u306a\u3044\u306e\u3067\u4e00\u6642\u505c\u6b62\u6a5f\u80fd\u3092\u8ffd\u52a0\u3057\u307e\u3059
\u3053\u306e\u90e8\u5206\u3067\u306f\u8a18\u8f09\u3057\u305f\u306f\u305a\u306e\u4e00\u6642\u505c\u6b62\u30bf\u30a4\u30de\u30fc\u304c\u51fa\u529b\u3055\u308c\u306a\u3044\u3001\u30bf\u30b9\u30af\u7d42\u4e86\u5f8c\u4f11\u61a9\u30bf\u30a4\u30de\u30fc\u306b\u9077\u79fb\u3057\u306a\u304b\u3063\u305f\u308a\u3068\u5927\u5909\u3067\u3057\u305f<\/p>\n\n\n\n

1. data<\/code> \u30aa\u30d7\u30b7\u30e7\u30f3\u306b\u4e00\u6642\u505c\u6b62\u306e\u72b6\u614b\u3068\u30dc\u30bf\u30f3\u306e\u8868\u793a\u3092\u5236\u5fa1\u3059\u308b\u5909\u6570\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/strong><\/p>\n\n\n\n

JavaScript<\/p>\n\n\n\n

  data() {\n    return {\n      minutes: 0,\n      seconds: 10,\n      breakMinutes: 0,\n      breakSeconds: 10,\n      breakTimerStartButton: false, \/\/\u300c\u4f5c\u696d\u6642\u9593\u300d\u304c\u7d42\u4e86\u3057\u3001\u30bf\u30a4\u30de\u30fc\u95a2\u9023\u306e UI \u8981\u7d20\u3092\u8868\u793a\u30fb\u975e\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u30d5\u30e9\u30b0\n      breakTimerDisplay: false,\n      remainingWorkSeconds: 25 * 60, \/\/ \u4f5c\u696d\u6b8b\u308a\u6642\u9593\uff08\u79d2\uff09\n      remainingBreakSeconds: 5 * 60, \/\/ \u4f11\u61a9\u6b8b\u308a\u6642\u9593\uff08\u79d2\uff09\n      isWorkTimerActive: false, \/\/ \u4f5c\u696d\u30bf\u30a4\u30de\u30fc\u304c\u30a2\u30af\u30c6\u30a3\u30d6\u304b\u3069\u3046\u304b\n      isBreakTimerActive: false, \/\/ \u4f11\u61a9\u30bf\u30a4\u30de\u30fc\u304c\u30a2\u30af\u30c6\u30a3\u30d6\u304b\u3069\u3046\u304b\n      isWorkTimerPaused: false, \/\/ \u4f5c\u696d\u30bf\u30a4\u30de\u30fc\u304c\u4e00\u6642\u505c\u6b62\u4e2d\u304b\u3069\u3046\u304b\n      isBreakTimerPaused: false, \/\/ \u4f11\u61a9\u30bf\u30a4\u30de\u30fc\u304c\u4e00\u6642\u505c\u6b62\u4e2d\u304b\u3069\u3046\u304b\n      timerInterval: null, \/\/ \u30bf\u30a4\u30de\u30fc\u306e\u30a4\u30f3\u30bf\u30fc\u30d0\u30ebID\n      currentTimerLabel: \"\u4f5c\u696d\u6642\u9593\", \/\/ \u73fe\u5728\u306e\u30bf\u30a4\u30de\u30fc\u306e\u30e9\u30d9\u30eb\n    };\n  },<\/code><\/pre>\n\n\n\n
\u89e3\u8aac:<\/strong><\/p>\n\n\n\n
    \n
  • isWorkTimerPaused<\/code>: \u4f5c\u696d\u30bf\u30a4\u30de\u30fc\u304c\u4e00\u6642\u505c\u6b62\u4e2d\u304b\u3069\u3046\u304b\u3092\u793a\u3059\u771f\u507d\u5024\u3067\u3059\u3002\u521d\u671f\u5024\u306f false<\/code> \u3067\u3059\u3002<\/li>\n\n\n\n
  • isBreakTimerPaused<\/code>: \u4f11\u61a9\u30bf\u30a4\u30de\u30fc\u304c\u4e00\u6642\u505c\u6b62\u4e2d\u304b\u3069\u3046\u304b\u3092\u793a\u3059\u771f\u507d\u5024\u3067\u3059\u3002\u521d\u671f\u5024\u306f false<\/code> \u3067\u3059\u3002<\/li>\n<\/ul>\n\n\n\n
    2. \u30bf\u30a4\u30de\u30fc\u3092\u4e00\u6642\u505c\u6b62\u30fb\u518d\u958b\u3059\u308b\u30e1\u30bd\u30c3\u30c9 (pauseTimer<\/code>, resumeTimer<\/code>) \u3092 methods<\/code> \u30aa\u30d7\u30b7\u30e7\u30f3\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/strong><\/p>\n\n\n\n
    JavaScript<\/p>\n\n\n\n
      methods: {\n    toggleTimer(timerType) {\n      console.log(\n        \"toggleTimer \u304c\u547c\u3073\u51fa\u3055\u308c\u307e\u3057\u305f:\",\n        timerType,\n        this.isWorkTimerActive,\n        this.isBreakTimerActive\n      );\n      if (timerType === \"work\") {\n        if (!this.isWorkTimerActive) {\n          this.startWorkTimerInternal(); \/\/ \u4f5c\u696d\u30bf\u30a4\u30de\u30fc\u958b\u59cb\u51e6\u7406\n        } else {\n          this.pauseTimer(\"work\"); \/\/ \u4f5c\u696d\u30bf\u30a4\u30de\u30fc\u4e00\u6642\u505c\u6b62\n        }\n      } else if (timerType === \"break\") {\n        if (!this.isBreakTimerActive) {\n          this.startBreakTimerInternal(); \/\/ \u4f11\u61a9\u30bf\u30a4\u30de\u30fc\u958b\u59cb\u51e6\u7406\n        } else {\n          this.pauseTimer(\"break\"); \/\/ \u4f11\u61a9\u30bf\u30a4\u30de\u30fc\u4e00\u6642\u505c\u6b62\n        }\n      }\n      console.log(\n        \"toggleTimer \u7d42\u4e86:\",\n        this.isWorkTimerActive,\n        this.isBreakTimerActive,\n        this.isWorkTimerPaused,\n        this.isBreakTimerPaused\n      );\n    },\n    startWorkTimerInternal() {\n      this.isWorkTimerActive = true;\n      this.isWorkTimerPaused = false;\n      this.currentTimerLabel = \"\u4f5c\u696d\u6642\u9593\";\n      this.remainingWorkSeconds = this.minutes * 60 + this.seconds;\n      this.timerInterval = setInterval(() => {\n        if (!this.isWorkTimerPaused) {\n          if (this.remainingWorkSeconds > 0) {\n            this.remainingWorkSeconds--;\n          } else {\n            this.stopTimerInterval();\n            this.isWorkTimerActive = false;\n            this.isWorkTimerPaused = false;\n            this.sendTimerEndStatus(\"work\");\n            alert(\"\u4f5c\u696d\u6642\u9593\u7d42\u4e86\uff01\u4f11\u61a9\u3092\u958b\u59cb\u3057\u3066\u304f\u3060\u3055\u3044\u3002\");\n            this.startBreakTimerInternal();\n          }\n        }\n      }, 1000);\n    },\n    startBreakTimerInternal() {\n      this.isBreakTimerActive = true;\n      this.isBreakTimerPaused = false;\n      this.currentTimerLabel = \"\u4f11\u61a9\u6642\u9593\";\n      this.remainingBreakSeconds = this.breakMinutes * 60 + this.breakSeconds;\n      this.timerInterval = setInterval(() => {\n        if (!this.isBreakTimerPaused) {\n          if (this.remainingBreakSeconds > 0) {\n            this.remainingBreakSeconds--;\n          } else {\n            this.stopTimerInterval();\n            this.isBreakTimerActive = false;\n            this.isBreakTimerPaused = false;\n            this.sendTimerEndStatus(\"break\");\n            alert(\"\u4f11\u61a9\u6642\u9593\u7d42\u4e86\uff01\");\n            \/\/ \u5fc5\u8981\u306b\u5fdc\u3058\u3066\u4f5c\u696d\u30bf\u30a4\u30de\u30fc\u3092\u518d\u958b\u3059\u308b\u51e6\u7406\u3092\u8ffd\u52a0\n          }\n        }\n      }, 1000);\n    },\n    pauseTimer(timerType) {\n      console.log(\n        \"pauseTimer \u304c\u547c\u3073\u51fa\u3055\u308c\u307e\u3057\u305f:\",\n        timerType,\n        this.timerInterval\n      );\n      if (this.timerInterval) {\n        this.stopTimerInterval();\n        if (timerType === \"work\") {\n          this.isWorkTimerPaused = true;\n        } else if (timerType === \"break\") {\n          this.isBreakTimerPaused = true;\n        }\n      }\n      console.log(\n        \"pauseTimer \u7d42\u4e86:\",\n        this.isWorkTimerPaused,\n        this.isBreakTimerPaused,\n        this.timerInterval\n      );\n    },\n    resumeTimer(timerType) {\n      if (!this.timerInterval) {\n        if (\n          timerType === \"work\" &&\n          this.isWorkTimerPaused &&\n          this.isWorkTimerActive\n        ) {\n          this.isWorkTimerPaused = false;\n          this.timerInterval = setInterval(() => {\n            if (this.remainingWorkSeconds > 0) {\n              this.remainingWorkSeconds--;\n            } else {\n              this.stopTimerInterval();\n              this.isWorkTimerActive = false;\n              this.isWorkTimerPaused = false;\n              this.sendTimerEndStatus(\"work\");\n              alert(\"\u4f5c\u696d\u6642\u9593\u7d42\u4e86\uff01\u4f11\u61a9\u3092\u958b\u59cb\u3057\u3066\u304f\u3060\u3055\u3044\u3002\");\n              this.startBreakTimer();\n            }\n          }, 1000);\n        } else if (\n          timerType === \"break\" &&\n          this.isBreakTimerPaused &&\n          this.isBreakTimerActive\n        ) {\n          this.isBreakTimerPaused = false;\n          this.timerInterval = setInterval(() => {\n            if (this.remainingBreakSeconds > 0) {\n              this.remainingBreakSeconds--;\n            } else {\n              this.stopTimerInterval();\n              this.isBreakTimerActive = false;\n              this.isBreakTimerPaused = false;\n              this.sendTimerEndStatus(\"break\");\n              alert(\"\u4f11\u61a9\u6642\u9593\u7d42\u4e86\uff01\");\n              \/\/ \u5fc5\u8981\u306b\u5fdc\u3058\u3066\u4f5c\u696d\u30bf\u30a4\u30de\u30fc\u3092\u518d\u958b\u3059\u308b\u51e6\u7406\u3092\u8ffd\u52a0\n            }\n          }, 1000);\n        }\n      }\n    },\n    stopTimerInterval() {\n      clearInterval(this.timerInterval);\n      this.timerInterval = null;\n    },\n    sendTimerEndStatus(status) {\n      const timerStatus = {\n        status: status,\n        endTime: new Date().toISOString(),\n      };\n      axios\n        .post(\"http:\/\/localhost:8080\/api\/timer-status\", timerStatus) \/\/ \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306b\u5408\u308f\u305b\u3066\u5909\u66f4\n        .then((response) => {\n          console.log(\"\u30bf\u30a4\u30de\u30fc\u7d42\u4e86\u30b9\u30c6\u30fc\u30bf\u30b9\u9001\u4fe1\u6210\u529f\", response.data);\n        })\n        .catch((error) => {\n          console.error(\"\u30bf\u30a4\u30de\u30fc\u7d42\u4e86\u30b9\u30c6\u30fc\u30bf\u30b9\u9001\u4fe1\u5931\u6557\", error);\n        });\n    },\n  },\n};<\/code><\/pre>\n\n\n\n
    \u89e3\u8aac:<\/strong><\/p>\n\n\n\n
      \n
    • startTimer()<\/code> \u3068 startBreakTimer()<\/code>: \u30bf\u30a4\u30de\u30fc\u304c\u30a2\u30af\u30c6\u30a3\u30d6\u306a\u5834\u5408\u306f pauseTimer()<\/code> \u3092\u547c\u3073\u51fa\u3059\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3057\u305f\u3002\u958b\u59cb\u6642\u306b\u306f\u4e00\u6642\u505c\u6b62\u72b6\u614b\u3092\u89e3\u9664\u3057\u307e\u3059\u3002<\/li>\n\n\n\n
    • pauseTimer(timerType)<\/code>: setInterval()<\/code> \u3067\u8a2d\u5b9a\u3055\u308c\u305f\u30bf\u30a4\u30de\u30fc\u3092 clearInterval()<\/code> \u3067\u505c\u6b62\u3057\u3001timerInterval<\/code> \u3092 null<\/code> \u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u5f15\u6570 timerType<\/code> \u306b\u5fdc\u3058\u3066\u3001\u4f5c\u696d\u30bf\u30a4\u30de\u30fc\u307e\u305f\u306f\u4f11\u61a9\u30bf\u30a4\u30de\u30fc\u306e\u4e00\u6642\u505c\u6b62\u72b6\u614b\u3092 true<\/code> \u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/li>\n\n\n\n
    • resumeTimer(timerType)<\/code>: timerInterval<\/code> \u304c null<\/code> \u306e\u5834\u5408\uff08\u30bf\u30a4\u30de\u30fc\u304c\u505c\u6b62\u3057\u3066\u3044\u308b\u5834\u5408\uff09\u3001\u5f15\u6570 timerType<\/code> \u306b\u5fdc\u3058\u3066\u4f5c\u696d\u30bf\u30a4\u30de\u30fc\u307e\u305f\u306f\u4f11\u61a9\u30bf\u30a4\u30de\u30fc\u3092\u518d\u958b\u3057\u307e\u3059\u3002\u4e00\u6642\u505c\u6b62\u72b6\u614b\u3092 false<\/code> \u306b\u623b\u3057\u3001setInterval()<\/code> \u3092\u518d\u5ea6\u8a2d\u5b9a\u3057\u3066\u30ab\u30a6\u30f3\u30c8\u30c0\u30a6\u30f3\u3092\u518d\u958b\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n
      3. <template><\/code> \u90e8\u5206\u306b\u4e00\u6642\u505c\u6b62\/\u518d\u958b\u30dc\u30bf\u30f3\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/strong><\/p>\n\n\n\n
      HTML<\/p>\n\n\n\n
      <template>\n  <div>\n    <h1>\u30dd\u30e2\u30c9\u30fc\u30ed\u30bf\u30a4\u30de\u30fc<\/h1>\n    <div>\n      <label for=\"minutes\">\u5206\uff1a<\/label>\n      <input type=\"number\" id=\"minutes\" v-model=\"minutes\" min=\"0\" max=\"59\" \/>\n      <input type=\"range\" v-model=\"minutes\" min=\"0\" max=\"59\" \/>\n    <\/div>\n    <div>\n      <label for=\"seconds\">\u79d2\uff1a<\/label>\n      <input type=\"number\" id=\"seconds\" v-model=\"seconds\" min=\"0\" max=\"59\" \/>\n      <input type=\"range\" v-model=\"seconds\" min=\"0\" max=\"59\" \/>\n    <\/div>\n    <p>\n      {{ currentTimerLabel }}\uff1a\n      {{\n        currentTimerLabel === \"\u4f5c\u696d\u6642\u9593\" ? formattedTime : formattedBreakTime\n      }}\n    <\/p>\n    <button @click=\"toggleTimer('work')\" :disabled=\"isBreakTimerActive\">\n      {{ isWorkTimerActive ? \"\u4e00\u6642\u505c\u6b62\" : \"\u958b\u59cb\" }}\n    <\/button>\n    <button\n      v-if=\"isWorkTimerActive\"\n      @click=\"resumeTimer('work')\"\n      :disabled=\"!isWorkTimerPaused\"\n    >\n      \u518d\u958b\n    <\/button>\n\n    <div v-if=\"breakTimerStartButton\">\n      <h2>\u4f11\u61a9\u30bf\u30a4\u30de\u30fc<\/h2>\n      <div>\n        <label for=\"breakMinutes\">\u5206\uff1a<\/label>\n        <input\n          type=\"number\"\n          id=\"breakMinutes\"\n          v-model=\"breakMinutes\"\n          min=\"0\"\n          max=\"59\"\n        \/>\n        <input type=\"range\" v-model=\"breakMinutes\" min=\"0\" max=\"59\" \/>\n      <\/div>\n      <div>\n        <label for=\"breakSeconds\">\u5206\uff1a<\/label>\n        <input\n          type=\"number\"\n          id=\"breakSeconds\"\n          v-model=\"breakSeconds\"\n          min=\"0\"\n          max=\"59\"\n        \/>\n        <input type=\"range\" v-model=\"breakSeconds\" min=\"0\" max=\"59\" \/>\n      <\/div>\n      <p>\u4f11\u61a9\u6642\u9593\uff1a{{ formattedBreakTime }}<\/p>\n      <button @click=\"toggleTimer('break')\" :disabled=\"isWorkTimerActive\">\n        {{ isBreakTimerActive ? \"\u4e00\u6642\u505c\u6b62\" : \"\u4f11\u61a9\u958b\u59cb\" }}\n      <\/button>\n      <button\n        v-if=\"isBreakTimerActive\"\n        @click=\"resumeTimer('break')\"\n        :disabled=\"!isBreakTimerPaused\"\n      >\n        \u4f11\u61a9\u518d\u958b\n      <\/button>\n    <\/div>\n    <p v-if=\"breakTimerDisplay\">\u4f11\u61a9\u6642\u9593\u7d42\u4e86<\/p>\n  <\/div>\n<\/template><\/code><\/pre>\n\n\n\n
      \u89e3\u8aac:<\/strong><\/p>\n\n\n\n