SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 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ストアに任せることができます。

次のページ
Vuexストアを利用したWebページの実装方法

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11994 2020/03/02 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング