{"id":185,"date":"2025-04-29T15:01:40","date_gmt":"2025-04-29T06:01:40","guid":{"rendered":"https:\/\/suyasuyahirohiro.com\/?p=185"},"modified":"2025-05-01T19:25:02","modified_gmt":"2025-05-01T10:25:02","slug":"%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc%e3%81%ae%e8%a1%a8%e7%a4%ba%e9%83%a8%e5%88%86%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/suyasuyahirohiro.com\/?p=185","title":{"rendered":"\u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u8868\u793a\u90e8\u5206\u3092\u5909\u66f4\u3059\u308b"},"content":{"rendered":"\n

\u6700\u7d42\u7684\u306b\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u305d\u306e\u9031\u3060\u3051\u3092\u8868\u793a\u3057\u305f\u3044<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u305d\u306e\u305f\u3081\u306b\u7de8\u96c6\u3092\u884c\u3046<\/p>\n\n\n\n

\u30b9\u30c6\u30c3\u30d7\uff11\uff1aPomodoroCalendar.vue<\/code> \u306e <script><\/code> \u306e\u4fee\u6b63\uff08\u30c7\u30fc\u30bf\u306e\u6e96\u5099\u3068\u8a08\u7b97\u30ed\u30b8\u30c3\u30af\u306e\u5909\u66f4\uff09<\/strong><\/p>\n\n\n\n

\u73fe\u5728\u306e\u6708\u306e\u8868\u793a\u306b\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3068\u30011\u9031\u9593\u5206\u306e\u8868\u793a\u306b\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u3092\u8a08\u7b97\u3059\u308b\u30ed\u30b8\u30c3\u30af\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u5909\u66f4\u524d (PomodoroCalendar.vue<\/code> \u306e <script><\/code> \u306e data<\/code>\u3001computed<\/code> \u90e8\u5206):<\/strong><\/p>\n\n\n\n

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

  data() {\n    const today = new Date();\n    const currentYear = today.getFullYear();\n    const currentMonth = today.getMonth() + 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      calendarWorkLogs: [...this.workLogs],\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<\/code><\/pre>\n\n\n\n
\u5909\u66f4\u5f8c (PomodoroCalendar.vue<\/code> \u306e <script><\/code> \u306e data<\/code>\u3001computed<\/code> \u90e8\u5206):<\/strong><\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
  data() {\n    const today = new Date();\n    const currentYear = today.getFullYear();\n    const currentMonth = today.getMonth() + 1;\n    const currentDay = today.getDate();\n\n    \/\/ \u8868\u793a\u3059\u308b\u9031\u306e\u958b\u59cb\u65e5\u3092\u8a08\u7b97 (\u4f8b: \u5148\u9031\u306e\u6708\u66dc\u65e5)\n    const daysToMonday = today.getDay() === 0 ? 6 : today.getDay() - 1; \/\/ \u4eca\u9031\u306e\u6708\u66dc\u65e5\u307e\u3067\u306e\u65e5\u6570\n    const startOfWeek = new Date(today);\n    startOfWeek.setDate(currentDay - daysToMonday - 7); \/\/ \u5148\u9031\u306e\u6708\u66dc\u65e5\n\n    const weekDates = [];\n    for (let i = 0; i < 7; i++) {\n      const date = new Date(startOfWeek);\n      date.setDate(startOfWeek.getDate() + i);\n      weekDates.push(date);\n    }\n\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      calendarWorkLogs: [...this.workLogs],\n      weekDates: weekDates, \/\/ \u8868\u793a\u3059\u308b1\u9031\u9593\u306e\u65e5\u4ed8\u914d\u5217\n    };\n  },\n  computed: {\n    calendarGrid() {\n      return [this.weekDates]; \/\/ 1\u9031\u9593\u5206\u306e\u30c7\u30fc\u30bf\u3060\u3051\u3092\u6301\u3064\u914d\u5217\u3092\u8fd4\u3059\n    },\n  },\n<\/code><\/pre>\n\n\n\n
\u5909\u66f4\u70b9\u306e\u89e3\u8aac:<\/strong><\/p>\n\n\n\n
    \n
  • data()<\/code> \u306e\u5909\u66f4:<\/strong>\n
      \n
    • currentDay<\/code>: \u4eca\u65e5\u306e\u65e5\u4ed8\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002<\/li>\n\n\n\n
    • startOfWeek<\/code>: \u8868\u793a\u3059\u308b\u9031\u306e\u958b\u59cb\u65e5\uff08\u3053\u3053\u3067\u306f\u5148\u9031\u306e\u6708\u66dc\u65e5\uff09\u3092\u8a08\u7b97\u3057\u307e\u3059\u3002\n
        \n
      • today.getDay()<\/code>: \u4eca\u65e5\u306e\u66dc\u65e5\uff080:\u65e5, 1:\u6708, … 6:\u571f\uff09\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002<\/li>\n\n\n\n
      • daysToMonday<\/code>: \u4eca\u9031\u306e\u6708\u66dc\u65e5\u307e\u3067\u306e\u65e5\u6570\u3092\u8a08\u7b97\u3057\u307e\u3059\u3002\u65e5\u66dc\u65e5\u306e\u5834\u5408\u306f 6\u3001\u6708\u66dc\u65e5\u306e\u5834\u5408\u306f 0\u3001… \u571f\u66dc\u65e5\u306e\u5834\u5408\u306f 5 \u306b\u306a\u308a\u307e\u3059\u3002<\/li>\n\n\n\n
      • startOfWeek.setDate(currentDay - daysToMonday - 7)<\/code>: \u4eca\u65e5\u306e\u65e5\u4ed8\u304b\u3089\u4eca\u9031\u306e\u6708\u66dc\u65e5\u307e\u3067\u306e\u65e5\u6570\u3068\u3055\u3089\u306b7\u65e5\uff08\u5148\u9031\uff09\u3092\u5f15\u304f\u3053\u3068\u3067\u3001\u5148\u9031\u306e\u6708\u66dc\u65e5\u306e Date<\/code> \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • weekDates<\/code>: startOfWeek<\/code> \u3092\u57fa\u6e96\u306b\u30017\u65e5\u5206\u306e Date<\/code> \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u683c\u7d0d\u3057\u305f\u914d\u5217\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u3053\u308c\u304c\u8868\u793a\u3059\u308b1\u9031\u9593\u306e\u65e5\u4ed8\u30c7\u30fc\u30bf\u3068\u306a\u308a\u307e\u3059\u3002<\/li>\n\n\n\n
      • year<\/code> \u3068 month<\/code> \u306f\u4eca\u65e5\u306e\u3082\u306e\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u3066 weekDates<\/code> \u306e\u6700\u521d\u306e\u65e5\u4ed8\u304b\u3089\u53d6\u5f97\u3059\u308b\u3088\u3046\u306b\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n
      • calendarWorkLogs<\/code>: \u5909\u66f4\u306a\u3057\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • computed.calendarGrid()<\/code> \u306e\u5909\u66f4:<\/strong>\n
          \n
        • \u4ee5\u524d\u306f\u6708\u306e\u5168\u65e5\u3092\u542b\u3080\u4e8c\u6b21\u5143\u914d\u5217\u3092\u751f\u6210\u3057\u3066\u3044\u307e\u3057\u305f\u304c\u3001\u5909\u66f4\u5f8c\u306f this.weekDates<\/code> \u3092\u8981\u7d20\u3068\u3059\u308b\u4e00\u6b21\u5143\u914d\u5217\u3092\u3055\u3089\u306b\u914d\u5217\u3067\u56f2\u3093\u3060 [[...]]<\/code> \u306e\u5f62\u5f0f\u3067\u8fd4\u3057\u307e\u3059\u3002\u3053\u308c\u306f\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e v-for<\/code> \u304c\u9031\u3054\u3068\u306e\u884c\u3092\u51e6\u7406\u3059\u308b\u3053\u3068\u3092\u524d\u63d0\u3068\u3057\u3066\u3044\u308b\u305f\u3081\u30011\u9031\u9593\u5206\u306e\u30c7\u30fc\u30bf\u30921\u3064\u306e\u300c\u9031\u300d\u3068\u3057\u3066\u6271\u3044\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
          \u30b9\u30c6\u30c3\u30d7\uff12\uff1aPomodoroCalendar.vue<\/code> \u306e <template><\/code> \u306e\u4fee\u6b63\uff08\u8868\u793a\u306e\u5909\u66f4\uff09<\/strong><\/p>\n\n\n\n
          \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e v-for<\/code> \u3092 weekDates<\/code> \u914d\u5217\u306b\u5408\u308f\u305b\u3066\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
          \u5909\u66f4\u524d (PomodoroCalendar.vue<\/code> \u306e <template><\/code> \u90e8\u5206):<\/strong><\/p>\n\n\n\n
          HTML<\/p>\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>\n<\/code><\/pre>\n\n\n\n
          \u5909\u66f4\u5f8c (PomodoroCalendar.vue<\/code> \u306e <template><\/code> \u90e8\u5206):<\/strong><\/p>\n\n\n\n
          HTML<\/p>\n\n\n\n
          <template>\n  <div>\n    <h2>\n      {{ weekDates[0] ? weekDates[0].getFullYear() : \"\" }}\u5e74\n      {{ weekDates[0] ? weekDates[0].getMonth() + 1 : \"\" }}\u6708\n      ({{ formatDateRange }})\n    <\/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>\n          <td\n            v-for=\"date in weekDates\"\n            :key=\"date ? date.getTime() : i\"\n            :class=\"{ today: isToday(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>\n\n<script>\n\/\/ ... (script \u90e8\u5206\u306f\u30b9\u30c6\u30c3\u30d7\uff11\u3067\u5909\u66f4)\nexport default {\n  \/\/ ... (name, props, data, watch)\n  computed: {\n    calendarGrid() {\n      return [this.weekDates];\n    },\n    formatDateRange() {\n      if (this.weekDates.length === 7 && this.weekDates[0] && this.weekDates[6]) {\n        const startDay = this.weekDates[0].getDate();\n        const endDay = this.weekDates[6].getDate();\n        return `${startDay} - ${endDay}\u65e5`;\n      }\n      return \"\";\n    },\n  },\n  methods: {\n    \/\/ ... (isToday, getWorkLogsForDate)\n  },\n};\n<\/script>\n<\/code><\/pre>\n\n\n\n
          \u5909\u66f4\u70b9\u306e\u89e3\u8aac:<\/strong><\/p>\n\n\n\n
            \n
          • <h2><\/code> \u90e8\u5206\u306e\u4fee\u6b63:<\/strong>\n
              \n
            • \u8868\u793a\u3059\u308b\u5e74\u3068\u6708\u3092 weekDates<\/code> \u914d\u5217\u306e\u6700\u521d\u306e\u8981\u7d20\u304b\u3089\u53d6\u5f97\u3059\u308b\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3057\u305f\u3002<\/li>\n\n\n\n
            • \u8868\u793a\u3059\u308b\u65e5\u4ed8\u306e\u7bc4\u56f2\u3092\u793a\u3059 formatDateRange<\/code> computed \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8ffd\u52a0\u3057\u3001\u8868\u793a\u3057\u3066\u3044\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n
            • <tbody><\/code> \u90e8\u5206\u306e\u4fee\u6b63:<\/strong>\n
                \n
              • \u9031\u3054\u3068\u306e <tr><\/code> \u306e v-for<\/code> \u3092\u524a\u9664\u3057\u3001\u76f4\u63a5 weekDates<\/code> \u3092 <td><\/code> \u3067\u30eb\u30fc\u30d7\u3059\u308b\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3057\u305f\u30021\u9031\u9593\u5206\u306e\u30c7\u30fc\u30bf\u304c weekDates<\/code> \u306b\u683c\u7d0d\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u30011\u884c\u3067\u8868\u793a\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n
              • <td><\/code> \u306e key<\/code> \u3092 date ? date.getTime() : i<\/code> \u306b\u5909\u66f4\u3057\u307e\u3057\u305f\u3002Date<\/code> \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u5b58\u5728\u3059\u308b\u5834\u5408\u306f\u305d\u306e\u30bf\u30a4\u30e0\u30b9\u30bf\u30f3\u30d7\u3092\u3001\u5b58\u5728\u3057\u306a\u3044\u5834\u5408\u306f\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u3092\u4f7f\u7528\u3057\u307e\u3059\uff08\u4eca\u56de\u306f weekDates<\/code> \u306b\u5e38\u306b Date<\/code> \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u5165\u308b\u306e\u3067\u3001\u4e3b\u306b TypeScript \u306a\u3069\u3067\u306e\u578b\u5b89\u5168\u6027\u3092\u8003\u616e\u3057\u305f\u8a18\u8ff0\u3067\u3059\uff09\u3002<\/li>\n\n\n\n
              • .empty<\/code> \u30af\u30e9\u30b9\u306e\u6761\u4ef6\u3092\u524a\u9664\u3057\u307e\u3057\u305f\u3002weekDates<\/code> \u306b\u306f\u5e38\u306b\u65e5\u4ed8\u304c\u5165\u308b\u305f\u3081\u3001\u7a7a\u306e\u30bb\u30eb\u306f\u306a\u304f\u306a\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                \u30b9\u30c6\u30c3\u30d7\uff13\uff1aPomodoroCalendar.vue<\/code> \u306e <script><\/code> \u306e methods<\/code> \u306e\u4fee\u6b63\uff08\u65e5\u4ed8\u306e\u6bd4\u8f03\uff09<\/strong><\/p>\n\n\n\n
                isToday<\/code> \u30e1\u30bd\u30c3\u30c9\u304c Date<\/code> \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u53d7\u3051\u53d6\u308b\u3088\u3046\u306b\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
                \u5909\u66f4\u524d (PomodoroCalendar.vue<\/code> \u306e <script><\/code> \u306e methods<\/code> \u90e8\u5206):<\/strong><\/p>\n\n\n\n
                JavaScript<\/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.calendarWorkLogs.filter((log) => log.date === formattedDate);\n    },\n    \/\/ ...\n  },\n<\/code><\/pre>\n\n\n\n
                \u5909\u66f4\u5f8c (PomodoroCalendar.vue<\/code> \u306e <script><\/code> \u306e methods<\/code> \u90e8\u5206):<\/strong><\/p>\n\n\n\n
                JavaScript<\/p>\n\n\n\n
                  methods: {\n    isToday(date) {\n      if (!date) return false;\n      return (\n        date.getDate() === this.todayDate &&\n        date.getMonth() === this.todayMonth - 1 && \/\/ JavaScript \u306e month \u306f 0-indexed\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.calendarWorkLogs.filter((log) => log.date === formattedDate);\n    },\n    \/\/ ...\n  },\n<\/code><\/pre>\n\n\n\n
                \u5909\u66f4\u70b9\u306e\u89e3\u8aac:<\/strong><\/p>\n\n\n\n
                  \n
                • isToday(date)<\/code> \u306e\u4fee\u6b63:<\/strong>\n
                    \n
                  • \u5f15\u6570 date<\/code> \u304c Date<\/code> \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3042\u308b\u3053\u3068\u3092\u524d\u63d0\u3068\u3057\u3066\u6bd4\u8f03\u3092\u884c\u3044\u307e\u3059\u3002<\/li>\n\n\n\n
                  • date.getMonth()<\/code> \u306f 0 \u304b\u3089\u59cb\u307e\u308b\u305f\u3081\u3001this.todayMonth - 1<\/code> \u3068\u6bd4\u8f03\u3059\u308b\u3088\u3046\u306b\u4fee\u6b63\u3057\u307e\u3057\u305f\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                    \"\"<\/figure>\n\n\n\n
                    \u3053\u306e\u3088\u3046\u306a\u5f62\u306b\u306a\u3063\u305f<\/p>\n\n\n\n
                    \u3053\u306e\u72b6\u614b\u3060\u3068\u30bf\u30a4\u30de\u30fc\u7d42\u4e86\u5f8c\u30bf\u30b9\u30af\u304c\u53cd\u6620\u3055\u308c\u306a\u304f\u306a\u3063\u3066\u3057\u307e\u3063\u305f\u305f\u3081
                    \u518d\u5ea6\u7d10\u4ed8\u3051\u3092\u884c\u3046<\/p>\n\n\n\n
                    \u518d\u5ea6\u7d10\u4ed8\u3051<\/h3>\n\n\n\n
                    \u554f\u984c\u70b9:<\/strong><\/p>\n\n\n\n
                    \u73fe\u5728\u306e App.vue<\/code> \u306e handleWorkFinished<\/code> \u95a2\u6570\u3067\u306f\u3001\u30ab\u30ec\u30f3\u30c0\u30fc\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u306b calendarRef.value.addWorkLog(logData)<\/code> \u3092\u547c\u3073\u51fa\u3057\u3066\u3044\u307e\u3059\u304c\u3001PomodoroCalendar<\/code> \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u30de\u30a6\u30f3\u30c8\u3055\u308c\u308b\u524d\u306b\u30bf\u30a4\u30de\u30fc\u304c\u7d42\u4e86\u3057\u305f\u5834\u5408\u3001calendarRef.value<\/code> \u304c null<\/code> \u306b\u306a\u3063\u3066\u3044\u308b\u53ef\u80fd\u6027<\/strong>\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
                    \u307e\u305f\u3001mounted<\/code> \u30d5\u30c3\u30af\u3067\u306e watch<\/code> \u306f\u3001\u753b\u9762\u9077\u79fb\u5f8c\u306b\u521d\u671f\u8868\u793a\u7528\u306e calendarWorkLogs<\/code> \u3092\u53cd\u6620\u3059\u308b\u610f\u56f3\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u30bf\u30a4\u30de\u30fc\u7d42\u4e86\u5f8c\u306b\u5373\u5ea7\u306b\u53cd\u6620\u3059\u308b\u305f\u3081\u306b\u306f\u5225\u306e\u4ed5\u7d44\u307f\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n\n\n\n
                    \u4fee\u6b63\u65b9\u91dd:<\/strong><\/p>\n\n\n\n
                      \n
                    1. App.vue<\/code> \u3067\u30bf\u30a4\u30de\u30fc\u7d42\u4e86\u6642\u306b\u53d7\u3051\u53d6\u3063\u305f\u30ed\u30b0\u3092 calendarWorkLogs<\/code> \u306b\u4fdd\u6301\u3057\u7d9a\u3051\u308b\u3002<\/strong><\/li>\n\n\n\n
                    2. PomodoroCalendar<\/code> \u304c\u30de\u30a6\u30f3\u30c8\u3055\u308c\u305f\u969b\u306b\u3001calendarWorkLogs<\/code> \u306b\u4fdd\u6301\u3055\u308c\u3066\u3044\u308b\u30ed\u30b0\u3092\u81ea\u8eab\u306b\u8ffd\u52a0\u3059\u308b\u3002<\/strong><\/li>\n\n\n\n
                    3. \u30bf\u30a4\u30de\u30fc\u7d42\u4e86\u6642\u306b\u30ab\u30ec\u30f3\u30c0\u30fc\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308c\u3070\u3001\u5373\u5ea7\u306b PomodoroCalendar<\/code> \u306e addWorkLog<\/code> \u3092\u547c\u3073\u51fa\u3059\u3002<\/strong><\/li>\n<\/ol>\n\n\n\n
                      \u30b9\u30c6\u30c3\u30d7\uff11\uff1aApp.vue<\/code> \u306e <script><\/code> \u306e\u4fee\u6b63<\/strong><\/p>\n\n\n\n
                      handleWorkFinished<\/code> \u95a2\u6570\u3068 mounted<\/code> \u30d5\u30c3\u30af\u3092\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
                      JavaScript<\/p>\n\n\n\n
                        setup() {\n    const route = useRoute();\n    const calendarRef = ref(null); \/\/ PomodoroCalendar \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u53c2\u7167\n    const calendarWorkLogs = ref([]); \/\/ \u4f5c\u696d\u30ed\u30b0\u3092\u4fdd\u6301\n\n    const handleWorkFinished = (logData) => {\n      console.log(\"App.vue \u3067\u4f5c\u696d\u7d42\u4e86\u30a4\u30d9\u30f3\u30c8\u3092\u53d7\u3051\u53d6\u308a\u307e\u3057\u305f:\", logData);\n      calendarWorkLogs.value.push(logData); \/\/ \u4f5c\u696d\u7d42\u4e86\u6642\u306b\u30ed\u30b0\u3092 calendarWorkLogs \u306b\u8ffd\u52a0\n      if (route.path === \"\/calendar\" && calendarRef.value) {\n        calendarRef.value.addWorkLog(logData); \/\/ \u30ab\u30ec\u30f3\u30c0\u30fc\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308c\u3070\u76f4\u63a5\u8ffd\u52a0\n      }\n    };\n\n    return { route, calendarRef, calendarWorkLogs, handleWorkFinished };\n  },\n  mounted() {\n    this.$watch(\n      () => this.$route.path,\n      (newPath) => {\n        if (newPath === \"\/calendar\" && this.calendarRef) {\n          \/\/ \u30ab\u30ec\u30f3\u30c0\u30fc\u8868\u793a\u6642\u306b\u4fdd\u6301\u3057\u3066\u3044\u308b\u30ed\u30b0\u3092\u3059\u3079\u3066\u8ffd\u52a0\n          this.calendarWorkLogs.value.forEach(log => {\n            this.calendarRef.value.addWorkLog(log);\n          });\n          \/\/ \u8ffd\u52a0\u5f8c\u306b\u30af\u30ea\u30a2 (\u5373\u6642\u53cd\u6620\u306e\u305f\u3081\u3001\u4fdd\u6301\u306f\u4e0d\u8981)\n          this.calendarWorkLogs.value = [];\n        }\n      }\n    );\n  },\n};\n<\/code><\/pre>\n\n\n\n
                      \u5909\u66f4\u70b9\u306e\u89e3\u8aac:<\/strong><\/p>\n\n\n\n
                        \n
                      • setup()<\/code> \u95a2\u6570\u306e\u5909\u66f4:<\/strong>\n
                          \n
                        • calendarWorkLogs<\/code> \u306e\u30b3\u30e1\u30f3\u30c8\u3092\u4fee\u6b63\u3057\u3001\u4f5c\u696d\u30ed\u30b0\u3092\u4fdd\u6301\u3059\u308b\u5f79\u5272\u3092\u660e\u78ba\u306b\u3057\u307e\u3057\u305f\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                        • mounted()<\/code> \u30d5\u30c3\u30af\u306e\u5909\u66f4:<\/strong>\n
                            \n
                          • \u30ab\u30ec\u30f3\u30c0\u30fc\u753b\u9762 (\/calendar<\/code>) \u306b\u9077\u79fb\u3057\u3001calendarRef<\/code> \u304c\u5b58\u5728\u3059\u308b\u5834\u5408\u306b\u3001calendarWorkLogs<\/code> \u306b\u4fdd\u6301\u3055\u308c\u3066\u3044\u308b\u3059\u3079\u3066\u306e\u30ed\u30b0\u3092 calendarRef.value.addWorkLog(log)<\/code> \u3092\u4f7f\u3063\u3066 PomodoroCalendar<\/code> \u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/li>\n\n\n\n
                          • \u30ed\u30b0\u3092\u8ffd\u52a0\u5f8c\u3001calendarWorkLogs.value = [];<\/code> \u3067\u914d\u5217\u3092\u30af\u30ea\u30a2\u3057\u307e\u3059\u3002\u3053\u308c\u306f\u3001\u30ed\u30b0\u3092\u5373\u6642\u53cd\u6620\u3059\u308b\u305f\u3081\u3001App.vue<\/code> \u3067\u4fdd\u6301\u3059\u308b\u5fc5\u8981\u304c\u306a\u304f\u306a\u308b\u305f\u3081\u3067\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                            \u30b9\u30c6\u30c3\u30d7\uff12\uff1aPomodoroCalendar.vue<\/code> \u306e <script><\/code> \u306e\u4fee\u6b63\uff08\u30de\u30a6\u30f3\u30c8\u6642\u306e\u30ed\u30b0\u53cd\u6620\uff09<\/strong><\/p>\n\n\n\n
                            PomodoroCalendar<\/code> \u304c\u30de\u30a6\u30f3\u30c8\u3055\u308c\u305f\u969b\u306b\u3001props<\/code> \u3067\u53d7\u3051\u53d6\u3063\u305f workLogs<\/code> \u3092\u81ea\u8eab\u306e calendarWorkLogs<\/code> \u306b\u53cd\u6620\u3055\u305b\u308b\u51e6\u7406\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
                            JavaScript<\/p>\n\n\n\n
                              data() {\n    const today = new Date();\n    const currentYear = today.getFullYear();\n    const currentMonth = today.getMonth() + 1;\n    const currentDay = today.getDate();\n\n    const daysToMonday = today.getDay() === 0 ? 6 : today.getDay() - 1;\n    const startOfWeek = new Date(today);\n    startOfWeek.setDate(currentDay - daysToMonday - 7);\n\n    const weekDates = [];\n    for (let i = 0; i < 7; i++) {\n      const date = new Date(startOfWeek);\n      date.setDate(startOfWeek.getDate() + i);\n      weekDates.push(date);\n    }\n\n    const hours = Array.from({ length: 24 }, (_, i) => i);\n\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      calendarWorkLogs: [], \/\/ \u521d\u671f\u5316\u3092\u7a7a\u306b\u3059\u308b\n      weekDates: weekDates,\n      hours: hours,\n    };\n  },\n  watch: {\n    workLogs(newWorkLogs) {\n      this.calendarWorkLogs = [...newWorkLogs];\n    },\n  },\n  mounted() {\n    \/\/ props \u3067\u53d7\u3051\u53d6\u3063\u305f initialWorkLogs \u3092\u521d\u671f\u8868\u793a\u6642\u306b\u8ffd\u52a0\n    this.workLogs.forEach(log => {\n      this.addWorkLog(log);\n    });\n  },\n  methods: {\n    addWorkLog(logData) {\n      this.calendarWorkLogs.push(logData);\n    },\n    \/\/ ... (\u4ed6\u306e\u30e1\u30bd\u30c3\u30c9\u306f\u5909\u66f4\u306a\u3057)\n  },\n<\/code><\/pre>\n\n\n\n
                            \u5909\u66f4\u70b9\u306e\u89e3\u8aac:<\/strong><\/p>\n\n\n\n
                              \n
                            • data()<\/code> \u306e\u5909\u66f4:<\/strong>\n
                                \n
                              • calendarWorkLogs<\/code> \u306e\u521d\u671f\u5316\u3092 []<\/code> \u306b\u5909\u66f4\u3057\u307e\u3057\u305f\u3002\u521d\u671f\u8868\u793a\u306f mounted<\/code> \u30d5\u30c3\u30af\u3067\u884c\u3044\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                              • mounted()<\/code> \u30d5\u30c3\u30af\u306e\u8ffd\u52a0:<\/strong>\n
                                  \n
                                • \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u30de\u30a6\u30f3\u30c8\u3055\u308c\u305f\u969b\u306b\u3001props<\/code> \u3067\u53d7\u3051\u53d6\u3063\u305f workLogs<\/code> \u3092 forEach<\/code> \u3067\u30eb\u30fc\u30d7\u51e6\u7406\u3057\u3001\u81ea\u8eab\u306e addWorkLog<\/code> \u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3063\u3066 calendarWorkLogs<\/code> \u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u521d\u671f\u8868\u793a\u6642\u306b App.vue<\/code> \u304b\u3089\u6e21\u3055\u308c\u305f\u30ed\u30b0\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                                  \u3053\u308c\u3089\u306e\u5909\u66f4\u3092\u52a0\u3048\u308b\u3053\u3068\u3067\u3001\u30bf\u30a4\u30de\u30fc\u7d42\u4e86\u5f8c\u306b\u30ab\u30ec\u30f3\u30c0\u30fc\u753b\u9762\u306b\u9077\u79fb\u3057\u3066\u3044\u308c\u3070\u5373\u5ea7\u306b\u30bf\u30b9\u30af\u304c\u53cd\u6620\u3055\u308c\u3001\u30ab\u30ec\u30f3\u30c0\u30fc\u753b\u9762\u304c\u65e2\u306b\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u5834\u5408\u3067\u3082\u3001\u30bf\u30a4\u30de\u30fc\u7d42\u4e86\u5f8c\u306b\u30bf\u30b9\u30af\u304c\u8ffd\u52a0\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
                                  \u30de\u30a6\u30f3\u30c8\u3055\u308c\u308b\u3063\u3066\u3069\u3046\u3044\u3046\u610f\u5473<\/h4>\n\n\n\n
                                  <\/p>\n\n\n\n
                                    \n
                                  • \u30de\u30a6\u30f3\u30c8\u3055\u308c\u308b\uff1a<\/strong> \u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5b9f\u4f53\u304c\u3001HTML \u306e\u7279\u5b9a\u306e\u5834\u6240\uff08\u901a\u5e38\u306f index.html<\/code> \u5185\u306e id=\"app\"<\/code> \u306e\u8981\u7d20\uff09\u306b\u7d44\u307f\u8fbc\u307e\u308c\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u753b\u9762\u306b\u63cf\u753b\u3055\u308c\u308b<\/strong>\u3053\u3068\u3067\u3059\u3002\u521d\u3081\u3066\u30e6\u30fc\u30b6\u30fc\u306e\u76ee\u306b\u898b\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u3001\u30c7\u30fc\u30bf\u306b\u57fa\u3065\u3044\u3066\u8868\u793a\u304c\u5909\u5316\u3057\u305f\u308a\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u64cd\u4f5c\u306b\u5fdc\u3058\u305f\u308a\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n
                                    \u3053\u308c\u3067\u3082\u3060\u3081<\/p>\n","protected":false},"excerpt":{"rendered":"
                                    \u6700\u7d42\u7684\u306b\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u305d\u306e\u9031\u3060\u3051\u3092\u8868\u793a\u3057\u305f\u3044 \u305d\u306e\u305f\u3081\u306b\u7de8\u96c6\u3092\u884c\u3046 \u30b9\u30c6\u30c3\u30d7\uff11\uff1aPomodoroCalendar.vue \u306e <script> \u306e\u4fee\u6b63\uff08\u30c7\u30fc\u30bf\u306e\u6e96\u5099\u3068\u8a08\u7b97\u30ed\u30b8\u30c3\u30af\u306e\u5909\u66f4\uff09  … <\/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-185","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=\/wp\/v2\/posts\/185","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=185"}],"version-history":[{"count":2,"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=\/wp\/v2\/posts\/185\/revisions"}],"predecessor-version":[{"id":190,"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=\/wp\/v2\/posts\/185\/revisions\/190"}],"wp:attachment":[{"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/suyasuyahirohiro.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}