Help us understand the problem. What is going on with this article?

Vue.jsで連想配列を使おう!

🍪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 # 👈渡したい値 その1
  #js-el-data-baa
    = @baa # 👈渡したい値 その2

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の仕様で、連想配列に要素を追加した時に検知できません。
なので、変更検出が可能なメソッドを利用する必要があります。(公式ドキュメントを読めば気づけるけど、読んでなかった😈)

Vue.js#オブジェクトの変更検出の注意

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ならこちらのガイドを読もう!!!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away