🍪Vue.jsで連想配列を使おう！
はじめまして、s4na🐧と申します。
今回はじめてQiitaの記事を書きます。
今回書く内容は、少し前にVue.jsで実装していたら躓いた連想配列の利用方法です。
一時期は「計算量が増えるけど、連想配列を使わないで実装してしまおうかな・・・😢」と思ったこともあるくらい大きく躓きました。
少しでも私と同じところで躓く人の力になればと思い、今回筆をとりました。🖋
RailsのViewからVue.jsに連想配列を渡す方法
まずはRailsのViewからVue.jsに連想配列を渡す方法について書いていきます。
この方法は、Rails側からVue.jsに初期値を渡す際に使います。
もちろん、APIを作ってそちらで渡してもいいのですが、それだとAPI分の通信量が増えてしまうので、私はViewから渡しています。
- 補足：RailsのView = MVCのView
ControllerでJSON化しておく
- 補足：Hashのまま渡すと、Vue.jsがParseできないです。フロントで無理にパースしてもいいのかもしれませんが、サーバーサイドでできることはサーバーサイドでしたほうが良さそうです
@foo = JSON(foo)
View
- 補足：
- RailsのTemplate Engineはslimで書いています
-
@foo,@baaみたいに値を複数渡す場合もあるので、#js-el-data-fooのように名前を区切ると便利です。
#js-el # 👈Vue.jsがマウントするDOM
#js-el-data-foo
= @foo # 👈渡したい値 その１
#js-el-data-baa
= @baa # 👈渡したい値 その２
Vueインスタンス
Vue.js側では、ViewのDOMのinnerTextを取得し、JSON化してdataに入れ込みます。
<script>
export default {
data: () => {
return {
reservations: {}
}
},
created: function() {
// 👇JSONが連想配列になる 👇JSONで受け取る
this.memos = JSON.parse(document.querySelector('#js-el-data-foo').innerText);
}
}
</script>
Vueインスタンスで連想配列をループ表示する方法
連想配列の表示は連想配列[key]とする必要があり、そのためにはkeyの集合であるkeysが必要になります。
- 補足：テンプレートエンジンには
Pugを使用しています
<template lang="pug">
.foo(v-for="key in keys")
| {{ foo[key] }}
</template>
<script>
export default {
data: () => {
return {
reservations: {},
keys: []
}
}
}
</script>
Vueインスタンス内で連想配列に情報を追加する方法
追加する際は$setメソッドを使いましょう。
これは書こうとした時、めっちゃハマりました。😭
この記事を書こうと思った原点でもあります。
他の言語やフレームワークを利用していたりすると、「val['key']で値を代入できるのでは？」と考えてしまうこともあるかと思います。（私はそうでした。）
Vue.jsでは、JavaScriptの仕様で、連想配列に要素を追加した時に検知できません。
なので、変更検出が可能なメソッドを利用する必要があります。（公式ドキュメントを読めば気づけるけど、読んでなかった😈）
export default {
data: () => {
return {
foo: {}
}
},
methods: {
addFoo: function(key, hoge) {
this.$set(this.foo, `key`, hoge);
}
}
連想配列から要素を削除する方法
削除する際は$deleteメソッドを使いましょう。
JavaScriptを書いていると、deleteメソッドで削除してしまったりすることがあると思います。（私はそうでした）
それだと$setと同様に、Vue.jsが要素数の変化を検知できないので、$deleteを使う必要があります。
methods: {
deleteFoo: function(key) {
this.$delete(this.foo, key);
}
}
Vueインスタンスで連想配列をAPIで取得する方法
methods: {
token () {
const meta = document.querySelector('meta[name="csrf-token"]')
return meta ? meta.getAttribute('content') : ''
},
getFoo: function() {
fetch(`/api/hogehoge`, {
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=utf-8',
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-Token': this.token()
},
credentials: 'same-origin',
redirect: 'manual',
})
.then(response => {
return response.json();
})
.then(json => {
this.$set(this.foo, `key`, json); // 👈受け取った値を連想配列`foo`に入れる
})
.catch(error => {
console.warn('Failed to parsing', error);
})
},
まとめ
- Vue.jsで連想配列を扱うのは、癖がわかれば結構簡単！
- 時間がなくて厳しくても、触ったことのない技術を触るのであれば、何よりもまずは公式ドキュメントを全部読もう！！！
- Vue.jsならこちらのガイドを読もう！！！