ツール

最終更新日: 2023.12.24 (公開: 2023.11.09)

Vuexを使うと何ができる?おすすめ書籍とプログラミングスクール

Vuexを使うと何ができる?おすすめ書籍とプログラミングスクール

VuexはVue.jsのプラグインです。データを保存・管理するためのツールで、すべてのコンポーネントからアクセスできます。本記事では、Vuexの特徴やインストール方法、おすすめの書籍を紹介します。

VuexはVue.jsのプラグインで、データを保存・管理するためのツールとして使われており、すべてのコンポーネントからアクセスできます。本記事では、Vuexの特徴やインストール方法を解説します。

また、学習のレベルにあわせたおすすめの書籍もあわせて紹介するので、WebアプリケーションやWebサイト開発に興味がある方、これからエンジニアを目指す方はぜひ参考にしてください。

Vuexとは?

Vuexとは?

Vuexは、Vue.jsで使えるプラグインです。データの保存が主な役割となっており、すべてのコンポーネントからアクセスできます。

保存したデータは状態管理(アプリケーションのある時点での状態を制御・追跡・変更すること)できるため、ログイン状態や検索条件の維持などを管理したい場合に活用されることが多いです。

Vuexがない環境の場合、コンポーネント間でデータの受け渡しをするにはpropsや$emitによるイベントを利用しなければなりません。

しかし、データの受け渡しが多くなったり階層が増えたりすると、propsや$emitでのデータ管理は困難となります。

Vuexを活用すれば、Vuexにデータを保存しどのコンポーネントからでもVuex内のデータへアクセスできるため、上記の問題を解決できるのです。

Vue.jsとは

Vue.jsは、「JavaScript」のフレームワークです。UIの構築を得意としており、WebアプリケーションのUIなどを簡単に構築できます。

シンプルな設計ながら拡張性が高く、他のライブラリと組み合わせることで、より効率的な開発が可能です。

「JavaScript」フレームワークの中でもとくに採用率が高く、実際に多くのサービスでVue.jsが使われているため、習得するメリットが大きいスキルといえるでしょう。

Vue.jsはオープンソースで無償公開されており、導入コストがかからない点も魅力です。

Vuexをインストールする方法

Vuexをインストールする方法

Vuexをインストールするには、コマンドプロンプト(MacOSはターミナル)にコマンドを入力する必要があります。npmを利用する場合は、コマンドプロンプトに「npm install -–save vuex」と入力しましょう。

yarnを利用する場合は「yarn add vuex」と入力してください。scriptタグで直接読み込む方法もありますが、上記のようにnpmまたはyarnを利用したインストールが一般的です。

Vuexのsデータの扱い方

Vuexのsデータの扱い方

Vuexはデータの状態をグローバルに管理することが可能で、データ状態はVuexの「store」に保持しています。

storeを構成している要素は以下の通りです。

  • state
  • mutations
  • actions
  • getters

それぞれ詳しく解説します。

state

stateはデータの入れ物で、APIからのレスポンスはまずstateに入ることになります。データの状態を保持しており、stateが変更されることで算出プロパティやテンプレートに反映されます。

stateで扱うのは、基本的にグローバルに管理したいデータです。すべてのデータをstateで保持するのではなく、グローバルに管理する必要のないローカルデータはdataオプションで管理するとよいでしょう。

stateの特定のプロパティを参照する際は「store.state.state名」と記述してください。

mutations

stateの値を更新する際に使われるのがmutationsで、mutationsをコミットすることによりstateを更新できます。stateの状態変更を追跡しやすくするといった理由から、原則としてstateの更新はmutationsでのみ可能です。

処理は同期的にしかできませんが、ひとつのmutationが複数状態の変更を一度におこなわないことで、よりシンプルな状態を保てます。

mutationsをコミットする際は、「store.comit(‘mutation名’)」と記述しましょう。

追加の引数を渡す場合は、第二引数として「payload」を使い、「store.comit(‘mutation名’, payload)」と記述します。

actions

actionsは、mutationを呼び出す際に使われます。mutationがstateの更新をおこなうのに対し、actionsは非同期処理や外部APIとの通信などの処理が主な役割です。

actionsを使う際は引数として「context」が使われます。このcontextオブジェクトを通じて、現在のVuexストアの各種メソッドやプロパティにアクセスすることが可能です。たとえばmutationsをコミットする場合は「context.commit(“mutation名”)」、他のactionを実行する際は「context.dispatch(“action名”)」と記述します。

getters

gettersは、Stateのデータを加工してコンポーネントに提供したいときに利用されます。

似た処理は「computed」でも可能ですが、computedはコンポーネント単位で実装するのに対し、gettersはstate単位での実装なため、適切に使い分けることで処理を軽くできます。

store.gettersで参照する際は、「store.getters.getters名」と記述してください。

Vuexの基本的な使い方

Vuexの基本的な使い方

次に、Vuexの基本的な使い方を見ていきましょう。Vuexのstoreを使ってデータの状態を管理する手順は以下の通りです。

  • storeを作成
  • computedプロパティでアクセス
  • オブジェクトデータの表示
  • データの更新

それぞれ詳しく解説します。

storeを作成

Vuexを実際に使用するにあたって、まずはデータを保持するためのstoreを作成しましょう。

storeを作成するサンプルコードは、以下の通りです。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    sample: 'initial data' // これはサンプルの初期データです
  },
  mutations: {
    // ここにmutationsを追加します
  },
  actions: {
    // ここにactionsを追加します
  },
  getters: {
    // ここにgettersを追加します
  }
})

このように記述することで、「sample」というデータにすべてのコンポーネントからアクセスできます。

computedプロパティでアクセス

次に、computedプロパティを用いてsampleにアクセスしてみましょう。

実際のコード例は、以下の通りです。

<template>
  <div>{{ sample }}</div>
</template>

<script>
export default {
  name: 'Sample',
  computed: {
    sample() {
      return this.$store.state.sample
    }
  }
}
</script>

このように記述することで、「this.$store.state.sample」によってどのコンポーネントからでもsampleにアクセスできます。

また、computedプロパティを利用することでsampleの変更を検知し、それに反応してUIを自動的に更新することが可能です。

オブジェクトデータの表示

次に、Vuexを利用してオブジェクトデータを表示してみましょう。

まずは表示したいオブジェクトをstate内に作成します。

state: {
    animals: [‘いぬ’, ‘ねこ’, ‘さる’]
    }

次に、「v-for」を用いてanimalsを表示します。

<template>
  <ul>
    <li v-for="(animal, index) in animals" :key="index">
      {{ animal }}
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    animals() {
      return this.$store.state.animals
    }
  }
}
</script>

データの更新

最後に、state内のデータを更新してみましょう。今回はボタンを押すと値が1ずつ増えていくようにします。

データを更新するために、mutationsを定義しましょう。サンプルコードは、以下の通りです。

export default new Vuex.Store({
  state: {
    number:  0
  },
  mutations: {
    increment: function (state) {
      state.number++;
    }
  }
})

次に、ボタンを表示させ、クリックイベントを設定します。

<template>
    <div id=”count”>
      <p><button v-on:click=”increment”>CountUP</button></p>
        <h1>Number:{{ number }}</h1>
    </div>
</template>

<script>
    export default {
        name: ‘count’,
        methods: {
            increment: function () {
                this.$store.commit(‘increment’)
            }
        }
        computed: {
            number: function () {
                return this.$store.state.number
            }
        }
    }
</script>  

このように記述することで、ブラウザ上にCountUPボタンとnumberが表示され、ボタンを押すと値がひとつずつ増えます。

Vue.jsとVuex学習におすすめの書籍6選

Vue.jsとVuex学習におすすめの書籍6選

VuexはVue.jsのライブラリなので、Vue.jsの使い方とともに学習するのがおすすめです。

ここからは、プログラミング学習の未経験者から、開発現場でも使える各レベルにあわせた以下の書籍を紹介します。

  • 【初級】動かして学ぶ!Vue.js開発入門
  • 【初級】基礎から学ぶ Vue.js
  • 【中級】Vue.jsとFirebaseで作るミニWebサービス
  • 【中級】速習Vue.js 速習シリーズ
  • 【上級】現場で使えるVue.js tips集
  • 【上級】後悔しないためのVueコンポーネント設計

【初級】動かして学ぶ!Vue.js開発入門

【初級】動かして学ぶ!Vue.js開発入門

動かして学ぶ!Vue.js開発入門

「動かして学ぶ!Vue.js開発入門」は、イラスト付きで見やすく初心者でも理解しやすい書籍です。

Vue.jsとはどのようなフレームワークなのかがわかりやすく解説されており、各章の最後にはまとめがあるため、知識が浅い状態でも問題なく読み進められるでしょう。基本的なサンプルコードも多数記載されているため、「JavaScript」およびVue.jsを学習し始めたばかりの方におすすめです。

【初級】基礎から学ぶ Vue.js

【初級】基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

「基礎から学ぶ Vue.js」は、Vue.jsを機能ごとに解説している入門書です。

Vue.jsの各機能について、メリット・デメリットを踏まえながらわかりやすく解説されているため、プログラミング学習の初心者でもしっかりと学習できるでしょう。

チャプターやセクションは独立した解説となっているため、知りたい機能だけを深く知りたい場合にも適しています。

「JavaScript」についての解説はないため、「JavaScript」に不慣れな場合はなんらかの方法で学習しておくとよいでしょう。

【中級】Vue.jsとFirebaseで作るミニWebサービス

【中級】Vue.jsとFirebaseで作るミニWebサービス

Vue.jsとFirebaseで作るミニWebサービス

「Vue.jsとFirebaseで作るミニWebサービス」は、簡単なWebサイトを作ったことのある中級者を対象に、簡単なWebサービスが作れるようになることを目的とした書籍です。

それゆえに、Vue.js未経験者には適していません。

Webサービスの作成を踏まえたうえで、新たな学びを得る最初の手がかりとなる要素も掲載されているため、Vue.jsのスキルをより高めたい方におすすめとなっています。

【中級】速習Vue.js 速習シリーズ

【中級】速習Vue.js 速習シリーズ

速習Vue.js 速習シリーズ

「速習Vue.js 速習シリーズ」は、Vue.jsを短時間で効率よく学習したい方へ向けた書籍です。

手軽に読めるシリーズですが、Vue.jsを学ぶための書籍であるため、「JavaScript」について一定以上理解している前提の書籍です。

Vue.jsの使い方を10のパートに分けて解説しているため、Vue.jsの基本的な使い方は一通り勉強できるでしょう。

【上級】現場で使えるVue.js tips集

【上級】現場で使えるVue.js tips集

現場で使えるVue.js tips集

「現場で使えるVue.js tips集」は、タイトルにもある通りVue.jsを使いこなすためのtips集です。

さまざまな開発に携わってきた筆者の経験から執筆されたtips集のため、Vue.jsの基本を抑えている方が、さらに上の応用力を身につけたい場合に適しています。

実際に現場で使えるさまざまなサンプルコードも多数収録されているため、仕事でVue.jsをさらに活用したい方におすすめです。

【上級】後悔しないためのVueコンポーネント設計

後悔しないためのVueコンポーネント設計

後悔しないためのVueコンポーネント設計

「後悔しないためのVueコンポーネント設計」は、コンポーネントの設計や分類に悩んでいる方におすすめの書籍です。

「どのようなテストを書けばいいのか知りたい」「コンポーネントのやってはいけない典型例を知りたい」といった内容について、丁寧に解説されています。

実際にコンポーネントの設計をしたことのある方向けの内容です。

Vuexは複雑なデータ状態の管理に便利

Vuexは複雑なデータ状態の管理に便利

本記事では、Vuexの特徴やインストール方法を解説し、学習のレベルにあわせたおすすめの書籍を紹介しました。Vue.jsはさまざまなサービスで採用されているため、VuexとVue.jsをあわせて学習することで、WebサイトやWebアプリケーションの開発に役立てられるでしょう。

これからWebエンジニアを目指したい方は、本記事を参考にVuexやVue.jsについて学んでみてください。

前の記事

クロージャとは何のこと?意味やコード例、使い方などを解説

2023.11.07

クロージャとは何のこと?意味やコード例、使い方などを解説

#プログラミング

次の記事

【Python入門】Djangoとは何?できることや基本的な使い方を解説

2024.01.26

【Python入門】Djangoとは何?できることや基本的な使い方を解説

#Python

アクセスランキング 人気のある記事をピックアップ!

    コードカキタイがオススメする記事!

    1. 子供におすすめのプログラミングスクール10選!学習メリットや教室選びのコツも紹介

      2024.06.17

      子供におすすめのプログラミングスクール10選!学習メリットや教室選びのコツも紹介

      #プログラミングスクール

    2. 【完全版】大学生におすすめのプログラミングスクール13選!選ぶコツも詳しく解説

      2022.01.06

      【完全版】大学生におすすめのプログラミングスクール13選!選ぶコツも詳しく解説

      #プログラミングスクール

    3. 【未経験でも転職可】30代におすすめプログラミングスクール8選!

      2024.01.26

      【未経験でも転職可】30代におすすめプログラミングスクール8選!

      #プログラミングスクール

    4. 初心者必見!独学のJava学習方法とおすすめ本、アプリを詳しく解説

      2024.01.26

      初心者必見!独学のJava学習方法とおすすめ本、アプリを詳しく解説

      #JAVA

    5. 忙しい社会人におすすめプログラミングスクール15選!失敗しない選び方も詳しく解説

      2024.01.26

      忙しい社会人におすすめプログラミングスクール15選!失敗しない選び方も詳しく解説

      #プログラミングスクール

    1. 【無料あり】大阪のおすすめプログラミングスクール14選!スクール選びのコツも紹介

      2022.01.06

      【無料あり】大阪のおすすめプログラミングスクール14選!スクール選びのコツも紹介

      #プログラミングスクール

    2. 【目的別】東京のおすすめプログラミングスクール20選!スクール選びのコツも徹底解説

      2024.01.26

      【目的別】東京のおすすめプログラミングスクール20選!スクール選びのコツも徹底解説

      #プログラミングスクール

    3. 【無料あり】福岡のおすすめプログラミングスクール13選!選び方も詳しく解説

      2024.01.26

      【無料あり】福岡のおすすめプログラミングスクール13選!選び方も詳しく解説

      #プログラミングスクール

    4. 【徹底比較】名古屋のおすすめプログラミングスクール13選!選び方も詳しく解説

      2024.01.26

      【徹底比較】名古屋のおすすめプログラミングスクール13選!選び方も詳しく解説

      #プログラミングスクール

    5. 【徹底比較】おすすめのプログラミングスクール18選!失敗しない選び方も徹底解説

      2024.01.26

      【徹底比較】おすすめのプログラミングスクール18選!失敗しない選び方も徹底解説

      #プログラミングスクール