共通コードをミックスインにまとめる実例さてさて、先日本業の開発の方で過去バージョンのVueを互換性に問題がなさそうだったので最新のものに変更したら、実行速度がとても早くなったので感動をしました。この一件があった時に「そういえば最近このブログでVueの話題を扱ってないな」と思ったので今回はVueの基本的な内容「ミックスイン」の使い方を順を追って紹介することにしました。(シンプルな理由ですみません😂)ミックスインとは、Vueにはじめから備わっている機能で、簡単に言うと「必要な部分だけ使い回しができる機能」です。以下のように数字を3桁カンマに変換するメソッドを作る場合があると思いますが、このnumberFormat()というメソッドは別の場所でもよく使いそうですよね。}});そんな場合にこのnumberFormat()だけ別のところに書いていて後でいつでもVueの中へ呼び出すようにできる、それが「ミックスイン」です。合わせて読みたいミックスインの専用ファイルを作成するまずは、先ほどのnumberFormat()を専用のファイルに格納します。ファイル名はそのままnumberFormat.jsでもいいですが、後でまた別の使い「回しメソッド」が入ってきてもいいようにutility.jsとすることにします。/js/vue/mixins/utility.jsというファイルを作成します。ご自身で変更して問題ありません)そして、中身を以下のようにして保存してください。}};utilityMixinという名前もご自身でお好きな名前に変更しても問題ないですが、この変数を後で呼び出すことになりますので覚えておいてください。作成したミックスインをVueで呼び出す使い方は簡単で、作成したミックスイン・ファイルをscriptタグで呼び出してmixinsの中に配列で入れてあげるだけです。</script></body></html>こうすることでどこからでも好きなページからnumberFormat()が呼び出せるというわけです。先ほどの例で言うと、mixinsパラメータに配列としてミックスインをセットしましたが、毎回これを行うのはめんどうですよね。そんな場合は、先ほどのutility.jsを次のように変更するといいでしょう。}});こうすると、以下のようにutility.jsを呼び出すだけでnumberFormat()が利用できるようになります。});</script>ただし、一点だけ注意点があります。それは、Vue.mixin()を使った(グローバル設定した)場合、Vueのインスタンスが作成されるたびにmountedやcreatedが呼ばれるという点です。以下のようなグローバル設定のミックスインがあったとします。}});そして、次のようにVueインスタンスを2つ作成すると、先ほどのmountedは2回実行され、コンソールには2回「test」と表示されることになります。指定することをおすすめします。ミックスインはいろんな機能に対応しているすでに少し紹介しましたが、Vueのミックスインはmethods以外の機能にも対応しています。v-text="today"></span>また、mountedやwatchにも対応しています。}});そして、もちろんdataにも対応しているのですが、ここは注意が必要でdataの場合は通常のVueのようなオブジェクトではなく、関数の返り値として設定しなければいけません。実際の例を見てみましょう。これはコンポーネントの場合も同じです。することで、あたかも以下のように設定したのと同じような動きをVueにとらせることができるようになります。}});そのため、例えばログインしているユーザーのIDを格納するuserIdなどを専用のミックスインにもたせてもいいかもしれません。おわりにということで、今回は本当にVueにとって基本的な機能ミックスインの使い方を紹介しました。このブログ記事でよく書いていますが、「いかに開発効率を上げるか?」は「いかに使いまわしをしてるか?」が大きく影響してくると思いますので、普段からよく使うメソッドなどはひとまとめにして、いつでもどのプロジェクトにも使えるようにしておくといいかもしれません。ちなみに私の場合は、(もちろんOKな場合だけですが)ミックスインやコンポーネントを使いまわしできる形にしてGithubで公開し、いつでもnpmなどでインストールできるようにしています。皆さんも参考にしてみてくださいね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。