Vue.js初心者の開発所感

はじめに

今までjquery及び素のjavascriptを利用していたエンジニアの所感となります。
Vue初学者の理解の助けになればとの思いで書いています。

間違いがあるかも知れないためその際はご指摘いただけますと幸いです。

データ中心のアプローチで考える。

開発していて思ったことです。Vueの便利なところは
・データを一元管理できる
・データを見せたい形にしてくれる
になるのかと思いました。

データを一元管理できる

例えばトグルボタンを実装する場合を考えます。
トグルボタンにはOn <-> Off の切り替えがあり、その状態を画面で管理する必要がありますが、
その状態管理方法は開発者によるところがあります。例えば
　1.hidden項目に値を持たせて管理
　2.トグルボタン要素に、カスタムデータ属性等を追加して管理
　3.javascriptのグローバル変数に持たせて管理
　4.classに on と off を制御するclassを付与して管理
のようにトグルボタンの状態管理方法は多々あるようです。

sample.html

 <!--1.-->
<span>
  <label>トグルボタン</label>
  <input type="hidden" id="hdnToggleSwitch" value="1" />
</span>

<!--2.-->
<label data-switch="1">トグルボタン</label>

<!--3.-->
<label onClick="switchBtn();">トグルボタン</label>
<script>
  let isActive = true;
  // ~ isActive を制御するコード
</script>

<!--4.-->
<label class="tglOn" id="tglBtn" >トグルボタン</label>
<script>
  const isActive = $("#tglBtn").hasClass("tglOn");
</script>

業務で上記に似たコードを結構見てきました。
データをhtmlで管理するか、jsで管理するかってレガシーシステムを見ていると結構分かれているんですね。

この辺りがVueだと data で管理できる事が良いですね。

sample2.html

<script>
export default {
    data() {
        return {
            isActive: true
        }
    }
}
</script>

<template>
  <div>
    <button @click="isActive = !isActive" :class="{ tglOn:isActive }">
      {{ isActive ? 'ON' : 'OFF' }}
    </button>
  </div>
</template>

dataに管理させるとjsで操作するときに楽ですし、慣れれば慣れるほどソースを見るのが楽になって良いですね。sample1.htmlでも悪くはないのですが、複数の実装があるとそれだけで改修時に時間がかかることもあります。カスタムデータ属性とかは知らない人にとっては微妙に厄介ですし（大文字使って定義して動かないとか）

vueで画面を作成する際は、まず画面の構成要素をdataで管理することを押さえておくと良いのかと思いました。

データを見せたい形にしてくれる

これが便利なんですよね。dataで管理しているデータをどう画面に表示したいか。

データとその表示ロジックをしっかり切り分けることって、jqueryや素のjavascriptだと実現しにくいんですよね。データとその表示方法ロジックが密接にならざるを得ないといいますか。DOM操作をする訳ですから当然と言えば当然なんですけど。
表示用の値を加工しながら運用するか、或いは表示用＋無加工の値を保持して運用する必要があるといいますか。値を複数持つ構成になるコードはよく見かけますね。

sample.js

    let aoNo;
    $(function(){
      $.ajax({
        // 省略
      })
      .done(function(data) {
        aoNo = data.aoNo
        $("#aoNoArea").append(aoNo.substring(0,2) + "-" + aoNo.substring(2,4));
      })
       .fail(function() {
        console.log('失敗');
      });
      $("#submit").on("click",()=>{
        let tempAoNo = $("#aoNoArea").find() // 省略、domから取得
        tempAoNo = tempAoNo.replace(/-/g,"-"); // 上のaoNoを使えばいいけど、画面の値を使いたい時もある
      });

わかりやすい面倒な例を挙げたかったのですが、書くのが大変ですね。

別にこれでも良いとは思っているのですが。
ただ、画面表示を開発者の実装に任せると結構大規模なコードになる傾向があるんですよね。
文字列結合でhtmlを動的に生成されると、後から見る側は大変です。
第一印象が良くないといいますか。動的なDom作成＋謎のビジネスロジック があると理解に時間がかかってしまうんです。
画面に表示する（データを表示する）って結構大変な処理なんだなって。

Vueは、データの見せ方について楽に実装させてくれますね。
例えば、
　・計算結果を表示
　・フォーマット変換を通して表示
　・CODEに紐付く名称を表示（思想によるため、必ずしもこれが良いとは限らない）

sample3.html

<script>
export default {
    data() {
        return {
            aoNo: "123456",
            aoDate:"20250101"
        }
    },
    computed:{
      formatAoNo:function(){
        return `${this.aoNo.substring(0,2)}-${this.aoNo.substring(3,4)}`;
      },
      formatAoDate:function(){
        // yyyy/MM/dd
        return `${this.aoDate.substring(0,4)}/${this.aoDate.substring(5,6)}/${this.aoDate.substring(7,8)}`;
      }
    }
}
</script>
<template>
  <div>
    受注番号:{{formatAoNo}}<br><!--12-3456-->
    受注日:{{formatAoDate}}<br><!--2025/01/01-->
  </div>
</template>

画面表示用の値をそのまま保持しながら、画面に別の形で見せられるという点が非常に便利ですね。
サーバー送信時にそのまま使えますし、わざわざフォーマット後の値を項目として持つ必要がありません。

上記のような簡易な場合であればコード量はむしろ増えますが、慣れると頭を使う時間が減って非常に楽です。
dataを適切に定義出来れば重複した値を持つ必要が無くて良いですね。

終わり

dataを中心に考えてみるとVueの理解に繋がりやすいと思っています。
必要なdataを定義しそれをどう画面に映すか、を考えるとDOM操作の開発とは別の体験になりますというか。

全然まとまりと説得力ないですね。想像以上に自分でも理解出来ていないのでまだまだ学習です📚