Vue.jsに触れよう6
公開日: 2025/1/20
今回は、Vue.jsを使って簡易的な都道府県ルーレットのアプリを作りました。
本記事では、作成したアプリの概要とコードを書いていこうと思います。
1. 作成したアプリの概要
以下が作成したアプリです。
スタートボタンを押すと、都道府県が1つ表示されます。
もう1回ボタンを押すと、都道府県が再表示されます。
また、スタートボタンは連打することができず、1秒ほど経ってから再度押すことができます。
スタートボタンを押すと、都道府県が1つ表示されます。
もう1回ボタンを押すと、都道府県が再表示されます。
また、スタートボタンは連打することができず、1秒ほど経ってから再度押すことができます。
2. 記述したコード
以下が実際に記述したコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>都道府県ルーレット</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<h1>都道府県ルーレット</h1>
<!-- 選択された都道府県を表示 -->
<div v-if="selectedPrefecture !== null">
<h2>{{ selectedPrefecture }}</h2>
</div>
<!-- スタートボタン -->
<button @click="startRoulette" :disabled="isSpinning">スタート</button>
</div>
<script>
new Vue({
el: '#app',
data: {
prefectures: [
'北海道', '青森県', '岩手県', '宮城県', '秋田県',
'山形県', '福島県', '茨城県', '栃木県', '群馬県',
'埼玉県', '千葉県', '東京都', '神奈川県', '新潟県',
'富山県', '石川県', '福井県', '山梨県', '長野県',
'岐阜県', '静岡県', '愛知県', '三重県', '滋賀県',
'京都府', '大阪府', '兵庫県', '奈良県', '和歌山県',
'鳥取県', '島根県', '岡山県', '広島県', '山口県',
'徳島県', '香川県', '愛媛県', '高知県', '福岡県',
'佐賀県', '長崎県', '熊本県', '大分県', '宮崎県',
'鹿児島県', '沖縄県'
],
selectedPrefecture: null,
isSpinning: false
},
methods: {
startRoulette: function() {
this.isSpinning = true;
const randomIndex = Math.floor(Math.random() * this.prefectures.length);
this.select3. コードの説明
headタグで文字コード、画面サイズの設定、タイトル、vue2のcdnの読み込みが行われています。
名前を付けて保存する際の文字コードの指定とheadタグの文字コードを一致させないといけないと気付きました。
<div v-if="selectedPrefecture !== null">
<h2>{{ selectedPrefecture }}</h2>selectPrefecture変数がnullじゃない時、変数内を表示させます。
startRouletteメソッドの中でselectPrefecture変数にdataの都道府県を代入してます。
代入された変数の中身が表示されてます。
<button @click="startRoulette" :disabled="isSpinning">スタート</button>v-onディレクティブでクリックしたらstartRouletteメソッドが実行されると書かれています。
また、v-bindディレクティブでdisabled属性が書かれています。
isSpinning変数の中身次第でボタンを押せるようにするか押せなくするか判定します。
isSpinning変数の中身にはtrueかfalseが入ります。
trueが入ってる時はボタンが押せるようになってます。
falseの時は押せなくなります。
methods: {
startRoulette: function() {
this.isSpinning = true;
const randomIndex = Math.floor(Math.random() * this.prefectures.length);
this.selectedPrefecture = this.prefectures[randomIndex];
setTimeout(() => {
this.isSpinning = false;
}, 1000);
}
};startRouletteメソッドの中身を説明します。
isSpinningにtrueを代入してます。
これによってボタンを押せるようになってます。
メソッド内に定義したrandomIndex変数にランダムに算出した値を代入します。
Math.random()関数で0以上1未満の数をランダムに出力していて、this.prefectures.lengthをかけてるので（prefecturesの長さを意味しているので47）0以上47未満の数がかっこの中で生まれてます。
かつMath.floorで小数点以下を切り捨てています。
結果的に0〜46のうちのどれかがrandomIndex変数に代入されてます。
その下がthis.prefectures[randomIndex]なので、prefectures配列の0番から46番までのデータがselectedPrefecture変数に代入されて画面上に表示されてます。
配列0番が北海道、46番が沖縄といった感じです。
最後に、setTimeoutで1秒後にisSpinning変数がfalseになります。