Downloaded 23 times
![URLによってコンテンツを切り替えるには②ルーティング設定を⾏っている、index.js側に新たにURLを追加します。 export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: ‘/about', // /aboutにアクセスされたとき component: About // Aboutコンポーネントを使う } ] })](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fvue-study02-180401133122%2f75%2fVue-js-Vuex-Vue-Router-Nuxt-35-2048.jpg&f=jpg&w=240)
![URLにハッシュを表⽰させないようにするには①Vue-Routerはデフォルトでhashモードを使⽤しています。ハッシュを取り除いたURLで表⽰させるには、historyモードを使⽤します。※HTML5 History APIとサーバ設定の記述が必要 export default new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] })https://router.vuejs.org/ja/essentials/history-mode.htmlhttps://router.vuejs.org/ja/api/options.html#routes](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fvue-study02-180401133122%2f75%2fVue-js-Vuex-Vue-Router-Nuxt-37-2048.jpg&f=jpg&w=240)
Uploaded byKei Yagi
12,174 views
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
第2回Vue.js勉強会で使用したスライドです。状態管理ライブラリのVuex, ルーティング設定ができるVue-Router, サーバサイドレンダリングフレームワークのNuxtを紹介。
Recommended
More Related Content
What's hot
Similar to Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
More from Kei Yagi
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
- 2.
- 3.
- 4.Vue ExampleVue公式サイトに掲載された、Vueのサンプル集。数は少ないが、HTML /CSS / JSタブで確認できます。https://vuejs.org/v2/examples/
- 5.
- 6.
- 7.
- 8.
- 9.(参考) vue-cli $ npminstall -g vue-cli1. vue-cliをインストールしていない場合は、 以下のコマンドを実⾏(nodeを事前にインストール)2. 作りたいプロジェクト名を指定すると、 プロジェクト名からVue-Routerの使⽤、Lintツールの使⽤等聞かれます。 それが終わるとプロジェクトディレクトリが作成されます。 あとは、そのディレクトリに移動して`npm run dev`を実⾏。 $ vue init webpack <プロジェクト名> $ cd <プロジェクト名> $ npm run dev
- 10.状態管理の課題点Vue.jsは、⼩規模で完結するアプリケーションや機能ならそれ単体で作れます。が、アプリケーションの規模が⼤きくなり、複数コンポーネントで作って⾏くと、以下のような点から作り⽅が⼤変になってきます。複数のコンポーネントで状態を共有するケース(1) 複数のコンポーネントが共通の状態を参照(取得)する(2) 複数のコンポーネントで共通の状態を更新する→Vue単体でやろうとすると、親に共有する状態を集約し、(1)は親のコンポーネントから⼦・孫…とpropsを数珠繋ぎ(2)はカスタムメソッドで孫→⼦→親へと数珠繋ぎ→ 複数コンポーネントが関連し・⾒通しが悪くなる→ 数珠繋ぎスパイラル + スパゲティる⼀因にも
- 11.
- 12.
- 13.
- 14.VuexVueの状態管理をサポートしてくれるプラグイン。FluxやReduxといった状態管理ライブラリに影響を受けてできました。「ストア」と呼ばれるコンテナに、以下4つがまとめられています。コンポーネントはストア経由で実⾏(直接ストアの状態を更新するのはNG、ミューテーションのみが更新可)。-ステート(state) … アプリケーションの状態を設定-ゲッター(getter)… 状態(ステート)を参照-ミューテーション(mutation) … 状態(ステート)を更新-アクション(action) … ミューテーションのラッパー、呼び出しVuexストアstate(状態)getter(参照)mutation(更新)action(呼び出し)
- 15.
- 16.(雑記) Vuexdata(){return {… }},computed: {xxx(){return …;}},methods: {vvv(){…}}Vueでの管理が複雑化する背景に、「コンポーネント内で⾒た⽬と状態が密になっている構成」が背景にあると思われます。皆が参照・更新できるよう、コンポーネント内のデータ・算出プロパティ・メソッドを⾒た⽬から分離したものがVuexのイメージ。それはコンポーネント群から解き放たれた「天空の城 ラピ●タ」、形のない「⾏政」、「国会」？？ →むしろ例えなくても良いかもデータ算出プロパティメソッド
- 17.Vuexのインストール $ npm installvuex --save1. Vuexのサイトから直接ダウンロード or 以下コマンドでインストール。2. npmでインストールした場合は、 JS側で以下のように読み込み、`Vue.use()`で使うことを明⽰化します。 ※ scriptタグを使っている場合は以下の記述は不要 import Vue from ' vue' import Vuex from 'vuex' Vue.use(Vuex)
- 18.
- 19.ストアファイルの作成・組み込み②/src/store/index.jsを以下のように記述します。new Vuex.Store({})という記述、⾒覚えがありませんか？Vueインスタンスを作った時の記述と似ているかなと思います。同じくこの中にオプションを書き⾜していきます。 import Vuefrom ‘vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ }) export default storeindex.js
- 20.ストアファイルの作成・組み込み③/src/main.jsに⾚字のように追記をします。これにより、VuexストアがVueインスタンスとその中のコンポーネントにも適⽤されます。 import Vue from‘vue' import App from './App' import router from './router' import store from './store/' Vue.config.productionTip = false new Vue({ el: '#app', store, router, components: { App }, template: '<App/>' })main.js
- 21.ステート(state)前述の通りアプリケーションの状態を記述。前回、data: function(){ …}で状態を記述したが、それのように記述。違いとしては、stateでは関数でなくオブジェクト形式。コンポーネントから`this.$store.state.count`でステートを直接参照することもできます。 const store = new Vuex.Store({ state: { count: 0, text: 'Hello, Vuex' } })https://vuex.vuejs.org/ja/getting-started.htmlindex.js
- 22.ゲッター(getter)Vuexストアのステートを参照。前述のように `this.$store.state.count`のように参照もできますが、ゲッターを介して参照することでVuexの役割を明⽰化することに。コンポーネントからは`this.$store.getters.count`で参照できます。 const store= new Vuex.Store({ state: { … }, getters: { count () { return store.state.count }, text () { return store.state.text } } })index.jshttps://vuex.vuejs.org/ja/getters.html
- 23.ミューテーション(mutation)Vuexストアのステートを更新。第⼀引数(state)がステートになっており、第⼆引数に更新したい値。コンポーネントからは`this.$store.commit(ʻsetCountʼ, 10 )`で実⾏されます。 conststore = new Vuex.Store({ …, mutations: { setCount (state, n) { state.count = n }, setText (state, payload) { // 複数の値を渡す場合は、第⼆引数(payload)をオブジェクト形式 state.text = payload.text } } })https://vuex.vuejs.org/ja/mutations.htmlindex.js
- 24.アクション(action)Vuexストアのミューテーションをラッパーする。ミューテーションを使えば良いのではと思われますが、ミューテーションでは⾮同期を含めた処理を書かないようになっています。アクションでは⾮同期を含めた処理を書けるので、その中でミューテーションを実⾏します(引数の指定⽅法はミューテーションと同じ)。`this.$store.dispatch(ʻsetTextʼ, payload )`で実⾏されます。 conststore = new Vuex.Store({ …, actions: { setText (context, payload) { setTimeout(() => { context.commit('setText', payload) }, 1000) } } })index.jshttps://vuex.vuejs.org/ja/actions.html
- 25.
- 26.
- 27.
- 28.
- 29.(雑記) Single PageApplication (SPA)単⼀のWebページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供するWebアプリケーションまたはWebサイトである。必要なコード（HTML、JavaScript、CSS）は最初にまとめて読み込むか、ユーザの操作などに応じて動的にサーバと通信し、必要なものだけ読み込みを⾏う(by Wikipedia)Ajaxによって、フロントエンドで部分更新ができるようになり、それによりページ遷移を⾏うことなくアプリケーションのようなUX体験ができるようになりました。→ 対応したコンテンツを表⽰させるためにURLを設定する必要があり、そこにVue-Routerが使われます。https://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%B3%E3%82%B0%E3%83%AB%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3
- 30.Vue-Routerのインストール $ npm installvue-router1. vue-cliを使っている場合、プロジェクト作成時に選択可能。 最初から準備する場合は、Vue-Routerのサイトから 直接ダウンロード or 以下コマンドでインストール。2. npmでインストールした場合は、 JS側で以下のように読み込み、`Vue.use()`で使うことを明⽰化します。 ※ scriptタグを使っている場合は以下の記述は不要 import Vue from ' vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
- 31.
- 32.
- 33.
- 34.URLによってコンテンツを切り替えるには①/src/components/ディレクトリにAbout.vueファイルを作成し、以下のように記述をします。 <template> <div> <p>Hello,Vue-Router</p> </div> </template> <script> export default { } </script> <style> </style>About.vue
- 35.URLによってコンテンツを切り替えるには②ルーティング設定を⾏っている、index.js側に新たにURLを追加します。 export default newRouter({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: ‘/about', // /aboutにアクセスされたとき component: About // Aboutコンポーネントを使う } ] })
- 36.
- 37.URLにハッシュを表⽰させないようにするには①Vue-Routerはデフォルトでhashモードを使⽤しています。ハッシュを取り除いたURLで表⽰させるには、historyモードを使⽤します。※HTML5 History APIとサーバ設定の記述が必要 exportdefault new Router({ mode: 'history', routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] })https://router.vuejs.org/ja/essentials/history-mode.htmlhttps://router.vuejs.org/ja/api/options.html#routes
- 38.
- 39.アンカーでURL切り替えを⾏うには<router-link to=“(遷移先)”>タグを使うとアンカータグ(<a>)に変換。また、何かの処理をJSで⾏なったのち遷移させたい場合、`this.$router.push(ʻ(遷移先)ʼ)`をJS内に記述します。 <template> <div> <p>Hello, Vue-Router</p> <router-link to="/">Top</router-link> </div> </template> <script> export default { } </script> <style> </style>About.vuehttps://router.vuejs.org/ja/essentials/navigation.html
- 40.ページ切り替えにアニメーションさせたいここでも<transition>タグを使って、ページ切り替え時にアニメーションを追加させることができます。<router-view/>タグを<transition>タグで囲み、CSS側でトランジション・アニメーションを書きます。 <template> <div id="app"> <img src="./assets/logo.png"> <transition name="fade" mode="out-in"> <router-view/> </transition> </div> </template>App.vuehttps://jp.vuejs.org/v2/guide/transitions.htmlhttps://router.vuejs.org/ja/advanced/transitions.html
- 41.
- 42.
- 43.SPAのメリット・デメリットSPAに先のようなメリットの⼀⽅、デメリットもあります。メリット：- 同⼀ページ内で遷移 →Cookie, localStorageによるページ間の受け渡し処理が不要- 部分読み込みによるUX向上(アプリケーションのような体験)デメリット：- 初期読み込みのボリューム (単⼀ページに⽐べ、読み込むアセットサイズが⼤きくなる)- JSで動的に切り替わるため、SEOのフォローが難 (googlebotでjsレンダリングも対応していると⾔われているが完全にOKとは⾔いがたい)→そうした課題に対し、近年サーバサイドレンダリングというワードが
- 44.Server Side Rendering(SSR)HTMLを構築する仕組みがブラウザとサーバで共通のものが⼊ってきていて、それを共通のロジックを使って動かす(Node.js⽇本ユーザーグループ 古川さん)http://www.publickey1.jp/blog/17/server_side_renderingserver_side_rendering_ng-japan_2017.html
- 45.(雑記) Server SideRenderingSPAだと、初期表⽰に⽐較的時間がかかる→ 初期描画前が⽩い画⾯ or ローディング画⾯を⼊れる必要がある→ 初期描画の処理をサーバ側で⾏ってしまおう→ 初期描画の処理をクライアントサイド(JS)で書いてるから、 サーバにもJSのロジックを使おう(Node JS)Universal Javascript !(クライアント・サーバで共通のJSロジックを使う)初期表⽰以降は、SPAで動的に切り替えればいいよね！これがいわゆる、
- 46.SSRのメリット・デメリットSPAの課題をクリアできる⼀⽅でこんなデメリットも？メリット：- 初期描画のパフォーマンス向上- SEO対策(サーバ側で描画されるため、コンテンツがインデックス)デメリット：-Node.jsによるサーバ環境構築- 実例がそこまで多くないため、ハマったときのリカバーhttps://qiita.com/shibukawa/items/184d3101946ec4fa98c1https://lealog.hateblo.jp/entry/2017/07/10/073926
- 47.
- 48.
- 49.Nuxtのインストール $ vue initnuxt-community/starter-template <プロジェクト名>1. Nuxt公式サイトからzipファイルをダウンロードするか、 vue-cliでテンプレートをダウンロード。2. プロジェクト名のディレクトリが作られるので、 ディレクトリに移動して`npm install`(yarnを使ってる⼈は`yarn`) $ cd <プロジェクト名> $ npm install (or yarn)3. 依存パッケージのインストールが完了したら、`npm run dev` $ nom run dev
- 50.Nuxtで開発環境をカスタマイズ① $ npm install—save-dev pug pug-loaderNuxtにはvue-loaderがあり、sassやpugといったプリプロセッサを導⼊できる環境が整っています。使うときには、パッケージをインストールしlang属性を追加します。例えば、htmlのテンプレートエンジンであるpugを使うには、https://ja.nuxtjs.org/faq/pre-processors.vueファイルの<template>タグにlang=“pug”を追加 <template lang=“pug”> p Hello,span Vue.js // <p>Hello, <span>Vue.js</span></p> </template>
- 51.Nuxtで開発環境をカスタマイズ②CSSのプリプロセッサを扱うには、pugと同様に、使うプリプロセッサとloaderをインストール。https://ja.nuxtjs.org/faq/pre-processors.vueファイルの<style>タグにlang=“sass”を追加 <style lang=“sass”> p font-size:16px; span font-size: 24px; </style> $ npm install —save-dev node-sass sass-loader
- 52.(雑記) Nuxtを使った所感- サーバサイドレンダリングを扱わなくても、開発環境として使える (Vue-Router、Vuexがすでに組み込まれている) -pagesのディレクトリ構造によってルーティングが⾃動設定 - webpack.config.jsに書かずプリプロセッサが使える - 静的ファイルとしても出⼒可能 - CakePHPとかLaravelのようなサーバサイドフレームワーク 使ったことある⼈なら馴染みのあるディレクトリ構造
- 53.