フロントエンド

【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/08/21 02:44:25時点 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


関連記事

  1. フロントエンド

    ホームページのつくり方を3ステップでわかりやすくまとめてみた【初心者向け】

    今回の記事ではこんな悩みにお答えします。ホームページを作れ…

  2. フロントエンド

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

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

  3. バックエンド

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

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

  4. フロントエンド

    TCDテンプレート『MAG』の見出し(h1,h2)の設定は変更しよう〜SEO重視するなら変更必須〜

    TCDといえばホームページ業者やブロガーならほとんど知っているんじゃな…

  5. バックエンド

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

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

  6. バックエンド

    【Laravel】Webアプリ環境構築の仕方【Vue.js】【初心者向け】

    ロリポップやXサーバーなど、格安のレンタルサーバーでも運用できるプ…

Sponsored link

最近の記事

  1. 数学

    【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】
  2. CG関連

    【WebGL】入門 わかりやすく【図解】してみた
  3. 数学

    【三角関数】の使い方〜わかりやすさ重視でまとめてみた【動画あり】
  4. CG関連

    【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめの…
  5. IoT関連

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
PAGE TOP
//記事ページのみに構造化データを出力 //サムネイルを取得 //ここから構造化データの記述