Vue.js

【Nuxt】入門 Vuexの状態管理を【図解】してみた【初心者向け】

先日、『オトナのVue.jsとNuxt.js入門ハンズオン@未来会議室』

という勉強会に参加させていただきました。

  • 『Vue.js(ビュージェイエス)』の基本(jQueryとの比較)
  • 『Vuex(ビューエックス・ビューックス)』の状態管理
  • 『Nuxt.js(ナクスト)』のハンズオン

という内容を2時間ぶっ続けで実施するというなかなかタフなイベントで、

イヌコロという犬画像のAPIを使ったNuxt.jsアプリをつくる、という内容でした。

後半は駆け足になりつつも、今まで疑問だった箇所も聞けて有意義なイベントになりました。

ブログ掲載もOKとおっしゃっていただけましたのでご紹介します。

ハイクオリティな過去の関連資料も上がっていましたので紹介しつつ、

フロントエンド入門Vue.js編@未来会議室

第2回オトナのフロントエンド入門Vue.js編@未来会議室

オトナのLaravel&Vue.js開発入門@未来会議室

オトナのVue.js〜Nuxt.js入門@未来会議室

理解を深めるため、別の角度からVuexやNuxt.jsの事を書いてみたいと思います。

アオキ
初心者向けにいろいろはしょっていますのでぜひ寛大な心でお読みください。

Nuxt.js 2.0.0 で動作確認とれています。

Sponsored link

Nuxt.jsってそもそもなんなのさ?

『Nuxt.js(ナクスト.ジェイエス)』というのは、

  • Vue.js
  • Vue-router
  • Vuex
  • Vue Server Renderer
  • Vue-meta
  • webpack
  • Vue-loader
  • babel-loader

といったソフトをまるっとまとめてインストールできるパッケージになります。

『node.js』と『vue-cli』がインストールされていれば、

コマンドプロンプトやターミナルでコマンドを打つ事で、
あっさりとインストールできちゃうというお手軽さがウリです。

『vue-cli』・・vue.jsをコマンドで使用できるようにしたツール(npmでインストールできる)

※『node.js』?『npm』?と思う場合はこちらも参考にしてみてください。

参考記事

全てのコードはこちらにアップしています。

Github Nuxtでつくったイヌコロアプリ

『git』『node.js』『vue-cli』がインストールされている状態で、

vue init nuxt-community/starter-template inukoro
cd inukoro
npm install
npm run dev

とうったあと、ブラウザで http://localhost:3000 とうって、

こんな画面が表示されればOKです。

『Nuxt.js』のフォルダ構成はこうなります。

『Nuxt.js』を試してみるなら、

  • 『Vue.js』の『単一コンポーネントファイル』という仕組み
  • 『Vuex』の状態管理の仕組み

もさらっと知っておく必要があります。

Sponsored link

Vue.jsの単一コンポーネントファイルという仕組み

『Vue.js』には大きく2通りの使い方があります。

  1. 『jQuery(ジェイクエリー』っぽく使う
  2. 単一ファイルコンポーネントとして使う

1は『jQuery』と同じように、『vue.js』のファイルを読み込ませて書いていく方法です。

参考記事

オトナのVue.js〜Nuxt.js入門@未来会議室

2.の単一ファイルコンポーネントファイル(英語でSingle File Components 略してSFC)は、

『HTML』と『CSS』と『JavaScript』を一つのファイル(拡張子は.vue)でまとめる方法です。

一つにまとめたファイルを『コンポーネント』(構成要素、成分)と呼びます。

『コンポーネント』を組み合わせてWebページを作れるようになります。

今回のイヌコロのpages/index.vue ファイルの中身がこちら。

細かいところは省きますが、

  • templateで囲まれた範囲がHTML、
  • scriptで囲まれた範囲がJavaScript(Vue.js)
  • で囲まれた範囲がCSS になります。

『Nuxt.js』の場合はインストールの段階で、

  • 『components』フォルダ
  • 『layout』フォルダ
  • 『Pages』フォルダ

が作成されているので、

この中にそれぞれ『コンポーネント』を作成していく事になります。

Sponsored link

Vuexの状態管理の仕組み

『Vue.js』で『コンポーネント』同士のデータをやりとりすると、

『コンポーネント』の数が少ないうちはいいのですが、

『コンポーネント』が増えるほど、データの管理がややこしくなっていきました。

データのやりとりをわかりやすくするために、『Vuex(ビューエックス、ビューックス)』がつくられました。

データの流れとして、
『Vuex』の公式ページにはこの図が掲載されています。

が、

アオキ
イマイチわかりづらい・・

ということで、思いきって図をつくってみました。

『Store』という倉庫があって、

その中に『Mutations(ミューテーション)』『State(ステート)』を設定します。

データの中身が『State(ステート・状態)』で、

データの中身を変えるには必ず『Mutations』を通るというのがポイントです。

『Mutations(ミューテーション)』という単語を調べると、『突然変異』という意味で、

似た言葉としてミュータント の方が馴染みがあるかもしれないですね。

アオキ
ミュータント タートルズとかね

『Nuxt.js』の場合は自動的に『store』フォルダが作成されるので、

『store』フォルダの中に『index.js』というファイルをつくって、こんなコードを書きます。

この図だと必ずactionも通るというように見えるのですが、

実際はactionは使っても使わなくてもOKのようです。

actionは非同期通信(Ajax)をする時に使われるのですが、
 
今回のサンプルでは、Nuxt.js の『fetch』という機能で代用しているようです。

実際にデータを変えたい時は、『commit(コミット)』というコマンドで『Mutations』にアクセスして、

データを受け取るときは、『store.state』か『mapState』関数を使うといった形です。

実際のデータの受け渡しは、pages/index.vue の中をみると、

というコードになっています。

今回のイヌコロアプリでは、apiフォルダをつくって、その中で『axios』というAjaxの機能を使って非同期通信を実施しています。

『Nuxt』の場合は『fetch』というコマンドで都度読み込んでくれるので、
『action』はいらないのかな?と思いつつ、もっとしっかり勉強したいと思います。

アオキ
とりあえず、データの流れが一方通行、ということだけまずは覚えればいいのかなと思います

Sponsored link

さいごに

これまで何度か『Vuex』や『Nuxt.js』をやってみてはよくわからん、という状態が続いていたのですが、

何度か挑戦し、今回の勉強会もへて、ちょっとずつ把握できてきてる感じがします。

アオキ
何事も諦めずに続けたら道は開ける、ですね。

これからますます『Vue.js』『Nuxt.js』はメジャーになってくると思うので、しっかり把握するようにしたいですね。

created by Rinker
¥3,694 (2019/04/20 10:59:07時点 Amazon調べ-詳細)

『Vue/Vuex/Nuxt』ではこんな記事も読まれています。

1. Vue.jsとFirebaseで作るミニWebサービス を試してみた〜Googleログインまで〜

2. 【Nuxt】入門 Vuexの状態管理を【図解】してみた【初心者向け】

3. 【Laravel5.5】Webアプリケーションを作るためのゆるめの環境構築編【Node.js】【npm】【Vue.js】【初心者向け】

4. LaravelとVue.jsのサンプル動画を見ながらさらりと解説してみる

5. Vue.js+Vue-router+BulmaでさくっとSPAをつくってみた【初心者向け】

6. 【Vue.js】かっこいいフォトギャラリーを発見したのでソースを読んでみた。カテゴリーで選べてなめらかに動くんです

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


Sponsored link

関連記事

  1. Vue.js

    Vue.js+Vue-router+BulmaでさくっとSPAをつくってみた【初心者向け】

    最近徐々に増えつつある『SPA(エスピーエー)』。『SPA』とは、…

  2. Laravel

    【Vue.js/Laravel】Webアプリ実践記 37歳おっさんが独学でVue.js+Larave…

    本業Webマーケッターと育児をしながら独学でwebアプリをつくってみる…

  3. Laravel

    LaravelとVue.jsのサンプル動画を見ながらさらりと解説してみる

    ここ数年、ユーチューブで見れるプログラミング動画が増えています。し…

  4. Laravel

    【Vue.js/Laravel】Webアプリ実践記 37歳おっさんが独学でVue.js+Larave…

    webアプリ実践記 0日目~10日目webアプリ実践記 11…

  5. Vue.js

    Vue.jsとFirebaseで作るミニWebサービス を試してみた〜Googleログインまで〜

    プログラミングにどっぷり取り組むようになってからというもの、いわゆ…

Sponsored link

最近の記事

アーカイブ

Sponsored link
  1. クリエイティブコーディング

    プログラミングで数学も身につく 一石四鳥なクリエイティブコーディング
  2. Laravel

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  3. 検索システム

    新しいホテルを探すサービスをつくってみました【楽天トラベルAPI】【条件付】
  4. Laravel

    【Django】【Laravel】【RubyOnRails】を比較してみた【初心…
  5. 検索システム

    バリアフリーなホテル のページをオープンしました。
PAGE TOP