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

わたしの勉強日記 （実話）

7月7日15:00

　先輩：「お前にズンドコキヨシの課題を与える！」
わたし：「はい！10分で終わらせます」
　先輩：「まあやってみろ」

7月7日16:00

わたし：「あれ…」

7月8日16:30

わたし：「で、できました…………」
（一睡もしていないなんて言えない)

課題

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

参考

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

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

1. 画面全体の見た目をつくる

• 「ずん」、「どこ」 というボタンを作成する。
• 「ずんどこ」 、「きよし！」 を表示する。

<template>
  <div>
    <button>ずん</button>
    <button>どこ</button>
    <p>ずんどこ</p>
    <h1>きよし！</h1>
  </div>
</template>

<script>
export default {
  data() {
};
</script>

2. ボタンを押すと結果が出るようにする

• ボタンをクリックすると、「ずん」と「どこ」 が表示されるようにする。
  →ずんどこ を表示するための変数 {{message}}を用意する。

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

<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. 文字数のチェックとリセットをする

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

<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()を用意する。

<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 : 条件に応じて表示を切り替えさせる

<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の値を用いて、それを加工したデータを返す場所

<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>

これで完成

おわりに

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