ザ・コンサルタント
ちなみに原題はThe Accountant。ボーンシリーズみたいな感じ。キャラが魅力的で暴力的なところとかすごいいいと思ったけど、ストーリーがンッみたいな感じでたまに気になっちゃう。 年配の方が結構入ってました。
vue シリーズをシュッと試す
自分のローカルで作業する為のフロントを作るのに気になっていた 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 の設定を見て人間が設定できるものじゃないなとも感じた。
傷物語 Ⅲ冷血篇
ちょっと疲れた時に見てたら半分以上寝てました。
昭和元禄落語心中
これもオススメしてもらって、お正月に読んだ。最後の10巻が言葉に出来ないぐらい良かった。アニメも楽しみ。 最近オススメされたものはなるべくシュッと買うようにしていて、面白いもの色々見れたり読めたりして良い。
シュッと色々オススメされたい。
将棋の子
- 作者: 大崎善生
- 出版社/メーカー: 講談社
- 発売日: 2014/07/18
- メディア: Kindle版
- この商品を含むブログ (3件) を見る
「それでね、真夜中に起き出して、今でもこの駒を持って戦う。羽生や郷田や森下と、今でも戦うことがある。夜中に一人きりで」
これもオススメしてもらって読んで見た。面白いかった....
ハリーポッターシリーズ
ファンタスティックビーストが良くて教養として見ておくかということで hulu でハリーポッターシリーズを全部見た。最初のが 2001 年なのでだんだん映像が今っぽく?(物語もだんだんダークな雰囲気になっていくけど、最近よくある彩色が低い絵)なるのは面白かった。
映画館で見てたらもうちょっとハマったかもなぁという感じで、そこまでぐっとは来なかった。
どちらかというと hulu ( ps4 ) が最悪で、まずシリーズだけのページがない、シリーズの順番ごとに並んでいない、視聴中の項目が視聴した順になっていない、次に再生される一番目の候補が同じ映画の吹き替え(字幕で視聴してたので)という感じで、もうちょっと頑張って頂きたいなと思いました。普段使ってる netflix は操作しやすいので余計に目立ちました。
12 月のランニング
135.66 km だったので、あまり走れなかった。19 k で 1:28:12 というタイムが出せたのは朗報で、残り 2k を 10 分で走ってもハーフを 1:40:00 切れるぐらいまでは走れるようになった。
もう少し走行距離を伸ばさないとなぁ。