【漫画で解説】Vue.jsで楽をしよう！
前回： 【漫画で解説】Webアプリってなあに？
たとえば、君はyoutuberをめざして、ヒカキンになれずに挫折したとするよ！
となると、じゃあ買い物リストアプリを一つ千円で売って、億万長者になるしかないじゃん…
ってなるね！！
https://gyazo.com/84fb241d8399cb44081dc6f9cc4a5797
大丈夫、ここで買い物リストアプリの作り方を教えるよ！
一発当てていこうね！
とりあえず一般的な方法だと、前回みたいに、長ったらしいJavaScriptを書くことになるよ！
ちなみに中は読まなくていいよ！あーこんな感じね程度に流し見してね！
code: 03.html
<html>
<head>
</head>
<body>
<input id="itemName"><button onclick="addItem()">追加</button>
<ul id="itemList">
</ul>
<script>
var items = []
function addItem(){
var itemName = document.querySelector("#itemName").value
items.push(itemName)
var itemList = document.querySelector("#itemList")
itemList.innerHTML = ""
for(var i = 0; i < items.length; i++){
itemList.innerHTML += "<li>" + itemsi + "</li>"
}
document.querySelector("#itemName").value = ""
}
</script>
</body>
</html>
※ちなみに、こういう感じのコードを仕事で書くと怒られるポイントはいっぱいあるよ！（特にセキュリティ周り）
そうすると、こんな感じの動きをするページになるよ！
https://gyazo.com/aa39fe47825aa838ffe2501cb516ba0e
このコードは一体どういうことをしているんだろう…？
一つ一つ解説していると、本一冊分くらいになってしまうので、イメージだけで説明しようね！
https://gyazo.com/a89ac649c004c918a49a8c664c01cb04
これ自体は別に悪いやり方ではないよ！
ただ、ここに機能を追加するのはけっこう大変だよ！
例えば…
リストの消去機能
テキストボックスが空白でも登録できてしまうので、ボタンを押せなくしたい
あとは…このあたりとか、ちょっと気になるね！
code: 04.html
itemList.innerHTML += "<li>" + itemsi + "</li>"
まだ、アプリがシンプルだからいいけど、複雑なアプリを作り始めると、このコードがどんどん膨れ上がってくるよ！
一つ言えることは…
https://gyazo.com/d02e931e9a42ac75639f2d739aafabb3
この黒板に直接書くスタイルだと、だんだんアプリがカオスになってくるんだ！
Vueでやりなおそう
そこで、Vue.jsを使うと便利なんだ！
「Vueロボ」が自動で、書き換え処理をやってくれるからね。
まず、Vueロボに「ひながた」と「リスト」を渡そう。
https://gyazo.com/682fa8c5dc7ad493cd00427233cd9f70
ロボはひながたとリストから画面を自動で作ってくれるぞ！
https://gyazo.com/3ce0594157be19301b25ee7fb2ddad1a
お買い物リストから一つずつ取り出して、
ひながたの空いている場所に埋めていくようなイメージになる。
https://gyazo.com/abbf248efe5b9967e751ed3915fecf80
この２つをもとに、ロボが自動で画面を作ってくれるんだ。
https://gyazo.com/c9b1f90f6ca51d85359d7e30191bd136
たとえば、キャットフードを買ったのでお買い物リストから消したいとする。
https://gyazo.com/aed2c57e179b5cc96caa55346c1dc696
そうすると、Vueロボは画面を自動で書き換えてくれるんだ！
https://gyazo.com/9ab46062102503c2017de5327e062786
書き換えを自動でやってくれるということは、
いいかえれば、リストのことだけ考えればいいことになる。
しかもロボの書き換えは速い！
全消しするのと違って、必要な分だけを書き換えてくれるんだ。
便利！
https://gyazo.com/28f59a0ff11497a3d520c463268343e9
ありがとう、Vueロボ…
ただし、Vueロボの真価を発揮するには、Vueのひながたの書き方を覚える必要があるよ。
めんどくさいね！
https://gyazo.com/faaa0b45cff32ca344f1e5583004821e
とりあえず、上記の４つを覚えると、いろいろなものが作れるようになるよ！
最後に、買い物リストアプリのVue.js版を貼り付けておくよ！
ざっと雰囲気を見るだけでいいからね！
code: 05.html
<html>
<head></head>
<body>
<div id="app">
<!-- v-modelはテキストフィールドの入力をitemNameと同期してくれる -->
<input v-model="itemName" /><button @click="addItem">追加</button>
<ul id="itemList">
<!-- v-forはitemsの数だけ繰り返す。また、繰り返しの一つぶんがitemに入る -->
<!-- {{ item }} はitemの内容を入れる場所 -->
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
<!-- Vue.js本体を読み込む -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app", // id="app"以下はVue.jsの雛形にする
data: {
items: [],
itemName: ""
},
methods: {
//クリックされたときにこの関数が呼ばれる
addItem() {
//リストに追加する（書き換えは自動）
this.items.push(this.itemName);
//テキストフィールドのクリア
this.itemName = "";
}
}
});
</script>
</body>
</html>
なんとなく便利な雰囲気がわかったら、
VueのCDN版を使おうで、いろいろなチュートリアルを試してみてね！