ズンドコキヨシ with Vue2 コンポーネント活用の練習

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

8月15日15:00

　先輩：「お前にコンポーネントの課題を与える！」
わたし：「はい！できました！」
わたし：「余裕だったんで、コンポーネントを活用したサンプル作っちゃいます〜」
　先輩：「おお！えらいじゃん」

8月15日16:00

わたし：「あれ…」

8月16日16:00

　先輩：「お前大丈夫か…？」
わたし：「ごめんなさい分かりません教えてください」
　先輩：「とりまフローチャートを作ってみ！」
わたし：「ふ、ふろーちゃーと…………？」

作りたいもの

これ

文章化するとこんな感じ

• 「ずん」と「どこ」のボタンを押すと、それぞれ「ずん」と「どこ」がカードに表示される。
• カードが準備されていないときは、カードと文字が同時に表示される。
• 「ずん」「ずん」「ずん」「ずん」「どこ」の順で表示されたら、カード内で「きよし！」と表示される。
• 　「ずん」と「どこ」の文字数が１０を超えそうになったらリセットされて、新たにカードと文字が追加される。

参考：ズンドコキヨシ

準備 〜フローチャートの作成〜

先輩が言ってた "フローチャート"ってなんだ？

＞＞ プロセスやアルゴリズムを表現する流れ図のこと

こんなやつ（作ってみた）

え、フローチャート考えるの難しくない？（小声）

実践 〜Vue2で書いてみる〜

親コンポーネント

App.vue

<template>
  <div>
    <button @click="addMessage('ずん')">ずん</button>
    <button @click="addMessage('どこ')">どこ</button>
    <Zundoko
      v-for="zundokoCard in zundokoCards"
      :key="zundokoCard.id"
      :zundokoData="zundokoCard.zundokoData"
    >
    </Zundoko>
  </div>
</template>

<script>
import Zundoko from "@/components/Zundoko.vue";
import { v4 } from "uuid";
export default {
  components: {
    Zundoko,
  },
  data() {
    return {
      zundokoCards: [],
    };
  },
  methods: {
    addMessage(text) {
      // 条件1
      if (this.zundokoCards.length !== 0) {
        // 条件2
        this.check(text);
      } else {
        // 処理1
        this.zundokoCards.push({
          id: v4(),
          zundokoData: text,
        });
      }
    },
    check(text) {
      const targetCardIndex = this.zundokoCards.length - 1;
      // 条件2
      if (this.zundokoCards[targetCardIndex].zundokoData.length < 10) {
        // 処理3
        this.zundokoCards[targetCardIndex].zundokoData += text;
      } else {
        // 処理2
        this.zundokoCards.push({
          id: v4(),
          zundokoData: text,
        });
      }
    },
  },
};
</script>

まとめ

「プログラムをどう書いていけば良いか分からない🥺」という時こそ！！
「フローチャート」を考えるのが大事だ〜〜
（先輩、気づかせてくれてありがとう。。）