From f91b5dec945bec71dac28047d7135c724be56c0d Mon Sep 17 00:00:00 2001
From: wakashi1 <makotozuoteng78@gmail.com>
Date: Tue, 17 May 2022 22:50:59 +0900
Subject: [PATCH 01/14] newtabquestions

---
 src/assets/mdi.ts                             |  9 +-
 .../NewQuestionnaire/AddQuestionButtons.vue   | 11 ++-
 .../NewQuestionnaire/Forms/ChoiceElement.vue  | 17 ++--
 .../NewQuestionnaire/Forms/ChoiceForm.vue     | 59 ++++++++---
 .../Forms/LinearScaleForm.vue                 |  4 +-
 .../NewQuestionnaire/Forms/QuestionForm.vue   | 57 ++++++-----
 .../NewQuestionnaire/Forms/QuestionTitle.vue  | 56 +++++++++++
 .../Forms/Questiondispose.vue                 | 46 +++++++++
 .../NewQuestionnaire/Forms/Questionupdown.vue | 60 ++++++++++++
 .../NewQuestionnaire/Forms/TextForm.vue       | 18 +++-
 ...estionTitle.vue => QuestionnaireTitle.vue} |  0
 src/components/NewQuestionnaire/Questions.vue | 97 +++++++++++++------
 src/components/NewQuestionnaire/use/utils.ts  | 44 ++++++---
 src/components/UI/QuestionInput.vue           | 10 +-
 src/components/UI/QuestionTextarea.vue        |  9 +-
 src/pages/NewQuestionnaire.vue                | 12 ++-
 16 files changed, 393 insertions(+), 116 deletions(-)
 create mode 100644 src/components/NewQuestionnaire/Forms/QuestionTitle.vue
 create mode 100644 src/components/NewQuestionnaire/Forms/Questiondispose.vue
 create mode 100644 src/components/NewQuestionnaire/Forms/Questionupdown.vue
 rename src/components/NewQuestionnaire/{QuestionTitle.vue => QuestionnaireTitle.vue} (100%)

diff --git a/src/assets/mdi.ts b/src/assets/mdi.ts
index 67affef4..37424c21 100644
--- a/src/assets/mdi.ts
+++ b/src/assets/mdi.ts
@@ -1,6 +1,7 @@
 import {
   mdiChevronDown,
   mdiChevronUp,
+  mdiChevronRight,
   mdiMagnify,
   mdiOpenInNew,
   mdiHelpCircleOutline,
@@ -14,18 +15,19 @@ import {
   mdiCheck,
   mdiLoading,
   mdiTrashCanOutline,
-  mdiAlertOutline
+  mdiAlertOutline,
+  mdiPlusCircleOutline
 } from '@mdi/js'
 
 const mdi = new Map<string, string>([
   ['chevron-down', mdiChevronDown],
   ['chevron-up', mdiChevronUp],
+  ['chevron-right', mdiChevronRight],
   ['magnify', mdiMagnify],
   ['open-in-new', mdiOpenInNew],
   ['help-circle-outline', mdiHelpCircleOutline],
   ['menu', mdiMenu],
   ['close', mdiClose],
-  ['chevron-down', mdiChevronDown],
   ['eye-closed', mdiEyeOff],
   ['eye', mdiEye],
   ['clipboard', mdiClipboard],
@@ -34,7 +36,8 @@ const mdi = new Map<string, string>([
   ['check', mdiCheck],
   ['loading', mdiLoading],
   ['trash-can-outline', mdiTrashCanOutline],
-  ['alert', mdiAlertOutline]
+  ['alert', mdiAlertOutline],
+  ['plus-circle-outline', mdiPlusCircleOutline]
 ])
 
 export default mdi
diff --git a/src/components/NewQuestionnaire/AddQuestionButtons.vue b/src/components/NewQuestionnaire/AddQuestionButtons.vue
index 1a537907..4451372b 100644
--- a/src/components/NewQuestionnaire/AddQuestionButtons.vue
+++ b/src/components/NewQuestionnaire/AddQuestionButtons.vue
@@ -1,9 +1,10 @@
 <template>
-  <button>
+  <button @click="Isappeared = !Isappeared">
     新しい質問を追加
-    <Icon name="chevron-down" />
+    <Icon v-if="Isappeared" name="chevron-down" />
+    <Icon v-if="!Isappeared" name="chevron-right" />
   </button>
-  <div>
+  <div v-if="Isappeared">
     <button
       v-for="(questionType, key) in questionTypes"
       :key="key"
@@ -14,7 +15,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import Icon from '/@/components/UI/Icon.vue'
 import { questionTypes } from './use/utils'
 
@@ -28,10 +29,12 @@ export default defineComponent({
     add: (key: string) => true
   },
   setup(props, context) {
+    const Isappeared = ref(false)
     const add = (key: string) => {
       context.emit('add', key)
     }
     return {
+      Isappeared,
       add,
       questionTypes
     }
diff --git a/src/components/NewQuestionnaire/Forms/ChoiceElement.vue b/src/components/NewQuestionnaire/Forms/ChoiceElement.vue
index 07466f9e..e3ed906e 100644
--- a/src/components/NewQuestionnaire/Forms/ChoiceElement.vue
+++ b/src/components/NewQuestionnaire/Forms/ChoiceElement.vue
@@ -1,16 +1,11 @@
 <template>
-  <div>
-    <Icon name="chevron-up" />
-    <Icon name="chevron-down" />
-  </div>
-  <input v-if="!isRadio" type="checkbox" value="true" />
-  <input v-if="isRadio" type="radio" value="true" />
-  <QuestionInput v-model="labelRef" />
-  <Icon name="delete" @click="deleteChoice" />
+  <input :type="[isRadio ? 'radio' : 'checkbox']" value="true" />
+  <QuestionInput v-model="labelRef" :model-value="label" />
+  <Icon name="trash-can-outline" @click="deleteChoice" />
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch } from 'vue'
+import { defineComponent, PropType, ref, watch } from 'vue'
 import Icon from '../../UI/Icon.vue'
 import QuestionInput from '../../UI/QuestionInput.vue'
 
@@ -32,6 +27,10 @@ export default defineComponent({
     isRadio: {
       type: Boolean,
       default: false
+    },
+    modelValue: {
+      type: Array as PropType<string[]>,
+      required: true
     }
   },
   emits: {
diff --git a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
index e02383fb..b3c9cf2d 100644
--- a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
+++ b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
@@ -6,18 +6,25 @@
     @update:required="updateQuestionRequired"
   >
     <div>
-      <div v-for="(label, i) in questionData.options" :key="i">
+      <div v-for="(label, i) in ChoiceQuestions" :key="i">
+        <Questionupdown
+          :index="i"
+          :max="ChoiceQuestions.length"
+          @up="upChoice"
+          @down="downChoice"
+        />
         <ChoiceElement
           :label="label"
           :index="i"
           :is-radio="isRadio"
+          :model-value="questionData.options"
           @update:label="updateChoice"
           @delete="deleteChoice"
         />
       </div>
     </div>
     <div>
-      <span @click="addChoice">
+      <span :class="$style.newchoice" @click="addChoice">
         <Icon name="plus-circle-outline" />新しい選択肢を追加
       </span>
     </div>
@@ -25,10 +32,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, PropType, ref } from 'vue'
 import QuestionForm from './QuestionForm.vue'
 import ChoiceElement from './ChoiceElement.vue'
 import Icon from '../../UI/Icon.vue'
+import Questionupdown from './Questionupdown.vue'
 import { CheckboxQuestion } from '../use/utils'
 import { updateQuestionData } from '../use/updateQuestionData'
 
@@ -37,6 +45,7 @@ export default defineComponent({
   components: {
     QuestionForm,
     ChoiceElement,
+    Questionupdown,
     Icon
   },
   props: {
@@ -58,6 +67,7 @@ export default defineComponent({
     update: (question: CheckboxQuestion, index: number) => true
   },
   setup(props, context) {
+    const ChoiceQuestions = ref(props.questionData.options)
     const updateChoiceQuestionData = updateQuestionData<CheckboxQuestion>(
       props,
       context
@@ -70,30 +80,51 @@ export default defineComponent({
     }
 
     const updateChoice = (label: string, index: number) => {
-      const newOptions = [...props.questionData.options]
-      newOptions[index] = label
-      updateChoiceQuestionData('options', newOptions)
+      ChoiceQuestions.value[index] = label
+      updateChoiceQuestionData('options', ChoiceQuestions.value)
     }
 
-    const deleteChoice = (label: string, index: number) => {
-      const newOptions = [...props.questionData.options]
-      newOptions.splice(index, 1)
-      updateChoiceQuestionData('options', newOptions)
+    const deleteChoice = (index: number) => {
+      ChoiceQuestions.value.splice(index, 1)
+      updateChoiceQuestionData('options', ChoiceQuestions.value)
     }
 
     const addChoice = () => {
-      const newOptions = [...props.questionData.options]
-      newOptions.push('')
-      updateChoiceQuestionData('options', newOptions)
+      ChoiceQuestions.value.push('')
+      updateChoiceQuestionData('options', ChoiceQuestions.value)
+    }
+
+    const upChoice = (index: number) => {
+      ;[ChoiceQuestions.value[index], ChoiceQuestions.value[index - 1]] = [
+        ChoiceQuestions.value[index - 1],
+        ChoiceQuestions.value[index]
+      ]
+      updateChoiceQuestionData('options', ChoiceQuestions.value)
+    }
+    const downChoice = (index: number) => {
+      ;[ChoiceQuestions.value[index], ChoiceQuestions.value[index + 1]] = [
+        ChoiceQuestions.value[index + 1],
+        ChoiceQuestions.value[index]
+      ]
+      updateChoiceQuestionData('options', ChoiceQuestions.value)
     }
 
     return {
+      ChoiceQuestions,
       updateQuestionName,
       updateQuestionRequired,
       updateChoice,
       deleteChoice,
-      addChoice
+      addChoice,
+      upChoice,
+      downChoice
     }
   }
 })
 </script>
+
+<style lang="scss" module>
+.newchoice {
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue b/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue
index 6d609caa..16dc10a7 100644
--- a/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue
+++ b/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue
@@ -38,8 +38,8 @@ export default defineComponent({
   name: 'ChoiceForm',
   components: {
     QuestionForm,
-    QuestionInput,
-    Select
+    Select,
+    QuestionInput
   },
   props: {
     index: {
diff --git a/src/components/NewQuestionnaire/Forms/QuestionForm.vue b/src/components/NewQuestionnaire/Forms/QuestionForm.vue
index a281c905..b395b5b0 100644
--- a/src/components/NewQuestionnaire/Forms/QuestionForm.vue
+++ b/src/components/NewQuestionnaire/Forms/QuestionForm.vue
@@ -1,37 +1,24 @@
 <template>
   <div>
-    <div>
-      <Icon name="chevron-up" />
-      <Icon name="chevron-down" />
-      <Icon name="delete" />
-    </div>
-    <div>
-      <div>
-        <QuestionInput v-model="questionName" />
-        <QuestionCheckbox
-          v-model="questionIsRequired"
-          :contents="questionRequiredContent"
-        />
-      </div>
-      <slot></slot>
-    </div>
+    <QuestionTitle v-model="questionName" />
+    <QuestionCheckbox
+      v-model="questionIsRequired"
+      :contents="[REQUIRED_LABEL]"
+    />
+    <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue'
-import QuestionInput from '../../UI/QuestionInput.vue'
+import QuestionTitle from './QuestionTitle.vue'
 import QuestionCheckbox from '../../UI/QuestionCheckbox.vue'
-import Icon from '../../UI/Icon.vue'
-
-const REQUIRED_LABEL = '必須'
 
 export default defineComponent({
   name: 'QuestionForm',
   components: {
-    QuestionInput,
-    QuestionCheckbox,
-    Icon
+    QuestionTitle,
+    QuestionCheckbox
   },
   props: {
     name: {
@@ -50,22 +37,32 @@ export default defineComponent({
     'update:required': (v: boolean) => true
   },
   setup(props, context) {
+    const REQUIRED_LABEL = '必須'
     const questionName = ref(props.name)
-    const questionIsRequired = ref(props.isRequired ? [REQUIRED_LABEL] : [])
+    // todo: ここでQuestionのCheckboxを使っていいか考える
+    const questionIsRequired = ref<string[]>([])
+    if (props.isRequired) {
+      questionIsRequired.value.push(REQUIRED_LABEL)
+    }
 
-    watch(questionName, newName => context.emit('update:name', newName))
-    watch(questionIsRequired, newIsRequired =>
-      context.emit(
-        'update:required',
-        newIsRequired.length > 0 && newIsRequired[0] == REQUIRED_LABEL
-      )
+    watch(questionName, newName => {
+      questionName.value = newName
+      context.emit('update:name', newName)
+    })
+    watch(
+      () => [...questionIsRequired.value],
+      newIsRequired => {
+        context.emit('update:required', newIsRequired.length === 1)
+      }
     )
 
     return {
       questionName,
       questionIsRequired,
-      questionRequiredContent: [REQUIRED_LABEL]
+      REQUIRED_LABEL
     }
   }
 })
 </script>
+
+<style lang="scss" module></style>
diff --git a/src/components/NewQuestionnaire/Forms/QuestionTitle.vue b/src/components/NewQuestionnaire/Forms/QuestionTitle.vue
new file mode 100644
index 00000000..e251a64a
--- /dev/null
+++ b/src/components/NewQuestionnaire/Forms/QuestionTitle.vue
@@ -0,0 +1,56 @@
+<template>
+  <input
+    :class="$style.input"
+    placeholder="質問文"
+    :value="modelValue"
+    @input="update"
+  />
+  <input-underline :class="$style.underline" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import InputUnderline from '/@/components/UI/InputUnderline.vue'
+
+export default defineComponent({
+  name: 'QuestionInput',
+  components: {
+    InputUnderline
+  },
+  props: {
+    modelValue: {
+      type: String,
+      required: true
+    }
+  },
+  emits: {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    'update:modelValue': (value: string) => true
+  },
+  setup(props, context) {
+    const update = (e: InputEvent) => {
+      context.emit('update:modelValue', (e.target as HTMLInputElement).value)
+    }
+
+    return { update }
+  }
+})
+</script>
+
+<style lang="scss" module>
+$input-border: 1px;
+$underline-margin: -1 * $input-border;
+
+.input {
+  box-sizing: border-box;
+  width: 100%;
+  font-size: 1rem;
+  border: none;
+  outline: 0;
+  padding: 0.4rem;
+  border-bottom: $input-border dotted #7c6c4d;
+}
+.underline {
+  margin-top: $underline-margin;
+}
+</style>
diff --git a/src/components/NewQuestionnaire/Forms/Questiondispose.vue b/src/components/NewQuestionnaire/Forms/Questiondispose.vue
new file mode 100644
index 00000000..8f1888b2
--- /dev/null
+++ b/src/components/NewQuestionnaire/Forms/Questiondispose.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <Icon name="trash-can-outline" @click="deleteQuestion" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Icon from '/@/components/UI/Icon.vue'
+
+export default defineComponent({
+  name: 'Questionupdown',
+  components: {
+    Icon
+  },
+  props: {
+    questionarray: {
+      type: Array,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  },
+  emits: {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    delete: (index: number) => true
+  },
+  setup(props, context) {
+    const deleteQuestion = () => {
+      const trash = confirm('この質問を削除しますか？')
+      if (trash) {
+        context.emit('delete', props.index)
+      }
+    }
+    return { deleteQuestion }
+  }
+})
+</script>
+
+<style lang="scss" module>
+.input {
+  appearance: none;
+}
+</style>
diff --git a/src/components/NewQuestionnaire/Forms/Questionupdown.vue b/src/components/NewQuestionnaire/Forms/Questionupdown.vue
new file mode 100644
index 00000000..ccbb5b04
--- /dev/null
+++ b/src/components/NewQuestionnaire/Forms/Questionupdown.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <Icon
+      :class="[index === 0 ? $style.button : '']"
+      name="chevron-up"
+      @click="upQuestion"
+    />
+  </div>
+  <div>
+    <Icon
+      :class="[index === max - 1 ? $style.button : '']"
+      name="chevron-down"
+      @click="downQuestion"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Icon from '/@/components/UI/Icon.vue'
+
+export default defineComponent({
+  name: 'Questionupdown',
+  components: {
+    Icon
+  },
+  props: {
+    index: {
+      type: Number,
+      required: true
+    },
+    max: {
+      type: Number,
+      required: true
+    }
+  },
+  emits: {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    up: (index: number) => true,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    down: (index: number) => true
+  },
+  setup(props, context) {
+    const upQuestion = () => {
+      context.emit('up', props.index)
+    }
+    const downQuestion = () => {
+      context.emit('down', props.index)
+    }
+    return { upQuestion, downQuestion }
+  }
+})
+</script>
+
+<style lang="scss" module>
+.button {
+  pointer-events: none;
+  color: red;
+}
+</style>
diff --git a/src/components/NewQuestionnaire/Forms/TextForm.vue b/src/components/NewQuestionnaire/Forms/TextForm.vue
index 31a2be3a..8858e084 100644
--- a/src/components/NewQuestionnaire/Forms/TextForm.vue
+++ b/src/components/NewQuestionnaire/Forms/TextForm.vue
@@ -6,7 +6,17 @@
     @update:required="updateQuestionRequired"
   >
     <div>
-      <QuestionInput model-value="" />
+      <QuestionTextarea
+        v-if="questionData.question_type === 'TextArea'"
+        model-value=""
+        :pointerevents="false"
+      />
+      <QuestionInput
+        v-else
+        :is-number="questionData.question_type === 'Number'"
+        model-value=""
+        :pointerevents="false"
+      />
     </div>
   </QuestionForm>
 </template>
@@ -14,6 +24,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
 import QuestionInput from '../../UI/QuestionInput.vue'
+import QuestionTextarea from '/@/components/UI/QuestionTextarea.vue'
 import QuestionForm from './QuestionForm.vue'
 import { TextQuestion } from '../use/utils'
 import { updateQuestionData } from '../use/updateQuestionData'
@@ -21,8 +32,9 @@ import { updateQuestionData } from '../use/updateQuestionData'
 export default defineComponent({
   name: 'TextForm',
   components: {
-    QuestionForm,
-    QuestionInput
+    QuestionInput,
+    QuestionTextarea,
+    QuestionForm
   },
   props: {
     index: {
diff --git a/src/components/NewQuestionnaire/QuestionTitle.vue b/src/components/NewQuestionnaire/QuestionnaireTitle.vue
similarity index 100%
rename from src/components/NewQuestionnaire/QuestionTitle.vue
rename to src/components/NewQuestionnaire/QuestionnaireTitle.vue
diff --git a/src/components/NewQuestionnaire/Questions.vue b/src/components/NewQuestionnaire/Questions.vue
index 3215ea59..dbffba7f 100644
--- a/src/components/NewQuestionnaire/Questions.vue
+++ b/src/components/NewQuestionnaire/Questions.vue
@@ -1,27 +1,42 @@
 <template>
-  <QuestionTitle :title="'タイトル'" />
+  <Card>
+    <template #header>
+      <QuestionnaireTitle :title="'タイトル'" />
+    </template>
+  </Card>
   <div>
     <div v-if="questions.length === 0">質問がありません</div>
-    <div v-for="(question, i) in questions" :key="i">
-      <TextForm
-        v-if="isTextForm(question)"
-        :index="i"
-        :question-data="question"
-        @update="updateQuestion"
-      />
-      <ChoiceForm
-        v-if="isChoiceForm(question)"
-        :index="i"
-        :question-data="question"
-        :is-radio="question.question_type === QuestionType.MultipleChoice"
-        @update="updateQuestion"
-      />
-      <LinearScaleForm
-        v-if="isLinearScaleForm(question)"
-        :index="i"
-        :question-data="question"
-        @update="updateQuestion"
-      />
+    <div v-for="(question, i) in questions" :key="question.key">
+      <Card :header-visible="false">
+        <template #content>
+          <Questionupdown
+            :index="i"
+            :max="questions.length"
+            @up="upQuestion"
+            @down="downQuestion"
+          />
+          <Questiondispose :index="i" @delete="deleteQuestion" />
+          <TextForm
+            v-if="isTextForm(question)"
+            :index="i"
+            :question-data="question"
+            @update="updateQuestions"
+          />
+          <ChoiceForm
+            v-if="isChoiceForm(question)"
+            :index="i"
+            :question-data="question"
+            :is-radio="question.question_type === QuestionType.MultipleChoice"
+            @update="updateQuestions"
+          />
+          <LinearScaleForm
+            v-if="isLinearScaleForm(question)"
+            :index="i"
+            :question-data="question"
+            @update="updateQuestions"
+          />
+        </template>
+      </Card>
     </div>
     <AddQuestionButtons @add="addQuestion" />
   </div>
@@ -30,31 +45,37 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import { QuestionType } from '/@/lib/apis'
-import QuestionTitle from './QuestionTitle.vue'
+import QuestionnaireTitle from './QuestionnaireTitle.vue'
 import AddQuestionButtons from './AddQuestionButtons.vue'
 import { createNewQuestion, QuestionData } from './use/utils'
+import Card from '/@/components/UI/Card.vue'
 import TextForm from './Forms/TextForm.vue'
 import ChoiceForm from './Forms/ChoiceForm.vue'
 import LinearScaleForm from './Forms/LinearScaleForm.vue'
+import Questiondispose from './Forms/Questiondispose.vue'
+import Questionupdown from './Forms/Questionupdown.vue'
 
 export default defineComponent({
   name: 'Questions',
   components: {
-    QuestionTitle,
+    QuestionnaireTitle,
+    Card,
     TextForm,
     ChoiceForm,
     LinearScaleForm,
-    AddQuestionButtons
+    AddQuestionButtons,
+    Questiondispose,
+    Questionupdown
   },
   setup() {
     const questions = ref<QuestionData[]>([])
 
-    const addQuestion = (type: string) => {
+    const addQuestion = (type: QuestionType) => {
       const question = createNewQuestion(type)
-      if (question) questions.value.push(question)
+      questions.value.push(question)
     }
 
-    const updateQuestion = (newData: QuestionData, index: number) => {
+    const updateQuestions = (newData: QuestionData, index: number) => {
       questions.value[index] = newData
     }
 
@@ -68,14 +89,32 @@ export default defineComponent({
     const isLinearScaleForm = (question: QuestionData) =>
       question.question_type === QuestionType.LinearScale
 
+    const deleteQuestion = (index: number) => {
+      questions.value.splice(index, 1)
+    }
+    const upQuestion = (index: number) => {
+      ;[questions.value[index], questions.value[index - 1]] = [
+        questions.value[index - 1],
+        questions.value[index]
+      ]
+    }
+    const downQuestion = (index: number) => {
+      ;[questions.value[index], questions.value[index + 1]] = [
+        questions.value[index + 1],
+        questions.value[index]
+      ]
+    }
     return {
       QuestionType,
       questions,
       addQuestion,
-      updateQuestion,
+      updateQuestions,
+      deleteQuestion,
       isTextForm,
       isChoiceForm,
-      isLinearScaleForm
+      isLinearScaleForm,
+      upQuestion,
+      downQuestion
     }
   }
 })
diff --git a/src/components/NewQuestionnaire/use/utils.ts b/src/components/NewQuestionnaire/use/utils.ts
index b961c4ec..931b5e7c 100644
--- a/src/components/NewQuestionnaire/use/utils.ts
+++ b/src/components/NewQuestionnaire/use/utils.ts
@@ -1,7 +1,12 @@
 import { QuestionType } from '/@/lib/apis'
 
-export type NewQuestionnaireTabTypes = 'information' | 'questions'
-export const detailTabs = ['information', 'questions']
+export const NewInformationTabName = 'Information'
+export const NewQuestionsTabName = 'Questions'
+export type NewQuestionnaireTabTypes = 'Information' | 'Questions'
+export const detailTabs: NewQuestionnaireTabTypes[] = [
+  NewInformationTabName,
+  NewQuestionsTabName
+]
 export const questionTypes = {
   Text: {
     type: 'Text',
@@ -24,7 +29,7 @@ export const questionTypes = {
     component: 'multiple-choice'
   },
   MultipleChoice: {
-    type: 'MultipleChoSice',
+    type: 'MultipleChoice',
     label: 'ラジオボタン',
     component: 'multiple-choice'
   },
@@ -36,13 +41,13 @@ export const questionTypes = {
 }
 
 // question types
-export interface TextQuestion {
+export type TextQuestion = {
   question_type: QuestionType
   body: string
   is_required: boolean
-}
+} & { key: number } // 並び替えがあるためソート用のkeyを追加
 
-export interface LinearScaleQuestion {
+export type LinearScaleQuestion = {
   question_type: QuestionType
   body: string
   is_required: boolean
@@ -50,38 +55,42 @@ export interface LinearScaleQuestion {
   scale_max: number
   scale_label_left: string
   scale_label_right: string
-}
+} & { key: number } // 並び替えがあるためソート用のkeyを追加
 
-export interface CheckboxQuestion {
+export type CheckboxQuestion = {
   question_type: QuestionType
   body: string
   is_required: boolean
   options: string[]
-}
+} & { key: number } // 並び替えがあるためソート用のkeyを追加
 
 export type QuestionData = TextQuestion | CheckboxQuestion | LinearScaleQuestion
 
-export const createNewQuestion = (type: QuestionType): QuestionData | null => {
+const randomNumber = () => Math.floor(Math.random() * 25000)
+export const createNewQuestion = (type: QuestionType): QuestionData => {
   switch (type) {
     case QuestionType.Text: {
       return {
         question_type: QuestionType.Text,
         body: '',
-        is_required: false
+        is_required: false,
+        key: randomNumber()
       }
     }
     case QuestionType.TextArea: {
       return {
         question_type: QuestionType.TextArea,
         body: '',
-        is_required: false
+        is_required: false,
+        key: randomNumber()
       }
     }
     case QuestionType.Number: {
       return {
         question_type: QuestionType.Number,
         body: '',
-        is_required: false
+        is_required: false,
+        key: randomNumber()
       }
     }
     case QuestionType.Checkbox: {
@@ -89,7 +98,8 @@ export const createNewQuestion = (type: QuestionType): QuestionData | null => {
         question_type: QuestionType.Checkbox,
         body: '',
         is_required: false,
-        options: ['']
+        options: [''],
+        key: randomNumber()
       }
     }
     case QuestionType.MultipleChoice: {
@@ -97,7 +107,8 @@ export const createNewQuestion = (type: QuestionType): QuestionData | null => {
         question_type: QuestionType.MultipleChoice,
         body: '',
         is_required: false,
-        options: ['']
+        options: [''],
+        key: randomNumber()
       }
     }
     case QuestionType.LinearScale: {
@@ -108,7 +119,8 @@ export const createNewQuestion = (type: QuestionType): QuestionData | null => {
         scale_min: 0,
         scale_max: 5,
         scale_label_left: '',
-        scale_label_right: ''
+        scale_label_right: '',
+        key: randomNumber()
       }
     }
     default: {
diff --git a/src/components/UI/QuestionInput.vue b/src/components/UI/QuestionInput.vue
index e445dd77..23ccfe92 100644
--- a/src/components/UI/QuestionInput.vue
+++ b/src/components/UI/QuestionInput.vue
@@ -1,9 +1,10 @@
 <template>
   <input
     :type="isNumber ? 'number' : 'text'"
-    :class="$style.input"
+    :class="[pointerevents ? '' : $style.pointerevents, $style.input]"
     :placeholder="isNumber ? '数値を入力' : '回答'"
     :disabled="disabled"
+    :value="modelValue"
     @input="update"
   />
   <input-underline :class="$style.underline" />
@@ -27,6 +28,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    pointerevents: {
+      type: Boolean,
+      default: true
+    },
     modelValue: {
       type: String,
       required: true
@@ -59,6 +64,9 @@ $underline-margin: -1 * $input-border;
   padding: 0.4rem;
   border-bottom: $input-border dotted #7c6c4d;
 }
+.pointerevents {
+  pointer-events: none;
+}
 .underline {
   margin-top: $underline-margin;
 }
diff --git a/src/components/UI/QuestionTextarea.vue b/src/components/UI/QuestionTextarea.vue
index 4c5c57cf..46a07322 100644
--- a/src/components/UI/QuestionTextarea.vue
+++ b/src/components/UI/QuestionTextarea.vue
@@ -1,7 +1,7 @@
 <template>
   <textarea
     type="text"
-    :class="$style.textarea"
+    :class="[pointerevents ? '' : $style.pointerevents, $style.textarea]"
     :value="modelValue"
     placeholder="回答"
     :disabled="disabled"
@@ -24,6 +24,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    pointerevents: {
+      type: Boolean,
+      defaulet: false
+    },
     modelValue: {
       type: String,
       required: true
@@ -59,6 +63,9 @@ $underline-margin: -1 * ($textarea-border + $textarea-padding);
   padding: $textarea-padding;
   border-bottom: $textarea-border dotted #7c6c4d;
 }
+.pointerevents {
+  pointer-events: none;
+}
 .underline {
   margin-top: $underline-margin;
 }
diff --git a/src/pages/NewQuestionnaire.vue b/src/pages/NewQuestionnaire.vue
index 147d2276..bfc85982 100644
--- a/src/pages/NewQuestionnaire.vue
+++ b/src/pages/NewQuestionnaire.vue
@@ -1,12 +1,14 @@
 <template>
   <Tab v-model="selectedTab" :tabs="detailTabs" />
-  <Questions v-if="selectedTab === 'questions'" />
+  <Questions v-if="selectedTab === NewQuestionsTabName" />
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import {
+  NewInformationTabName,
+  NewQuestionsTabName,
   NewQuestionnaireTabTypes,
   detailTabs
 } from '/@/components/NewQuestionnaire/use/utils'
@@ -23,7 +25,7 @@ export default defineComponent({
   setup() {
     const route = useRoute()
     const router = useRouter()
-    const selectedTab = ref<NewQuestionnaireTabTypes>('information')
+    const selectedTab = ref<NewQuestionnaireTabTypes>(NewInformationTabName)
 
     const getTabLink = (tab: string) => ({
       path: route.path,
@@ -34,7 +36,7 @@ export default defineComponent({
 
     onMounted(() => {
       selectedTab.value =
-        <NewQuestionnaireTabTypes>route.query.tab || 'information'
+        <NewQuestionnaireTabTypes>route.query.tab || NewInformationTabName
     })
 
     const changeTab = (tab: string) => {
@@ -53,11 +55,13 @@ export default defineComponent({
           <NewQuestionnaireTabTypes>newQuery.tab
         )
           ? <NewQuestionnaireTabTypes>newQuery.tab
-          : 'information'
+          : NewInformationTabName
       }
     )
 
     return {
+      NewInformationTabName,
+      NewQuestionsTabName,
       detailTabs,
       getTabLink,
       selectedTab,

From 5b1ea3081040cdfa20d8465dcc32c653ce68b831 Mon Sep 17 00:00:00 2001
From: wakashi1 <makotozuoteng78@gmail.com>
Date: Tue, 17 May 2022 23:02:20 +0900
Subject: [PATCH 02/14] updowntoUpdown,disposetoDispose

---
 src/components/NewQuestionnaire/Forms/ChoiceForm.vue |  6 +++---
 .../NewQuestionnaire/Forms/Questiondispose.vue       |  2 +-
 .../NewQuestionnaire/Forms/Questionupdown.vue        |  2 +-
 src/components/NewQuestionnaire/Questions.vue        | 12 ++++++------
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
index b3c9cf2d..d8f793d9 100644
--- a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
+++ b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
@@ -7,7 +7,7 @@
   >
     <div>
       <div v-for="(label, i) in ChoiceQuestions" :key="i">
-        <Questionupdown
+        <QuestionUpdown
           :index="i"
           :max="ChoiceQuestions.length"
           @up="upChoice"
@@ -36,7 +36,7 @@ import { defineComponent, PropType, ref } from 'vue'
 import QuestionForm from './QuestionForm.vue'
 import ChoiceElement from './ChoiceElement.vue'
 import Icon from '../../UI/Icon.vue'
-import Questionupdown from './Questionupdown.vue'
+import QuestionUpdown from './QuestionUpdown.vue'
 import { CheckboxQuestion } from '../use/utils'
 import { updateQuestionData } from '../use/updateQuestionData'
 
@@ -45,7 +45,7 @@ export default defineComponent({
   components: {
     QuestionForm,
     ChoiceElement,
-    Questionupdown,
+    QuestionUpdown,
     Icon
   },
   props: {
diff --git a/src/components/NewQuestionnaire/Forms/Questiondispose.vue b/src/components/NewQuestionnaire/Forms/Questiondispose.vue
index 8f1888b2..a984a134 100644
--- a/src/components/NewQuestionnaire/Forms/Questiondispose.vue
+++ b/src/components/NewQuestionnaire/Forms/Questiondispose.vue
@@ -9,7 +9,7 @@ import { defineComponent } from 'vue'
 import Icon from '/@/components/UI/Icon.vue'
 
 export default defineComponent({
-  name: 'Questionupdown',
+  name: 'QuestionDispose',
   components: {
     Icon
   },
diff --git a/src/components/NewQuestionnaire/Forms/Questionupdown.vue b/src/components/NewQuestionnaire/Forms/Questionupdown.vue
index ccbb5b04..1168b1cd 100644
--- a/src/components/NewQuestionnaire/Forms/Questionupdown.vue
+++ b/src/components/NewQuestionnaire/Forms/Questionupdown.vue
@@ -20,7 +20,7 @@ import { defineComponent } from 'vue'
 import Icon from '/@/components/UI/Icon.vue'
 
 export default defineComponent({
-  name: 'Questionupdown',
+  name: 'QuestionUpdown',
   components: {
     Icon
   },
diff --git a/src/components/NewQuestionnaire/Questions.vue b/src/components/NewQuestionnaire/Questions.vue
index dbffba7f..1bbde0de 100644
--- a/src/components/NewQuestionnaire/Questions.vue
+++ b/src/components/NewQuestionnaire/Questions.vue
@@ -9,13 +9,13 @@
     <div v-for="(question, i) in questions" :key="question.key">
       <Card :header-visible="false">
         <template #content>
-          <Questionupdown
+          <QuestionUpdown
             :index="i"
             :max="questions.length"
             @up="upQuestion"
             @down="downQuestion"
           />
-          <Questiondispose :index="i" @delete="deleteQuestion" />
+          <QuestionDispose :index="i" @delete="deleteQuestion" />
           <TextForm
             v-if="isTextForm(question)"
             :index="i"
@@ -52,8 +52,8 @@ import Card from '/@/components/UI/Card.vue'
 import TextForm from './Forms/TextForm.vue'
 import ChoiceForm from './Forms/ChoiceForm.vue'
 import LinearScaleForm from './Forms/LinearScaleForm.vue'
-import Questiondispose from './Forms/Questiondispose.vue'
-import Questionupdown from './Forms/Questionupdown.vue'
+import QuestionDispose from './Forms/QuestionDispose.vue'
+import QuestionUpdown from './Forms/QuestionUpdown.vue'
 
 export default defineComponent({
   name: 'Questions',
@@ -64,8 +64,8 @@ export default defineComponent({
     ChoiceForm,
     LinearScaleForm,
     AddQuestionButtons,
-    Questiondispose,
-    Questionupdown
+    QuestionDispose,
+    QuestionUpdown
   },
   setup() {
     const questions = ref<QuestionData[]>([])

From 1a3bbeb9d4bc4a5671f00691765305e592f105ee Mon Sep 17 00:00:00 2001
From: wakashi1 <84297444+wakashi1@users.noreply.github.com>
Date: Tue, 17 May 2022 23:05:15 +0900
Subject: [PATCH 03/14] Rename Questiondispose.vue to QuestionDispose.vue

---
 .../Forms/{Questiondispose.vue => QuestionDispose.vue}            | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/NewQuestionnaire/Forms/{Questiondispose.vue => QuestionDispose.vue} (100%)

diff --git a/src/components/NewQuestionnaire/Forms/Questiondispose.vue b/src/components/NewQuestionnaire/Forms/QuestionDispose.vue
similarity index 100%
rename from src/components/NewQuestionnaire/Forms/Questiondispose.vue
rename to src/components/NewQuestionnaire/Forms/QuestionDispose.vue

From d4a71dd40d87d8ba9332cc723596e9ca209b3f5f Mon Sep 17 00:00:00 2001
From: wakashi1 <84297444+wakashi1@users.noreply.github.com>
Date: Tue, 17 May 2022 23:05:35 +0900
Subject: [PATCH 04/14] Rename Questionupdown.vue to QuestionUpdown.vue

---
 .../Forms/{Questionupdown.vue => QuestionUpdown.vue}              | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/NewQuestionnaire/Forms/{Questionupdown.vue => QuestionUpdown.vue} (100%)

diff --git a/src/components/NewQuestionnaire/Forms/Questionupdown.vue b/src/components/NewQuestionnaire/Forms/QuestionUpdown.vue
similarity index 100%
rename from src/components/NewQuestionnaire/Forms/Questionupdown.vue
rename to src/components/NewQuestionnaire/Forms/QuestionUpdown.vue

From 333d8da391ed47ed55d016a8152cfba98fc4f18b Mon Sep 17 00:00:00 2001
From: wakashi1 <makotozuoteng78@gmail.com>
Date: Fri, 20 May 2022 22:38:19 +0900
Subject: [PATCH 05/14] toriaezu

---
 .../NewQuestionnaire/Forms/ChoiceElement.vue           |  6 +-----
 .../NewQuestionnaire/Forms/Questiondispose.vue         | 10 ++--------
 2 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/components/NewQuestionnaire/Forms/ChoiceElement.vue b/src/components/NewQuestionnaire/Forms/ChoiceElement.vue
index e3ed906e..7b6b0da3 100644
--- a/src/components/NewQuestionnaire/Forms/ChoiceElement.vue
+++ b/src/components/NewQuestionnaire/Forms/ChoiceElement.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, watch } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 import Icon from '../../UI/Icon.vue'
 import QuestionInput from '../../UI/QuestionInput.vue'
 
@@ -27,10 +27,6 @@ export default defineComponent({
     isRadio: {
       type: Boolean,
       default: false
-    },
-    modelValue: {
-      type: Array as PropType<string[]>,
-      required: true
     }
   },
   emits: {
diff --git a/src/components/NewQuestionnaire/Forms/Questiondispose.vue b/src/components/NewQuestionnaire/Forms/Questiondispose.vue
index a984a134..bcb48d70 100644
--- a/src/components/NewQuestionnaire/Forms/Questiondispose.vue
+++ b/src/components/NewQuestionnaire/Forms/Questiondispose.vue
@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <Icon name="trash-can-outline" @click="deleteQuestion" />
-  </div>
+  <Icon name="trash-can-outline" @click="deleteQuestion" />
 </template>
 
 <script lang="ts">
@@ -39,8 +37,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" module>
-.input {
-  appearance: none;
-}
-</style>
+<style lang="scss" module></style>

From 316b3f398a9ec35115fb80c459d313c68c9fea3f Mon Sep 17 00:00:00 2001
From: wakashi1 <makotozuoteng78@gmail.com>
Date: Sun, 22 May 2022 23:45:01 +0900
Subject: [PATCH 06/14] =?UTF-8?q?=E6=94=B9=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NewQuestionnaire/Forms/ChoiceForm.vue     | 22 +++++--------------
 .../NewQuestionnaire/Forms/Questionupdown.vue |  8 +++----
 src/components/NewQuestionnaire/Questions.vue | 22 ++++++-------------
 3 files changed, 16 insertions(+), 36 deletions(-)

diff --git a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
index d8f793d9..f5c74852 100644
--- a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
+++ b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
@@ -10,8 +10,7 @@
         <QuestionUpdown
           :index="i"
           :max="ChoiceQuestions.length"
-          @up="upChoice"
-          @down="downChoice"
+          @swap="swapChoice"
         />
         <ChoiceElement
           :label="label"
@@ -94,18 +93,10 @@ export default defineComponent({
       updateChoiceQuestionData('options', ChoiceQuestions.value)
     }
 
-    const upChoice = (index: number) => {
-      ;[ChoiceQuestions.value[index], ChoiceQuestions.value[index - 1]] = [
-        ChoiceQuestions.value[index - 1],
-        ChoiceQuestions.value[index]
-      ]
-      updateChoiceQuestionData('options', ChoiceQuestions.value)
-    }
-    const downChoice = (index: number) => {
-      ;[ChoiceQuestions.value[index], ChoiceQuestions.value[index + 1]] = [
-        ChoiceQuestions.value[index + 1],
-        ChoiceQuestions.value[index]
-      ]
+    const swapChoice = (index: number, parameter: number) => {
+      const tmp = ChoiceQuestions.value[index]
+      ChoiceQuestions.value[index] = ChoiceQuestions.value[index + parameter]
+      ChoiceQuestions.value[index + parameter] = tmp
       updateChoiceQuestionData('options', ChoiceQuestions.value)
     }
 
@@ -116,8 +107,7 @@ export default defineComponent({
       updateChoice,
       deleteChoice,
       addChoice,
-      upChoice,
-      downChoice
+      swapChoice
     }
   }
 })
diff --git a/src/components/NewQuestionnaire/Forms/Questionupdown.vue b/src/components/NewQuestionnaire/Forms/Questionupdown.vue
index 1168b1cd..97ef0e9b 100644
--- a/src/components/NewQuestionnaire/Forms/Questionupdown.vue
+++ b/src/components/NewQuestionnaire/Forms/Questionupdown.vue
@@ -36,16 +36,14 @@ export default defineComponent({
   },
   emits: {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    up: (index: number) => true,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    down: (index: number) => true
+    swap: (i: number, parameter: number) => true
   },
   setup(props, context) {
     const upQuestion = () => {
-      context.emit('up', props.index)
+      context.emit('swap', props.index, -1)
     }
     const downQuestion = () => {
-      context.emit('down', props.index)
+      context.emit('swap', props.index, +1)
     }
     return { upQuestion, downQuestion }
   }
diff --git a/src/components/NewQuestionnaire/Questions.vue b/src/components/NewQuestionnaire/Questions.vue
index 1bbde0de..b39a38e7 100644
--- a/src/components/NewQuestionnaire/Questions.vue
+++ b/src/components/NewQuestionnaire/Questions.vue
@@ -12,8 +12,7 @@
           <QuestionUpdown
             :index="i"
             :max="questions.length"
-            @up="upQuestion"
-            @down="downQuestion"
+            @swap="swapQuestions"
           />
           <QuestionDispose :index="i" @delete="deleteQuestion" />
           <TextForm
@@ -92,17 +91,11 @@ export default defineComponent({
     const deleteQuestion = (index: number) => {
       questions.value.splice(index, 1)
     }
-    const upQuestion = (index: number) => {
-      ;[questions.value[index], questions.value[index - 1]] = [
-        questions.value[index - 1],
-        questions.value[index]
-      ]
-    }
-    const downQuestion = (index: number) => {
-      ;[questions.value[index], questions.value[index + 1]] = [
-        questions.value[index + 1],
-        questions.value[index]
-      ]
+
+    const swapQuestions = (index: number, parameter: number) => {
+      const tmp = questions.value[index]
+      questions.value[index] = questions.value[index + parameter]
+      questions.value[index + parameter] = tmp
     }
     return {
       QuestionType,
@@ -113,8 +106,7 @@ export default defineComponent({
       isTextForm,
       isChoiceForm,
       isLinearScaleForm,
-      upQuestion,
-      downQuestion
+      swapQuestions
     }
   }
 })

From 4bd9dbde9a15bb9432eba57412ffdd43af6152c9 Mon Sep 17 00:00:00 2001
From: wakashi1 <makotozuoteng78@gmail.com>
Date: Mon, 23 May 2022 10:52:54 +0900
Subject: [PATCH 07/14] =?UTF-8?q?index=E3=81=AE=E4=BE=9D=E5=AD=98=E6=80=A7?=
 =?UTF-8?q?=E6=B6=88=E5=8E=BB=E3=81=A8swap=E3=81=AE=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NewQuestionnaire/Forms/ChoiceForm.vue     | 14 +++-----
 .../Forms/LinearScaleForm.vue                 |  6 +---
 .../NewQuestionnaire/Forms/QuestionUpdown.vue |  6 ++--
 .../NewQuestionnaire/Forms/TextForm.vue       |  6 +---
 src/components/NewQuestionnaire/Questions.vue | 32 ++++++++++++-------
 .../use/updateQuestionData.ts                 |  5 ++-
 6 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
index f5c74852..3dde8e56 100644
--- a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
+++ b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
@@ -48,10 +48,6 @@ export default defineComponent({
     Icon
   },
   props: {
-    index: {
-      type: Number,
-      required: true
-    },
     questionData: {
       type: Object as PropType<CheckboxQuestion>,
       required: true
@@ -63,7 +59,7 @@ export default defineComponent({
   },
   emits: {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    update: (question: CheckboxQuestion, index: number) => true
+    update: (question: CheckboxQuestion) => true
   },
   setup(props, context) {
     const ChoiceQuestions = ref(props.questionData.options)
@@ -93,10 +89,10 @@ export default defineComponent({
       updateChoiceQuestionData('options', ChoiceQuestions.value)
     }
 
-    const swapChoice = (index: number, parameter: number) => {
-      const tmp = ChoiceQuestions.value[index]
-      ChoiceQuestions.value[index] = ChoiceQuestions.value[index + parameter]
-      ChoiceQuestions.value[index + parameter] = tmp
+    const swapChoice = (index1: number, index2: number) => {
+      const tmp = ChoiceQuestions.value[index1]
+      ChoiceQuestions.value[index1] = ChoiceQuestions.value[index2]
+      ChoiceQuestions.value[index2] = tmp
       updateChoiceQuestionData('options', ChoiceQuestions.value)
     }
 
diff --git a/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue b/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue
index 16dc10a7..a08e5d23 100644
--- a/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue
+++ b/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue
@@ -42,10 +42,6 @@ export default defineComponent({
     QuestionInput
   },
   props: {
-    index: {
-      type: Number,
-      required: true
-    },
     questionData: {
       type: Object as PropType<LinearScaleQuestion>,
       required: true
@@ -53,7 +49,7 @@ export default defineComponent({
   },
   emits: {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    update: (question: LinearScaleQuestion, index: number) => true
+    update: (question: LinearScaleQuestion) => true
   },
   setup(props, context) {
     const updateLinearScaleQuestionData =
diff --git a/src/components/NewQuestionnaire/Forms/QuestionUpdown.vue b/src/components/NewQuestionnaire/Forms/QuestionUpdown.vue
index 97ef0e9b..2a386a77 100644
--- a/src/components/NewQuestionnaire/Forms/QuestionUpdown.vue
+++ b/src/components/NewQuestionnaire/Forms/QuestionUpdown.vue
@@ -36,14 +36,14 @@ export default defineComponent({
   },
   emits: {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    swap: (i: number, parameter: number) => true
+    swap: (index1: number, index2: number) => true
   },
   setup(props, context) {
     const upQuestion = () => {
-      context.emit('swap', props.index, -1)
+      context.emit('swap', props.index, props.index - 1)
     }
     const downQuestion = () => {
-      context.emit('swap', props.index, +1)
+      context.emit('swap', props.index, props.index + 1)
     }
     return { upQuestion, downQuestion }
   }
diff --git a/src/components/NewQuestionnaire/Forms/TextForm.vue b/src/components/NewQuestionnaire/Forms/TextForm.vue
index 8858e084..b66f5fda 100644
--- a/src/components/NewQuestionnaire/Forms/TextForm.vue
+++ b/src/components/NewQuestionnaire/Forms/TextForm.vue
@@ -37,10 +37,6 @@ export default defineComponent({
     QuestionForm
   },
   props: {
-    index: {
-      type: Number,
-      required: true
-    },
     questionData: {
       type: Object as PropType<TextQuestion>,
       required: true
@@ -48,7 +44,7 @@ export default defineComponent({
   },
   emits: {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    update: (question: TextQuestion, index: number) => true
+    update: (question: TextQuestion) => true
   },
   setup(props, context) {
     const updateTextQuestionData = updateQuestionData<TextQuestion>(
diff --git a/src/components/NewQuestionnaire/Questions.vue b/src/components/NewQuestionnaire/Questions.vue
index b39a38e7..5476f606 100644
--- a/src/components/NewQuestionnaire/Questions.vue
+++ b/src/components/NewQuestionnaire/Questions.vue
@@ -17,22 +17,31 @@
           <QuestionDispose :index="i" @delete="deleteQuestion" />
           <TextForm
             v-if="isTextForm(question)"
-            :index="i"
             :question-data="question"
-            @update="updateQuestions"
+            @update="
+              question => {
+                updateQuestions(i)(question)
+              }
+            "
           />
           <ChoiceForm
             v-if="isChoiceForm(question)"
-            :index="i"
             :question-data="question"
             :is-radio="question.question_type === QuestionType.MultipleChoice"
-            @update="updateQuestions"
+            @update="
+              question => {
+                updateQuestions(i)(question)
+              }
+            "
           />
           <LinearScaleForm
             v-if="isLinearScaleForm(question)"
-            :index="i"
             :question-data="question"
-            @update="updateQuestions"
+            @update="
+              question => {
+                updateQuestions(i)(question)
+              }
+            "
           />
         </template>
       </Card>
@@ -73,8 +82,7 @@ export default defineComponent({
       const question = createNewQuestion(type)
       questions.value.push(question)
     }
-
-    const updateQuestions = (newData: QuestionData, index: number) => {
+    const updateQuestions = (index: number) => (newData: QuestionData) => {
       questions.value[index] = newData
     }
 
@@ -92,10 +100,10 @@ export default defineComponent({
       questions.value.splice(index, 1)
     }
 
-    const swapQuestions = (index: number, parameter: number) => {
-      const tmp = questions.value[index]
-      questions.value[index] = questions.value[index + parameter]
-      questions.value[index + parameter] = tmp
+    const swapQuestions = (index1: number, index2: number) => {
+      const tmp = questions.value[index1]
+      questions.value[index1] = questions.value[index2]
+      questions.value[index2] = tmp
     }
     return {
       QuestionType,
diff --git a/src/components/NewQuestionnaire/use/updateQuestionData.ts b/src/components/NewQuestionnaire/use/updateQuestionData.ts
index d291bcc2..8307baa6 100644
--- a/src/components/NewQuestionnaire/use/updateQuestionData.ts
+++ b/src/components/NewQuestionnaire/use/updateQuestionData.ts
@@ -5,14 +5,13 @@ export const updateQuestionData =
   <T extends QuestionData>(
     props: {
       questionData: T
-      index: number
     },
     context: SetupContext<{
-      update: (question: T, index: number) => true
+      update: (question: T) => true
     }>
   ) =>
   (key: keyof T, value: T[keyof T]): void => {
     const newData = { ...props.questionData }
     newData[key] = value
-    context.emit('update', newData, props.index)
+    context.emit('update', newData)
   }

From 919f7341214271586d345aaabf207713482c820b Mon Sep 17 00:00:00 2001
From: wakashi1 <makotozuoteng78@gmail.com>
Date: Mon, 23 May 2022 11:38:00 +0900
Subject: [PATCH 08/14] =?UTF-8?q?=E3=81=86=E3=81=BE=E3=81=8F=E5=8B=95?=
 =?UTF-8?q?=E3=81=8B=E3=81=AA=E3=81=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NewQuestionnaire/Forms/ChoiceForm.vue     | 35 +++++++++++--------
 src/components/NewQuestionnaire/Questions.vue |  2 +-
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
index 3dde8e56..36540da3 100644
--- a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
+++ b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
@@ -1,7 +1,7 @@
 <template>
   <QuestionForm
-    :name="questionData.body"
-    :is-required="questionData.is_required"
+    :name="questions.body"
+    :is-required="questions.is_required"
     @update:name="updateQuestionName"
     @update:required="updateQuestionRequired"
   >
@@ -16,7 +16,6 @@
           :label="label"
           :index="i"
           :is-radio="isRadio"
-          :model-value="questionData.options"
           @update:label="updateChoice"
           @delete="deleteChoice"
         />
@@ -31,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue'
+import { defineComponent, PropType, computed } from 'vue'
 import QuestionForm from './QuestionForm.vue'
 import ChoiceElement from './ChoiceElement.vue'
 import Icon from '../../UI/Icon.vue'
@@ -62,7 +61,8 @@ export default defineComponent({
     update: (question: CheckboxQuestion) => true
   },
   setup(props, context) {
-    const ChoiceQuestions = ref(props.questionData.options)
+    const questions = computed(() => props.questionData)
+    const ChoiceQuestions = computed(() => props.questionData.options)
     const updateChoiceQuestionData = updateQuestionData<CheckboxQuestion>(
       props,
       context
@@ -75,28 +75,33 @@ export default defineComponent({
     }
 
     const updateChoice = (label: string, index: number) => {
-      ChoiceQuestions.value[index] = label
-      updateChoiceQuestionData('options', ChoiceQuestions.value)
+      const tmp = [...ChoiceQuestions.value]
+      tmp[index] = label
+      updateChoiceQuestionData('options', tmp)
     }
 
     const deleteChoice = (index: number) => {
-      ChoiceQuestions.value.splice(index, 1)
-      updateChoiceQuestionData('options', ChoiceQuestions.value)
+      const tmp = [...ChoiceQuestions.value]
+      tmp.splice(index, 1)
+      updateChoiceQuestionData('options', tmp)
     }
 
     const addChoice = () => {
-      ChoiceQuestions.value.push('')
-      updateChoiceQuestionData('options', ChoiceQuestions.value)
+      const tmp = [...ChoiceQuestions.value]
+      tmp.push('')
+      updateChoiceQuestionData('options', tmp)
     }
 
     const swapChoice = (index1: number, index2: number) => {
-      const tmp = ChoiceQuestions.value[index1]
-      ChoiceQuestions.value[index1] = ChoiceQuestions.value[index2]
-      ChoiceQuestions.value[index2] = tmp
-      updateChoiceQuestionData('options', ChoiceQuestions.value)
+      const tmp = [...ChoiceQuestions.value]
+      const mom = tmp[index1]
+      tmp[index1] = tmp[index2]
+      tmp[index2] = mom
+      updateChoiceQuestionData('options', tmp)
     }
 
     return {
+      questions,
       ChoiceQuestions,
       updateQuestionName,
       updateQuestionRequired,
diff --git a/src/components/NewQuestionnaire/Questions.vue b/src/components/NewQuestionnaire/Questions.vue
index 5476f606..c700c89e 100644
--- a/src/components/NewQuestionnaire/Questions.vue
+++ b/src/components/NewQuestionnaire/Questions.vue
@@ -6,7 +6,7 @@
   </Card>
   <div>
     <div v-if="questions.length === 0">質問がありません</div>
-    <div v-for="(question, i) in questions" :key="question.key">
+    <div v-for="(question, i) in questions" :key="i">
       <Card :header-visible="false">
         <template #content>
           <QuestionUpdown

From f962884729d47f9745240ae883a201ce212d8160 Mon Sep 17 00:00:00 2001
From: wakashi1 <makotozuoteng78@gmail.com>
Date: Mon, 23 May 2022 20:10:00 +0900
Subject: [PATCH 09/14] =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NewQuestionnaire/Questions.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/NewQuestionnaire/Questions.vue b/src/components/NewQuestionnaire/Questions.vue
index c700c89e..84f76b2f 100644
--- a/src/components/NewQuestionnaire/Questions.vue
+++ b/src/components/NewQuestionnaire/Questions.vue
@@ -20,7 +20,7 @@
             :question-data="question"
             @update="
               question => {
-                updateQuestions(i)(question)
+                updateQuestions(i, question)
               }
             "
           />
@@ -30,7 +30,7 @@
             :is-radio="question.question_type === QuestionType.MultipleChoice"
             @update="
               question => {
-                updateQuestions(i)(question)
+                updateQuestions(i, question)
               }
             "
           />
@@ -39,7 +39,7 @@
             :question-data="question"
             @update="
               question => {
-                updateQuestions(i)(question)
+                updateQuestions(i, question)
               }
             "
           />
@@ -82,7 +82,7 @@ export default defineComponent({
       const question = createNewQuestion(type)
       questions.value.push(question)
     }
-    const updateQuestions = (index: number) => (newData: QuestionData) => {
+    const updateQuestions = (index: number, newData: QuestionData) => {
       questions.value[index] = newData
     }
 

From f883ac2112768fa31764a46990d6d1207dfe5700 Mon Sep 17 00:00:00 2001
From: wakashi1 <makotozuoteng78@gmail.com>
Date: Tue, 24 May 2022 01:14:14 +0900
Subject: [PATCH 10/14] =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NewQuestionnaire/Forms/ChoiceForm.vue     |  6 +-
 .../Forms/LinearScaleForm.vue                 | 75 ++++++++++++-------
 .../NewQuestionnaire/Forms/QuestionForm.vue   | 41 +++++-----
 src/components/NewQuestionnaire/use/utils.ts  | 25 +++----
 4 files changed, 80 insertions(+), 67 deletions(-)

diff --git a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
index 36540da3..8b9dfafb 100644
--- a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
+++ b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
@@ -1,7 +1,7 @@
 <template>
   <QuestionForm
-    :name="questions.body"
-    :is-required="questions.is_required"
+    :name="questionData.body"
+    :is-required="questionData.is_required"
     @update:name="updateQuestionName"
     @update:required="updateQuestionRequired"
   >
@@ -61,7 +61,6 @@ export default defineComponent({
     update: (question: CheckboxQuestion) => true
   },
   setup(props, context) {
-    const questions = computed(() => props.questionData)
     const ChoiceQuestions = computed(() => props.questionData.options)
     const updateChoiceQuestionData = updateQuestionData<CheckboxQuestion>(
       props,
@@ -101,7 +100,6 @@ export default defineComponent({
     }
 
     return {
-      questions,
       ChoiceQuestions,
       updateQuestionName,
       updateQuestionRequired,
diff --git a/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue b/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue
index a08e5d23..02ae4847 100644
--- a/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue
+++ b/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue
@@ -6,28 +6,49 @@
     @update:required="updateQuestionRequired"
   >
     <div>
-      <Select v-model="rangeMin" :contents="['0', '1']" />
+      <Select
+        :model-value="RangeMin"
+        :contents="['0', '1']"
+        @update:model-value="
+          modelValue => updateLinearScale('scale_min', Number(modelValue))
+        "
+      />
       to
       <Select
-        v-model="rangeMax"
+        :model-value="RangeMax"
         :contents="['2', '3', '4', '5', '6', '7', '8', '9', '10']"
+        @update:model-value="
+          modelValue => updateLinearScale('scale_max', Number(modelValue))
+        "
       />
     </div>
     <div>
       <div>
         {{ questionData.scale_min }}
-        <QuestionInput v-model="labelMin" :is-number="false" />
+        <QuestionInput
+          :model-value="LabelLeft"
+          :is-number="false"
+          @update:model-value="
+            modelValue => updateLinearScale('scale_label_left', modelValue)
+          "
+        />
       </div>
       <div>
         {{ questionData.scale_max }}
-        <QuestionInput v-model="labelMax" :is-number="false" />
+        <QuestionInput
+          :model-value="LabelRight"
+          :is-number="false"
+          @update:model-value="
+            modelValue => updateLinearScale('scale_label_right', modelValue)
+          "
+        />
       </div>
     </div>
   </QuestionForm>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, watch } from 'vue'
+import { defineComponent, PropType, ref, watch, computed } from 'vue'
 import QuestionForm from './QuestionForm.vue'
 import Select from '../../UI/Select.vue'
 import QuestionInput from '../../UI/QuestionInput.vue'
@@ -61,34 +82,30 @@ export default defineComponent({
       updateLinearScaleQuestionData('is_required', required)
     }
 
-    const rangeMin = ref(props.questionData.scale_min + '')
-    const rangeMax = ref(props.questionData.scale_max + '')
-    const labelMin = ref(props.questionData.scale_label_left)
-    const labelMax = ref(props.questionData.scale_label_right)
-
-    watch(rangeMin, rangeMinValue =>
-      updateLinearScaleQuestionData('scale_min', Number(rangeMinValue))
-    )
+    const RangeMin = computed(() => String(props.questionData.scale_min))
+    const RangeMax = computed(() => String(props.questionData.scale_max))
+    const LabelLeft = computed(() => props.questionData.scale_label_left)
+    const LabelRight = computed(() => props.questionData.scale_label_right)
 
-    watch(rangeMax, rangeMaxValue =>
-      updateLinearScaleQuestionData('scale_max', Number(rangeMaxValue))
-    )
-
-    watch(labelMin, labelMinValue =>
-      updateLinearScaleQuestionData('scale_label_left', labelMinValue)
-    )
-
-    watch(labelMax, labelMaxValue =>
-      updateLinearScaleQuestionData('scale_label_right', labelMaxValue)
-    )
+    const updateLinearScale = (
+      type:
+        | 'scale_min'
+        | 'scale_max'
+        | 'scale_label_left'
+        | 'scale_label_right',
+      value: string | number
+    ) => {
+      updateLinearScaleQuestionData(type, value)
+    }
 
     return {
-      rangeMin,
-      rangeMax,
-      labelMin,
-      labelMax,
+      RangeMin,
+      RangeMax,
+      LabelLeft,
+      LabelRight,
       updateQuestionBody,
-      updateQuestionRequired
+      updateQuestionRequired,
+      updateLinearScale
     }
   }
 })
diff --git a/src/components/NewQuestionnaire/Forms/QuestionForm.vue b/src/components/NewQuestionnaire/Forms/QuestionForm.vue
index b395b5b0..d15d683e 100644
--- a/src/components/NewQuestionnaire/Forms/QuestionForm.vue
+++ b/src/components/NewQuestionnaire/Forms/QuestionForm.vue
@@ -1,16 +1,20 @@
 <template>
   <div>
-    <QuestionTitle v-model="questionName" />
+    <QuestionTitle
+      :model-value="questionName"
+      @update:model-value="updateQuestionName"
+    />
     <QuestionCheckbox
-      v-model="questionIsRequired"
+      :model-value="questionIsRequired"
       :contents="[REQUIRED_LABEL]"
+      @update:model-value="updateQuestionIsRequired"
     />
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch } from 'vue'
+import { defineComponent, computed } from 'vue'
 import QuestionTitle from './QuestionTitle.vue'
 import QuestionCheckbox from '../../UI/QuestionCheckbox.vue'
 
@@ -38,28 +42,29 @@ export default defineComponent({
   },
   setup(props, context) {
     const REQUIRED_LABEL = '必須'
-    const questionName = ref(props.name)
+    const questionName = computed(() => props.name)
     // todo: ここでQuestionのCheckboxを使っていいか考える
-    const questionIsRequired = ref<string[]>([])
-    if (props.isRequired) {
-      questionIsRequired.value.push(REQUIRED_LABEL)
-    }
+    const questionIsRequired = computed(() => {
+      if (props.isRequired) {
+        return [REQUIRED_LABEL]
+      } else {
+        return []
+      }
+    })
 
-    watch(questionName, newName => {
-      questionName.value = newName
+    const updateQuestionName = (newName: string) => {
       context.emit('update:name', newName)
-    })
-    watch(
-      () => [...questionIsRequired.value],
-      newIsRequired => {
-        context.emit('update:required', newIsRequired.length === 1)
-      }
-    )
+    }
+    const updateQuestionIsRequired = (newIsRequired: string[]) => {
+      context.emit('update:required', newIsRequired.length === 1)
+    }
 
     return {
+      REQUIRED_LABEL,
       questionName,
       questionIsRequired,
-      REQUIRED_LABEL
+      updateQuestionName,
+      updateQuestionIsRequired
     }
   }
 })
diff --git a/src/components/NewQuestionnaire/use/utils.ts b/src/components/NewQuestionnaire/use/utils.ts
index 931b5e7c..7cd864bc 100644
--- a/src/components/NewQuestionnaire/use/utils.ts
+++ b/src/components/NewQuestionnaire/use/utils.ts
@@ -45,7 +45,7 @@ export type TextQuestion = {
   question_type: QuestionType
   body: string
   is_required: boolean
-} & { key: number } // 並び替えがあるためソート用のkeyを追加
+}
 
 export type LinearScaleQuestion = {
   question_type: QuestionType
@@ -55,42 +55,38 @@ export type LinearScaleQuestion = {
   scale_max: number
   scale_label_left: string
   scale_label_right: string
-} & { key: number } // 並び替えがあるためソート用のkeyを追加
+}
 
 export type CheckboxQuestion = {
   question_type: QuestionType
   body: string
   is_required: boolean
   options: string[]
-} & { key: number } // 並び替えがあるためソート用のkeyを追加
+}
 
 export type QuestionData = TextQuestion | CheckboxQuestion | LinearScaleQuestion
 
-const randomNumber = () => Math.floor(Math.random() * 25000)
 export const createNewQuestion = (type: QuestionType): QuestionData => {
   switch (type) {
     case QuestionType.Text: {
       return {
         question_type: QuestionType.Text,
         body: '',
-        is_required: false,
-        key: randomNumber()
+        is_required: false
       }
     }
     case QuestionType.TextArea: {
       return {
         question_type: QuestionType.TextArea,
         body: '',
-        is_required: false,
-        key: randomNumber()
+        is_required: false
       }
     }
     case QuestionType.Number: {
       return {
         question_type: QuestionType.Number,
         body: '',
-        is_required: false,
-        key: randomNumber()
+        is_required: false
       }
     }
     case QuestionType.Checkbox: {
@@ -98,8 +94,7 @@ export const createNewQuestion = (type: QuestionType): QuestionData => {
         question_type: QuestionType.Checkbox,
         body: '',
         is_required: false,
-        options: [''],
-        key: randomNumber()
+        options: ['']
       }
     }
     case QuestionType.MultipleChoice: {
@@ -107,8 +102,7 @@ export const createNewQuestion = (type: QuestionType): QuestionData => {
         question_type: QuestionType.MultipleChoice,
         body: '',
         is_required: false,
-        options: [''],
-        key: randomNumber()
+        options: ['']
       }
     }
     case QuestionType.LinearScale: {
@@ -119,8 +113,7 @@ export const createNewQuestion = (type: QuestionType): QuestionData => {
         scale_min: 0,
         scale_max: 5,
         scale_label_left: '',
-        scale_label_right: '',
-        key: randomNumber()
+        scale_label_right: ''
       }
     }
     default: {

From 7eb27c7ea2a9c291623d35a98fda97b89f5296bb Mon Sep 17 00:00:00 2001
From: wakashi1 <makotozuoteng78@gmail.com>
Date: Tue, 24 May 2022 09:54:51 +0900
Subject: [PATCH 11/14] =?UTF-8?q?=E7=9B=B4=E3=81=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NewQuestionnaire/AddQuestionButtons.vue   | 12 ++++-----
 .../NewQuestionnaire/Forms/ChoiceForm.vue     |  8 +++---
 .../Forms/LinearScaleForm.vue                 | 26 +++++++++----------
 .../Forms/QuestionDispose.vue                 |  4 +--
 src/components/NewQuestionnaire/Questions.vue |  2 +-
 src/components/UI/QuestionInput.vue           |  8 ------
 .../Forms => UI}/QuestionTitle.vue            |  0
 7 files changed, 26 insertions(+), 34 deletions(-)
 rename src/components/{NewQuestionnaire/Forms => UI}/QuestionTitle.vue (100%)

diff --git a/src/components/NewQuestionnaire/AddQuestionButtons.vue b/src/components/NewQuestionnaire/AddQuestionButtons.vue
index 4451372b..807f4af2 100644
--- a/src/components/NewQuestionnaire/AddQuestionButtons.vue
+++ b/src/components/NewQuestionnaire/AddQuestionButtons.vue
@@ -1,10 +1,10 @@
 <template>
-  <button @click="Isappeared = !Isappeared">
+  <button @click="isAppeared = !isAppeared">
     新しい質問を追加
-    <Icon v-if="Isappeared" name="chevron-down" />
-    <Icon v-if="!Isappeared" name="chevron-right" />
+    <Icon v-if="isAppeared" name="chevron-down" />
+    <Icon v-if="!isAppeared" name="chevron-right" />
   </button>
-  <div v-if="Isappeared">
+  <div v-if="isAppeared">
     <button
       v-for="(questionType, key) in questionTypes"
       :key="key"
@@ -29,12 +29,12 @@ export default defineComponent({
     add: (key: string) => true
   },
   setup(props, context) {
-    const Isappeared = ref(false)
+    const isAppeared = ref(false)
     const add = (key: string) => {
       context.emit('add', key)
     }
     return {
-      Isappeared,
+      isAppeared,
       add,
       questionTypes
     }
diff --git a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
index 8b9dfafb..627a9f12 100644
--- a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
+++ b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
@@ -6,10 +6,10 @@
     @update:required="updateQuestionRequired"
   >
     <div>
-      <div v-for="(label, i) in ChoiceQuestions" :key="i">
+      <div v-for="(label, i) in choiceQuestions" :key="i">
         <QuestionUpdown
           :index="i"
-          :max="ChoiceQuestions.length"
+          :max="choiceQuestions.length"
           @swap="swapChoice"
         />
         <ChoiceElement
@@ -61,7 +61,7 @@ export default defineComponent({
     update: (question: CheckboxQuestion) => true
   },
   setup(props, context) {
-    const ChoiceQuestions = computed(() => props.questionData.options)
+    const choiceQuestions = computed(() => props.questionData.options)
     const updateChoiceQuestionData = updateQuestionData<CheckboxQuestion>(
       props,
       context
@@ -100,7 +100,7 @@ export default defineComponent({
     }
 
     return {
-      ChoiceQuestions,
+      choiceQuestions,
       updateQuestionName,
       updateQuestionRequired,
       updateChoice,
diff --git a/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue b/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue
index 02ae4847..dd9005ca 100644
--- a/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue
+++ b/src/components/NewQuestionnaire/Forms/LinearScaleForm.vue
@@ -7,7 +7,7 @@
   >
     <div>
       <Select
-        :model-value="RangeMin"
+        :model-value="rangeMin"
         :contents="['0', '1']"
         @update:model-value="
           modelValue => updateLinearScale('scale_min', Number(modelValue))
@@ -15,7 +15,7 @@
       />
       to
       <Select
-        :model-value="RangeMax"
+        :model-value="rangeMax"
         :contents="['2', '3', '4', '5', '6', '7', '8', '9', '10']"
         @update:model-value="
           modelValue => updateLinearScale('scale_max', Number(modelValue))
@@ -26,7 +26,7 @@
       <div>
         {{ questionData.scale_min }}
         <QuestionInput
-          :model-value="LabelLeft"
+          :model-value="labelLeft"
           :is-number="false"
           @update:model-value="
             modelValue => updateLinearScale('scale_label_left', modelValue)
@@ -36,7 +36,7 @@
       <div>
         {{ questionData.scale_max }}
         <QuestionInput
-          :model-value="LabelRight"
+          :model-value="labelRight"
           :is-number="false"
           @update:model-value="
             modelValue => updateLinearScale('scale_label_right', modelValue)
@@ -48,7 +48,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, watch, computed } from 'vue'
+import { defineComponent, PropType, computed } from 'vue'
 import QuestionForm from './QuestionForm.vue'
 import Select from '../../UI/Select.vue'
 import QuestionInput from '../../UI/QuestionInput.vue'
@@ -82,10 +82,10 @@ export default defineComponent({
       updateLinearScaleQuestionData('is_required', required)
     }
 
-    const RangeMin = computed(() => String(props.questionData.scale_min))
-    const RangeMax = computed(() => String(props.questionData.scale_max))
-    const LabelLeft = computed(() => props.questionData.scale_label_left)
-    const LabelRight = computed(() => props.questionData.scale_label_right)
+    const rangeMin = computed(() => String(props.questionData.scale_min))
+    const rangeMax = computed(() => String(props.questionData.scale_max))
+    const labelLeft = computed(() => props.questionData.scale_label_left)
+    const labelRight = computed(() => props.questionData.scale_label_right)
 
     const updateLinearScale = (
       type:
@@ -99,10 +99,10 @@ export default defineComponent({
     }
 
     return {
-      RangeMin,
-      RangeMax,
-      LabelLeft,
-      LabelRight,
+      rangeMin,
+      rangeMax,
+      labelLeft,
+      labelRight,
       updateQuestionBody,
       updateQuestionRequired,
       updateLinearScale
diff --git a/src/components/NewQuestionnaire/Forms/QuestionDispose.vue b/src/components/NewQuestionnaire/Forms/QuestionDispose.vue
index bcb48d70..f8622b92 100644
--- a/src/components/NewQuestionnaire/Forms/QuestionDispose.vue
+++ b/src/components/NewQuestionnaire/Forms/QuestionDispose.vue
@@ -27,8 +27,8 @@ export default defineComponent({
   },
   setup(props, context) {
     const deleteQuestion = () => {
-      const trash = confirm('この質問を削除しますか？')
-      if (trash) {
+      const isTrash = confirm('この質問を削除しますか？')
+      if (isTrash) {
         context.emit('delete', props.index)
       }
     }
diff --git a/src/components/NewQuestionnaire/Questions.vue b/src/components/NewQuestionnaire/Questions.vue
index 84f76b2f..7b9be021 100644
--- a/src/components/NewQuestionnaire/Questions.vue
+++ b/src/components/NewQuestionnaire/Questions.vue
@@ -53,7 +53,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import { QuestionType } from '/@/lib/apis'
-import QuestionnaireTitle from './QuestionnaireTitle.vue'
+import QuestionnaireTitle from '/@/components/UI/QuestionTitle.vue'
 import AddQuestionButtons from './AddQuestionButtons.vue'
 import { createNewQuestion, QuestionData } from './use/utils'
 import Card from '/@/components/UI/Card.vue'
diff --git a/src/components/UI/QuestionInput.vue b/src/components/UI/QuestionInput.vue
index 23ccfe92..db90f0a0 100644
--- a/src/components/UI/QuestionInput.vue
+++ b/src/components/UI/QuestionInput.vue
@@ -1,7 +1,6 @@
 <template>
   <input
     :type="isNumber ? 'number' : 'text'"
-    :class="[pointerevents ? '' : $style.pointerevents, $style.input]"
     :placeholder="isNumber ? '数値を入力' : '回答'"
     :disabled="disabled"
     :value="modelValue"
@@ -28,10 +27,6 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    pointerevents: {
-      type: Boolean,
-      default: true
-    },
     modelValue: {
       type: String,
       required: true
@@ -64,9 +59,6 @@ $underline-margin: -1 * $input-border;
   padding: 0.4rem;
   border-bottom: $input-border dotted #7c6c4d;
 }
-.pointerevents {
-  pointer-events: none;
-}
 .underline {
   margin-top: $underline-margin;
 }
diff --git a/src/components/NewQuestionnaire/Forms/QuestionTitle.vue b/src/components/UI/QuestionTitle.vue
similarity index 100%
rename from src/components/NewQuestionnaire/Forms/QuestionTitle.vue
rename to src/components/UI/QuestionTitle.vue

From b2c325e29dc85a541822b9cca8eb2e96f109256f Mon Sep 17 00:00:00 2001
From: wakashi1 <makotozuoteng78@gmail.com>
Date: Tue, 24 May 2022 09:58:37 +0900
Subject: [PATCH 12/14] =?UTF-8?q?=E3=81=AA=E3=81=8A=E3=81=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NewQuestionnaire/Forms/ChoiceForm.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
index 627a9f12..f5a9136d 100644
--- a/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
+++ b/src/components/NewQuestionnaire/Forms/ChoiceForm.vue
@@ -74,25 +74,25 @@ export default defineComponent({
     }
 
     const updateChoice = (label: string, index: number) => {
-      const tmp = [...ChoiceQuestions.value]
+      const tmp = [...choiceQuestions.value]
       tmp[index] = label
       updateChoiceQuestionData('options', tmp)
     }
 
     const deleteChoice = (index: number) => {
-      const tmp = [...ChoiceQuestions.value]
+      const tmp = [...choiceQuestions.value]
       tmp.splice(index, 1)
       updateChoiceQuestionData('options', tmp)
     }
 
     const addChoice = () => {
-      const tmp = [...ChoiceQuestions.value]
+      const tmp = [...choiceQuestions.value]
       tmp.push('')
       updateChoiceQuestionData('options', tmp)
     }
 
     const swapChoice = (index1: number, index2: number) => {
-      const tmp = [...ChoiceQuestions.value]
+      const tmp = [...choiceQuestions.value]
       const mom = tmp[index1]
       tmp[index1] = tmp[index2]
       tmp[index2] = mom

From cea231e6eae460817ff43d44bad1dc60c4959d9b Mon Sep 17 00:00:00 2001
From: wakashi1 <makotozuoteng78@gmail.com>
Date: Tue, 24 May 2022 10:06:04 +0900
Subject: [PATCH 13/14] =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NewQuestionnaire/Forms/QuestionForm.vue | 2 +-
 src/components/NewQuestionnaire/Questions.vue          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/NewQuestionnaire/Forms/QuestionForm.vue b/src/components/NewQuestionnaire/Forms/QuestionForm.vue
index d15d683e..3f75827f 100644
--- a/src/components/NewQuestionnaire/Forms/QuestionForm.vue
+++ b/src/components/NewQuestionnaire/Forms/QuestionForm.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
-import QuestionTitle from './QuestionTitle.vue'
+import QuestionTitle from '/@/components/UI/QuestionTitle.vue'
 import QuestionCheckbox from '../../UI/QuestionCheckbox.vue'
 
 export default defineComponent({
diff --git a/src/components/NewQuestionnaire/Questions.vue b/src/components/NewQuestionnaire/Questions.vue
index 7b9be021..84f76b2f 100644
--- a/src/components/NewQuestionnaire/Questions.vue
+++ b/src/components/NewQuestionnaire/Questions.vue
@@ -53,7 +53,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import { QuestionType } from '/@/lib/apis'
-import QuestionnaireTitle from '/@/components/UI/QuestionTitle.vue'
+import QuestionnaireTitle from './QuestionnaireTitle.vue'
 import AddQuestionButtons from './AddQuestionButtons.vue'
 import { createNewQuestion, QuestionData } from './use/utils'
 import Card from '/@/components/UI/Card.vue'

From 76ba92a172461e547278edd3d354f9bd516d126e Mon Sep 17 00:00:00 2001
From: wakashi1 <makotozuoteng78@gmail.com>
Date: Tue, 24 May 2022 12:01:10 +0900
Subject: [PATCH 14/14] naosi

---
 src/components/UI/QuestionInput.vue    | 2 +-
 src/components/UI/QuestionTextarea.vue | 9 +--------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/components/UI/QuestionInput.vue b/src/components/UI/QuestionInput.vue
index db90f0a0..e445dd77 100644
--- a/src/components/UI/QuestionInput.vue
+++ b/src/components/UI/QuestionInput.vue
@@ -1,9 +1,9 @@
 <template>
   <input
     :type="isNumber ? 'number' : 'text'"
+    :class="$style.input"
     :placeholder="isNumber ? '数値を入力' : '回答'"
     :disabled="disabled"
-    :value="modelValue"
     @input="update"
   />
   <input-underline :class="$style.underline" />
diff --git a/src/components/UI/QuestionTextarea.vue b/src/components/UI/QuestionTextarea.vue
index 46a07322..4c5c57cf 100644
--- a/src/components/UI/QuestionTextarea.vue
+++ b/src/components/UI/QuestionTextarea.vue
@@ -1,7 +1,7 @@
 <template>
   <textarea
     type="text"
-    :class="[pointerevents ? '' : $style.pointerevents, $style.textarea]"
+    :class="$style.textarea"
     :value="modelValue"
     placeholder="回答"
     :disabled="disabled"
@@ -24,10 +24,6 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    pointerevents: {
-      type: Boolean,
-      defaulet: false
-    },
     modelValue: {
       type: String,
       required: true
@@ -63,9 +59,6 @@ $underline-margin: -1 * ($textarea-border + $textarea-padding);
   padding: $textarea-padding;
   border-bottom: $textarea-border dotted #7c6c4d;
 }
-.pointerevents {
-  pointer-events: none;
-}
 .underline {
   margin-top: $underline-margin;
 }