【学習記録⑨】カスタムディレクティブを用いて独自のDOM操作を作る！

はじめに

Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回はカスタムディレクティブを用いて特定の処理を使いまわす方法について記載していこうと思います。

カスタムディレクティブ

ディレクティブとはv-ifやv-forなどのようにDOM操作に関する属性を指しますが、カスタムディレクティブを用いると独自のDOM操作を定義することが可能です。

以下ではv-colorRedというカスタムディレクティブを作成しています。
v-ifやv-forと同じように属性として設定し、その内容がscriptタグのdirectivesプロパティに書かれているという感じですね。

test.vue

<template>
  <div v-colorRed>おはよう！</div>
</template>

<script>
export default {
  directives: {
    colorRed(el, binding) {
      el.style.fontColor = 'red';
    }
  },
};
</script>

カスタムディレクティブの登録方法としては、各コンポーネントでしか利用できないローカル登録と、どのコンポーネントでも利用できるようにするグローバル登録の2種類があります。
上記の例はローカル登録に当たります。

※グローバル登録、ローカル登録の詳細については以下の公式ドキュメントをご参照ください。
カスタムディレクティブ:登録方法

フック関数

カスタムディレクティブには「いつ発火するか？」をセットするフック関数があります。
フック関数は以下になります。

フック関数一覧

この中でもよく使われるmountedとupdatedには省略記法があります。
関数による省略記法

引数と修飾子

カスタムディレクティブは引数と修飾子を持つこともできます。
引数はカスタムディレクティブの後に:○○という形で渡され、修飾子は引数の後に.○○という形で渡されます。
引数で渡された値はそのままの値として扱われ、修飾子として渡された値についてはbooleanとして判定されます（その修飾子があるか、ないか）。

以上を用いてサンプルを作ってみる

以上を用いて簡単なサンプルを作ってみます。
今回はv-colorRedというカスタムディレクティブを作成し、その引数に文字を太くする設定を、修飾子に特定のフォント設定を入れてみます。また、フック関数については省略記法を用いて設定していこうと思います。
それぞれの引数や修飾子をセットした場合とセットしない場合で出力結果が異なることを確認していきましょう。

App.vue

<template>
  <div>
    <morning></morning>
  </div>
</template>

<script>
import Morning from "./components/Morning.vue";

export default {
  components: {
    Morning,
  },
};
</script>

Morning.vue

<template>
  <div v-colorRed:bold.isBorderBottom="fontData">おはよう！</div>
  <div v-colorRed:_.isBorderBottom2="fontData">おはよう2！</div>
</template>

<script>
export default {
  data() {
    return {
      fontData: {
        fontSize: "24px",
        color: "red",
      },
    };
  },
  directives: {
    colorRed(el, binding) {
      el.style.fontColor = binding.value.color;
      el.style.fontSize = binding.value.fontSize;
      // 引数の値をfontWeightにセット
      el.style.fontWeight = binding.arg;
      // isBorderBottom修飾子がある場合はborder-bottomへスタイルを適用する
      if (binding.modifiers.isBorderBottom) {
        el.style.borderBottom = "1px solid red";
      }
    },
  },
};
</script>

出力結果は以下になります。

「おはよう！」のほうは引数boldがセットされていることや、isBorderBottom修飾子があることが認識されていることが分かりますが、「おはよう2！」の方は引数がセットされていなかったり、修飾子が異なるものがセットされているため、指定したスタイルが適用されていないことが分かります。

おわりに

今回はカスタムディレクティブの使い方を学びました。
こちらも利用することはたくさんありそうなのでしっかり理解していこうと思います！