Vue.jsのアプリ制作時に参考になった記事のまとめ

  1. ブログ
  2. Web・プログラミング
本日限定
Amazonタイムセール開催中
セール商品を見に行く
present
本日限定
Amazonタイムセール開催中
セール商品を見に行く
present

Vue.jsでアプリを作る際に参考となった記事をまとめたいと思います。ゼロからVue.jsを触るにあたり、つまづいたポイントなどを順番にご紹介します。

具体的には、Vue.jsの大まかな概要を理解できる記事やフレームワークの紹介。配列とオブジェクトの扱いが難しかったので、その値の操作方法を中心に解説します。私自身は過去にAngularでアプリを作った事がありましたが、もし同じようにVue.jsをこれから触ろうと考えてる方の参考になりましたら幸いです。

目次

基礎から学ぶ Vue．js
基礎から学ぶ Vue.js
 クチコミ評価を見る(Amazon)
  Amazonで見る
  楽天市場で見る
  Yahooショッピングで見る
 その他：
カメラのキタムラで探す

Vue.jsの入門。まずは触って慣れる

Vue.jsでアプリを作る前に、大まかな使い方を雰囲気だけでも掴みたいと思いました。そこで、CodePenを使い実際にプログラミングしてみることにしました。

Vue.jsは短いコードでフォームの入力内容や処理内容を同期・処理させることができるのが特徴です。上記のサンプルで参考になったのがこちらの記事です。

Vue.js 2.x 入門 - Qiita

コンポーネントやフレームワークを大まかに把握

Vue.jsにはコンポーネントと呼ばれる一連の動作を処理する塊が有ります。例えば高機能なフォームであったり、リストや表を生成するプログラムです。

コンポーネントは自身で定義もできますが、用途に応じて既存のプログラムを利用すると素早くアプリを作成できます。コンポーネントについては以下の記事が参考になりました。

Vue.js いろいろまとめ - Qiita

またUIフレームワークと呼ばれる、見た目のデザインも設計されたプログラムも紹介されています。私の場合はVuetifyというUIフレームワークを利用させて貰うことにしました。レスポンシブであり、コンポーネントも十分揃っているのが選ぶ決め手でした。

配列の要素を上書きする方法

ここからはVue.jsを実際に触りながらアプリを作っていくことにしました。この時に、理解が難しかったのが配列の扱いです。

Vue.jsで配列の値を変更したり追加するにはspliceやpushなどを使います。変更に使えるメソッドは限られています。詳しくはVue.jsのドキュメントが参考になります。

リストレンダリング — Vue.js
変更メソッド

例えばitemsという配列があり、0番目の配列要素の値を変更したいとします。

sample.js
1
this.items[0] = "hoge"

通常のJavascriptやESでは動作するのですが、Vue.jsの場合は上手く動作しません。Vue.jsではspliceを使います。

sample.js
1
this.items.splice(0, 1, "hoge")

0番目の要素から1つをhogeに変更します。配列要素の変更や追加、削除については以下の記事が参考になりました。

Vue.jsの配列扱い - Qiita

オブジェクトの扱いについて

Vue.jsではオブジェクトの扱いも、配列の時と同じように通常とは異なります。

Vueオブジェクトのプロパティを削除する方法

例えばusersというオブジェクトのプロパティであるfooを消したい場合は次のようにVue.delete()を使います。

sample.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
new Vue({

  data: () => ({
    // usersというオブジェクトを定義
    users: {
        foo : { hoge: ... },
        bar : { hoge: ... }
    }
  }),
  
  methods: {
    deleteObject: function() {
      // オブジェクトのfooプロパティを削除する
      Vue.delete(users, 'foo')
    }
  }
})

Vueオブジェクトのプロパティを新たに追加する方法

Vue.jsで扱うオブジェクトにプロパティを追加するにはVue.set()を使います。

sample.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new Vue({

  data: () => ({
    // usersというオブジェクトを定義
    users: {
        bar : { hoge: ... }
    }
  }),
  
  methods: {
    deleteObject: function() {
      // オブジェクトのfooプロパティを追加する
      Vue.delete(users, 'foo', 'something')
    }
  }
})

Vueオブジェクトの複製と大幅な書き換え

一部のプロパティを変更したり追加するには前述の方法でも良いのですが、複数のプロパティを大きく変更したい場合はVueオブジェクトを作り直す方法もあります。

sample.js
1
2
3
4
5
6
// Vueオブジェクトから通常のオブジェクトを作る
// この値はデータバインディングされない
let copyMyObject = JSON.parse( JSON.stringify( this.MyObject ) )

// 通常のオブジェクトからVueオブジェクトを作り、上書きする
this.MyObject = Vue.util.extend(copyMyObject)

JSON.stringify()すると単純な文字列に変換することができます。さらにJSON.parse()でオブジェクトを作り直すと、一般的なオブジェクトを作ることができます。

またVue.util.extend()で通常のオブジェクトからVueオブジェクトを作ることができます。ここまでの内容は下記が参考になりました。

Vue.jsでObjectの要素を消す方法について(Vue.delete)
Vue.js 2: Delete property from data object - StackOverFlow
Vue.jsでObjectの要素を追加する方法について(Vue.set)
How to add a new property to vue (object) data? #3340 - GitHub
Vue.jsのObjectの複製(コピー)と書き換え
Duplicating an data object #971 - GitHub

thisとfunction()とアロー関数の混在

Vue.jsで分かりにくかったのが、thisとfunction(){ ... }が使われていることでした。Vue.js 2.xではmethods:{}の中でfunction(){}を使うルールがあり、Vueの中で定義した変数やメソッドにアクセスできるようです。

ですので、基本的にthisとfunction(){}を使うことになります。

アロー関数は、thisが期待するVueインスタンスではなく…とは？ - Qiita

ただ、例外としてアロー関数を使う場面があります。

simple.js
1
2
3
4
5
6
7
8
9
10
methods: {
    hoge: function() {
      setTimeout( () => {
        // do something
        setTimeout( () => {
          this.$refs.network.fit()
        } , 250)
      } , 3000)
    }
  }

メソッドの中でsetTimeoutを使いたい場合には、アロー関数式を使うことでthisにアクセスすることができるようです。

Vue equivalent of setTimeOut? - StackOverFlow
29番目の回答が参考になりました。

スポンサーリンク