Vueコンポーネントの併用で気をつけるべきことさてさて、ちょっと今の開発が多忙でブログ記事をお休みしてしまいましたが、おかげでいくつか公開したい内容が見つかりました。そのため、また「好きだからやってる」ぐらいのゆるいスタンスで更新をしていこうと考えています😊そして、今回の内容は私が実際に遭遇して「あ、しまった・・・💦」となった体験が元になっているので、ぜひ皆さんも心に留めておいてほしいと思っています。具体的にはというと・・・VueミックスインとVueコンポーネントを併用するときに気をつけるべきことがある!です。順を追ってご紹介していきましょう。合わせて読みたい何が問題となったかまず私が遭遇して「・・・。」となった現象を紹介します。あるサイト全体に共通で表示する情報(例えば、サイドバーに表示する新着情報など、ほぼ全ページに必要なもの)をAjaxで取得するようにしていました。いつものごとくVueコンポーネントも使って「使い回し」ができる「楽できる」スタイルの開発を進めていたときに、ある出来事に気が付きました。何度も同じAjax通信が発生していたんです。こんな感じです↓↓↓もちろん、URLもパラメーターも全く同じなので、「いや、1回でいいでしょ😅」となってしまいました。何をどうしていたのかでは、このような状態になってしまう実装はどんなものだったのかが以下になります。Vueコンポーネントをつくったまず、以下のようなコンポーネントを「/js/vue/components/test.js」として作成しました。'テストコンポーネント'});Vueミックスインもつくった「Vueミックスイン」とは、ある特定の機能や情報にどこからでもアクセスできる機能のことで、例えば、「数字を3桁カンマ区切りにする関数」などのVue本体からも、Vueコンポーネントからも使えると便利なので、よくミックスインの中に入れておいたりするんですね。今回は冒頭でも書いたように全ページで必要なデータを以下のようにしてミックスインで取得していました。}});VueミックスインとVueコンポーネントを使ってページを作成したそして、意気揚々とここまでで作ったVueミックスインとVueコンポーネントを以下のように併用するページを作成しました。</script></body></html>しかし!このコードのせいで、さっきの「いや、1回でいいでしょ😅」が引き起こされることになってしまったのです。何が問題だったのかでは、何か問題だったのか。原因としては、Vueミックスインをグローバルに設定してしまったからです。※ここで言う「グローバル」とは、英語を使うことや国際感覚をもつという意味ではなく、「どこからでもそのままアクセスできる」という意味です。省略});全Vueコンポーネントでこのミックスインが有効になるのです。今回の例で言うと、コンポーネント5つ分のAjax通信も追加で発生してしまうというわけです。一気に設定する方法になります。ひとつずつ見ていきましょう!ひとつずつ必要な場所で設定する方法まず1つ目は、比較的よく解決策として使われる「ミックスインをローカルで使う」方法です。(グローバルの逆ですね)やりかたは、まず以下のようにVue.mixin()を使わず単なるオブジェクトとして設定をします。}};そして、「使いたい場所で」次のようにミックスインを設定します。});</script>もちろん、コンポーネントでも以下のようにすることでミックスインを使うことができます。[appMixin]});なお、webpackなどでコンパイルして使う場合は、次のようにすることで対応できます。省略};ただし・・・このミックスインを「ローカル」として個別に設定する場合は、ちょっと面倒だったりするのも事実です。そのため、次は一気に設定して、さらに今回例で言うとAjax通信も1回だけにする方法をご紹介します。一気に設定する方法やり方としては、一番最初のVue.mixin()を使ったグローバルな使い方の拡張バージョンです。結論としては以下のコードを使います。}});$elは、Vueインスタンスが対象にしている要素のことなので、このidプロパティを判別することでVue本体かどうかをチェックしています。(idは、ページにひとつだけであるべきなので重複することはないことを利用しています)つまり、このidは、Vueのelの部分と一致します。'#app'});なお、元々は以下のようにクラス名を取得して判断していました(コンポーネントの場合はVueComponentになる)が、この方法だとVueインスタンスを2つ作った場合は対応できませんし、なによりwebpackでコンパイルするとクラス名が変更になってしまうのでうまくいきません。【注意】これはおすすめしない方法です。}});おわりにということで、今回はVueミックスインとVueコンポーネントを併用するときに気をつけておくべきことをご紹介しました。この部分は、ページ表示の速度にも関わってくる部分ですので、ぜひテクニックとして覚えておいて開発の役に立ててもらえると嬉しいです。ちなみに、少し今回のテーマからは外れますが今回の記事をチェックしていて、「あー、もう完全にES6の書き方ばかり使ってるな」と実感しました。コードが少なくていいというのは、めんどくさがり屋にとって「ビールを飲んでるときの唐揚げ」のように魅力的です。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。