{"id":177,"date":"2025-04-28T13:29:28","date_gmt":"2025-04-28T04:29:28","guid":{"rendered":"https:\/\/suyasuyahirohiro.com\/?p=177"},"modified":"2025-05-01T18:31:22","modified_gmt":"2025-05-01T09:31:22","slug":"%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc%e4%bd%9c%e6%88%90","status":"publish","type":"post","link":"https:\/\/suyasuyahirohiro.com\/?p=177","title":{"rendered":"\u30ab\u30ec\u30f3\u30c0\u30fc\u4f5c\u6210"},"content":{"rendered":"\n

\u5b8c\u4e86\u3057\u305f\u30bf\u30b9\u30af\u3092\u30ab\u30ec\u30f3\u30c0\u30fc\u306b\u8a18\u9332\u3059\u308b\u305f\u3081
\u9031\u3054\u3068\u306e\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u4f5c\u6210\u3057\u305f\u3044<\/p>\n\n\n\n

\u305d\u306e\u305f\u3081vue\u3092\u4f7f\u7528\u3057\u3066\u4f5c\u3063\u3066\u3044\u304f<\/p>\n\n\n\n

\u30b9\u30c6\u30c3\u30d7\uff11\uff1a\u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u57fa\u672c\u7684\u306a\u8868\u793a<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

\u307e\u305a\u306f\u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u57fa\u672c\u7684\u306a\u8868\u793a\u3092\u4f5c\u6210\u3057\u307e\u3057\u3087\u3046\u3002\u753b\u50cf\u306e\u3088\u3046\u306a\u30b7\u30f3\u30d7\u30eb\u306a\u6708\u8868\u793a\u3092\u76ee\u6307\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

    \n
  1. Vue.js\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u6e96\u5099:<\/strong> \u3082\u3057\u65e2\u5b58\u306eVue.js\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304c\u306a\u3044\u5834\u5408\u306f\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067\u65b0\u3057\u3044\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 Bashnpm install -g @vue\/cli vue create calendar-app<\/code> \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\u6642\u306b\u3044\u304f\u3064\u304b\u306e\u8cea\u554f\u304c\u51fa\u307e\u3059\u304c\u3001Vue 3\u3092\u9078\u629e\u3057\u3066\u304a\u3051\u3070\u554f\u984c\u3042\u308a\u307e\u305b\u3093\u3002<\/li>\n\n\n\n
  2. \u30ab\u30ec\u30f3\u30c0\u30fc\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u6210:<\/strong> src\/components<\/code> \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b Calendar.vue<\/code> \u3068\u3044\u3046\u65b0\u3057\u3044\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/li>\n\n\n\n
  3. Calendar.vue<\/code> \u306e\u8a18\u8ff0:<\/strong> \u4ee5\u4e0b\u306f\u57fa\u672c\u7684\u306a\u30ab\u30ec\u30f3\u30c0\u30fc\u8868\u793a\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3068\u7c21\u5358\u306a\u30ed\u30b8\u30c3\u30af\u3067\u3059\u3002\u307e\u305a\u306f\u3053\u308c\u3092 Calendar.vue<\/code> \u306b\u8a18\u8ff0\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002 <\/li>\n<\/ol>\n\n\n\n
    <template>\n  <div>\n    <h2>{{ year }}\u5e74 {{ month }}\u6708<\/h2>\n    <table>\n      <thead>\n        <tr>\n          <th v-for=\"day in daysOfWeek\" :key=\"day\">{{ day }}<\/th>\n        <\/tr>\n      <\/thead>\n      <tbody>\n        <tr v-for=\"(week, index) in calendarGrid\" :key=\"index\">\n          <td v-for=\"(date, i) in week\" :key=\"i\" :class=\"{ 'today': isToday(date), 'empty': !date }\">\n            {{ date ? date.getDate() : '' }}\n          <\/td>\n        <\/tr>\n      <\/tbody>\n    <\/table>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  name: 'PomodoroCalendar', \n  data() {\n    const today = new Date();\n    const currentYear = today.getFullYear();\n    const currentMonth = today.getMonth() + 1; \/\/ JavaScript\u306egetMonth()\u306f0\u304b\u3089\u59cb\u307e\u308b\u305f\u3081+1\n    return {\n      year: currentYear,\n      month: currentMonth,\n      daysOfWeek: ['\u65e5', '\u6708', '\u706b', '\u6c34', '\u6728', '\u91d1', '\u571f'],\n      todayDate: today.getDate(),\n      todayMonth: currentMonth,\n      todayYear: currentYear,\n    };\n  },\n  computed: {\n    daysInMonth() {\n      return new Date(this.year, this.month, 0).getDate();\n    },\n    firstDayOfMonth() {\n      return new Date(this.year, this.month - 1, 1).getDay(); \/\/ 0:\u65e5, 1:\u6708,...\n    },\n    calendarGrid() {\n      const grid = [];\n      let week = [];\n      let dayCounter = 1;\n\n      \/\/ \u6708\u306e\u521d\u3081\u307e\u3067\u306e\u7a7a\u767d\u3092\u8ffd\u52a0\n      for (let i = 0; i < this.firstDayOfMonth; i++) {\n        week.push(null);\n      }\n\n      while (dayCounter <= this.daysInMonth) {\n        week.push(new Date(this.year, this.month - 1, dayCounter));\n        if (week.length === 7) {\n          grid.push(week);\n          week = [];\n        }\n        dayCounter++;\n      }\n\n      \/\/ \u6708\u306e\u7d42\u308f\u308a\u307e\u3067\u306e\u7a7a\u767d\u3092\u8ffd\u52a0\n      while (week.length < 7 && week.length > 0) {\n        week.push(null);\n      }\n      if (week.length > 0) {\n        grid.push(week);\n      }\n\n      return grid;\n    },\n  },\n  methods: {\n    isToday(date) {\n      return date && date.getDate() === this.todayDate && date.getMonth() + 1 === this.todayMonth && date.getFullYear() === this.todayYear;\n    },\n  },\n};\n<\/script>\n\n<style scoped>\ntable {\n  width: 100%;\n  border-collapse: collapse;\n}\nth, td {\n  border: 1px solid #ccc;\n  padding: 8px;\n  text-align: center;\n}\n.today {\n  background-color: lightblue;\n}\n.empty {\n  background-color: #eee;\n}\n<\/style><\/code><\/pre>\n\n\n\n
      \n
    1. App.vue<\/code> \u3067 Calendar<\/code> \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f7f\u7528:<\/strong> src\/App.vue<\/code> \u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u4fee\u6b63\u3057\u3066\u3001\u4f5c\u6210\u3057\u305f Calendar<\/code> \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8868\u793a\u3057\u307e\u3059\u3002 <\/li>\n<\/ol>\n\n\n\n
      <template>\n  <img alt=\"Vue logo\" src=\".\/assets\/logo.png\">\n  <PomodoroCalendar \/>\n<\/template>\n\n<script>\nimport PomodoroCalendar from '.\/components\/PomodoroCalendar.vue';\n\nexport default {\n  name: 'App',\n  components: {\n    PomodoroCalendar\n  }\n}\n<\/script>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n<\/style><\/code><\/pre>\n\n\n\n
      \u30b9\u30c6\u30c3\u30d7\uff12\uff1a\u30ab\u30ec\u30f3\u30c0\u30fc\u306b\u4f5c\u696d\u8a18\u9332\u3092\u8868\u793a\u3059\u308b\u6e96\u5099<\/h2>\n\n\n\n
      \u6b21\u306b\u3001\u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u5404\u65e5\u4ed8\u306b\u4f5c\u696d\u8a18\u9332\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u6e96\u5099\u3092\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
        \n
      1. PomodoroCalendar.vue<\/code> \u306b\u4f5c\u696d\u8a18\u9332\u30c7\u30fc\u30bf\u3092\u4fdd\u6301\u3059\u308b:<\/strong> PomodoroCalendar.vue<\/code> \u306e data<\/code> \u30aa\u30d7\u30b7\u30e7\u30f3\u306b\u3001\u3053\u306e\u4f5c\u696d\u8a18\u9332\u30c7\u30fc\u30bf\u3092\u521d\u671f\u5024\u3068\u3057\u3066\u8a2d\u5b9a\u3057\u307e\u3059<\/li>\n<\/ol>\n\n\n\n
        export default {\n  data() {\n    \/\/ ... \u65e2\u5b58\u306e\u30c7\u30fc\u30bf\n    return {\n      \/\/ ... \u65e2\u5b58\u306e\u30c7\u30fc\u30bf\n      workLogs: [], \/\/ \u4f5c\u696d\u8a18\u9332\u3092\u4fdd\u5b58\u3059\u308b\u914d\u5217\n    };\n  },\n  \/\/ ... \u65e2\u5b58\u306e computed \u3068 methods\n};<\/code><\/pre>\n\n\n\n
          \n
        1. \u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u65e5\u4ed8\u306b\u7d10\u4ed8\u3051\u308b\u30e1\u30bd\u30c3\u30c9\u306e\u6e96\u5099:<\/strong> \u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u5404\u30bb\u30eb\u306b\u4f5c\u696d\u8a18\u9332\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u3001\u65e5\u4ed8\u306b\u5bfe\u5fdc\u3059\u308b\u4f5c\u696d\u8a18\u9332\u3092\u62bd\u51fa\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u3092 Calendar.vue<\/code> \u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n
          export default {\n  \/\/ ... data, computed\n  methods: {\n    \/\/ ... \u65e2\u5b58\u306e\u30e1\u30bd\u30c3\u30c9\n    getWorkLogsForDate(date) {\n      if (!date) {\n        return [];\n      }\n      const formattedDate = `<span class=\"math-inline\">\\{date\\.getFullYear\\(\\)\\}\\-<\/span>{(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;\n      return this.workLogs.filter(log => log.date === formattedDate);\n    },\n  },\n};<\/code><\/pre>\n\n\n\n
            \n
          1. \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u4fee\u6b63:<\/strong> \u30ab\u30ec\u30f3\u30c0\u30fc\u306e <td><\/code> \u8981\u7d20\u5185\u3067 getWorkLogsForDate<\/code> \u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3073\u51fa\u3057\u3001\u8a72\u5f53\u3059\u308b\u4f5c\u696d\u8a18\u9332\u3092\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4fee\u6b63\u3057\u307e\u3059\u3002\u7c21\u5358\u306a\u8868\u793a\u3068\u3057\u3066\u3001\u30bf\u30b9\u30af\u540d\u3092\u8868\u793a\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002 \u3053\u306e\u6642\u70b9\u3067\u306f workLogs<\/code> \u306f\u7a7a\u306a\u306e\u3067\u3001\u307e\u3060\u4f55\u3082\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u3002<\/li>\n<\/ol>\n\n\n\n
            <template>\n  <div>\n    <h2>{{ year }}\u5e74 {{ month }}\u6708<\/h2>\n    <table>\n      <thead>\n        <tr>\n          <th v-for=\"day in daysOfWeek\" :key=\"day\">{{ day }}<\/th>\n        <\/tr>\n      <\/thead>\n      <tbody>\n        <tr v-for=\"(week, index) in calendarGrid\" :key=\"index\">\n          <td\n            v-for=\"(date, i) in week\"\n            :key=\"i\"\n            :class=\"{ 'today': isToday(date), 'empty': !date }\"\n          >\n            {{ date ? date.getDate() : '' }}\n            <div v-if=\"date\">\n              <div v-for=\"log in getWorkLogsForDate(date)\" :key=\"log.startTime\">\n                - {{ log.task }} ({{ log.startTime }} - {{ log.endTime }})\n              <\/div>\n            <\/div>\n          <\/td>\n        <\/tr>\n      <\/tbody>\n    <\/table>\n  <\/div>\n<\/template><\/code><\/pre>\n\n\n\n
            \u30ab\u30ec\u30f3\u30c0\u30fc\u3068\u30bf\u30a4\u30de\u30fc\u306e\u7d10\u4ed8\u3051<\/h2>\n\n\n\n
            \u4e0a\u8a18\u306e\u30b3\u30fc\u30c9\u3092PomodoroTimer\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306ecomponents\u306b\u8ffd\u52a0\u3057\u3066\u3001\u7d10\u4ed8\u3051\u3092\u884c\u3046<\/p>\n\n\n\n
            \u307e\u305a\u3001PomodoroCalendar.vue<\/code> \u306e <script><\/code> \u30bf\u30b0\u5185\u306e recordWorkTime<\/code> \u30e1\u30bd\u30c3\u30c9\u3092\u4fee\u6b63\u3057\u3001\u30dd\u30e2\u30c9\u30fc\u30ed\u30bf\u30a4\u30de\u30fc\u304b\u3089\u6e21\u3055\u308c\u308b\u30a4\u30d9\u30f3\u30c8\u30c7\u30fc\u30bf\u3092\u9069\u5207\u306b\u51e6\u7406\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
            PomodoroCalendar.vue<\/code> \u306e <script><\/code> \u306e methods<\/code> \u90e8\u5206\u306e\u4fee\u6b63:<\/strong><\/p>\n\n\n\n
            methods: {\n  isToday(date) {\n    return (\n      date &&\n      date.getDate() === this.todayDate &&\n      date.getMonth() + 1 === this.todayMonth &&\n      date.getFullYear() === this.todayYear\n    );\n  },\n  getWorkLogsForDate(date) {\n    if (!date) {\n      return [];\n    }\n    const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1)\n      .toString()\n      .padStart(2, \"0\")}-${date.getDate().toString().padStart(2, \"0\")}`;\n    return this.workLogs.filter((log) => log.date === formattedDate);\n  },\n  recordWorkTime(logData) {\n    const logEntry = {\n      date: logData.date,\n      task: logData.task || '\u96c6\u4e2d\u4f5c\u696d', \/\/ \u30bf\u30b9\u30af\u540d\u304c\u306a\u3044\u5834\u5408\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u3092\u8a2d\u5b9a\n      startTime: logData.startTime,\n      endTime: logData.endTime,\n    };\n    this.workLogs.push(logEntry);\n    console.log(\"PomodoroCalendar \u3067\u4f5c\u696d\u30ed\u30b0\u3092\u8a18\u9332:\", logEntry);\n  },\n},<\/code><\/pre>\n\n\n\n
            \u89e3\u8aac:<\/strong><\/p>\n\n\n\n
              \n
            • recordWorkTime<\/code> \u30e1\u30bd\u30c3\u30c9\u306f\u3001\u30dd\u30e2\u30c9\u30fc\u30ed\u30bf\u30a4\u30de\u30fc\u304b\u3089 $emit<\/code> \u3055\u308c\u308b work-finished<\/code> \u30a4\u30d9\u30f3\u30c8\u3067\u6e21\u3055\u308c\u308b logData<\/code> \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u53d7\u3051\u53d6\u308b\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3057\u305f\u3002<\/li>\n\n\n\n
            • logData<\/code> \u306b task<\/code> \u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u542b\u307e\u308c\u3066\u3044\u306a\u3044\u5834\u5408\u306b\u5099\u3048\u3066\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u3068\u3057\u3066 '\u96c6\u4e2d\u4f5c\u696d'<\/code> \u3092\u8a2d\u5b9a\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002<\/li>\n\n\n\n
            • \u65e5\u4ed8\u306e\u5f62\u5f0f\u306f\u3001\u30dd\u30e2\u30c9\u30fc\u30ed\u30bf\u30a4\u30de\u30fc\u304b\u3089\u9001\u4fe1\u3055\u308c\u308b\u5f62\u5f0f (YYYY-MM-DD<\/code>) \u3092\u305d\u306e\u307e\u307e\u4f7f\u7528\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n
              1. startWorkTimerInternal()<\/code> \u30e1\u30bd\u30c3\u30c9\u5185\u306e\u4f5c\u696d\u958b\u59cb\u6642\u523b\u306e\u8a18\u9332:<\/strong><\/p>\n\n\n\n
              JavaScript<\/p>\n\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.workStartTime = new Date().toLocaleTimeString([], {\n      hour: \"2-digit\",\n      minute: \"2-digit\",\n    }); \/\/ \u4f5c\u696d\u958b\u59cb\u6642\u523b\u3092\u8a18\u9332\n    \/\/ ... (\u30bf\u30a4\u30de\u30fc\u306e\u30a4\u30f3\u30bf\u30fc\u30d0\u30eb\u51e6\u7406)\n  },\n<\/code><\/pre>\n\n\n\n
                \n
              • this.workStartTime = new Date().toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });<\/code>:\n
                  \n
                • new Date()<\/code>: \u73fe\u5728\u306e\u65e5\u6642\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/li>\n\n\n\n
                • .toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" })<\/code>: \u73fe\u5728\u306e\u6642\u523b\u3092\u3001\u6642\u3068\u5206\u30922\u6841\u3067\u8868\u793a\u3059\u308b\u5f62\u5f0f\u306e\u6587\u5b57\u5217\u306b\u5909\u63db\u3057\u307e\u3059\uff08\u4f8b: “13:09″\uff09\u3002<\/li>\n\n\n\n
                • \u3053\u306e\u958b\u59cb\u6642\u523b\u306e\u6587\u5b57\u5217\u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e data<\/code> \u30d7\u30ed\u30d1\u30c6\u30a3 workStartTime<\/code> \u306b\u4fdd\u5b58\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                  2. startWorkTimerInternal()<\/code> \u30e1\u30bd\u30c3\u30c9\u5185\u306e\u4f5c\u696d\u7d42\u4e86\u6642\u306e\u30a4\u30d9\u30f3\u30c8\u767a\u884c:<\/strong><\/p>\n\n\n\n
                  JavaScript<\/p>\n\n\n\n
                        \/\/ ... (\u30bf\u30a4\u30de\u30fc\u306e\u30a4\u30f3\u30bf\u30fc\u30d0\u30eb\u51e6\u7406)\n      } else {\n        this.stopTimerInterval();\n        this.isWorkTimerActive = false;\n        this.isWorkTimerPaused = false;\n        this.sendTimerEndStatus(\"work\");\n        const workEndTime = new Date().toLocaleTimeString([], {\n          hour: \"2-digit\",\n          minute: \"2-digit\",\n        });\n        this.$emit(\"work-finished\", {\n          date: new Date().toISOString().slice(0, 10),\n          startTime: this.workStartTime,\n          endTime: workEndTime,\n          task: \"\u96c6\u4e2d\u4f5c\u696d\", \/\/ \u3053\u3053\u306f\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u5909\u66f4\u53ef\u80fd\n        });\n        alert(\"\u4f5c\u696d\u6642\u9593\u7d42\u4e86\uff01\u4f11\u61a9\u3092\u958b\u59cb\u3057\u3066\u304f\u3060\u3055\u3044\u3002\");\n        this.breakTimerStartButton = true;\n      }\n      \/\/ ... (\u30bf\u30a4\u30de\u30fc\u306e\u30a4\u30f3\u30bf\u30fc\u30d0\u30eb\u51e6\u7406\u306e\u7d9a\u304d)\n<\/code><\/pre>\n\n\n\n
                    \n
                  • const workEndTime = new Date().toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });<\/code>:\n
                      \n
                    • \u4f5c\u696d\u6642\u9593\u304c\u7d42\u4e86\u3057\u305f\u6642\u70b9\u306e\u6642\u523b\u3092\u3001\u958b\u59cb\u6642\u523b\u3068\u540c\u69d8\u306e\u5f62\u5f0f\u3067\u53d6\u5f97\u3057\u3001workEndTime<\/code> \u5909\u6570\u306b\u4fdd\u5b58\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                    • this.$emit(\"work-finished\", { ... });<\/code>:\n
                        \n
                      • this.$emit()<\/code>: \u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff08\u3053\u3053\u3067\u306f PomodoroCalendar<\/code>\uff09\u3078\u30a4\u30d9\u30f3\u30c8\u3092\u767a\u884c\u3057\u307e\u3059\u3002<\/li>\n\n\n\n
                      • \"work-finished\"<\/code>: \u767a\u884c\u3059\u308b\u30a4\u30d9\u30f3\u30c8\u306e\u540d\u524d\u3067\u3059\u3002\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3053\u306e\u540d\u524d\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u30ea\u30c3\u30b9\u30f3\u3057\u307e\u3059\u3002<\/li>\n\n\n\n
                      • { ... }<\/code>: \u30a4\u30d9\u30f3\u30c8\u3068\u5171\u306b\u9001\u4fe1\u3059\u308b\u30c7\u30fc\u30bf\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3002\n
                          \n
                        • date: new Date().toISOString().slice(0, 10)<\/code>: \u73fe\u5728\u306e\u65e5\u4ed8\u3092 YYYY-MM-DD<\/code> \u5f62\u5f0f\u306e\u6587\u5b57\u5217\u3067\u9001\u4fe1\u3057\u307e\u3059\u3002<\/li>\n\n\n\n
                        • startTime: this.workStartTime<\/code>: \u4f5c\u696d\u958b\u59cb\u6642\u306b\u8a18\u9332\u3057\u305f\u6642\u523b\u3092\u9001\u4fe1\u3057\u307e\u3059\u3002<\/li>\n\n\n\n
                        • endTime: workEndTime<\/code>: \u4f5c\u696d\u7d42\u4e86\u6642\u306b\u53d6\u5f97\u3057\u305f\u6642\u523b\u3092\u9001\u4fe1\u3057\u307e\u3059\u3002<\/li>\n\n\n\n
                        • task: \"\u96c6\u4e2d\u4f5c\u696d\"<\/code>: \u73fe\u5728\u306f\u56fa\u5b9a\u3067 “\u96c6\u4e2d\u4f5c\u696d” \u3068\u3044\u3046\u30bf\u30b9\u30af\u540d\u3092\u9001\u4fe1\u3057\u3066\u3044\u307e\u3059\u3002\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30bf\u30b9\u30af\u3092\u5165\u529b\u3067\u304d\u308b\u3088\u3046\u306aUI\u3092\u8ffd\u52a0\u3057\u3001\u305d\u306e\u5165\u529b\u5024\u3092\u9001\u4fe1\u3059\u308b\u3088\u3046\u306b\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                          3. resumeTimer(\"work\")<\/code> \u30e1\u30bd\u30c3\u30c9\u5185\u306e\u958b\u59cb\u6642\u523b\u306e\u8a18\u9332\uff08\u518d\u958b\u6642\uff09\uff1a<\/strong><\/p>\n\n\n\n
                          JavaScript<\/p>\n\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.workStartTime =\n            this.workStartTime ||\n            new Date().toLocaleTimeString([], {\n              hour: \"2-digit\",\n              minute: \"2-digit\",\n            }); \/\/ \u518d\u958b\u6642\u306b\u958b\u59cb\u6642\u523b\u304c\u672a\u8a2d\u5b9a\u306a\u3089\u8a18\u9332\n          \/\/ ... (\u30bf\u30a4\u30de\u30fc\u306e\u30a4\u30f3\u30bf\u30fc\u30d0\u30eb\u51e6\u7406)\n        }\n        \/\/ ... (\u4f11\u61a9\u30bf\u30a4\u30de\u30fc\u306e\u518d\u958b\u51e6\u7406)\n      }\n    },\n<\/code><\/pre>\n\n\n\n
                            \n
                          • this.workStartTime = this.workStartTime || new Date().toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });<\/code>:\n
                              \n
                            • \u30bf\u30a4\u30de\u30fc\u304c\u4e00\u6642\u505c\u6b62\u304b\u3089\u518d\u958b\u3055\u308c\u305f\u3068\u304d\u306b\u3001this.workStartTime<\/code> \u304c\u307e\u3060\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u306a\u3044\uff08\u4f8b\u3048\u3070\u3001\u958b\u59cb\u76f4\u5f8c\u306b\u4e00\u6642\u505c\u6b62\u3057\u305f\u5834\u5408\u306a\u3069\uff09\u5834\u5408\u306b\u3001\u73fe\u5728\u306e\u6642\u523b\u3092\u958b\u59cb\u6642\u523b\u3068\u3057\u3066\u8a18\u9332\u3057\u307e\u3059\u3002<\/li>\n\n\n\n
                            • ||<\/code> \u306f\u300c\u5de6\u5074\u306e\u5024\u304c falsy (null, undefined, 0, false, ”) \u306a\u3089\u3070\u53f3\u5074\u306e\u5024\u3092\u8a55\u4fa1\u3059\u308b\u300d\u3068\u3044\u3046JavaScript\u306e\u8ad6\u7406OR\u6f14\u7b97\u5b50\u3092\u5229\u7528\u3057\u305f\u30a4\u30c7\u30a3\u30aa\u30e0\u3067\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                              \u3053\u308c\u3089\u306e\u5909\u66f4\u306b\u3088\u308a\u3001\u30dd\u30e2\u30c9\u30fc\u30ed\u30bf\u30a4\u30de\u30fc\u304c\u4f5c\u696d\u6642\u9593\u306e\u958b\u59cb\u3068\u7d42\u4e86\u3092\u6b63\u78ba\u306b\u628a\u63e1\u3057\u3001\u7d42\u4e86\u6642\u306b\u305d\u306e\u60c5\u5831\u3092 work-finished<\/code> \u30a4\u30d9\u30f3\u30c8\u3092\u901a\u3058\u3066\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3042\u308b PomodoroCalendar<\/code> \u306b\u9001\u4fe1\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002PomodoroCalendar<\/code> \u306f\u3053\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u53d7\u3051\u53d6\u308a\u3001\u4f5c\u696d\u30ed\u30b0\u3092\u8a18\u9332\u3057\u3066\u30ab\u30ec\u30f3\u30c0\u30fc\u306b\u8868\u793a\u3057\u307e\u3059\u3002
                              <\/p>\n\n\n\n
                              \u4e0a\u8a18\u306e\u5909\u66f4\u3092\u3057\u305f\u3053\u3068\u3067\u30ab\u30ec\u30f3\u30c0\u30fc\u306b\u4f5c\u696d\u6642\u9593\u304c\u8ffd\u52a0\u3055\u308c\u307e\u3057\u305f\uff01<\/p>\n\n\n\n
                              \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
                              \u5b8c\u4e86\u3057\u305f\u30bf\u30b9\u30af\u3092\u30ab\u30ec\u30f3\u30c0\u30fc\u306b\u8a18\u9332\u3059\u308b\u305f\u3081\u9031\u3054\u3068\u306e\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u4f5c\u6210\u3057\u305f\u3044 \u305d\u306e\u305f\u3081vue\u3092\u4f7f\u7528\u3057\u3066\u4f5c\u3063\u3066\u3044\u304f \u30b9\u30c6\u30c3\u30d7\uff11\uff1a\u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u57fa\u672c\u7684\u306a\u8868\u793a \u307e\u305a\u306f\u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u57fa\u672c\u7684\u306a\u8868\u793a\u3092\u4f5c\u6210\u3057\u307e\u3057\u3087\u3046\u3002\u753b\u50cf\u306e … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-177","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=\/wp\/v2\/posts\/177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=177"}],"version-history":[{"count":1,"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=\/wp\/v2\/posts\/177\/revisions"}],"predecessor-version":[{"id":180,"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=\/wp\/v2\/posts\/177\/revisions\/180"}],"wp:attachment":[{"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}