soh335 memo

自分のローカルで作業する為のフロントを作るのに気になっていた vue シリーズ（vue.js, vuex, vue-router, vue-cli）をシュッと使ってみた。（ついでに material design lite も試した）片手間のものなのであまり有益な情報ではないけど、一応思うところ含めて残しておく。

vue.js, vuex, vue-router はドキュメントが全て日本語のものがあるのでとても分かりやすかったです。*1 *2 *3 なので頭から全部つらつらと読んで手を動かすのが良いと思います。

vue.js を一枚スクリプトで試すパターン

go で api を書いて、vue.js を unpkg から読み込んで一枚のスクリプトで書いてみた。自分の環境で動けば良いので

[HOGE] () {
    `${...}`
}

のようなのは普通に使いました。 component 書くときに改行が発生するので `...` が使えないとちょっとつらい。

template から methods に登録したものを呼んで、data を書き換えてると小さいものでもすぐ分かりづらくなるなぁという印象。（雑に書いているから）

一枚スクリプトに vuex を足す

unkpg から vuex を読み込むと自動で vuex が有効化される。

api とかの呼び出しには書いてある通りに axios を使い、ドキュメントにある通りに Vuex.Store を定義していく。mutations の中では state の中身を書き換えるだけで非同期な処理は許されないらしいので*4、actions につらつらと書く。大きいもの書いていくと actions がすごいことになりそうな気がしているけど、どうなんでしょう？

まぁでも vue.js だけでつらつら書くよりは分かりやすいかな？

後 vuex のドキュメントで

computed: {
    ...Vuex.mapState([...])
}

みたいな書き方がされてるけど、まだブラウザで使えないので、複数必要な時は

Object.assign({}, Vuex.mapState([...]), ...)

のような書き方でお茶を濁した。

vue-router も付け足す

vuex の使い方がわかったのでついでに vue-router も付け足すことにした。と言っても、

var router = new VueRouter({
  routes: [
    { path: '/', component: root },
    { path: '/hoge/:hoge', name: 'hoge', component: hoge }
  ]
});

var vm = new Vue({
  store,
  router,
}).$mount('#app');

みたいに書くだけなので特にやることはなかった。これもドキュメントにあるので特に気にすることはないけど*5、/hoge/fuga, /hoge/haaa と遷移するとコンポーネントが再利用されて表示が変わらないので

  watch: {
    '$route' (to, from) {
      this.getHoge();
    }
  },
  created: function() {
    this.getHoge();
  },

みたいに、route が変わったときにも初期化と同じ方法でデータを読み込んであげる必要がある。

material design lite で作ったボタンが反応しなくなる

vue-rouer で画面移動した後に material design lite で設置したボタンが反応しなくなることがあった。これは

  mounted: function() {
    componentHandler.upgradeDom();
  }

とすることで解決した。該当の component が設置されたら再度 material design lite 側に気づいてもらう必要があるよう。

vue-cli で作ったひな形でビルドするようにする

一枚スクリプトにつらつら書きながら、vuejs, vuex, vue-router の使い方がわかったので、今度は vue-cli で作ったひな形からビルドするようにする。（ vue init webpack $name）これもドキュメント通りに書いていけばいいので特に問題はないのだけれど、今まで雑に書いていたので lint に引っかかるのがつらいぐらい。

api サーバへの proxy

webpack の dev server を使っていると api サーバへの通信が出来ないので（ポートが違うので） proxy 機能を使ってあげる必要がある。

config/index.js

  dev: {
    env: require('./dev.env'),
    port: 8080,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:5555',
        changeOrigin: true
      }
    },
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }

こう設定すると dev server は 8080 で立ち上がるけど /api への通信は localhost:5555 に送ってくれる。

webpack されない material design lite の変数を触る

上に書いた componentHandler は webpack では未知のものなので lint で怒られてしまう。（方法はいろいろありそうだけど） build/webpack.base.conf.js に以下を書き足した

  externals: [
    {
      "componentHandler": true
    }
  ],

そうすると下のように書ける

Hoge.vue

import componentHandler from 'componentHandler'

export default {
  mounted: function () {
    componentHandler.upgradeDom()
  }
}

終わり

あとは build した成果物を吐き出すディレクトリを設定すれば良い。dev server の時は vue devtools という chrome extension が使える。自分が片手間にシュッと使うぶんには結構良さそうだなぁと感じました。

あと、vue-cli が生成する webpack の設定を見て人間が設定できるものじゃないなとも感じた。

*1:https://jp.vuejs.org/v2/guide/

*2:https://vuex.vuejs.org/ja/

*3:https://router.vuejs.org/ja/

*4:https://vuex.vuejs.org/ja/mutations.html

*5:https://router.vuejs.org/ja/essentials/dynamic-matching.html

ファンタスティックビーストが良くて教養として見ておくかということで hulu でハリーポッターシリーズを全部見た。最初のが 2001 年なのでだんだん映像が今っぽく？（物語もだんだんダークな雰囲気になっていくけど、最近よくある彩色が低い絵）なるのは面白かった。

映画館で見てたらもうちょっとハマったかもなぁという感じで、そこまでぐっとは来なかった。

どちらかというと hulu ( ps4 ) が最悪で、まずシリーズだけのページがない、シリーズの順番ごとに並んでいない、視聴中の項目が視聴した順になっていない、次に再生される一番目の候補が同じ映画の吹き替え（字幕で視聴してたので）という感じで、もうちょっと頑張って頂きたいなと思いました。普段使ってる netflix は操作しやすいので余計に目立ちました。

soh335 memo

ザ・コンサルタント

vue シリーズをシュッと試す

vue.js を一枚スクリプトで試すパターン

一枚スクリプトに vuex を足す

vue-router も付け足す

material design lite で作ったボタンが反応しなくなる

vue-cli で作ったひな形でビルドするようにする

api サーバへの proxy

webpack されない material design lite の変数を触る

終わり

傷物語 Ⅲ冷血篇

昭和元禄落語心中

将棋の子

ハリーポッターシリーズ

12 月のランニング