ズンドコキヨシ with Vue 2　[初心者向け]

# [わたし](https://twitter.com/momochanjazz)の勉強日記 （実話）
#### 7月7日15:00
　先輩：「お前にズンドコキヨシの課題を与える！」
わたし：「はい！10分で終わらせます:smiley:」
　先輩：「まあやってみろ」
#### 7月7日16:00
わたし：「あれ…」

#### 7月8日16:30
わたし：「で、できました…………」
（一睡もしていないなんて言えない)



# 課題
- 「ずん」と「どこ」のボタンを押すと、それぞれ「ずん」と「どこ」が表示される。
- 「ずん」「ずん」「ずん」「ずん」「どこ」の順で表示されたら、「きよし！」と表示される。
- 　文字数が１０を超えそうになったらリセットされて、再スタートする。

# 参考
>Javaの講義、試験が「自作関数を作り記述しなさい」って問題だったから
>「ズン」「ドコ」のいずれかをランダムで出力し続けて「ズン」「ズン」「ズン」「ズン」「ドコ」の配列が出たら「キ・ヨ・シ！」って出>力した後終了って関数作ったら満点で単位貰ってた
>— てくも (@kumiromilk) March 9, 2016

# 実践 〜Vue 2でかいてみる〜

### 1. 画面全体の見た目をつくる
- 「ずん」、「どこ」 というボタンを作成する。 
- 「ずんどこ」 、「きよし！」 を表示する。 
```vuejs
<template>
  <div>
    <button>ずん</button>
    <button>どこ</button>
    <p>ずんどこ</p>
    <h1>きよし！</h1>
  </div>
</template>

<script>
export default {
  data() {
};
</script>
```
### 2. ボタンを押すと結果が出るようにする
- ボタンをクリックすると、「ずん」と「どこ」 が表示されるようにする。
→ずんどこ を表示するための変数 `{{message}}`を用意する。


     　  `data` : 様々なデータを格納する場所 
       `methods` : 関数を定義する場所




```vuejs
<template>
  <div>
    <!-- クリックしたら "ずん" or "どこ" をいれる -->
    <button @click="addMessage('ずん')">ずん</button>
    <button @click="addMessage('どこ')">どこ</button>
    <!-- "ずんどこ" を表示 -->
    <p>{{ message }}</p>
    <h1>きよし！</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // "ずんどこ"格納用変数
      message: "",
    };
  },
  methods: {
    // "ずん" と "どこ" を入れるメソッド
    addMessage(text) {
      // 受け取ったテキストを追加
      this.message += text;
    },
  },
};
</script>
```

### 3. 文字数のチェックとリセットをする


- 「ずん」と「どこ」が合わせて１０文字になったら、リセットする。

```vuejs
<template>
  <div>
    <!-- クリックしたら "ずん" or "どこ" をいれる -->
    <button @click="addMessage('ずん')">ずん</button>
    <button @click="addMessage('どこ')">どこ</button>
    <!-- "ずんどこ" を表示 -->
    <p>{{ message }}</p>
    <h1>きよし！</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // "ずんどこ"格納用変数
      message: "",
    };
  },
  methods: {
    // "ずん" と "どこ" を入れるメソッド
    addMessage(text) {
      // 10文字だったら、空文字でリセットする
      if (this.message.length === 10) {
        this.message = "";
      }
      // 受け取ったテキストを追加
      this.message += text;
    },
  },
};
</script>
```
- 文字数をチェックするための処理を外部に切り出す。
→  メソッド `checkLengthAndReset()`を用意する。

```vuejs
<template>
  <div>
    <!-- クリックしたら "ずん" or "どこ" をいれる -->
    <button @click="addMessage('ずん')">ずん</button>
    <button @click="addMessage('どこ')">どこ</button>
    <!-- "ずんどこ" を表示 -->
    <p>{{ message }}</p>
    <!-- isKiyoshi が true だったら "きよし" を表示 -->
    <h1 v-if="isKiyoshi()">きよし！</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // "ずんどこ"格納用変数
      message: "",
    };
  },
  methods: {
    // "ずん" と "どこ" を入れるメソッド
    addMessage(text) {
      // 長さチェックして、10文字だったらリセット
      this.checkLengthAndReset();
      // 受け取ったテキストを追加
      this.message += text;
    },
    checkLengthAndReset() {
      // 10文字だったら、空文字でリセットする
      if (this.message.length === 10) {
        this.message = "";
      }
    },
  },
};
</script>
```


### 4. 条件に応じて、「きよし」を出力する
- 「ずんずんずんずんどこ」と続いた時のみ、「きよし！」を表示する。
→ 条件によって「きよし！」を表示させる関数`isKiyoshi()`を用意する。

    　  `v-if` : 条件に応じて表示を切り替えさせる 
```vuejs
<template>
  <div>
    <!-- クリックしたら "ずん" or "どこ" をいれる -->
    <button @click="addMessage('ずん')">ずん</button>
    <button @click="addMessage('どこ')">どこ</button>
    <!-- "ずんどこ" を表示 -->
    <p>{{ message }}</p>
    <!-- isKiyoshi が true だったら "きよし" を表示 -->
    <h1 v-if="isKiyoshi()">きよし！</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // "ずんどこ"格納用変数
      message: "",
    };
  },
  methods: {
    // "ずん" と "どこ" を入れるメソッド
    addMessage(text) {
      // 長さチェックして、10文字だったらリセット
      this.checkLengthAndReset();
      // 受け取ったテキストを追加
      this.message += text;
    },
    checkLengthAndReset() {
      // 10文字だったら、空文字でリセットする
      if (this.message.length === 10) {
        this.message = "";
      }
    },
    // message が "ずんずんずんずんどこ" と一致していたら true を返す
    isKiyoshi() {
      return this.message === "ずんずんずんずんどこ";
    },
  },
};
</script>
```

- `message`が変更される時だけ、処理が行われるようにしたい。
→ 算出プロパティ`computed`を用いて書き換える。

    　  `computed` :  dataの値を用いて、それを加工したデータを返す場所

```vuejs
<template>
  <div>
    <!-- クリックしたら "ずん" or "どこ" をいれる -->
    <button @click="addMessage('ずん')">ずん</button>
    <button @click="addMessage('どこ')">どこ</button>
    <!-- "ずんどこ" を表示 -->
    <p>{{ message }}</p>
    <!-- isKiyoshi が true だったら "きよし" を表示 -->
    <h1 v-if="isKiyoshi">きよし</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // "ずんどこ"格納用変数
      message: "",
    };
  },
  computed: {
    // message が "ずんずんずんずんどこ" と一致していたら true を返す
    isKiyoshi() {
      return this.message === "ずんずんずんずんどこ";
    },
  },
  methods: {
    // "ずん" と "どこ" を入れるメソッド
    addMessage(text) {
      // 長さチェックして、10文字だったらリセット
      this.checkLengthAndReset();

      // 受け取ったテキストを追加
      this.message += text;
    },
    checkLengthAndReset() {
      // 10文字だったら、空文字でリセットする
      if (this.message.length === 10) {
        this.message = "";
      }
    },
  },
};
</script>
```
これで完成:star:

# おわりに
初学者のわたしにとっては、この課題は難しかった、、
調子乗ってごめんなさい…:sob: