案件準備：Vue.jsで何か作ってみる　その２



# Vue.jsで何か作ってみる Grid編
## 理由・背景
実務でGridを使うのでその準備
## 仕様
・Gridを使う
・入れ子にする
・場合によって　５列だったり１０列だったりする

準備なので場合分けのやり方や５列だったり１０列だったりまではやってないです。


## FirstStep
Gridを使用してみる。
### 画像
![スクリーンショット 2022-05-08 18.39.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271383/ef99250d-bb9a-15a4-6af4-f9aead446e0f.png)
### ソース
```
<template>
  <div>
    <p>
      NewTask:
      <input type="text" v-model="newTask">
      <button @click="addTodo()">Add</button>
    </p>
    <hr>
    <div id="container">
    <ul>
      <li id="itemA" v-for="(todo, i) in todos" v-bind:key="i">
            <input type="checkbox" v-model="todo.isCompleted">
            <span :class="{ 'complete': todo.isCompleted }">{{ todo.task }}</span>
            {{ todo.date }}
            <button @click="deleteTodo(todo)">Delete</button>
      </li>
    </ul>
    <ul>
      <li id="itemB" v-for="(todo, i) in todos" v-bind:key="i">
        <input type="checkbox" v-model="todo.isCompleted">
        <span :class="{ 'complete': todo.isCompleted }">{{ todo.task }}</span>
        {{ todo.date }}
        <button @click="deleteTodo(todo)">Delete</button>
      </li>
    </ul>
    </div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
        newTask: '',
        todos:[
            { task: 'Rubyの勉強をする', isCompleted: false, date: '2021/01/02' },
            { task: 'Vue.jsのアプリを作る', isCompleted: false, date: '2021/01/02' },
            { task: 'Rubyの勉強をする', isCompleted: false, date: '2021/01/02' },
            { task: 'Vue.jsのアプリを作る', isCompleted: false, date: '2021/01/02' }
        ]
    }
  },
  methods: {
    addTodo: function() {
      if (this.newTask == '') return;
      this.todos.push(
        { task: this.newTask, isCompleted: false, date: '20XX/XX/XX'}
      );
      this.newTask = '';
    },
    deleteTodo: function (todo) {
      var index = this.todos.indexOf(todo)
      this.todos.splice(index, 1)
    }
  }
}
</script>

<style scoped>
 ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
 }

 ul > li {
  margin: 5px;
  text-indent: 0;
 }

 #container {
   display: grid; /* グリッドレイアウト */
   grid-template-rows: 800px;
   grid-template-columns: 150px 150px;
   width: 800px;
   margin: 0 auto;
 }

 #itemA {
    grid-column: 1 / 2;
    background: pink;
}

 #itemB {
    grid-column: 2 / 2;
    background: pink;
 }

 ul > li > .complete {
   text-decoration: line-through;
   color: #ddd;
 }
 .title {
    color: #ffbb00;
 }
</style>

```
## SecondStep
入れ子にしてみる
```
<template>
  <div>
    <p>
      NewTask:
      <input type="text" v-model="newTask">
      <button @click="addTodo()">Add</button>
    </p>
    <hr>
    <div id="container">
    <ul>
      <li id="itemA" v-for="(todo, i) in todos" v-bind:key="i">
        <input type="checkbox" v-model="todo.isCompleted">
        <span :class="{ 'complete': todo.isCompleted }">{{ todo.task }}</span>
        {{ todo.date }}
        <button @click="deleteTodo(todo)">Delete</button>
      </li>
    </ul>
    <ul>
      <li id="itemB" v-for="(todo, i) in todos" v-bind:key="i">
      <input type="checkbox" v-model="todo.isCompleted">
      <span :class="{ 'complete': todo.isCompleted }">{{ todo.task }}</span>
      {{ todo.date }}
      <button @click="deleteTodo(todo)">Delete</button>
      </li>
    </ul>
    </div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
        newTask: '',
        todos:[
            { task: 'Rubyの勉強をする', isCompleted: false, date: '2021/01/02' },
            { task: 'Vue.jsのアプリを作る', isCompleted: false, date: '2021/01/02' },
        ]
    }
  },
  methods: {
    addTodo: function() {
      if (this.newTask == '') return;
      this.todos.push(
        { task: this.newTask, isCompleted: false, date: '20XX/XX/XX'}
      );
      this.newTask = '';
    },
    deleteTodo: function (todo) {
      var index = this.todos.indexOf(todo)
      this.todos.splice(index, 1)
    }
  }
}
</script>

<style scoped>
 ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
 }

 ul > li {
  margin: 5px;
  text-indent: 0;
 }

 #container {
   display: grid; /* グリッドレイアウト */
   grid-template-rows: 800px;
   grid-template-columns: 150px 150px;
   width: 800px;
   margin: 0 auto;
 }

 #itemA {
    grid-column: 1 / 2;
    grid-template-rows: repeat(4, 50px);
    background: pink;
    display: grid; /* グリッドレイアウト */
    grid-template-areas:
    "areaA"
    "areaA"
    "areaB"
    "areaB"
}

 #itemB {
    grid-column: 2 / 2;
    grid-template-rows: repeat(4, 50px);
    background: pink;
    display: grid; /* グリッドレイアウト */
    grid-template-areas:
    "areaA"
    "areaA"
    "areaB"
    "areaB"
 }
 ul > li > .complete {
   text-decoration: line-through;
   color: #ddd;
 }
 .title {
    color: #ffbb00;
 }
</style>

```
![スクリーンショット 2022-05-08 21.19.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271383/7e48a015-14f5-47f6-9515-50b2bcaaf003.png)