レスポンス型のエイリアスを typeAliases.ts に集約

src/components/event/EventBlock.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { components } from '@/api/schema'
+import type { DurationEvent, OfficialEvent } from '@/typeAliases'
 import EventDialog from './EventDialog.vue'
 
-type DurationEvent = components['schemas']['DurationEventResponse']
-type OfficialEvent = components['schemas']['OfficialEventResponse']
 const props = defineProps<{ event: DurationEvent | OfficialEvent }>()
 
 const eventColor = computed(() => {

src/components/event/EventDialog.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import MarkdownPreview from '@/components/markdown/MarkdownPreview.vue'
 import UserIcon from '@/components/generic/UserIcon.vue'
 import { getTimeStringNoPad } from '@/utils/date'
-import type { components } from '@/api/schema'
+import type { CampEvent } from '@/typeAliases'
 import { useCampStore } from '@/store'
 import { useRoute } from 'vue-router'
 
@@ -20,7 +20,6 @@ const isOperable = computed(() => {
   return campStore.isOperable(displayCamp.value)
 })
 
-type CampEvent = components['schemas']['EventResponse']
 const props = defineProps<{ event: CampEvent; color: string }>()
 
 // イベントの時刻に関する文字列

src/components/event/EventEditor.vue

@@ -11,6 +11,7 @@ import type { components } from '@/api/schema'
 import { dateToText, dateDiffInDaysJST, getJSTDate } from '@/utils/date'
 import { EVENT_COLORS } from '@/components/event/utils/eventColors'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import type { DurationEvent } from '@/typeAliases'
 
 import { qk } from '@/api/queries/keys'
 
@@ -27,7 +28,6 @@ const displayCamp = computed(() => {
 const emit = defineEmits(['close'])
 
 // rucQ-UI で編集可能なのは DurationEvent のみ。他は rucQ-Admin で編集
-type DurationEvent = components['schemas']['DurationEventResponse']
 const props = defineProps<{ event: DurationEvent | null }>()
 
 const isValid = computed(() => {
@@ -115,9 +115,11 @@ onMounted(() => {
   }
 })
 
+type DurationEventRequestBody = components['schemas']['DurationEventRequest']
+
 // Mutations
 const upsertEventMutation = useMutation({
-  mutationFn: async (body: components['schemas']['DurationEventRequest']) => {
+  mutationFn: async (body: DurationEventRequestBody) => {
     if (props.event) {
       const { error } = await apiClient.PUT('/api/events/{eventId}', {
         params: { path: { eventId: props.event.id } },

src/components/event/EventEditorSettings.vue

@@ -3,13 +3,10 @@ import { ref, computed, watch, onMounted } from 'vue'
 import { getDayStringNoPad } from '@/utils/date'
 import EventTimePick from './EventTimePick.vue'
 import EventDeleteDialog from './EventDeleteDialog.vue'
-import type { components } from '@/api/schema'
 import { apiClient } from '@/api/apiClient'
 import UserIcon from '@/components/generic/UserIcon.vue'
 import { EVENT_COLORS } from '@/components/event/utils/eventColors'
-
-type DurationEvent = components['schemas']['DurationEventResponse']
-type Camp = components['schemas']['CampResponse']
+import type { Camp, DurationEvent } from '@/typeAliases'
 
 const props = defineProps<{ event: DurationEvent | null; camp: Camp }>()
 const emit = defineEmits(['delete'])

src/components/event/EventTimePick.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import type { components } from '@/api/schema'
 import { nextTick, ref, watch, onMounted } from 'vue'
 import type { VTextField } from 'vuetify/components'
-
-type DurationEvent = components['schemas']['DurationEventResponse']
-type EventColor = DurationEvent['displayColor']
+import type { DurationEvent } from '@/typeAliases'
 
 const textFieldRef = ref<VTextField>()
 
 defineProps<{
-  color: EventColor
+  color: DurationEvent['displayColor']
   label: string
   rule: (minute: number | undefined) => true | string
 }>()

src/components/event/ScheduleContent.vue

@@ -3,14 +3,10 @@ import { computed, ref } from 'vue'
 import { getDayStringNoPad } from '@/utils/date'
 import { getLayout } from '@/components/event/utils/eventLayout'
 import EventBlock from '@/components/event/EventBlock.vue'
-import type { components } from '@/api/schema'
 import type { EventGroup, DurationEventPos } from '@/components/event/utils/eventGrid'
 import EventEditor from './EventEditor.vue'
 import ScheduleRow from './ScheduleRow.vue'
-
-type CampEvent = components['schemas']['EventResponse']
-type DurationEvent = components['schemas']['DurationEventResponse']
-type Camp = components['schemas']['CampResponse']
+import type { Camp, CampEvent, DurationEvent } from '@/typeAliases'
 
 const props = defineProps<{
   events: CampEvent[]

src/components/event/utils/eventColors.ts

@@ -1,7 +1,5 @@
 // イベントで利用可能な色の定義
-import type { components } from '@/api/schema'
-
-type DurationEvent = components['schemas']['DurationEventResponse']
+import type { DurationEvent } from '@/typeAliases'
 
 // 型から色の配列を定義することはできないため、手動で定義
 export const EVENT_COLORS: DurationEvent['displayColor'][] = [

src/components/event/utils/eventGrid.ts

@@ -1,11 +1,6 @@
-import type { components } from '@/api/schema'
+import type { CampEvent, DurationEvent, OfficialEvent, MomentEvent } from '@/typeAliases'
 import { getStartTime, getEndTime } from '@/components/event/utils/eventLib'
 
-type MomentEvent = components['schemas']['MomentEventResponse']
-type DurationEvent = components['schemas']['DurationEventResponse']
-type OfficialEvent = components['schemas']['OfficialEventResponse']
-type CampEvent = MomentEvent | DurationEvent | OfficialEvent
-
 export type GridRow = {
   time: Date
   events: (CampEvent | null)[]

src/components/event/utils/eventLayout.ts

@@ -1,13 +1,7 @@
-import type { components } from '@/api/schema'
 import { DayEventGrid, type EventGroup } from '@/components/event/utils/eventGrid'
 import { getStartTime, getEndTime } from '@/components/event/utils/eventLib'
 import { getJSTDate } from '@/utils/date'
-
-type Camp = components['schemas']['CampResponse']
-type MomentEvent = components['schemas']['MomentEventResponse']
-type DurationEvent = components['schemas']['DurationEventResponse']
-type OfficialEvent = components['schemas']['OfficialEventResponse']
-type CampEvent = MomentEvent | DurationEvent | OfficialEvent
+import type { Camp, CampEvent } from '@/typeAliases'
 
 export type DayEventGroups = {
   date: Date

src/components/event/utils/eventLib.ts

@@ -1,5 +1,4 @@
-import type { components } from '@/api/schema'
-type CampEvent = components['schemas']['EventResponse']
+import type { CampEvent } from '@/typeAliases'
 
 // イベントの開始時刻（瞬間イベントならその時刻）を返す
 export const getStartTime = (event: CampEvent) => {

src/components/information/AnswersDialog.vue

@@ -3,12 +3,9 @@ import { computed, onMounted, reactive, ref } from 'vue'
 import { useDisplay } from 'vuetify'
 import { apiClient } from '@/api/apiClient'
 import AnswersDialogContent from './AnswersDialogContent.vue'
-import type { components } from '@/api/schema'
+import type { QuestionGroup, Question } from '@/typeAliases'
 const { xs } = useDisplay()
 
-type QuestionGroup = components['schemas']['QuestionGroupResponse']
-type Question = components['schemas']['QuestionResponse']
-
 const props = defineProps<{
   questionGroup: QuestionGroup
 }>()

src/components/information/AnswersDialogContent.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import type { components } from '@/api/schema'
 import { useDisplay } from 'vuetify'
 import UserIcon from '@/components/generic/UserIcon.vue'
+import type { Question } from '@/typeAliases'
 const { xs } = useDisplay()
 
-type Question = components['schemas']['QuestionResponse']
-
 defineProps<{
   question: Question
   answers: Record<string, string[]> | undefined

src/components/information/PaymentInfo.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import type { components } from '@/api/schema'
-
-type Payment = components['schemas']['PaymentResponse']
+import type { Payment } from '@/typeAliases'
 
 const props = defineProps<{ isReady: boolean; payment?: Payment }>()
 

src/components/information/QuestionEditField.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { components } from '@/api/schema'
-
-type Question = components['schemas']['QuestionResponse']
+import type { Question } from '@/typeAliases'
 
 defineProps<{ question: Question }>()
 const value = defineModel<string | number | number[]>('value')

src/components/information/QuestionGroupEditor.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import type { components } from '@/api/schema'
 import QuestionEditField from '@/components/information/QuestionEditField.vue'
 import MarkdownPreview from '@/components/markdown/MarkdownPreview.vue'
 import AnswersDialog from '@/components/information/AnswersDialog.vue'
 import { computed } from 'vue'
 import { getDayString } from '@/utils/date'
-
-type QuestionGroup = components['schemas']['QuestionGroupResponse']
-type Question = components['schemas']['QuestionResponse']
+import type { QuestionGroup, Question } from '@/typeAliases'
 
 type AnswerData = { id?: number; value?: number | string | number[] }
 

src/components/information/QuestionGroupPanel.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import type { components } from '@/api/schema'
 import { apiClient } from '@/api/apiClient'
 import { ref, computed, onMounted, reactive, toRaw } from 'vue'
 import { useCampStore } from '@/store'
 import QuestionGroupEditor from '@/components/information/QuestionGroupEditor.vue'
 import QuestionGroupViewer from '@/components/information/QuestionGroupViewer.vue'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { qk } from '@/api/queries/keys'
-
-type QuestionGroup = components['schemas']['QuestionGroupResponse']
-type Question = components['schemas']['QuestionResponse']
-type Camp = components['schemas']['CampResponse']
+import type { QuestionGroup, Question, Camp } from '@/typeAliases'
 
 const queryClient = useQueryClient()
 

src/components/information/QuestionGroupViewer.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import type { components } from '@/api/schema'
 import QuestionShowField from '@/components/information/QuestionShowField.vue'
 import { computed } from 'vue'
 import AnswersDialog from '@/components/information/AnswersDialog.vue'
-
-type QuestionGroup = components['schemas']['QuestionGroupResponse']
-type Question = components['schemas']['QuestionResponse']
+import type { QuestionGroup, Question } from '@/typeAliases'
 
 type AnswerData = { id?: number; value?: number | string | number[] }
 

src/components/information/QuestionShowField.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import type { components } from '@/api/schema'
 import { computed } from 'vue'
-
-type Question = components['schemas']['QuestionResponse']
+import type { Question } from '@/typeAliases'
 
 const props = defineProps<{
   question: Question

src/components/information/RoomInfo.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import type { components } from '@/api/schema'
 import UserIcon from '@/components/generic/UserIcon.vue'
 import { useUserStore } from '@/store'
-
-type Room = components['schemas']['RoomResponse']
+import type { Room } from '@/typeAliases'
 
 const userStore = useUserStore()
 

src/components/rollcall/rollCallStream.ts

@@ -1,12 +1,9 @@
 import { ref, computed, type Ref } from 'vue'
 import { apiClient } from '@/api/apiClient'
 import type { components } from '@/api/schema'
-
-// 同一ユーザーが複数リアクションを送信していない前提
+import type { RollCall, RollCallReaction } from '@/typeAliases'
 
 type RollCallReactionEvent = components['schemas']['RollCallReactionEvent']
-type RollCall = components['schemas']['RollCallResponse']
-type RollCallReaction = components['schemas']['RollCallReactionResponse']
 
 // 点呼リアクションの SSE 購読
 const listenRollCallReactions = (

src/store.ts

@@ -1,12 +1,9 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import type { components } from '@/api/schema'
 import { apiClient } from '@/api/apiClient'
 import { useQueryClient } from '@tanstack/vue-query'
 import { qk } from '@/api/queries/keys'
-
-type User = components['schemas']['UserResponse']
-type Camp = components['schemas']['CampResponse']
+import type { User, Camp } from '@/typeAliases'
 
 export const useUserStore = defineStore('user', () => {
   const user = ref<User>()
@@ -73,18 +70,16 @@ export const useCampStore = defineStore('camp', () => {
     allCamps.value = camps
     latestCamp.value = allCamps.value[0]!
 
-    const participants = await queryClient.ensureQueryData<components['schemas']['UserResponse'][]>(
-      {
-        queryKey: qk.camps.participants(latestCamp.value.id),
-        queryFn: async () => {
-          const { data, error } = await apiClient.GET('/api/camps/{campId}/participants', {
-            params: { path: { campId: latestCamp.value!.id } },
-          })
-          if (error) throw new Error(`合宿参加者情報の取得に失敗しました: ${error.message}`)
-          return data
-        },
+    const participants = await queryClient.ensureQueryData<User[]>({
+      queryKey: qk.camps.participants(latestCamp.value.id),
+      queryFn: async () => {
+        const { data, error } = await apiClient.GET('/api/camps/{campId}/participants', {
+          params: { path: { campId: latestCamp.value!.id } },
+        })
+        if (error) throw new Error(`合宿参加者情報の取得に失敗しました: ${error.message}`)
+        return data
       },
-    )
+    })
     hasRegisteredLatest.value = participants.some((user) => user.id === me.id)
   }
 

src/typeAliases.ts

@@ -0,0 +1,20 @@
+import type { components } from '@/api/schema'
+
+export type User = components['schemas']['UserResponse']
+export type Camp = components['schemas']['CampResponse']
+
+export type CampEvent = components['schemas']['EventResponse']
+export type MomentEvent = components['schemas']['MomentEventResponse']
+export type DurationEvent = components['schemas']['DurationEventResponse']
+export type OfficialEvent = components['schemas']['OfficialEventResponse']
+
+export type QuestionGroup = components['schemas']['QuestionGroupResponse']
+export type Question = components['schemas']['QuestionResponse']
+
+export type Dashboard = components['schemas']['DashboardResponse']
+export type Payment = components['schemas']['PaymentResponse']
+export type RoomGroup = components['schemas']['RoomGroupResponse']
+export type Room = components['schemas']['RoomResponse']
+
+export type RollCall = components['schemas']['RollCallResponse']
+export type RollCallReaction = components['schemas']['RollCallReactionResponse']

src/views/RegistrationView.vue

@@ -5,13 +5,11 @@ import { computed } from 'vue'
 import { getDayStringNoPad } from '@/utils/date'
 import MarkdownPreview from '@/components/markdown/MarkdownPreview.vue'
 import { useRouter } from 'vue-router'
-import type { components } from '@/api/schema'
+import type { Camp } from '@/typeAliases'
 import BackgroundPattern from '@/components/generic/BackgroundPattern.vue'
 
 const version = __APP_VERSION__
 
-type Camp = components['schemas']['CampResponse']
-
 const router = useRouter()
 const campStore = useCampStore()
 const timeStore = useTimeStore()

src/views/RollCallView.vue

@@ -3,12 +3,10 @@ import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute } from 'vue-router'
 import { useCampStore, useUserStore } from '@/store'
 import { apiClient } from '@/api/apiClient'
-import type { components } from '@/api/schema'
 import BackgroundPattern from '@/components/generic/BackgroundPattern.vue'
 import UserResponse from '@/components/rollcall/UserResponse.vue'
 import { useRollCallStream } from '@/components/rollcall/rollCallStream'
-
-type RollCall = components['schemas']['RollCallResponse']
+import type { RollCall } from '@/typeAliases'
 
 const route = useRoute()
 const campStore = useCampStore()

src/views/RoomInfoView.vue

@@ -1,21 +1,19 @@
 <script setup lang="ts">
 import { apiClient } from '@/api/apiClient'
-import type { components } from '@/api/schema'
 import UserIcon from '@/components/generic/UserIcon.vue'
 import { useCampStore, useUserStore } from '@/store'
 import { useRoute } from 'vue-router'
 import { useQuery } from '@tanstack/vue-query'
 import { qk } from '@/api/queries/keys'
+import type { Room, RoomGroup } from '@/typeAliases'
 
 const route = useRoute()
 const campStore = useCampStore()
 const userStore = useUserStore()
 
 const displayCamp = campStore.getCampByDisplayId(route.params.campname as string)
 
-type RoomGroup = components['schemas']['RoomGroupResponse']
-
-const isMyRoom = (room: components['schemas']['RoomResponse']) => {
+const isMyRoom = (room: Room) => {
   return room.members.some((member) => member.id === userStore.user.id)
 }