first commit

Author: Airi-Suzuki-git

.nuxt/App.js

@@ -6,7 +6,7 @@ import NuxtError from './components/nuxt-error.vue'
 import NuxtLoading from './components/nuxt-loading.vue'
 import NuxtBuildIndicator from './components/nuxt-build-indicator'
 
-import '../node_modules/@nuxtjs/tailwindcss/dist/runtime/tailwind.css'
+import '..\\node_modules\\@nuxtjs\\tailwindcss\\dist\\runtime\\tailwind.css'
 
 import _6f6c098b from './layouts/default.vue'
 

.nuxt/components/index.js

@@ -1,4 +1,4 @@
-export { default as TodoButton } from '../../components/TodoButton.vue'
+export { default as TodoButton } from '../..\\components\\TodoButton.vue'
 
 // nuxt/nuxt.js#8607
 function wrapFunctional(options) {

.nuxt/index.js

@@ -12,7 +12,7 @@ import { setContext, getLocation, getRouteData, normalizeError } from './utils'
 
 /* Plugins */
 
-import nuxt_plugin_plugin_c1c57276 from 'nuxt_plugin_plugin_c1c57276' // Source: ./components/plugin.js (mode: 'all')
+import nuxt_plugin_plugin_d762bd46 from 'nuxt_plugin_plugin_d762bd46' // Source: .\\components\\plugin.js (mode: 'all')
 
 // Component: <ClientOnly>
 Vue.component(ClientOnly.name, ClientOnly)
@@ -178,8 +178,8 @@ async function createApp(ssrContext, config = {}) {
   }
   // Plugin execution
 
-  if (typeof nuxt_plugin_plugin_c1c57276 === 'function') {
-    await nuxt_plugin_plugin_c1c57276(app.context, inject)
+  if (typeof nuxt_plugin_plugin_d762bd46 === 'function') {
+    await nuxt_plugin_plugin_d762bd46(app.context, inject)
   }
 
   // Lock enablePreview in context

.nuxt/router.js

@@ -4,7 +4,7 @@ import { normalizeURL, decode } from 'ufo'
 import { interopDefault } from './utils'
 import scrollBehavior from './router.scrollBehavior.js'
 
-const _27e5ec3a = () => interopDefault(import('../pages/index.vue' /* webpackChunkName: "pages/index" */))
+const _3e038bec = () => interopDefault(import('..\\pages\\index.vue' /* webpackChunkName: "pages/index" */))
 
 const emptyFn = () => {}
 
@@ -19,7 +19,7 @@ export const routerOptions = {
 
   routes: [{
     path: "/",
-    component: _27e5ec3a,
+    component: _3e038bec,
     name: "index"
   }],
 

.nuxt/routes.json

@@ -2,8 +2,7 @@
   {
     "name": "index",
     "path": "/",
-    "component": "/Users/minato/designium/dezban-frontend-skill-check/skill-test/sample/pages/index.vue",
-    "chunkName": "pages/index",
-    "_name": "_27e5ec3a"
+    "component": "C:\\\\Users\\\\AU-Univ\\\\dezban-frontend-skill-check\\\\pages\\\\index.vue",
+    "chunkName": "pages/index"
   }
 ]

README.md

@@ -1,10 +1,13 @@
-# TODOアプリ
+# TODO アプリ
+
 ## 概要
-Nuxt.jsとTypeScriptを用いてでTODOアプリを実装する。
+
+Nuxt.js と TypeScript を用いてで TODO アプリを実装する。
 
 <img src="./static/sample.png" width="80%">
 
 ## 機能一覧
+
 - ヘッダー
   - タイトルを中央寄せで表示
 - 入力フォーム
@@ -17,92 +20,112 @@ Nuxt.jsとTypeScriptを用いてでTODOアプリを実装する。
   - 削除ボタンクリックでタスクを削除
 
 ## 補足
+
 - ボタンはコンポーネント化してください
-- データ管理はvuexを用いても、propsによる受け渡しでもどちらでも構いません
-- vueファイル内の変数等は型をつけてください。
-- UIに関しては自由です
+- データ管理は vuex を用いても、props による受け渡しでもどちらでも構いません
+- vue ファイル内の変数等は型をつけてください。
+- UI に関しては自由です
 - コミットの粒度やコミットメッセージはチーム開発を意識したものにしてください。
 - PC/スマートフォンの両方でデザインが崩れないようにしてください(検証ツールにて確認)
 - 技術的な面でわからないものがあれば[こちら](https://github.com/TheDesignium/dezban-frontend-skill-check/wiki/%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B)に目を通してみてください。
 
 ## 技術スタック
-- フレームワーク: Nuxt.js 2系
-- 言語: TypeScript
-- CSSフレームワーク: TailwindCSS
 
+- フレームワーク: Nuxt.js 2 系
+- 言語: TypeScript
+- CSS フレームワーク: TailwindCSS
 
 ## 実行手順
+
 ### 1.環境構築をする
+
 - [こちら](#環境構築)を参考に行ってください
+
 ### 2.作業ブランチを作成
-branch名は`intern/github名/年月/todo-list`としてください。
+
+branch 名は`intern/github名/年月/todo-list`としてください。
 
 ex) `intern/mnt3710/202401/todo-list`
+
 ```bash
 $ git checkout -b ブランチ名
 ```
+
 ### 3.作業着手
-[機能一覧](#機能一覧)を参考にtodoアプリを作成してください。
 
-### 4.PR作成
-PullRequestを作成する際は以下の項目を確認してください。
+[機能一覧](#機能一覧)を参考に todo アプリを作成してください。
+
+### 4.PR 作成
+
+PullRequest を作成する際は以下の項目を確認してください。
 
 - [ ] コンポーネントファイルやイメージファイルを参照するときは@ではなく~になっているか。
 - [ ] `console.log()`がコード内に残っていないか。
 - [ ] `yarn lintfix`を実行し、フォーマットが整っているか。
 - [ ] PR に正常に動作していることが確認できる画像、または動画を入れているか。
 
-
 ## 環境構築
+
 既にインストールされているものは飛ばしてください。
 
-また、macOSの場合の環境構築のため、windowsを使っている方は参考にして適宜調べてください。
+また、macOS の場合の環境構築のため、windows を使っている方は参考にして適宜調べてください。
 
-### 1. vscodeのインストール
-[こちら](https://chigusa-web.com/blog/vs-code-install/)からvscodeのインストールをする
+### 1. vscode のインストール
+
+[こちら](https://chigusa-web.com/blog/vs-code-install/)から vscode のインストールをする
 
 ### 2. リポジトリをローカルに持ってくる
-github上にあるスキルチェックのテンプレートを自分のpcに持ってくる。
+
+github 上にあるスキルチェックのテンプレートを自分の pc に持ってくる。
 
 ```bash
 $ git clone https://github.com/TheDesignium/dezban-frontend-skill-check.git
 
 $ cd dezban-frontend-skill-check
 ```
-### 3. nvmのインストール
+
+### 3. nvm のインストール
+
 ```bash
 $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
 ```
 
-### 4. nodeのインストール
+### 4. node のインストール
+
 ```bash
 $ nvm install v16.14.1
 ```
+
 正常にインストールされていたら以下のようにバージョンが表示される。
+
 ```bash
 $ node --version
 v16.19.0
 $ npm --version
 8.19.3
 ```
-※ vscode上のターミナルで作業していて、versionが出てこない場合はvscodeを再起動する
 
-### 5. yarnのインストール
+※ vscode 上のターミナルで作業していて、version が出てこない場合は vscode を再起動する
+
+### 5. yarn のインストール
+
 ```bash
 $ npm install -g yarn
 $ yarn -v
 ```
 
-### 6. localhostを立ち上げる
+### 6. localhost を立ち上げる
+
 ```bash
 $ yarn
 $ yarn dev
 ```
+
 <img src="./static/localhost.png" width="80%">
 
 http://localhost:3000 を開く。
 
-## vscodeの推奨拡張機能
+## vscode の推奨拡張機能
 
 - Vetur
 - ESlint
@@ -113,9 +136,9 @@ http://localhost:3000 を開く。
 
 ### nuxt not found
 
-package.jsonを確認(github上と同じであることを確認)
+package.json を確認(github 上と同じであることを確認)
 
-githubと違う内容であれば`git pull origin main`を実行
+github と違う内容であれば`git pull origin main`を実行
 
 再度`yarn`を実行
 

components/TodoButton.vue

@@ -1,8 +1,26 @@
 <template>
-  <div></div>
+  <div>
+    <button class="text-700 border-2 border-500" @click="clickAction(todo)">
+      {{ title }}
+    </button>
+  </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-export default Vue.extend({})
+export default Vue.extend({
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    clickAction: {
+      type: Function,
+    },
+    todo: {
+      type: String,
+      default: '',
+    },
+  },
+})
 </script>