カテゴリーアーカイブ Vue

著者:杉浦

【Vue.js】連なった単一ファイルコンポーネント間のイベント発火

　Vue.jsはwebページを部品単位で構築することによって開発を支えるJavaScriptのフレームワークです。
Vue.js
　Vue.jsには単一ファイルコンポーネントという仕組みがあります。これは次のコードの様にあるwebページの部品のHTML、JavaScript、CSSを一ファイルにまとめる仕組みです。

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function () {
    return {
      greeting: 'Hello'
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

単一ファイルコンポーネント — Vue.js
　単一ファイルコンポーネントを用いるとDOMツリーならぬコンポーネントツリーともいうべき構造のコードを記述することになります。下図はあるページのコンポーネントの階層構造です。まとめ役のmain-template、その下に検索ボックスのsearch-box-templateと各モーダル、それぞれに入力欄のform-group-row-inputが連なっています。

　これはまだシンプルに保ててますが、モノによってはもっと深い構造なることもあります。
　離れた場所にある異なるメニュー内に共通アクションのボタンをつけるなど、異なるコンポーネント内で定義されているイベントを発火したい時があります。そういった時は$emitで親のイベントを発火することができます。
API — Vue.js#vm-emit
　サンプルコードなどでもよく現れ、よく使う形はmethod内部での$emitです。次の様に子ファイルの内部で$emit(‘イベント名’,引数)とすると、親ファイル中でhoge-eventが動き、$emitで渡された引数が格納された$event付きのhogeEventAction()が動作します。

// 親ファイル
<first-template
  @hoge-event="hogeEventAction($event)"
/>


// 子ファイル
method{
  fuga(){
    // 何か色々処理
    this.$emit('hoge-event', 'hogehoge');
  }
}

　これがよくある書き方ですが孫の様な直下よりも下にあるコンポーネントから親のイベントを発火する際には冗長です。

// 親ファイル
<first-template
  @hoge-event="hogeEventAction($event)"
/>


// 子ファイル
<second-template
  @hoge-event="hogeEventAction($event)"
/>
// ---省略---
method{
  hogeEventAction(argv){
    this.$emit('hoge-event', argv);
  }
}


// 孫ファイル
method{
  fuga(){
    this.$emit('hoge-event', 'hogehoge');
  }
}

　イベントの定義時にはイベントに対応する関数を記述するのがよくあるパターンですが、この部分はワンライナーならば何でも入れられます。このため中間になるコンポーネントには次の子ファイルの様に、親のイベントを発火する親と同名のイベントを定義すると簡潔なコードになります。

// 親ファイル
<first-template
  @hoge-event="hogeEventAction($event)"
/>


// 子ファイル
<second-template
  @hoge-event="$emit('hoge-event', $event)"
/>


// 孫ファイル
method{
  fuga(){
    this.$emit('hoge-event', 'hogehoge');
  }
}

　子ファイルの内部を汚さずに孫から親のイベントを発火できました。

著者:杉浦

Vue.jsの配列監視

　Vue.jsはJavaScriptのフレームワークで、目玉の機能として変数の値の変化に同期して画面上の描画を変更する機能があります。変数の変化は変数の監視機能で実現されていますが、オブジェクトや配列のプロパティをどこまで監視するかという問題があります。JavaScriptである以上prototypeと付き合っていく必要があり、再帰的にプロパティを見ることはprototypeを大量に見ることにつながり計算量的な問題が発生します。
　Vue.jsではいくつかの配列用のメソッドを上書きすることによって監視を実現しています。

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

リストレンダリング — Vue.js#配列の変化を検出より引用

　このため

a[a.length + 1] = 1;

　の様にするよりも

a.push(1);

の様に配列操作メソッドを使うことが推奨されます。
　上記のリストには配列中のある値を変更するためのメソッドが存在しません。加えてVue.jsはプロパティの変更を検知しません。

a[0] = 1;// Vue.jsは変数aが変化したことに気づかない

　このような時には

vm.$set(/** 変更対象元の配列やオブジェクト */vm.items, /** インデックスやプロパティ名 */indexOfItem, /** 変更後の値 */newValue)

　の様にvm.$set()なるVue.jsにこの変数は変更したと通知するメソッドで値を変更することになります。
　原因はわかりませんでしたが、これでもなお画面が変化しないことがありました。このような時には

vm.$forceUpdate();

なる強制再描画メソッドを呼び出します。このメソッドの再描画は特徴的で、呼び出したコンポーネントとその子コンポーネントでのみ再描画をします。とにかく更新したい時には、大本の親コンポーネントにvm.$forceUpdate()を実行するイベントを設定して子コンポーネントから発火させる方法が望ましいでしょう。

著者:杉浦

Vue.jsでVue.js向けに開発されていないライブラリを用いる

　Vue.jsはwebページを部品化してコーディングすることを目的としたJavaScriptのフレームワークです。単一コンポーネントの仕組みを用いたVue.jsのコード例の多くは（少なくとも私の読んだコードでは）次の様になっています。

// コンポーネント定義用Vue.jsコード
<template>
  // Vue.jsと連携するHTMLコード
</template>

<script>
export default {
  name: 'hoge',
  // prop:{}とかdeta(){return {hogehoge}}とかmethods:{}とかVue.jsと連携するためのプロパティ
};
</script>

<style scoped>
  // このコンポーネント内でのみ適用されるcss
</style>

// コンポーネント読み込み用JavaScriptコード
window.$ = window.jQuery = require('jquery');
// 色々グローバルで使うライブラリ

window.Vue = require('vue');

Vue.component('hoge', require('./hoge.vue').default);

const app = new Vue({
  el: '#app',
});

　自分はVue.jsで使うことを前提にしていないライブラリはJavaScript側2、3行目の様に色々読み込むものだと思っていました。一方でこのようなやり方はグローバル汚染がひどく、重要なごく一部のライブラリ以外を読み込んだ場合あっという間にバグが生まれるとも思っていました。実際はそのようなことをせずともよく、次の様に記述することで管理しやすくライブラリを用いることができました。

<template>
  // Vue.jsと連携するHTMLコード
</template>

<script>
import 'fuga';
import foo from 'foo';

// Vue.jsに依らない静的処理
const bar = foo.bar();

export default {
  name: 'hoge',
  // importしたライブラリや変数barを用いたVue.jsと連携するコード
};
</script>

<style scoped>
  // このコンポーネント内でのみ適用されるcss
</style>

　<script>タグの先頭に記述するだけです。<script>タグの内部ならばVue.jsがいい感じにスコープを作ってくれるのでグローバル汚染を気にせず好き勝手できます。
　<script>export default {で始めて、}</script>で終わらなければならないという風に思い込んでいましたがVue.jsにその様な縛りはなく、実際はかなり自由に記述できました。