[はじめてのVue.js]ハローワールドを書いてみた。

### 学習への意欲が出ない、という壁を乗り越える考え方。

もともと生のJS(JavaScript)を書いていた頃を思い出してみた。
jQueryという言葉をはじめて聞いたとき「何それ？」と思ったけど、
実際に書いてみたら便利であることに気づいた。
しかし「生でJSを書いていた経験」が無駄になることはなかった。
jQueryでどうしても対応できない実装が求められる局面とか、
ブラウザが古くてjQueryだとうまく動かない、というケースでは、
結局、生のJSを書いて解決するのが結論だった。

ということは、これまで、そして今現在、
JSやjQuery、その他のライブラリやフレームワークを使ってきた人にとって、
Vueを学ぶことは「JS系のスキルセットの追加」であり、リプレースではない。
そして数年後、Vueに代わる新しいフレームワークが登場しても、
Vueを学んだことは無駄にはならず、むしろプラスになるはずだ。

### とりあえずindex.html

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ハローワールド</title>
</head>
<body>
<p>やきにく</p>
</body>
</html>
```

で「Vueはどうやって取り込むの？」となるのだが、
そこはjQueryと変わらんだろう、と察しがつく。

```html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
```

たぶんダウンロードしてローカルに置くこともできるのだろうが、
とりあえずCDNで使ってみる。バージョン指定とかもあるのかな？

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ハローワールド</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<p>やきにく</p>
</body>
</html>
```

さて、ハローワールドを書いてみる。
というか、公式ドキュメントからコピペして、
いじりながら覚える、というのが王道。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ハローワールド</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="favorite_food">
  {{ grilled_meat }}
</div>
</body>
</html>

<script>
var i_love_beef = new Vue({
  el: '#favorite_food',
  data: {
    grilled_meat: '焼肉といえば、やっぱ牛肉だよね。'
  }
})
</script>
```

これでブラウザに

```
焼肉といえば、やっぱ牛肉だよね。
```

と表示される。

### やり始めると、いろいろ試したくなる。

書いてみたら、次の疑問が出てきた。
1. 文字列にタグを書いてもいいのか？
2. 文字列にスクリプトを書いてもいいのか？
3. i_love_beef は何に使うの？

他にも疑問はあるが、とりあえず試してみる。


### 文字列にタグを書いてもいいのか？

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ハローワールド</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="favorite_food">
  {{ grilled_meat }}
</div>
</body>
</html>

<script>
var i_love_beef = new Vue({
  el: '#favorite_food',
  data: {
    grilled_meat: '<b>焼肉</b>といえば、やっぱ<span style="color:red;">牛肉</span>だよね。'
  }
})
</script>
```

結果：ブラウザには下記のように表示された。エスケープされている。

```
<b>焼肉</b>といえば、やっぱ<span style="color:red;">牛肉</span>だよね。
```

ってことは、

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ハローワールド</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="favorite_food">
  <b>{{ grilled_meat }}</b>といえば、やっぱ<span style="color:red;">{{ beef }}</span>だよね。
</div>
</body>
</html>

<script>
var i_love_beef = new Vue({
  el: '#favorite_food',
  data: {
    grilled_meat: '焼肉',
	beef: '牛肉'
  }
})
</script>
```
のように書くのが正しいのかな。

結果：焼肉は太字になり、牛肉は赤文字になった。そりゃそうだ。

まあCSSは別ファイルに書こうよ、とかあるけど、取り急ぎ実験なので。
スクリプト内にタグを書いてエスケープさせない方法もあるような気がするが、
それをやると綺麗なコードとは言えなくなるので、やらないほうがいいのだろう。


### 文字列にスクリプトを書いてもいいのか？

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ハローワールド</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="favorite_food">
  {{ grilled_meat }}
</div>
</body>
</html>

<script>
var i_love_beef = new Vue({
  el: '#favorite_food',
  data: {
    grilled_meat: '<script>alert(12345);</script>'
  }
})
</script>
```

結果：これはダメらしい。アラートが出ない。まあ、タグがエスケープされている時点で、そりゃそうだろう。


### i_love_beef は何に使うの？

とりあえずコンソールに出してみたら分かるかも、と思ったので。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ハローワールド</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="favorite_food">
  {{ grilled_meat }}
</div>
</body>
</html>

<script>
var i_love_beef = new Vue({
  el: '#favorite_food',
  data: {
    grilled_meat: 'でも牛肉は高いから、今日は豚肉にするか。'
  }
})

console.log(i_love_beef);

</script>
```

結果：ブラウザのコンソールを見ると、なんかいろいろ入っている。使い道はそのうち分かるだろう。

今日はここまで。