こんにちは！ケインコスゲ@keinkosugeです。
JavaScriptのキャッチアップをしていかないとなと思い、重い腰をあげて最近Vue.jsに関するインプットをはじめてみました。
ということで、今回はプログラム入門あるある、おみくじアプリをVue.jsで書いてみて、Vue.jsの基礎を自分なりにブログに書いてみたいと思います。
Vue.jsでおみくじアプリの実例コード
まずはいきなり、Vue.jsを使った簡単おみくじアプリの実例を掲載してみようと思います。
See the Pen Vue.jsおみくじ by majikari-keruo (@castero) on CodePen.
ボタンを押すと、大吉・中吉・小吉など、おみくじの結果がテキストとして表示されるのがお判りいただけるかと思います。
ちなみにこのコードサンプルは。Codepen上にVue.jsの元となるコードを読み込んだ状態で動かしているので、その点ご注意くださいね！
Vue.jsの基礎基本を知る
それでは、ここからはVue.jsの基礎基本について書いてみたいと思います。通常のJavaScriptで書いたおみくじアプリと比較する形で、Vue.jsについて見ていきましょう。
ルートテンプレート
Vue.jsにおいては、まず「どのHTML内をVue.jsの影響下におくのか」というのを決定します。
という記述がHTMLにあって、
const vm = new Vue({
el:'#app',
//以下省略
という記述がJavaScriptにあると思うのですが、この2つがあることによって、「id=”app”が設定されているHTMLタグ配下をVue.js配下の影響においていきますよー」という図式が成立するのです。
データと場所を紐づける
Vue.jsでは、jQueryと違って何かデータを表示したい際にいちいちHTMLを足したりする必要はありません。
JavaScript（Vue.js）側で生成したデータを、ルートテンプレート内のどこに置くのか？というのが基本的なデータ表示の考え方になります。
また先ほどのCodepenのソースコードを確認してみようと思うのですが、HTMLには
{{result}}
という記述があり、JavaScript側には
const vm = new Vue({
data:{
result:"ボタンを押すとここにおみくじの結果が出るよ",
omikujiResult:["大吉","中吉","小吉","凶"]
},
//以下省略
という記述があると思います。
これはつまり、JavaScript（Vue.js）内のdataのresultというところに設定されている文字列データが、HTMLの「{{result}}」の部分で表示されている、という状態です。
つまり、JavaScript側で表示したいデータを作って、そのデータに名前をつけたら（上記例でいうとresult）、そのデータをどこに表示するのかをHTML内に「{{データ名}}」という形で表現するこことができる、という仕組みになっています。
jQueryで同じようなことをしようとすると、何か特定のデータを表示したい場合、そのデータを囲むためのHTMLタグを無駄に増やさなければならないケースも多々あったのですが、その必要はなくなります。
また、「omikujiResult:[“大吉”,”中吉”,”小吉”,”凶”]」という記述にもあるように、Vue.jsでもデータには文字列や数値だけでなく、配列を設定したりすることも可能です。
Vue.jsにおけるイベント設定方法の基礎
次のコードの箇所を見てください。
「v-on:click=”omikuji”」という記述がありますが、これは上記ボタンがクリックされたら、omikujiというJavaScriptの関数が実行される、という意味になります。
v-onというものがくっついているのは、上記ボタンがVue.jsのルート内・つまり影響下にあり、Vue.jsを使って設定した内容に絡めてボタンをクリックした時に何かしらの動作をさせたい場合に、「このボタンをクリックした時はVue.jsで設定した内容に絡めて関数が実行されますよー」という目印となるように、というニュアンスがあります。
そして、実際にomikujiという関数の内容が設定されているのは、JavaScriptのコード内にある
methods:{
omikuji:function(){
const num = Math.floor(Math.random()*this.omikujiResult.length);
this.result = this.omikujiResult[num];
}
}
という部分になります。
まとめ
ということで、今回はおみくじアプリを作ってVue.jsの基礎を学んでみました。
この記事の内容もだんだんとブラッシュアップしていって、どんどん噛み砕いてわかりやすい内容にしていけたらなと思います！
