はじめに

※ この記事の内容について、あくまで一個人の意見ですので、異論は認めます。

今更ですがVue.jsに入門したのと、何を血迷ったのか、いきなり自社サービスをVue.jsでリニューアルしてある程度落ち着いたのでまとめてみようと思い記事にしました。

そもそもVue.jsに入門するまではガッツリjQueryでごりっごりのアプリケーションを開発しており、「jQuery最高かよ！なんでもできるじゃねえかよ！」とか思ってた時期もありました。しかし、アプリケーションが複雑になるにつれ、DOM操作が複雑になっていき吐きそうになっていて、そんなときにVue.jsと出会い、幸せを手に入れることができたって感じです。

Vue.jsって？

フロントエンドエンジニアの方ならほとんどの方が少なくとも「名前くらい聞いたことある」って感じなのかなって思います。
ReactやAngularといったWebフレームワークの一種です。
公式サイトには以下のように紹介されています。

Vueは、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。
他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vueは少しずつ適用していけるように設計されています。
中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、
とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

引用: https://jp.vuejs.org/v2/guide/index.html

DOM操作を隠蔽してくれるので、DOM操作に対するストレスがなくなります。

また、VueCLIというCLIも用意されていて、最近v3.0がリリースされたりしています。
VueCLIv3からTypeScriptやSassなどを導入しやすくなりました。
今までは自分でloaderだの必要なプラグインを入れてWebpackの設定を変更する必要があったんですが、そこの敷居が低くなりました。

DOM操作からの開放

それではどのように地獄のようなDOM操作から開放されていったのかいくつか紹介していこうと思います。

on○○イベント

clickしたときに着火する on("click") イベントや、セレクトボックスが変更されたときに着火する on("change") イベントなどの書き方

jQueryの場合

$("hogeClass").on("click", ()=> {
  console.log("hogeClass Clicked");
});

$("fugaClass").on("change", ()=> {
  console.log("fugaClass Changed");
});

Vue.jsの場合

<template>
  <div class="hogeClass" @click="clickEvent"></div>
  <div class="fugaClass" @change="changeEvent"></div>
</template>
<script lang="ts">
  import Vue from "Vue";
  export default class Header extends Vue {
    clickEvent() {
      console.log("hogeClass Clicked");
    }

    changeEvent() {
      console.log("fugaClass Changed");
    }
  }
</script>

要素の表示/非表示

動的に要素を表示したり、非表示にしたり切り替えるときの書き方

jQueryの場合

.hidden {
  display: none;
}

$("hogeClass").addClass("hidden");

Vue.jsの場合

<template>
  <div v-show="display">Hoge</div>
  <div v-if="fuga='yeah'">Fuga</div>
  <div @click="hogeClassHidden"></div>
</template>
<script lang="ts">
  import Vue from "Vue";
  export default class Header extends Vue {
    private display: boolean = true;
    private fuga: string = "boo";

    hogeClassHidden() {
      this.display = false;
      this.fuga = "yeah";
    }    
  }
</script>

要素の値を取得する

input要素などのvalue値を取得するときの書き方

jQueryの場合

const val = $("hogeClass").val();

Vue.jsの場合

<template>
  <input type="textarea" class="hogeClass" v-model="inputValue">
　　　　<div class="fugaClass"> {{ inputValue }} </div>
　　　　<div @click="displayInputValue"></div>
</template>
<script lang="ts">
  import Vue from "Vue";
  export default class Header extends Vue {
    // テキストエリアの内容を書き換えると自動で inputValue の値が更新される
    private inputValue: string = "";   

    displayInputValue() {
      console.log(this.inputValue);
    }
  }
</script>

要素を動的に生成

配列の値などを元に動的に要素を作成するときの書き方

jQueryの場合

<table class="tableClass">
  <tbody class="tbbodyClass">
</table>

const appendItems = ["hoge", "fuga", "test"];
const parent = $("tbbodyClass");

appendItems.forEach(item => {
  const appendHTML = `<tr><td>${item}</td></tr>`;
  parent.append(appendHTML);
});

Vue.jsの場合

<template>
  <table class="tableClass">
    <tbody class="tbbodyClass">
      <tr v-for="item in appendItems"><td>{{ item }}</td></tr>
  </table>
</template>
<script lang="ts">
  import Vue from "Vue";
  export default class Header extends Vue {
    private appendItems: string[] = ["hoge", "fuga", "test"]; 
  }
</script>

さいごに

こうして私はVue.jsにしたことによってjQueryを使うことがなくなり、幸せを手に入れることができました。
せっかくjQueryを駆使してDOM操作を実装したのに、HTML側に大きな変更が入って、id/class名が大きく仕様変更されたときの、あの絶望から開放されたのです。

今回紹介しているのはVue.jsのほんの一部だと思ってください。
Vue.jsにはDOM操作を隠蔽してくれる以外にも様々な機能があって、幸せを手に入れることができます。

jQueryのDOM操作に疲れたそこのあなた！Vue.jsおすすめですよ！

ではまた！

jQueryのDOM操作に疲れたあなた！そんなあなたにVue.js！