From 8ee0ad22c7490fba86b7ac6b92fad3ef84f9f4f5 Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sat, 30 Jan 2021 17:26:36 +0900
Subject: [PATCH 01/16] Change heading--main style

---
 src/App.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 379c056..e467266 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -65,10 +65,10 @@ a {
 
   &--main {
     position: relative;
-    padding: 0.25em 0.5em;
-    margin: 0.75em 0;
+    padding: 0 0.5em;
+    margin: 1em 0;
     font-size: 2rem;
-    border-left: solid 6px #3fc1c9;
+    border-left: solid 6px #364f6b;
   }
 
   &--sub {

From 523372050a9a7068e665823040c4ecad41a6e16a Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sun, 31 Jan 2021 04:21:19 +0900
Subject: [PATCH 02/16] Clean code WelcomeUser component

---
 src/components/WelcomeUser.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/WelcomeUser.vue b/src/components/WelcomeUser.vue
index 1647062..bfc2b18 100644
--- a/src/components/WelcomeUser.vue
+++ b/src/components/WelcomeUser.vue
@@ -1,14 +1,17 @@
 <template>
-  <h4 v-show="useremail">
+  <p
+    v-show="useremail"
+    class="header--min aling-right"
+  >
     ようこそ {{ useremail }} さん
-  </h4>
+  </p>
 </template>
 
 <script>
 import firebase from '../firebase.js'
 
 export default {
-  name: 'Welcomeuser',
+  name: 'WelcomeUser',
   data () {
     return {
       useremail: null
@@ -27,7 +30,7 @@ export default {
 </script>
 
 <style scoped>
-h4 {
+.aling-right {
   text-align: right;
 }
 </style>

From 4c3e8483fda6bc16e4bb5a6ff378d71e8680a109 Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sun, 31 Jan 2021 04:47:08 +0900
Subject: [PATCH 03/16] Add css class text-bold

---
 src/App.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index e467266..8b20424 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -91,4 +91,10 @@ a {
     font-size: 1rem;
   }
 }
+
+.text {
+  &--bold {
+    font-weight: bold;
+  }
+}
 </style>

From 3e27d7f7324b15d178b606fb703ed060fb8e0b0b Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sun, 31 Jan 2021 04:47:22 +0900
Subject: [PATCH 04/16] Clean code Home

---
 src/views/Home.vue | 430 +++++++++++++++++++++++----------------------
 1 file changed, 218 insertions(+), 212 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index d009033..0a7ca9c 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,228 +1,234 @@
 <template>
-  <div class="home">
-    <h1 class="heading--main">
-      2021年2月15日(月) NISLAB オープンラボ 開催！
-    </h1>
-    <WelcomeUser />
+  <article aria-label="トップページ">
+    <section aria-label="オープンラボの概要">
+      <h1 class="heading--main">
+        <time datetime="2021-02-15">2021年2月15日(月)</time> NISLAB オープンラボ 開催！
+      </h1>
+      <WelcomeUser />
 
-    <v-row class="my-6">
-      <v-col
-        cols="12"
-        md="6"
-      >
-        <v-card>
-          <v-img :src="image" />
-        </v-card>
-      </v-col>
-      <v-col
-        cols="12"
-        md="6"
-        align-self="center"
-      >
-        <p>こんにちは！<br>ネットワーク情報システム研究室（<b>NISLAB</b>） 佐藤研究室です。</p>
-        <p>学部3年生を中心とした（1・2年生も大歓迎！）在学生の皆さんに向けた<span class="accent--text">オープンラボを2021年2月15日(月)に開催します</span>。</p>
-        <p>当日は、zoomを用いたオンライン開催と現地でのオフライン開催のハイブリッド開催を予定しています。</p>
-        <p>当日は十分な予防対策を行うことはもちろんのこと、事前の状況を見てプログラムの変更も想定しています。</p>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col cols="12">
-        <v-alert
-          border="right"
-          colored-border
-          type="error"
-          elevation="2"
+      <v-row class="my-6">
+        <v-col
+          cols="12"
+          md="6"
         >
-          オフラインでの研究室訪問を希望される方は<router-link to="/openlab/reserve">
-            予約が必要
-          </router-link>です。必ずご確認ください。
-        </v-alert>
-      </v-col>
-    </v-row>
-
-    <v-row v-show="!uid">
-      <v-col cols="12">
-        <v-alert
-          border="right"
-          colored-border
-          type="warning"
-          elevation="2"
+          <v-card>
+            <v-img :src="image" />
+          </v-card>
+        </v-col>
+        <v-col
+          cols="12"
+          md="6"
+          align-self="center"
         >
-          質問や相談等の<router-link to="/contact">
-            お問い合わせ
-          </router-link>は、ログインしていただくことでご利用いただけます。
-        </v-alert>
-      </v-col>
-    </v-row>
+          <p>こんにちは！<br>ネットワーク情報システム研究室（<span class="text--bold">NISLAB</span>） 佐藤研究室です。</p>
+          <p>学部3年生を中心とした（1・2年生も大歓迎！）在学生の皆さんに向けた<span class="accent--text">オープンラボを<time datetime="2021-02-15">2021年2月15日(月)</time>に開催します</span>。</p>
+          <p>当日は、zoomを用いたオンライン開催と現地でのオフライン開催のハイブリッド開催を予定しています。</p>
+          <p>当日は十分な予防対策を行うことはもちろんのこと、事前の状況を見てプログラムの変更も想定しています。</p>
+        </v-col>
+      </v-row>
 
-    <h1 class="heading--main">
-      タイムスケジュール
-    </h1>
-    <v-row justify="center">
-      <v-col
-        cols="12"
-        sm="10"
-        md="8"
-      >
-        <v-timeline dense>
-          <v-timeline-item
-            v-for="(time, i) in times"
-            :key="i"
-            color="primary"
-            small
+      <v-row>
+        <v-col cols="12">
+          <v-alert
+            border="right"
+            colored-border
+            type="error"
+            elevation="2"
           >
-            <v-card>
-              <v-card-title>{{ time.time }}</v-card-title>
-              <v-card-subtitle class="font-weight-bold accent--text">
-                {{ time.place }}
-              </v-card-subtitle>
-              <v-card-text>{{ time.message }}</v-card-text>
-            </v-card>
-          </v-timeline-item>
-        </v-timeline>
-      </v-col>
-    </v-row>
+            オフラインでの研究室訪問を希望される方は<router-link to="/openlab/reserve">
+              予約が必要
+            </router-link>です。必ずご確認ください。
+          </v-alert>
+        </v-col>
+      </v-row>
 
-    <h1 class="heading--main">
-      オープンラボ要領
-    </h1>
-    <h2 class="heading--accent">
-      今年度のオープンラボはオンライン/オフラインのハイブリッド開催をします
-    </h2>
-    <p class="heading--min mx-2 my-2">
-      それぞれ時間が異なりますので、両方参加していただくことも可能です。<br>3年生だけでなく、1/2年生も大歓迎ですので是非ご参加ください！
-    </p>
+      <v-row v-show="!uid">
+        <v-col cols="12">
+          <v-alert
+            border="right"
+            colored-border
+            type="warning"
+            elevation="2"
+          >
+            質問や相談等の<router-link to="/contact">
+              お問い合わせ
+            </router-link>は、ログインしていただくことでご利用いただけます。
+          </v-alert>
+        </v-col>
+      </v-row>
+    </section>
 
-    <v-row class="my-6">
-      <!-- オンライン開催 -->
-      <v-col
-        cols="12"
-        md="6"
-      >
-        <v-card>
-          <v-card-title><b>オンライン開催</b></v-card-title>
-          <v-card-subtitle>zoomを利用して開催します。<br>どなたでも気軽に参加いただけます。</v-card-subtitle>
-          <v-divider class="mx-3" />
-          <v-card-title>プログラム</v-card-title>
-          <v-card-subtitle>研究室紹介や例年よく出る質問などを紹介し、参加してくださるみなさんの質問等にもお答えします。<br>希望者には、ブレイクアウトルームを用いた相談会なども開催予定です。</v-card-subtitle>
-          <v-card-text>
-            <ul>
-              <li>研究室紹介</li>
-              <ul>
-                <li>研究内容や学ぶ内容について</li>
-                <li>研究室での生活について</li>
-                <li>先輩がどうやって研究室を選んだのか</li>
-              </ul>
-              <li>質疑応答</li>
+    <section aria-label="当日のタイムスケジュールについて">
+      <h1 class="heading--main">
+        タイムスケジュール
+      </h1>
+      <v-row justify="center">
+        <v-col
+          cols="12"
+          sm="10"
+          md="8"
+        >
+          <v-timeline dense>
+            <v-timeline-item
+              v-for="(time, i) in times"
+              :key="i"
+              color="primary"
+              small
+            >
+              <v-card>
+                <v-card-title>{{ time.time }}</v-card-title>
+                <v-card-subtitle class="font-weight-bold accent--text">
+                  {{ time.place }}
+                </v-card-subtitle>
+                <v-card-text>{{ time.message }}</v-card-text>
+              </v-card>
+            </v-timeline-item>
+          </v-timeline>
+        </v-col>
+      </v-row>
+    </section>
+
+    <section aria-label="オープンラボの開催にあたってオンライン/オフラインの要領">
+      <h1 class="heading--main">
+        オープンラボ要領
+      </h1>
+      <h2 class="heading--accent">
+        今年度のオープンラボはオンライン/オフラインのハイブリッド開催をします
+      </h2>
+      <p class="heading--min mx-2 my-2">
+        それぞれ時間が異なりますので、両方参加していただくことも可能です。<br>3年生だけでなく、1/2年生も大歓迎ですので是非ご参加ください！
+      </p>
+
+      <v-row class="my-6">
+        <!-- オンライン開催 -->
+        <v-col
+          cols="12"
+          md="6"
+        >
+          <v-card>
+            <v-card-title><b>オンライン開催</b></v-card-title>
+            <v-card-subtitle>zoomを利用して開催します。<br>どなたでも気軽に参加いただけます。</v-card-subtitle>
+            <v-divider class="mx-3" />
+            <v-card-title>プログラム</v-card-title>
+            <v-card-subtitle>研究室紹介や例年よく出る質問などを紹介し、参加してくださるみなさんの質問等にもお答えします。<br>希望者には、ブレイクアウトルームを用いた相談会なども開催予定です。</v-card-subtitle>
+            <v-card-text>
               <ul>
-                <li>例年よくでる質問</li>
-                <li>皆さんからの質問対応</li>
+                <li>研究室紹介</li>
+                <ul>
+                  <li>研究内容や学ぶ内容について</li>
+                  <li>研究室での生活について</li>
+                  <li>先輩がどうやって研究室を選んだのか</li>
+                </ul>
+                <li>質疑応答</li>
+                <ul>
+                  <li>例年よくでる質問</li>
+                  <li>皆さんからの質問対応</li>
+                </ul>
+                <li>相談会</li>
               </ul>
-              <li>相談会</li>
-            </ul>
-          </v-card-text>
-          <v-card-title>開催時間</v-card-title>
-          <v-card-subtitle><b>13:00</b>と<b>15:00</b>の2回開催します。<br>50分程度を予定していますが、途中参加/退出も大歓迎です！<br>zoomはビデオをオンにする必要はありません。<br>聞くだけでも大歓迎ですのでぜひご参加ください。</v-card-subtitle>
-          <v-card-title>参加方法</v-card-title>
-          <v-card-subtitle>前日までにzoomの参加URLを下記に記載しますのでそちらから参加ください。</v-card-subtitle>
-          <v-card-text>
-            <v-card class="pa-2 text-center">
-              <v-simple-table dense>
-                <template #default>
-                  <tbody>
-                    <tr>
-                      <th
-                        colspan="2"
-                        class="text-center"
-                      >
-                        [ 13:00 - 14:00 ]
-                      </th>
-                    </tr>
-                    <tr>
-                      <td>Zoom ID</td>
-                      <td />
-                    </tr>
-                    <tr>
-                      <td>Password</td>
-                      <td />
-                    </tr>
-                  </tbody>
-                </template>
-              </v-simple-table>
-            </v-card>
-          </v-card-text>
-          <v-card-text>
-            <v-card class="pa-2 text-center">
-              <v-simple-table dense>
-                <template #default>
-                  <tbody>
-                    <tr>
-                      <th
-                        colspan="2"
-                        class="text-center"
-                      >
-                        [ 15:00 - 16:00 ]
-                      </th>
-                    </tr>
-                    <tr>
-                      <td>Zoom ID</td>
-                      <td />
-                    </tr>
-                    <tr>
-                      <td>Password</td>
-                      <td />
-                    </tr>
-                  </tbody>
-                </template>
-              </v-simple-table>
-            </v-card>
-          </v-card-text>
-        </v-card>
-      </v-col>
+            </v-card-text>
+            <v-card-title>開催時間</v-card-title>
+            <v-card-subtitle><b>13:00</b>と<b>15:00</b>の2回開催します。<br>50分程度を予定していますが、途中参加/退出も大歓迎です！<br>zoomはビデオをオンにする必要はありません。<br>聞くだけでも大歓迎ですのでぜひご参加ください。</v-card-subtitle>
+            <v-card-title>参加方法</v-card-title>
+            <v-card-subtitle>前日までにzoomの参加URLを下記に記載しますのでそちらから参加ください。</v-card-subtitle>
+            <v-card-text>
+              <v-card class="pa-2 text-center">
+                <v-simple-table dense>
+                  <template #default>
+                    <tbody>
+                      <tr>
+                        <th
+                          colspan="2"
+                          class="text-center"
+                        >
+                          [ 13:00 - 14:00 ]
+                        </th>
+                      </tr>
+                      <tr>
+                        <td>Zoom ID</td>
+                        <td />
+                      </tr>
+                      <tr>
+                        <td>Password</td>
+                        <td />
+                      </tr>
+                    </tbody>
+                  </template>
+                </v-simple-table>
+              </v-card>
+            </v-card-text>
+            <v-card-text>
+              <v-card class="pa-2 text-center">
+                <v-simple-table dense>
+                  <template #default>
+                    <tbody>
+                      <tr>
+                        <th
+                          colspan="2"
+                          class="text-center"
+                        >
+                          [ 15:00 - 16:00 ]
+                        </th>
+                      </tr>
+                      <tr>
+                        <td>Zoom ID</td>
+                        <td />
+                      </tr>
+                      <tr>
+                        <td>Password</td>
+                        <td />
+                      </tr>
+                    </tbody>
+                  </template>
+                </v-simple-table>
+              </v-card>
+            </v-card-text>
+          </v-card>
+        </v-col>
 
-      <!-- オフライン開催 -->
-      <v-col
-        cols="12"
-        md="6"
-      >
-        <v-card height="100%">
-          <v-card-title><b>オフライン開催</b></v-card-title>
-          <v-card-subtitle>研究室に直接訪問し、雰囲気等を味わっていただけます。<br>感染対策を十分に行った上で実施します。</v-card-subtitle>
-          <v-divider class="mx-3" />
-          <v-card-title>プログラム</v-card-title>
-          <v-card-subtitle>訪問してくださる皆さんとの会話を大切にし、皆さんの研究室配属（それ以外の内容も大歓迎！）に関する相談などを受け付けます。<br>簡単な研究室紹介や例年よく出る質問などを紹介し、参加してくださるみなさんの質問等にもお答えします。</v-card-subtitle>
-          <v-card-text>
-            <ul>
-              <li>相談会</li>
-              <li>質疑応答</li>
-              <li>研究室紹介</li>
+        <!-- オフライン開催 -->
+        <v-col
+          cols="12"
+          md="6"
+        >
+          <v-card height="100%">
+            <v-card-title><b>オフライン開催</b></v-card-title>
+            <v-card-subtitle>研究室に直接訪問し、雰囲気等を味わっていただけます。<br>感染対策を十分に行った上で実施します。</v-card-subtitle>
+            <v-divider class="mx-3" />
+            <v-card-title>プログラム</v-card-title>
+            <v-card-subtitle>訪問してくださる皆さんとの会話を大切にし、皆さんの研究室配属（それ以外の内容も大歓迎！）に関する相談などを受け付けます。<br>簡単な研究室紹介や例年よく出る質問などを紹介し、参加してくださるみなさんの質問等にもお答えします。</v-card-subtitle>
+            <v-card-text>
               <ul>
-                <li>研究室の様子や過ごし方について</li>
-                <li>先輩がどうやって研究室を選んだのか</li>
-                <li>就職活動の進め方</li>
+                <li>相談会</li>
+                <li>質疑応答</li>
+                <li>研究室紹介</li>
+                <ul>
+                  <li>研究室の様子や過ごし方について</li>
+                  <li>先輩がどうやって研究室を選んだのか</li>
+                  <li>就職活動の進め方</li>
+                </ul>
               </ul>
-            </ul>
-          </v-card-text>
-          <v-card-title>開催時間</v-card-title>
-          <v-card-subtitle><b>11:00</b>・<b>11:30</b>・<b>14:15</b>・<b>16:00</b>・<b>16:30</b>の5回に分けて開催します。<br>感染対策として、各回の定員を6名とさせていただき<u>完全予約制</u>にて実施させていただきます。<br>実際に研究室生活を送ることになる部屋の様子や雰囲気を知ってもらうだけでなく、様々なお話をしたいと思っています。<br>「ちょっと話を聞いてみたいだけなんだけど…」という方もぜひご予約ください！</v-card-subtitle>
-          <v-card-title>開催場所</v-card-title>
-          <v-card-subtitle>
-            同志社大学 京田辺キャンパス 恵喜館115号室 (KE-115)<br><a
-              href="https://www.doshisha.ac.jp/information/campus/kyotanabe/kyotanabe.html"
-              target="_blank"
-            >キャンパスマップ</a>：紫苑館食堂の奥の建物です。
-          </v-card-subtitle>
-          <v-card-title>参加方法</v-card-title>
-          <v-card-subtitle>
-            2日前までに<router-link to="/openlab/reserve">
-              こちら(ログインが必要です)
-            </router-link>から参加を希望する時間の予約を行ってください。<br>各回の定員を6名とさせていただいておりますので、ご希望の方はお早めにご予約ください。
-          </v-card-subtitle>
-        </v-card>
-      </v-col>
-    </v-row>
-  </div>
+            </v-card-text>
+            <v-card-title>開催時間</v-card-title>
+            <v-card-subtitle><b>11:00</b>・<b>11:30</b>・<b>14:15</b>・<b>16:00</b>・<b>16:30</b>の5回に分けて開催します。<br>感染対策として、各回の定員を6名とさせていただき<u>完全予約制</u>にて実施させていただきます。<br>実際に研究室生活を送ることになる部屋の様子や雰囲気を知ってもらうだけでなく、様々なお話をしたいと思っています。<br>「ちょっと話を聞いてみたいだけなんだけど…」という方もぜひご予約ください！</v-card-subtitle>
+            <v-card-title>開催場所</v-card-title>
+            <v-card-subtitle>
+              同志社大学 京田辺キャンパス 恵喜館115号室 (KE-115)<br><a
+                href="https://www.doshisha.ac.jp/information/campus/kyotanabe/kyotanabe.html"
+                target="_blank"
+              >キャンパスマップ</a>：紫苑館食堂の奥の建物です。
+            </v-card-subtitle>
+            <v-card-title>参加方法</v-card-title>
+            <v-card-subtitle>
+              2日前までに<router-link to="/openlab/reserve">
+                こちら(ログインが必要です)
+              </router-link>から参加を希望する時間の予約を行ってください。<br>各回の定員を6名とさせていただいておりますので、ご希望の方はお早めにご予約ください。
+            </v-card-subtitle>
+          </v-card>
+        </v-col>
+      </v-row>
+    </section>
+  </article>
 </template>
 
 <script>

From e23c7fb43148d47a502175bc07c59e5684a1a2d7 Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sun, 31 Jan 2021 04:55:21 +0900
Subject: [PATCH 05/16] Clean code About

---
 src/views/About.vue | 178 +++++++++++++++++++++++---------------------
 1 file changed, 92 insertions(+), 86 deletions(-)

diff --git a/src/views/About.vue b/src/views/About.vue
index 9083eb3..e1e9dbb 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,96 +1,102 @@
 <template>
-  <div class="about">
-    <h1 class="heading--main">
-      コンテンツ
-    </h1>
-    <h2 class="heading--sub">
-      ここでは、皆様の役に立つかもしれない情報を発信します。
-    </h2>
+  <article aria-label="コンテンツページ">
+    <section aria-label="研究室に関連するコンテンツへのリンクなど">
+      <h1 class="heading--main">
+        コンテンツ
+      </h1>
+      <h2 class="heading--sub">
+        ここでは、皆様の役に立つかもしれない情報を発信します。
+      </h2>
 
-    <v-alert
-      outlined
-      type="warning"
-      border="left"
-    >
-      コンテンツは随時更新する予定ですが、ぶっちゃけた話はオープンラボ当日にお話しできるかと思います！<br>みなさんの研究室選びのお役に立てるよう情報発信します！
-    </v-alert>
-
-    <v-row class="my-4">
-      <v-col
-        cols="12"
-        sm="6"
+      <v-alert
+        outlined
+        type="warning"
+        border="left"
       >
-        <v-card>
-          <a
-            href="https://twitter.com/nislab_sato"
-            target="_blank"
-          >
-            <v-img src="/sns/twitter01.png" />
-          </a>
-          <v-card-title>
-            Twitter (<a
+        コンテンツは随時更新する予定ですが、ぶっちゃけた話はオープンラボ当日にお話しできるかと思います！<br>みなさんの研究室選びのお役に立てるよう情報発信します！
+      </v-alert>
+
+      <v-row class="my-4">
+        <v-col
+          cols="12"
+          sm="6"
+        >
+          <v-card>
+            <a
               href="https://twitter.com/nislab_sato"
               target="_blank"
-            >@nislab_sato</a>) やってます！
-          </v-card-title>
-          <v-card-subtitle>研究室の情報発信を中心に、質問箱でいただいた質問にもお答えしています！</v-card-subtitle>
-        </v-card>
-      </v-col>
-      <v-col
-        cols="12"
-        sm="6"
-      >
-        <v-card>
-          <a
-            href="https://nislab.doshisha.ac.jp"
-            target="_blank"
-          >
-            <v-img src="/sns/website01.png" />
-          </a>
-          <v-card-title>研究室サイト運営してます！</v-card-title>
-          <v-card-subtitle>研究発表についての報告などもしています。<br>近日、リニューアル予定！</v-card-subtitle>
-        </v-card>
-      </v-col>
-    </v-row>
+            >
+              <v-img src="/sns/twitter01.png" />
+            </a>
+            <v-card-title>
+              Twitter (<a
+                href="https://twitter.com/nislab_sato"
+                target="_blank"
+              >@nislab_sato</a>) やってます！
+            </v-card-title>
+            <v-card-subtitle>研究室の情報発信を中心に、質問箱でいただいた質問にもお答えしています！</v-card-subtitle>
+          </v-card>
+        </v-col>
+        <v-col
+          cols="12"
+          sm="6"
+        >
+          <v-card>
+            <a
+              href="https://nislab.doshisha.ac.jp"
+              target="_blank"
+            >
+              <v-img src="/sns/website01.png" />
+            </a>
+            <v-card-title>研究室サイト運営してます！</v-card-title>
+            <v-card-subtitle>研究発表についての報告などもしています。<br>近日、リニューアル予定！</v-card-subtitle>
+          </v-card>
+        </v-col>
+      </v-row>
+    </section>
 
-    <h1 class="heading--main">
-      よくある質問に答えます！
-    </h1>
-    <h2 class="heading--accent">
-      質問箱でいただいた質問や例年よくいただく質問に対して、佐藤研究室の学生が回答します！<br>オープンラボではよりぶっちゃけた話をさせていただきます！
-    </h2>
-    <v-row class="my-4">
-      <v-col>
-        <v-expansion-panels accordion>
-          <v-expansion-panel
-            v-for="(item, i) in questions"
-            :key="i"
-          >
-            <v-expansion-panel-header>{{ item.q }}</v-expansion-panel-header>
-            <v-expansion-panel-content>{{ item.ans }}</v-expansion-panel-content>
-          </v-expansion-panel>
-        </v-expansion-panels>
-      </v-col>
-    </v-row>
+    <section aria-label="よくある質問とそれに対する回答一覧">
+      <h1 class="heading--main">
+        よくある質問に答えます！
+      </h1>
+      <h2 class="heading--accent">
+        質問箱でいただいた質問や例年よくいただく質問に対して、佐藤研究室の学生が回答します！<br>オープンラボではよりぶっちゃけた話をさせていただきます！
+      </h2>
+      <v-row class="my-4">
+        <v-col>
+          <v-expansion-panels accordion>
+            <v-expansion-panel
+              v-for="(item, i) in questions"
+              :key="i"
+            >
+              <v-expansion-panel-header>{{ item.q }}</v-expansion-panel-header>
+              <v-expansion-panel-content>{{ item.ans }}</v-expansion-panel-content>
+            </v-expansion-panel>
+          </v-expansion-panels>
+        </v-col>
+      </v-row>
+    </section>
 
-    <h1 class="heading--main">
-      写真を一部公開！
-    </h1>
-    <v-row>
-      <v-col
-        v-for="image in images"
-        :key="image"
-        class="d-flex child-flex"
-        md="3"
-        sm="4"
-        cols="6"
-      >
-        <v-card>
-          <v-img :src="image" />
-        </v-card>
-      </v-col>
-    </v-row>
-  </div>
+    <section aria-label="写真ギャラリー">
+      <h1 class="heading--main">
+        写真を一部公開！
+      </h1>
+      <v-row>
+        <v-col
+          v-for="image in images"
+          :key="image"
+          class="d-flex child-flex"
+          md="3"
+          sm="4"
+          cols="6"
+        >
+          <v-card>
+            <v-img :src="image" />
+          </v-card>
+        </v-col>
+      </v-row>
+    </section>
+  </article>
 </template>
 
 <script>

From b41c94b2c23d7631b37d5bc5ef1e354071e6ef19 Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sun, 31 Jan 2021 04:55:46 +0900
Subject: [PATCH 06/16] Fix About page layout

---
 src/views/About.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/views/About.vue b/src/views/About.vue
index e1e9dbb..8398687 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -21,7 +21,7 @@
           cols="12"
           sm="6"
         >
-          <v-card>
+          <v-card height="100%">
             <a
               href="https://twitter.com/nislab_sato"
               target="_blank"
@@ -77,7 +77,10 @@
       </v-row>
     </section>
 
-    <section aria-label="写真ギャラリー">
+    <section
+      aria-label="写真ギャラリー"
+      class="mb-16"
+    >
       <h1 class="heading--main">
         写真を一部公開！
       </h1>

From b82bb6e1dd557f714f3f357b15df72dc630a3de4 Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sun, 31 Jan 2021 21:35:43 +0900
Subject: [PATCH 07/16] Clean code MyPage

---
 src/views/MyPage.vue | 132 +++++++++++++++++++++----------------------
 1 file changed, 66 insertions(+), 66 deletions(-)

diff --git a/src/views/MyPage.vue b/src/views/MyPage.vue
index aaf0793..ae9c458 100644
--- a/src/views/MyPage.vue
+++ b/src/views/MyPage.vue
@@ -1,70 +1,72 @@
 <template>
-  <div class="mypage">
-    <h1 class="heading--main">
-      マイページ
-    </h1>
-    <WelcomeUser />
+  <article aria-label="マイページ">
+    <section aria-label="予約の確認・キャンセルが可能">
+      <h1 class="heading--main">
+        マイページ
+      </h1>
+      <WelcomeUser />
 
-    <h2
-      v-show="titleMessage"
-      class="heading--sub my-6"
-    >
-      {{ titleMessage }}
-    </h2>
-    <p class="heading--accent">
-      予約は3日前までキャンセルできます。それ以降は直接お問い合わせください。
-    </p>
+      <h2
+        v-show="titleMessage"
+        class="heading--sub my-6"
+      >
+        {{ titleMessage }}
+      </h2>
+      <p class="heading--accent">
+        予約は3日前までキャンセルできます。それ以降は直接お問い合わせください。
+      </p>
 
-    <v-row
-      v-for="openlabReservation in myOpenlabReservation"
-      :key="openlabReservation.id"
-      class="my-6"
-      justify="center"
-    >
-      <v-col cols="12">
-        <v-simple-table>
-          <template #default>
-            <tbody>
-              <tr>
-                <td>お名前</td>
-                <td>{{ openlabReservation.name }}</td>
-              </tr>
-              <tr>
-                <td>学籍番号</td>
-                <td>{{ openlabReservation.studentId }}</td>
-              </tr>
-              <tr>
-                <td>メールアドレス</td>
-                <td>{{ openlabReservation.email }}</td>
-              </tr>
-              <tr>
-                <td>予約日</td>
-                <td>{{ openlabReservation.date }}</td>
-              </tr>
-              <tr>
-                <td>予約時間</td>
-                <td>{{ openlabReservation.time }}</td>
-              </tr>
-              <tr>
-                <td>補足事項</td>
-                <td>{{ openlabReservation.message }}</td>
-              </tr>
-              <tr>
-                <td colspan="2">
-                  <v-btn
-                    v-show="isThreeDaysBefore(openlabReservation.date)"
-                    @click="deleteOpenlabReservation(openlabReservation)"
-                  >
-                    この予約をキャンセルする
-                  </v-btn>
-                </td>
-              </tr>
-            </tbody>
-          </template>
-        </v-simple-table>
-      </v-col>
-    </v-row>
-  </div>
+      <v-row
+        v-for="openlabReservation in myOpenlabReservation"
+        :key="openlabReservation.id"
+        class="my-6"
+        justify="center"
+      >
+        <v-col cols="12">
+          <v-simple-table>
+            <template #default>
+              <tbody>
+                <tr>
+                  <td>お名前</td>
+                  <td>{{ openlabReservation.name }}</td>
+                </tr>
+                <tr>
+                  <td>学籍番号</td>
+                  <td>{{ openlabReservation.studentId }}</td>
+                </tr>
+                <tr>
+                  <td>メールアドレス</td>
+                  <td>{{ openlabReservation.email }}</td>
+                </tr>
+                <tr>
+                  <td>予約日</td>
+                  <td>{{ openlabReservation.date }}</td>
+                </tr>
+                <tr>
+                  <td>予約時間</td>
+                  <td>{{ openlabReservation.time }}</td>
+                </tr>
+                <tr>
+                  <td>補足事項</td>
+                  <td>{{ openlabReservation.message }}</td>
+                </tr>
+                <tr>
+                  <td colspan="2">
+                    <v-btn
+                      v-show="isThreeDaysBefore(openlabReservation.date)"
+                      @click="deleteOpenlabReservation(openlabReservation)"
+                    >
+                      この予約をキャンセルする
+                    </v-btn>
+                  </td>
+                </tr>
+              </tbody>
+            </template>
+          </v-simple-table>
+        </v-col>
+      </v-row>
+    </section>
+  </article>
 </template>
 
 <script>
@@ -120,13 +122,11 @@ export default {
       const year1 = day1.getFullYear()
       const month1 = day1.getMonth()
       const date1 = day1.getDate()
-      // console.log(year1, month1, date1);
 
       const day2 = new Date()
       const year2 = day2.getFullYear()
       const month2 = day2.getMonth() + 1
       const date2 = day2.getDate() + 2
-      // console.log(year2, month2, date2);
 
       if (year1 === year2) {
         if (month1 === month2) {

From e93c07145967b3222f67b0be94b0190a768ebe66 Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sun, 31 Jan 2021 21:41:21 +0900
Subject: [PATCH 08/16] Clean code NotFound

---
 src/views/NotFound.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index 7a5f7b1..fd17037 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="notFound">
+  <article aria-label="ページが見つかりません">
     <h1 class="heading--main">
       Sorry, Not Found.
     </h1>
@@ -8,7 +8,7 @@
         ホームに戻る
       </router-link>
     </h2>
-  </div>
+  </article>
 </template>
 
 <script>

From bbc2c257ee7553ad09cc55e6f5e48c180766624a Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sun, 31 Jan 2021 21:42:26 +0900
Subject: [PATCH 09/16] Clean code ResetPassword

---
 src/views/ResetPassword.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/ResetPassword.vue b/src/views/ResetPassword.vue
index f051f50..27c7542 100644
--- a/src/views/ResetPassword.vue
+++ b/src/views/ResetPassword.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="resetPassword">
+  <article aria-label="パスワード再設定ページ">
     <h1 class="heading--main">
       パスワード再設定
     </h1>
@@ -21,7 +21,7 @@
         再設定メールを送信する
       </v-btn>
     </v-form>
-  </div>
+  </article>
 </template>
 
 <script>

From 664f5df4927ce97dbe1888ebe4cd8b591efbf384 Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sun, 31 Jan 2021 21:43:38 +0900
Subject: [PATCH 10/16] Clean code SignIn

---
 src/views/SignIn.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/views/SignIn.vue b/src/views/SignIn.vue
index 8121ce1..34f8a62 100644
--- a/src/views/SignIn.vue
+++ b/src/views/SignIn.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="signin">
+  <article aria-label="サインインページ">
     <h1 class="heading--main">
       ログイン
     </h1>
@@ -38,13 +38,14 @@
         </router-link>
       </p>
     </v-row>
-  </div>
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
+
 export default {
-  name: 'Signin',
+  name: 'SignIn',
   components: {
   },
   data () {

From 9534ab4ead131544c6659d9ef4d2c15e5b937e65 Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sun, 31 Jan 2021 21:46:03 +0900
Subject: [PATCH 11/16] Clean code SignOut

---
 src/views/SignOut.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/views/SignOut.vue b/src/views/SignOut.vue
index 263b2d8..c006050 100644
--- a/src/views/SignOut.vue
+++ b/src/views/SignOut.vue
@@ -1,18 +1,19 @@
 <template>
-  <div class="signout">
+  <article aria-label="サインアウトページ">
     <h1 class="heading--main">
       ログアウト
     </h1>
     <v-btn @click="singout">
       ログアウト
     </v-btn>
-  </div>
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
+
 export default {
-  name: 'Signout',
+  name: 'SignOut',
   components: {
   },
   methods: {

From 3e920b108bdeddf3fae8b95ded64641c72b5b5d6 Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sun, 31 Jan 2021 21:46:10 +0900
Subject: [PATCH 12/16] Clean code SignUp

---
 src/views/SignUp.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/views/SignUp.vue b/src/views/SignUp.vue
index 6f3875c..9f087ce 100644
--- a/src/views/SignUp.vue
+++ b/src/views/SignUp.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="signup">
+  <article aria-label="アカウント作成ページ">
     <h1 class="heading--main">
       アカウント作成
     </h1>
@@ -35,13 +35,14 @@
         アカウントを作成する
       </v-btn>
     </v-form>
-  </div>
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
+
 export default {
-  name: 'Signup',
+  name: 'SignUp',
   components: {
   },
   data () {

From 32d66e04957afe68063f10973e526504e36dd6ef Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sun, 31 Jan 2021 22:14:24 +0900
Subject: [PATCH 13/16] Develop component ContactTable

---
 src/components/ContactTable.vue           | 43 +++++++++++++++++++++++
 src/views/Contact/Contact.vue             |  5 +--
 src/views/Contact/ContactConfirm.vue      | 37 ++++---------------
 src/views/Contact/ContactVerification.vue | 40 +++++----------------
 4 files changed, 60 insertions(+), 65 deletions(-)
 create mode 100644 src/components/ContactTable.vue

diff --git a/src/components/ContactTable.vue b/src/components/ContactTable.vue
new file mode 100644
index 0000000..ab2d1fc
--- /dev/null
+++ b/src/components/ContactTable.vue
@@ -0,0 +1,43 @@
+<template>
+  <v-row
+    class="my-6"
+    justify="center"
+  >
+    <v-col cols="12">
+      <v-simple-table>
+        <template #default>
+          <tbody>
+            <tr>
+              <td>お名前</td>
+              <td>{{ contactForm.name }}</td>
+            </tr>
+            <tr>
+              <td>学籍番号</td>
+              <td>{{ contactForm.studentId }}</td>
+            </tr>
+            <tr>
+              <td>メールアドレス</td>
+              <td>{{ contactForm.email }}</td>
+            </tr>
+            <tr>
+              <td>問い合わせ内容</td>
+              <td>{{ contactForm.message }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </v-simple-table>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+export default {
+  name: 'ConfirmContact',
+  props:{
+    contactForm: {
+     type: String,
+     required: true
+  }
+  }
+}
+</script>
diff --git a/src/views/Contact/Contact.vue b/src/views/Contact/Contact.vue
index cb572f4..59e6d71 100644
--- a/src/views/Contact/Contact.vue
+++ b/src/views/Contact/Contact.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="contactMe">
+  <article aria-label="問い合わせページ">
     <h1 class="heading--main">
       問い合わせ
     </h1>
@@ -36,12 +36,13 @@
         問い合わせする
       </v-btn>
     </v-form>
-  </div>
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
 import WelcomeUser from '@/components/WelcomeUser.vue'
+
 export default {
   name: 'Contact',
   components: {
diff --git a/src/views/Contact/ContactConfirm.vue b/src/views/Contact/ContactConfirm.vue
index d144b46..c5c5c5f 100644
--- a/src/views/Contact/ContactConfirm.vue
+++ b/src/views/Contact/ContactConfirm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="openlabReserveConfirm">
+  <article aria-label="問い合わせ内容確認ページ">
     <h1 class="heading--main">
       以下の内容で問い合わせしますか？
     </h1>
@@ -11,35 +11,7 @@
       まだ問い合わせは完了していません。
     </v-alert>
 
-    <v-row
-      class="my-6"
-      justify="center"
-    >
-      <v-col cols="12">
-        <v-simple-table>
-          <template #default>
-            <tbody>
-              <tr>
-                <td>お名前</td>
-                <td>{{ contactForm.name }}</td>
-              </tr>
-              <tr>
-                <td>学籍番号</td>
-                <td>{{ contactForm.studentId }}</td>
-              </tr>
-              <tr>
-                <td>メールアドレス</td>
-                <td>{{ contactForm.email }}</td>
-              </tr>
-              <tr>
-                <td>問い合わせ内容</td>
-                <td>{{ contactForm.message }}</td>
-              </tr>
-            </tbody>
-          </template>
-        </v-simple-table>
-      </v-col>
-    </v-row>
+    <ContactTable :contact-form="contactForm" />
 
     <v-btn
       class="mx-6"
@@ -53,14 +25,17 @@
     >
       予約する
     </v-btn>
-  </div>
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
+import ContactTable from '@/components/ContactTable.vue'
+
 export default {
   name: 'ConfirmContact',
   components: {
+    ContactTable
   },
   data () {
     return {
diff --git a/src/views/Contact/ContactVerification.vue b/src/views/Contact/ContactVerification.vue
index dc28016..7bcbfd1 100644
--- a/src/views/Contact/ContactVerification.vue
+++ b/src/views/Contact/ContactVerification.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="openlabReserveConfirm">
+  <article aria-label="問い合わせ完了ページ">
     <h1 class="heading--main">
       問い合わせ完了
     </h1>
     <WelcomeUser />
+
     <h2 class="heading--sub">
       問い合わせが完了しました。
     </h2>
@@ -11,44 +12,19 @@
       後ほど、メールにてご回答させていただきます。
     </p>
 
-    <v-row
-      class="my-6"
-      justify="center"
-    >
-      <v-col cols="12">
-        <v-simple-table>
-          <template #default>
-            <tbody>
-              <tr>
-                <td>お名前</td>
-                <td>{{ contactForm.name }}</td>
-              </tr>
-              <tr>
-                <td>学籍番号</td>
-                <td>{{ contactForm.studentId }}</td>
-              </tr>
-              <tr>
-                <td>メールアドレス</td>
-                <td>{{ contactForm.email }}</td>
-              </tr>
-              <tr>
-                <td>問い合わせ内容</td>
-                <td>{{ contactForm.message }}</td>
-              </tr>
-            </tbody>
-          </template>
-        </v-simple-table>
-      </v-col>
-    </v-row>
-  </div>
+    <ContactTable :contact-form="contactForm" />
+  </article>
 </template>
 
 <script>
 import WelcomeUser from '@/components/WelcomeUser.vue'
+import ContactTable from '@/components/ContactTable.vue'
+
 export default {
   name: 'ContactVerification',
   components: {
-    WelcomeUser
+    WelcomeUser,
+    ContactTable
   },
   data () {
     return {

From 4995a009b5c6c8c6cd5633512d11fe3abc1508cb Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sun, 31 Jan 2021 22:53:16 +0900
Subject: [PATCH 14/16] Fix props type

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

diff --git a/src/components/ContactTable.vue b/src/components/ContactTable.vue
index ab2d1fc..2918698 100644
--- a/src/components/ContactTable.vue
+++ b/src/components/ContactTable.vue
@@ -32,12 +32,12 @@
 
 <script>
 export default {
-  name: 'ConfirmContact',
+  name: 'ContactTable',
   props:{
     contactForm: {
-     type: String,
-     required: true
-  }
+      type: Object,
+      required: true
+    }
   }
 }
 </script>

From 0653eef409a3bc7f7a596ff849aa6bb018741608 Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sun, 31 Jan 2021 23:04:23 +0900
Subject: [PATCH 15/16] Develop component ReserveTable

---
 src/components/ReserveTable.vue               | 51 ++++++++++++
 src/views/Openlab/OpenlabReserve.vue          |  4 +-
 .../Openlab/OpenlabReserve/OpenlabDelete.vue  | 44 ++---------
 .../OpenlabReserve/OpenlabReserveConfirm.vue  | 44 ++---------
 .../OpenlabReserve/OpenlabReserveForm.vue     |  6 +-
 .../OpenlabReserveVerification.vue            | 78 ++++++-------------
 6 files changed, 89 insertions(+), 138 deletions(-)
 create mode 100644 src/components/ReserveTable.vue

diff --git a/src/components/ReserveTable.vue b/src/components/ReserveTable.vue
new file mode 100644
index 0000000..7f789d7
--- /dev/null
+++ b/src/components/ReserveTable.vue
@@ -0,0 +1,51 @@
+<template>
+  <v-row
+    class="my-6"
+    justify="center"
+  >
+    <v-col cols="12">
+      <v-simple-table>
+        <template #default>
+          <tbody>
+            <tr>
+              <td>お名前</td>
+              <td>{{ reserveForm.name }}</td>
+            </tr>
+            <tr>
+              <td>学籍番号</td>
+              <td>{{ reserveForm.studentId }}</td>
+            </tr>
+            <tr>
+              <td>メールアドレス</td>
+              <td>{{ reserveForm.email }}</td>
+            </tr>
+            <tr>
+              <td>予約日</td>
+              <td>{{ reserveForm.date }}</td>
+            </tr>
+            <tr>
+              <td>予約時間</td>
+              <td>{{ reserveForm.time }}</td>
+            </tr>
+            <tr>
+              <td>補足事項</td>
+              <td>{{ reserveForm.message }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </v-simple-table>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+export default {
+  name: 'ReserveTable',
+  props:{
+    reserveForm: {
+      type: Object,
+      required: true,
+    }
+  }
+}
+</script>
diff --git a/src/views/Openlab/OpenlabReserve.vue b/src/views/Openlab/OpenlabReserve.vue
index ec4ac18..4694d1a 100644
--- a/src/views/Openlab/OpenlabReserve.vue
+++ b/src/views/Openlab/OpenlabReserve.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="openlabReserve">
+  <article aria-label="訪問予約ページ">
     <h1 class="heading--main">
       オープンラボ訪問予約
     </h1>
@@ -49,7 +49,7 @@
         </tbody>
       </template>
     </v-simple-table>
-  </div>
+  </article>
 </template>
 
 <script>
diff --git a/src/views/Openlab/OpenlabReserve/OpenlabDelete.vue b/src/views/Openlab/OpenlabReserve/OpenlabDelete.vue
index cd2fe0d..5b0388c 100644
--- a/src/views/Openlab/OpenlabReserve/OpenlabDelete.vue
+++ b/src/views/Openlab/OpenlabReserve/OpenlabDelete.vue
@@ -1,46 +1,10 @@
 <template>
-  <div class="confirmOpenlabDelete">
+  <article aria-label="予約キャンセルページ">
     <h1 class="heading--main">
       以下の予約をキャンセルしますか？
     </h1>
 
-    <v-row
-      class="my-6"
-      justify="center"
-    >
-      <v-col cols="12">
-        <v-simple-table>
-          <template #default>
-            <tbody>
-              <tr>
-                <td>お名前</td>
-                <td>{{ reservation.name }}</td>
-              </tr>
-              <tr>
-                <td>学籍番号</td>
-                <td>{{ reservation.studentId }}</td>
-              </tr>
-              <tr>
-                <td>メールアドレス</td>
-                <td>{{ reservation.email }}</td>
-              </tr>
-              <tr>
-                <td>予約日</td>
-                <td>{{ reservation.date }}</td>
-              </tr>
-              <tr>
-                <td>予約時間</td>
-                <td>{{ reservation.time }}</td>
-              </tr>
-              <tr>
-                <td>補足事項</td>
-                <td>{{ reservation.message }}</td>
-              </tr>
-            </tbody>
-          </template>
-        </v-simple-table>
-      </v-col>
-    </v-row>
+    <ReserveTable :reserve-form="reservation" />
 
     <v-btn
       class="mx-6"
@@ -54,15 +18,17 @@
     >
       キャンセルする
     </v-btn>
-  </div>
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
+import ReserveTable from '@/components/ReserveTable.vue'
 
 export default {
   name: 'ConfirmOpenlabDelete',
   components: {
+    ReserveTable
   },
   data () {
     return {
diff --git a/src/views/Openlab/OpenlabReserve/OpenlabReserveConfirm.vue b/src/views/Openlab/OpenlabReserve/OpenlabReserveConfirm.vue
index cca2a1c..0fe99e3 100644
--- a/src/views/Openlab/OpenlabReserve/OpenlabReserveConfirm.vue
+++ b/src/views/Openlab/OpenlabReserve/OpenlabReserveConfirm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="openlabReserveConfirm">
+  <article aria-label="予約確認ページ">
     <h1 class="heading--main">
       以下の日時・情報で予約しますか？
     </h1>
@@ -11,43 +11,7 @@
       まだ予約は完了していません。
     </v-alert>
 
-    <v-row
-      class="my-6"
-      justify="center"
-    >
-      <v-col cols="12">
-        <v-simple-table>
-          <template #default>
-            <tbody>
-              <tr>
-                <td>お名前</td>
-                <td>{{ reserveForm.name }}</td>
-              </tr>
-              <tr>
-                <td>学籍番号</td>
-                <td>{{ reserveForm.studentId }}</td>
-              </tr>
-              <tr>
-                <td>メールアドレス</td>
-                <td>{{ reserveForm.email }}</td>
-              </tr>
-              <tr>
-                <td>予約日</td>
-                <td>{{ reserveForm.date }}</td>
-              </tr>
-              <tr>
-                <td>予約時間</td>
-                <td>{{ reserveForm.time }}</td>
-              </tr>
-              <tr>
-                <td>補足事項</td>
-                <td>{{ reserveForm.message }}</td>
-              </tr>
-            </tbody>
-          </template>
-        </v-simple-table>
-      </v-col>
-    </v-row>
+    <ReserveTable :reserve-form="reserveForm" />
 
     <v-btn
       class="mx-6"
@@ -61,15 +25,17 @@
     >
       予約する
     </v-btn>
-  </div>
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
+import ReserveTable from '@/components/ReserveTable.vue'
 
 export default {
   name: 'ConfirmReserve',
   components: {
+    ReserveTable
   },
   data () {
     return {
diff --git a/src/views/Openlab/OpenlabReserve/OpenlabReserveForm.vue b/src/views/Openlab/OpenlabReserve/OpenlabReserveForm.vue
index 2b7d894..3ea1015 100644
--- a/src/views/Openlab/OpenlabReserve/OpenlabReserveForm.vue
+++ b/src/views/Openlab/OpenlabReserve/OpenlabReserveForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="openlabReserveForm">
+  <article aria-label="予約情報入力ページ">
     <h1 class="heading--main">
       オープンラボ訪問予約
     </h1>
@@ -7,7 +7,7 @@
 
     <v-form ref="reserveVisitForm">
       <h2 class="heading--sub">
-        2021年2月15日 {{ time }} で予約します。
+        <time datetime="2021-02-15">2021年2月15日</time> {{ time }} で予約します。
       </h2>
 
       <p
@@ -56,7 +56,7 @@
         予約確認
       </v-btn>
     </v-form>
-  </div>
+  </article>
 </template>
 
 <script>
diff --git a/src/views/Openlab/OpenlabReserve/OpenlabReserveVerification.vue b/src/views/Openlab/OpenlabReserve/OpenlabReserveVerification.vue
index 8a7f7fa..8b3ca4b 100644
--- a/src/views/Openlab/OpenlabReserve/OpenlabReserveVerification.vue
+++ b/src/views/Openlab/OpenlabReserve/OpenlabReserveVerification.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="openlabReserveVerification">
+  <article aria-label="予約完了ページ">
     <h1 class="heading--main">
       予約完了
     </h1>
@@ -12,81 +12,49 @@
       後ほど、詳細に関する案内のメールを送信させていただきます。
     </p>
 
-    <v-row
-      class="my-6"
-      justify="center"
-    >
-      <v-col cols="12">
-        <v-simple-table>
-          <template #default>
-            <tbody>
-              <tr>
-                <td>お名前</td>
-                <td>{{ name }}</td>
-              </tr>
-              <tr>
-                <td>学籍番号</td>
-                <td>{{ studentId }}</td>
-              </tr>
-              <tr>
-                <td>メールアドレス</td>
-                <td>{{ email }}</td>
-              </tr>
-              <tr>
-                <td>予約日</td>
-                <td>{{ date }}</td>
-              </tr>
-              <tr>
-                <td>予約時間</td>
-                <td>{{ time }}</td>
-              </tr>
-              <tr>
-                <td>補足事項</td>
-                <td>{{ message }}</td>
-              </tr>
-            </tbody>
-          </template>
-        </v-simple-table>
-      </v-col>
-    </v-row>
-  </div>
+    <ReserveTable :reserve-form="reserveForm" />
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
 import WelcomeUser from '@/components/WelcomeUser.vue'
+import ReserveTable from '@/components/ReserveTable.vue'
 
 export default {
   name: 'VerificateReserve',
   components: {
-    WelcomeUser
+    WelcomeUser,
+    ReserveTable
   },
   data () {
     return {
-      uid: '',
-      email: '',
-      date: '',
-      time: '',
-      name: '',
-      studentId: '',
-      message: ''
+      reserveForm: {
+        uid: '',
+        email: '',
+        date: '',
+        time: '',
+        name: '',
+        studentId: '',
+        message: ''
+      }
     }
   },
   created () {
     firebase.auth().onAuthStateChanged((user) => {
       if (user) {
-        this.uid = user.uid
+        this.reserveForm.uid = user.uid
       } else {
-        this.uid = null
+        this.reserveForm.uid = null
       }
     })
 
-    this.email = this.$route.query.email
-    this.date = this.$route.query.date
-    this.time = this.$route.query.time
-    this.name = this.$route.query.name
-    this.studentId = this.$route.query.studentId
-    this.message = this.$route.query.message
+    this.reserveForm.email = this.$route.query.email
+    this.reserveForm.date = this.$route.query.date
+    this.reserveForm.time = this.$route.query.time
+    this.reserveForm.name = this.$route.query.name
+    this.reserveForm.studentId = this.$route.query.studentId
+    this.reserveForm.message = this.$route.query.message
   },
   methods: {
   }

From 98f03bc347d934b39eab28de62c92f18cc8f8b11 Mon Sep 17 00:00:00 2001
From: nkthkr <hikaru.nakata@nislab.doshisha.ac.jp>
Date: Sun, 31 Jan 2021 23:36:20 +0900
Subject: [PATCH 16/16] Change MyPage ReserveTable to component

---
 src/views/MyPage.vue | 63 +++++++++++---------------------------------
 1 file changed, 15 insertions(+), 48 deletions(-)

diff --git a/src/views/MyPage.vue b/src/views/MyPage.vue
index ae9c458..1fd0728 100644
--- a/src/views/MyPage.vue
+++ b/src/views/MyPage.vue
@@ -16,55 +16,20 @@
         予約は3日前までキャンセルできます。それ以降は直接お問い合わせください。
       </p>
 
-      <v-row
+      <ReserveTable
         v-for="openlabReservation in myOpenlabReservation"
-        :key="openlabReservation.id"
-        class="my-6"
-        justify="center"
+        :key="`first-${openlabReservation.id}`"
+        :reserve-form="openlabReservation"
+      />
+      <v-btn
+        v-for="openlabReservation in myOpenlabReservation"
+        v-show="isThreeDaysBefore(openlabReservation.date)"
+        :key="`second-${openlabReservation.id}`"
+        class="mb-6 ml-6"
+        @click="deleteOpenlabReservation(openlabReservation)"
       >
-        <v-col cols="12">
-          <v-simple-table>
-            <template #default>
-              <tbody>
-                <tr>
-                  <td>お名前</td>
-                  <td>{{ openlabReservation.name }}</td>
-                </tr>
-                <tr>
-                  <td>学籍番号</td>
-                  <td>{{ openlabReservation.studentId }}</td>
-                </tr>
-                <tr>
-                  <td>メールアドレス</td>
-                  <td>{{ openlabReservation.email }}</td>
-                </tr>
-                <tr>
-                  <td>予約日</td>
-                  <td>{{ openlabReservation.date }}</td>
-                </tr>
-                <tr>
-                  <td>予約時間</td>
-                  <td>{{ openlabReservation.time }}</td>
-                </tr>
-                <tr>
-                  <td>補足事項</td>
-                  <td>{{ openlabReservation.message }}</td>
-                </tr>
-                <tr>
-                  <td colspan="2">
-                    <v-btn
-                      v-show="isThreeDaysBefore(openlabReservation.date)"
-                      @click="deleteOpenlabReservation(openlabReservation)"
-                    >
-                      この予約をキャンセルする
-                    </v-btn>
-                  </td>
-                </tr>
-              </tbody>
-            </template>
-          </v-simple-table>
-        </v-col>
-      </v-row>
+        この予約をキャンセルする
+      </v-btn>
     </section>
   </article>
 </template>
@@ -72,11 +37,13 @@
 <script>
 import firebase from '@/firebase.js'
 import WelcomeUser from '@/components/WelcomeUser.vue'
+import ReserveTable from '@/components/ReserveTable.vue'
 
 export default {
   name: 'Mypage',
   components: {
-    WelcomeUser
+    WelcomeUser,
+    ReserveTable
   },
   data () {
     return {