🍪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>exportdefault{data:()=>{return{reservations:{}}},created:function(){// 👇JSONが連想配列になる 👇JSONで受け取るthis.memos=JSON.parse(document.querySelector('#js-el-data-foo').innerText);}}</script>
Vueインスタンスで連想配列をループ表示する方法
連想配列の表示は連想配列[key]とする必要があり、そのためにはkeyの集合であるkeysが必要になります。
- 補足：テンプレートエンジンには
Pugを使用しています
<templatelang="pug">.foo(v-for="key in keys")|{{foo[key]}}</template>
<script>exportdefault{data:()=>{return{reservations:{},keys:[]}}}</script>
Vueインスタンス内で連想配列に情報を追加する方法
追加する際は$setメソッドを使いましょう。
これは書こうとした時、めっちゃハマりました。😭
この記事を書こうと思った原点でもあります。
他の言語やフレームワークを利用していたりすると、「val['key']で値を代入できるのでは？」と考えてしまうこともあるかと思います。（私はそうでした。）
Vue.jsでは、JavaScriptの仕様で、連想配列に要素を追加した時に検知できません。
なので、変更検出が可能なメソッドを利用する必要があります。（公式ドキュメントを読めば気づけるけど、読んでなかった😈）
exportdefault{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(){constmeta=document.querySelector('meta[name="csrf-token"]')returnmeta?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=>{returnresponse.json();}).then(json=>{this.$set(this.foo,`key`,json);// 👈受け取った値を連想配列`foo`に入れる}).catch(error=>{console.warn('Failed to parsing',error);})},まとめ
- Vue.jsで連想配列を扱うのは、癖がわかれば結構簡単！
- 時間がなくて厳しくても、触ったことのない技術を触るのであれば、何よりもまずは公式ドキュメントを全部読もう！！！
- Vue.jsならこちらのガイドを読もう！！！