はじめに
Vue.jsを学習中の初心者の私が理解を深めるためにおみくじアプリを作ったのでアウトプットの為に記事を書いておきます。
同じVue.js初心者の助けになれば嬉しいです。
やろうと思うこと
おみくじは大吉、中吉...と○吉の文字を配列に入力しておきます。
ブラウザ上のボタンをクリックしたら配列数以下のランダムな数を取得し、それを使って同じ数の配列を取得してアラートを出します。
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Vue.js</title>
</head>
<body>
<div id="app">
<button @click="result">結果を見る</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/omikuzi.js"></script>
</body>
</html>
new Vue({
el: '#app',
data: {
list: [
'大吉',
'中吉',
'小吉',
'末吉'
],
},
methods: {
result: function() {
const num = Math.floor(Math.random() * this.list.length)
alert(this.list[num])
}
}
});
ではhtmlからコードの説明をしていきます。
まず<div id="app">はVue.jsの影響を及ぼす範囲のルートになります。
omikuzi.jsでel: '#app'と記載しているのでそれ以外の場所には影響を与えません。
Vue.jsをシンプルに理解しよう その２
詳しくは上記記事をお読みください。
次に<button @click="result">結果を見る</button>ですが、
これはボタンをクリックした時にresultメソッドを呼び出すという意味になります。
最後に<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>と
<script src="js/omikuzi.js"></script>ですが、これはVue.js本体とresultメソッドを書いているomikuzi.jsを読み込むという意味になり、この読み込みが無い場合はVue.jsの機能である@clickやomikuzi.jsに書いてあるresultメソッドを呼び出せなくなるため正常に動作しません。
次にjavascriptファイルの説明をしていきます。
まずnew VueですがこれはVueインスタンスを作成しています。
Vue.jsはnew Vueで作成されたルートVueインスタンスの中にメソッドなどをツリー状にして保存しているのでnew Vueが無い限りVue.jsは動かないと思います。(Vue.js初心者の言うことだからもしかしたら違うかも？)
詳しくはVue.jsの公式ガイドをお読みください。
次にdata:の中にあるlist:に配列で大吉などの○吉を入力しています。
これでlist[0]と書くことで大吉を呼び出すことができます。
次にメソッドの説明をしていきます。
methods:の中でresult: function()と書くことでresultメソッドを作成しています。
resultメソッドに記載しているconst num = Math.floor(Math.random() * this.list.length)はnumという箱にランダムな数字を生成して入れるという意味です。
もっとわかりやすく書くとMath.floorは【小数点以下を切り捨てる】、Math.random()は【0以上1未満の数字をランダムで生成する】、this.list.lengthはlistの配列のデータの数を意味しています。
なので0以上1未満の数をランダムで生成してlistのデータの数だけ掛け算して、計算結果の小数点を切り捨ててnumに保存するという意味になります。
最後にalert(this.list[num])ですがalertは文字通りアラートを出します。
alertの()内にどのデータをアラートで表示するかを記載できるのでthis.list[num]でlistにある先ほど生成したランダムな数値を使って配列のデータを表示します。
最後に
一応私なりに頑張って書きましたが、かなり冗長になってしまいました。
ここが分かりづらいやこうするのがおすすめなどのご意見ありましたらコメントにお願いします。