Successfully reported this slideshow.
Your SlideShare is downloading. ×

Vue.js 2.0を試してみた

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Vue.js 2.0を試してみた

  1. 1. Vue.js 2.0 を試してみた Toshiro Shimizu Vue.js : Revolutionary Front-end #1 24.08.2016
  2. 2. About me 清水 俊郎 gh: @toshilow 元フリーランスで3月からABEJAで フロントエンドエンジニアをやってます もともとはサーバサイトJavaエンジニア 3年ほど前からフロントエンドで主にAngular 1xを使ってました Vue.jsを使い始めてから半年 高崎から通ってます
  3. 3. RC3も出たし そろそろ2.0への移行も考えていきたい
  4. 4. 今日話すこと 1. Vue.jsのここが好き 2. 今日使うサンプルの説明 3. マイグレーションポイント 4. まとめ
  5. 5. Vue.jsのここが好き リアクティブ Reactive 軽量 Lightweight シンプル Simple 簡単 Easy
  6. 6. サンプルの説明 vue.js 1.0.26 vue-routerでルーティング vuexに状態を保存 vue-router-syncを使用 webpackでビルド vueファイルではなくhtmlテンプレート https://github.com/toshilow/vue-v1-sample
  7. 7. モジュールのアップデート # npm install vue@next vue-router@next vuex@next vue-router- sync@next --save @nextを指定してvue vue-router vuex vue-router-syncをアップデート
  8. 8. Webpack.configでaliasを追加 module.exports = { entry: "./src/main.js", output: { path: path.join(__dirname, 'build'), filename: 'main.js'}, resolve: { alias: { vue: 'vue/dist/vue.js' } }, module: { loaders: [{test: /.scss$|.sass$/, Standalone (compiler + runtime)
  9. 9. 1.0 Vue.use(VueRouter) var router = new VueRouter() router.map({ '/': { component: Top }, '/posts': { component: Posts }, }) 2.0 Vue.use(VueRouter) var router = new VueRouter({ routes: [ { path: '/', component: Top }, { path: '/posts', component: Posts }, ] }) ルーティングの書き換え
  10. 10. 1.0 <div class="container"> <div class="nav-left"> <a v-link="{path: '/'}" class="nav-item is-tab">Top </a> <a v-link="{path: '/posts'}" class="nav-item is-tab">Posts </a> </div> </div> 2.0 <div class="container"> <div class="nav-left"> <router-link to="/" class="nav-item is-tab">Top </router-link> <router-link to="/posts" class="nav-item is-tab">Posts </router-link> </div> </div> リンクの書き換え
  11. 11. actions.js export const addPost = ({ commit }, post) => { commit('ADD_POST', post) } export const deletePost = ({ commit }, index) => { commit('DELETE_POST', index) } store.js export const posts = state => state.posts VuexStoreの変更 import * as actions from './actions' import * as getters from './getters' export default new Vuex.Store( { state, actions, getters, mutations }) getters.js
  12. 12. 1.0 import { addPost, deletePost } from "../../vuex/action" export default Vue.extend({ vuex: { getters: { posts: state => state.posts }, actions: { addPost,deletePost } }, 2.0 export default Vue.extend({ computed: { ...mapGetters(['posts']) }, methods: { ...mapActions( ['addPost','deletePost']), }, // this.$store.getters.posts // this.$store.dispach(‘addPost’) // とも書ける コンポーネントとVuexのバインディング
  13. 13. 1.0 import Vue from 'vue' import { sync } from 'vuex-router- sync' import store from './vuex/store' import router from './router/router' sync(store, router) router.start( Vue.extend({store}), '#app') 2.0 import Vue from 'vue' import { sync } from 'vuex-router- sync' import store from './vuex/store' import router from './router/router' sync(store, router) new Vue({store, router}) .$mount('#app') エントリーポイントの書き換え
  14. 14. 1.0 <article class="media" v-for="post in posts"> <div class="media-content"> <strong>{{post.title}}</strong> <br>{{post.body}} </div> <div class="media-right"> <button class="delete" @click="deletePost($index)"> </button> </div> </article> 2.0 <article class="media" v-for="(post, index) in posts"> <div class="media-content"> <strong>{{post.title}}</strong> <br>{{post.body}} </div> <div class="media-right"> <button class="delete" @click="deletePost(index)"> </button> </div> </article> $indexの書き換え
  15. 15. 動作確認
  16. 16. まとめ 1.0との互換性は良い (ほとんどそのまま動いた) APIのシンプルさは保たれたままでよかった イベント通知のdispachとbroadcastが無くなるemit1択 Vue.js devtoolが便利 今後パフォーマンス測定、SSRも試してみたい
  17. 17. 参考 Vue.js 2.0 Changes #2873 https://github.com/vuejs/vue/issues/2873 Vuex 2.0 design #236 https://github.com/vuejs/vuex/issues/236 Vue 2.0 RC Starter Resources https://github.com/vuejs/vue/wiki/Vue-2.0-RC-Starter-Resources Vue Router next doc https://github.com/vuejs/vue-router/tree/next-doc petervmeijgaard/vue-2.0-boilerplate https://github.com/petervmeijgaard/vue-2.0-boilerplate
  18. 18. Join us!! 急募
  19. 19. おわり

Editor's Notes

  • ABEJAのプロダクトでもVueを使っている
    今後のバージョンアップも考えて触れておきたい

    Vueを使っている人?
    2.0を試した人いますか?
  • Reactive
    React Angular2でも同じだが
    宣言的にプログラミングできる
     コンポーネント化しやすい
    軽量
    Vue本体のファイルサイズがとても小さい
     パフォーマンスもReactいいらしい
    シンプル
    細かい機能ではない代わりにAPIがシンプル
    Angular1と比べるととてもシンプル
     他のライブラリと組み合わせやすい
    簡単
     Reactと比べて学習にかかるコスト小だった
     みんな知ってる知識だけで作れる
     
  • 簡単なアプリケーション
    基本的なライブラリは使っている
    htmlテンプレートが好き

    Intellijのvueプラグインもあるが
    アシスト機能はファイルを分割した便利

    lint系ツールやsassなどをpluginなしで使える
    sass html es6で作る最小構成

    コードとアプリを見せる
  • Vue2をインポートするとデフォルトモジュールは
    Runtime Onlyモジュールなので

    htmlテンプレートを使うため
    Standaloneモジュールをエイリアスに設定する
    Pre compileの必要がない1/3大きくなる
    vue-common.js 134KB
    vue.js 194KB
  • ルーティングの定義方法が変更

    mapファンクションがなくなり
    コンストラクタで指定する

    パスとコンポーネントをマッピングするのは
    大きくは変わっていない

    詳しくはテジマさんが話してくれると思います
  • Vue1ではaタグにv-linkでリンクしていた

    Vue2では router-linkというコンポーネントを使う

    classの指定も普通にできました
  • actionのdispach関数の名前がcommit
    dispachはactionのトリガーに変更

    commit 同期トランザクションの状態変更
    dispatch 非同期の状態変更トリガー

    actionsと同じようにgettersを定義してstoreに設定できるようになりました
    次のコンポーネントのバインディングに関係があります
  • いままでvuexオブジェクトのでコンポーネントで使う
    gettersとactionsを宣言していた

    2.0ではmapGettersとmapActionsをつかってバインディングできる
    この書き方でコンポーネントのローカル定義も一緒にできる

    前よりvuexを意識しない形になった
    ドキュメントを読むとSSRのための変更であるようです
  • ルータを使ったエントリーポイントがstartではなくなった
    $mountを使って普通にマウントする
  • $indexと$keyがなくなった
    Objectのフェッチをkey value indexを宣言して同じようにできる
    シンタックスが逆になったvalueとindex
  • ブラウザに切り替え

×