Ne:Code道場~watch②の巻~


Ne:Code道場~watch②の巻~

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのフレームワーク、Vue.jsのwatchにおける学習ポイントについて紹介します。

目次
  1. はじめに
  2. watchについて、具体例おかわりニャ
  3. methodsというのがさり気なく登場しているニャ
  4. watchの中でやっていることについて教えてほしいニャ
  5. 最後に

はじめに

image この記事ではVue.jsのwatchについて、2回目ということで前回のサンプル記載と比較し、具体的な例をとりあげつつ、躓きポイント を補足しています。 各節ごとに、Ne:Code道場(猫de道場)の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、Vue.jsのwatchについて理解を深めてゆきましょう。
(いままでの記事もそうですが、Vue.jsはバージョンは2を用いています。サンプルコードで「vue@2.6.0」という部分でその指定を行っています。Vue.jsの最後で今まで取り上げたものとバージョン3での比較をまとめたいと思っています)

watchについて、具体例おかわりニャ

前回の記事では、Vue.jsのwatchの1つ目の記事として、watchに指定することで値の変更が自動的に監視されるようになり、その変更に差し込むように処理を追加できることを確認しましたね。ただ、前回の時点では、そのようなwatchの動きにフォーカスした、サンプルのためのコードになっていたため、今回の記事では具体的な利用イメージについて取り上げられればと思います。computedの比較も含めつつ記載してゆきます。
watchでは、変更前の値と変更後の値を取得できるので、変更後の値が想定外の値であった場合は、その変更を食い止めることも可能です。その例で確認してゆきましょう。
最初に今回はHTMLから見て、どういうことをやろうとしているのかを把握してゆきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <div id="app">
    <!-- シンプルにするためにチェックボックスの使用は、数字が入力されていない場合のみに制限しているニャ -->
    <label v-if="canCheck">
      <!-- チェックがついている時だけ、素数の入力のみに制限するニャ -->
      <input type="checkbox" v-model="onlyPrime">素数だけ入力可能ニャ
    </label>
    <!-- 数値入力エリアニャ。 -->
    <!-- チェックがついていたら素数だけの入力が可能ニャ -->
    <!-- チェックがついていない場合は1以上の正の整数どれでもOKニャ -->
    <input type="number" v-model="num" min="1" step="1">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script src="script.js"></script>
</body>
</html>

今回のサンプルコードでは、チェックボックスと入力エリアを配置しています。チェックボックスにチェックがついている場合は素数のみ入力可能とし、チェックが付いていない場合は1以上の整数が入力可能となる制御をJavaScript側で加えてゆきます。
数値入力エリアだけにして、素数のみ入力をするというサンプルでも良かったですが、computedとの比較も含めるためにあえてチェックボックスも設けました。
また、処理をシンプルにするために、「1以上の整数」は、input要素の属性の「min="1" step="1"」の設定によって対応しているコードになります。
 
次にJavaScript側を見てゆきましょう。まずはコード全体を取り上げますね。その後、後続の節で順を追って説明してゆきますね。

new Vue({
  el: "#app",
  data: {
    // 入力数値を受け取る箱ニャ
    // 未入力の場合を踏まえて初期値は空文字にしてるニャ
    num: "",
    // チェックボックスの入力を受け取る箱ニャ
    // 素数制限なしを初期値にしているニャ
    onlyPrime: false
  },
  computed: {
    // computedも併用しているニャ
    // 入力済の値から計算して何かを算出する際にはやっぱりcomputed使いやすいニャ
    // ここでは数値が何も入力されていない場合にチェックボックス利用可能を制御するために設けているニャ
    canCheck() {
      return this.num === "";
    }
  },
  watch: {
    // inputにバインドしているnumをwatchしているニャ
    num(newValue, oldValue) {
      // チェックボックスがついている場合の条件分岐ニャ
      if (this.onlyPrime) {
        // ↑で用意した関数を用いて入力された数字が素数かどうかを見ているニャ
        if (!this.isPrimeNumber(newValue)) {
          // 素数でない場合は、変更前の値に置き換えているニャ
          this.num = oldValue; 
        }
      }
    }
  },
  methods: {
    // 引数の数字が、素数かどうかを求める関数ニャ
    isPrimeNumber(num) {
      const START_NUM = 2;
      let ret = true;
      // 素数は、1と自分自身だけで割れる数だから、それを求める処理をしているニャ
      // 入力された数字まで各数字で割れるかどうかを調べているニャ
      for(let i = START_NUM; i < num; i++)
        if(num % i === 0) {
          // 1と自分以外でも割れる(余りがゼロになる)から素数じゃ無いニャ
          ret = false;
          break;
        } 
      return ret;
    }
  }
});

image

methodsというのがさり気なく登場しているニャ

「num(newValue, oldValue)」で定義しているwatchの処理ですが、まずはチェックボックスのチェック有無を確認し、チェックオンで素数のみの入力になっている場合は、methodsで定義している「isPrimeNumber」を用いて、新しく入力された値が素数かどうかを判定していますね。
methodsは、関数を記載するエリアに定義することができるもので、この先取り上げるイベント処理などの記事でも取り上げてゆく予定ですが、フライング的に登場させてみました。numのウォッチ処理内に直接書いても良かったのですが、それだと処理全体が長くなってしまい、今回の記事で注目してもらいたい箇所が分かりにくくなってしまうと判断したからです。
 
また、methodsは、computedやwatchの様にVue.jsならではの処理というよりは、関数定義として用いられる領域なので、その中の「isPrimeNumber(num)」部分は、関数名が「isPrimeNumber」で、引数として数値(num)を受け取る、そして戻り値ありで、素数の場合にはtrue、そうでない場合はfalseを返すという、JavaScriptの関数の知識があれば読める文法記載になっていることを確認できるかと思います。
 
中の処理も、制御構文としてのfor文やif文を用いて、引数の数字が1と引数自身以外で割り切れないかどうか、という素数判定のロジックに則ったコードが書いているのが確認出来ますね。
 
methodsについての深堀り説明は別記事に譲るとして、引き続きwatchの中身を確認してゆきましょう。
image

watchの中でやっていることについて教えてほしいニャ

チェックボックスにチェックが付いている場合は、素数のみを入力可能モードにするということで、mehtodsに定義している「isPrimeNumber」を用いてwatchの引数で取得している変更後の値をチェックしていますね。
そして、先頭の「!(ビックリマーク)」で素数で「無い」場合の処理として、変更前の値を「num」にセットすることで、変更自体を受け付けない状態になっているのを確認できます。
その際に、newValueにoldValueをセットするという書き方ではなく、num自体の値を変更しているのもポイントですね。newValueは「新しい値がこの値になりますよ」ということでwatchの引数で受け取れるものになりますので、「this」がついていないことを含め、このwatch内限定の値になっています。なので、値自体を変更したい場合は、this付きのdataに定義されている箱を直接変更する必要があるのですね。
 
このようにwatchでは、変更前・変更後の値を元に処理を組むことができます。それに対して、computedの方では、「canCheck」の定義にあるように、入力済のnumの値から算出した結果として、チェックボックスが利用可能かどうかを制御しています。
入力されたものを監視し、変更時に処理を挟むwatchと、入力された値を元に別の値を算出するcomputedのそれぞれの特色も確認してゆくことが出来ましたね。
image

最後に

Vue.jsのwatchについて、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

  1. watchでは値を監視し処理を割り込ませることができるニャ。その結果変更前・変更後を踏まえてのアクションを挟んでゆくことも可能ニャ
    1. computedでは確定した値ベースの算出で活用すると便利ニャ。それぞれの特性を活かして用いてゆきたいニャ~
  2. methodsについてフライング的に言及したニャ
    1. 関数を定義するエリアとして重宝するニャ
    2. この後イベントについての記事の際に改めて取り上げてゆく予定ニャ
  3. HTMLの属性を把握しておくことも良い勉強になるニャ
    1. 入力要素には色々便利な属性も存在しているニャ。知っていることで引き出しを増やしてゆくことが可能になるニャ!積極的に増やしてゆきたいニャ~

Vue.jsの12個目の記事として、Vue.jsのwatchについて学びました。次回はwatch対象がオブジェクトだった場合の挙動について取り上げる予定です。
見た目のフレームワークとしてVue.jsを学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
Vue.js導入に関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。
image


小泉七菜
この記事を書いた人
小泉七菜
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp