Vue.js の mixin を作る時に意識していること

これは Vue.js #3 Advent Calendar 2017 - Qiita の18日目の記事です。

Vue.js には、mixin という機能をコンポーネント間で再利用するための仕組みがあります。今日は自分が mixin を作成する際に意識していること、気をつけていることを紹介しようと思います。

例えば、振る舞いは同じだが、見た目が異なるためにそれぞれ別のものとして定義されているコンポーネントがあるとしましょう。徐々にそれらが肥大化してきて、共通のロジックを mixin として切り出すとします。

しかし、単純に共通のロジックをまとめて切り出すことには以下のような問題があります。

mixin が xxBase や xxCommon のような役割のぼやけた名前になりがちで、mixin によって何の機能(メソッド)が付与されるか分かりづらい
ひとつの mixin に複数の機能が含まれると、個々の機能の再利用がしづらい

例えば、~able という名前を付けるように意識する

ここで、mixin を作る際に自分が意識していることをひとつ紹介したいと思います。それは mixin には ~able という名前を付け、コンポーネントにひとつの機能を付与することに徹する、という意識を持つことです。

例えば、SNS にシェアする機能について考えてみましょう。Twitter や Facebook にシェアする機能は、ページのあちこちで必要となるものです。その度に同じようなロジックを記述することは、後々の保守を考えると望ましくありません。このような場合は、「コンポーネントに SNS にシェアする機能を付与する」と考え、ContentSharable のような名前の mixin を定義して、コンポーネントで使用するようにします。

const ContentSharable = {
  methods: {
    shareToTwitter: function () {
      // ...
    },
    shareToFacebook: function () {
      // ...
    },
  },
};

new Vue({
  mixins: [ContentSharable],
  // ...
});

どうでしょう。mixin の名前から付与される機能(メソッド)が何であるか、またその逆が明確になります。これはコードの整理を行う際に効く重要なポイントです。もちろん、常に ~able という命名をおこなうことが正しいとは限りませんが、mixin の役割を明確にする、再利用性を高めるひとつのコツであるように思います。mixin を定義する際の参考にしていただけたら幸いです。