JavaScriptのフレームワークVue.jsを使ってみる

bubudoufu

3年前

このページではソースコードの一部分を簡単な解説をしています。
作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。

概要
Vue.jsをCDNで導入する
dataプロパティオプションを定義する
ごはん一食当たりの値段とお茶碗何杯分かを計算する
v-modelディレクティブを利用する

概要

Vue.jsを使う練習の為に作成したアプリです。各項目の数値を入力するとごはん一食当たりの値段とお茶碗何杯分かを表示します。cssはフレームワークのBulamaを使用しています。背景画像は無料の高画質フリー写真素材を提供しているimageslaboの画像を使用しています。

Vue.jsをCDNで導入する

Vue.jsを利用するにはnpmコマンドでインストールするかVue CLIでプロジェクトを作成するかCDNでライブラリをブラウザで直接読み込ませるなどの方法があります。今回は手軽にVue.jsを始められるCDNを読み込んでVue.jsを使えるようにしました。jsDelivrにCDNファイルが置いてあるのでその中から好きなバージョンを選択し、vue.global.jsかvue.global.prod.jsをインポートします。どちらも機能は同じなのですがvue.global.prod.jsはコードが圧縮されていてファイルサイズがちいさくなっています。

// ブラウザで読み込ませる
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.33/dist/vue.global.prod.js"></script>

1 2	// ブラウザで読み込ませる <script src="https://cdn.jsdelivr.net/npm/vue@3.2.33/dist/vue.global.prod.js"></script>

dataプロパティオプションを定義する

dataプロパティオプションにごはん一食当たりの値段とお茶碗何杯分かを計算するために必要なデータを定義します。

const riceCalculator = {
  data() {
    return {
      weight: 5, // 買ったお米の量（kg）
      price: 2000, // 値段（円）
      oneWeight: 180, // お茶碗一杯の量（g）
    };
  },
};

const riceCalculator = {

data() {

return {

weight: 5, // 買ったお米の量（kg）

price: 2000, // 値段（円）

oneWeight: 180, // お茶碗一杯の量（g）

};

ごはん一食当たりの値段とお茶碗何杯分かを計算する

計算方法は購入したお米の重さを炊きあがり後の重さにして（炊きあがり後２．２倍で計算しています）、お茶碗一杯分の重量で割ることによって何杯分かを出しています。一食当たりの値段は購入金額を先ほど出した答えで割って出しています。
上記の計算を算出プロパティ(computed)で定義する。

const riceCalculator = {
    data() {
      return {
        weight: 5,
        price: 2000,
        oneWeight: 180,
      };
    },
    computed: {
        // ごはん一食当たりの値段とお茶碗何杯分かを計算する
      calculate() {
        const servings = Math.floor((this.weight * 1000 * 2.2) / this.oneWeight);
        const servingsPrice = Math.floor(this.price / servings);
        return `一食当たり約${servingsPrice}円、\n お茶碗${servings}杯分です。`;
      },
    },
  };

const riceCalculator = {

data() {

return {

weight: 5,

price: 2000,

oneWeight: 180,

};

computed: {

// ごはん一食当たりの値段とお茶碗何杯分かを計算する

calculate() {

const servings = Math.floor((this.weight * 1000 * 2.2) / this.oneWeight);

const servingsPrice = Math.floor(this.price / servings);

return `一食当たり約${servingsPrice}円、\n お茶碗${servings}杯分です。`;

};

算出プロパティ(computed)でメソッドを定義するとthis.～の値が変更されるたびにメソッドが実行されます。

v-modelディレクティブを利用する

v-modelディレクティブを利用するとフォームで入力された値とdataオプションのプロパティを連動させることが出来ます（双方向データバインディング）。今回作成したアプリもv-modelを利用してフォームの数値が変更されると計算結果も即時反映されます。

<label class="level-right">買ったお米の量（kg）</label>
<div class="control">
    <input class="input has-text-weight-bold has-text-right" type="number" placeholder="5" min="1" pattern="\d*"
        v-model.number="weight">
</div>

<label class="level-right">買ったお米の量（kg）</label>

<input class="input has-text-weight-bold has-text-right" type="number" placeholder="5" min="1" pattern="\d*"

v-model.number="weight">

</div>

v-modelにはさまざまな修飾子が用意されていて、今回はnumber修飾子利用して入力された値を数値としてdataオプションのプロパティにバインドしています。

最後までお読みいただきありがとうございました。
作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。