わたしの勉強日記 （実話）
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>
これで完成
おわりに
初学者のわたしにとっては、この課題は難しかった、、
調子乗ってごめんなさい…