193.79 km 走った。 200 km にはいかなかったけど、まぁまぁ練習出来たほう。内容としてもずっと避けてた 30 キロ走をやれたのも良かった（その後燃え尽きてしばらく走れなかったけど）。練習の内容は（なんとなく）週 50 キロ、メインの練習は 20 キロ走で、4:50 ぐらいを目安にしてます。

買ったもの

THE NORTH FACE Power Dry Grid Hoodie

goldwinwebstore.jp

長袖一枚だと長距離走るときに寒くて辛いのでフリース状のものを買った。チャックを一番あげると首元まで来るのでだいぶ暖かい。あと普通に洗える素材なのが良い。

NIKE AIR ZOOM STRUCTURE 20

store.nike.com

調子乗って new balance の軽い靴で走ってたらだいぶ底を削ってしまったので練習用に買った。前者はレース用にとっておくこととする。

2017-01-24

沈黙‐サイレンス‐

movie

chinmoku.jp

すごかった。三時間あるけど間延び全くせず最後まで緊張感がすごい。こっちも年配の方が多かったですね。

年始の方ちょっときになる映画減ってたけど、またここからふえてきそう〜。

2017-01-24

ザ・コンサルタント

movie

wwws.warnerbros.co.jp

ちなみに原題はThe Accountant。ボーンシリーズみたいな感じ。キャラが魅力的で暴力的なところとかすごいいいと思ったけど、ストーリーがンッみたいな感じでたまに気になっちゃう。年配の方が結構入ってました。

2017-01-20

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

tech

自分のローカルで作業する為のフロントを作るのに気になっていた 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