CodeZine(コードジン)

特集ページ一覧

Webページの状態を集中管理できる「Nuxt.js」のVuexストアを使いこなそう

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用 第5回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、Webページのユーザーインタフェース(UI)フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回はWebページの一部分を部品として再利用できるコンポーネント機能を説明しました。今回は、Webページの入力内容や表示内容といった状態を集中管理できるVuexストアについて説明していきます。

目次

はじめに

 Nuxt.jsは、Webページのユーザーインタフェース(UI)フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。

 Webページを複数のコンポーネントに分割できるJavaScriptフレームワークでは、あるコンポーネントの状態(入力/表示内容)を他のコンポーネントで利用する場合、不整合なく状態を共有する仕組みが必要となります。

 そういった仕組みとして、Webページ全体の状態を単一の場所に保持して、各コンポーネントから参照/更新する方法が提案されました。こうした方法は、Reactで利用されるFluxReduxが有名ですが、Vue.jsではVuexと呼ばれる仕組みが利用できます。Nuxt.jsのプロジェクトでは、Vuexで状態を保持する「Vuexストア」を、標準で(追加インストールなしで)利用できます。

 本記事では、Nuxt.jsのWebページで、Vuexストアを利用して状態を管理する方法を、サンプルとともに説明していきます。

対象読者

  • Vuexの考え方を理解したい方
  • Nuxt.jsでコンポーネント間のデータ連携をシンプルに行いたい方
  • 複雑なデータ構造を持つWebページを作りたい方

必要な環境

 本記事のサンプルコードは、以下の環境で動作を確認しています。

  • Windows 10 64bit版
    • Node.js v12.13.1 64bit版
    • Nuxt.js 2.10.2
    • Vue.js 2.6.10
    • Microsoft Edge 44.18362.449.0

 サンプルコードは、Nuxt.jsのCLIツール(create-nuxt-app)で生成したプロジェクトを元に実装しています。CLIツールの利用法やプロジェクト構成などの詳細は、連載第1回の記事を参照してください。

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「npm run dev」コマンドを実行して、Webブラウザーで「http://localhost:3000/」を開きます。

Vuexの構成要素と処理の流れ

 最初に、Vuexを構成する要素と処理の流れを、図1で説明します。Vuexストアは、図の青色点線部分の機能を提供します。

図1:Vuexの構成要素と処理の流れ
図1:Vuexの構成要素と処理の流れ

 コンポーネントがWebページの状態を更新するには、Vuexストアの「アクション」(1)を実行します(アクションの実行を「Dispatch」と呼びます)。アクションでは、必要に応じてWeb APIなどを実行して、更新するデータを取得します。

 アクションで取得したデータを状態に反映するには、「ミューテーション」(2)を実行します(ミューテーションの実行を「Commit」と呼びます)。Vuexでは、非同期処理と状態の更新を分離して扱うため、Web API実行などの非同期処理はアクションで行い、ミューテーションは必ず同期的に行います。

 (3)の「ステート」は、Webページ全体の状態を保持します。ミューテーションはステートの変更(Mutate)を行い、コンポーネントは変更されたステートに基づいて画面を表示(Render)します。

 この流れに基づいてVuexストアに状態を格納することで、開発者は、Webページの状態管理をVuexストアに任せることができます。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

バックナンバー

連載:JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5