学習への意欲が出ない、という壁を乗り越える考え方。
もともと生のJS(JavaScript)を書いていた頃を思い出してみた。
jQueryという言葉をはじめて聞いたとき「何それ？」と思ったけど、
実際に書いてみたら便利であることに気づいた。
しかし「生でJSを書いていた経験」が無駄になることはなかった。
jQueryでどうしても対応できない実装が求められる局面とか、
ブラウザが古くてjQueryだとうまく動かない、というケースでは、
結局、生のJSを書いて解決するのが結論だった。
ということは、これまで、そして今現在、
JSやjQuery、その他のライブラリやフレームワークを使ってきた人にとって、
Vueを学ぶことは「JS系のスキルセットの追加」であり、リプレースではない。
そして数年後、Vueに代わる新しいフレームワークが登場しても、
Vueを学んだことは無駄にはならず、むしろプラスになるはずだ。
とりあえずindex.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ハローワールド</title>
</head>
<body>
<p>やきにく</p>
</body>
</html>
で「Vueはどうやって取り込むの？」となるのだが、
そこはjQueryと変わらんだろう、と察しがつく。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
たぶんダウンロードしてローカルに置くこともできるのだろうが、
とりあえずCDNで使ってみる。バージョン指定とかもあるのかな？
<!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>
さて、ハローワールドを書いてみる。
というか、公式ドキュメントからコピペして、
いじりながら覚える、というのが王道。
<!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 は何に使うの？
他にも疑問はあるが、とりあえず試してみる。
文字列にタグを書いてもいいのか？
<!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>だよね。
ってことは、
<!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は別ファイルに書こうよ、とかあるけど、取り急ぎ実験なので。
スクリプト内にタグを書いてエスケープさせない方法もあるような気がするが、
それをやると綺麗なコードとは言えなくなるので、やらないほうがいいのだろう。
文字列にスクリプトを書いてもいいのか？
<!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 は何に使うの？
とりあえずコンソールに出してみたら分かるかも、と思ったので。
<!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>
結果：ブラウザのコンソールを見ると、なんかいろいろ入っている。使い道はそのうち分かるだろう。
今日はここまで。