from electron 2 web

インターネットのリソースを無駄遣いして検索におけるUXを下げてごめんなさい

圧倒的文章力のNASAでゴミみたいなチラ裏のようなメモを量産してしまい全ての"Web開発者"にごめんなさい

vue.jsでゴミみたいなものを作った

注:


ソース

vue.js memoapp


使った技術(vue.js内で)

ディレクティブ

v-onとかv-forとかいうやつ。

model view

vue.jsはMVVM。new Vue()の返り値としてmodel viewが返ってくるっぽい。んでmodel viewはmodelとひもづいてて双方向バインディングなのでどちら側から更新しても常に同期される。

んでそのmodel viewをほかのmodelからも使ってほかのmodelを更新しよう的な?

この辺曖昧かも。プロどんどん鉞投げてくれ。頼みます。

methods

一番苦労した。というのも仕様変更で死んでた。辛すぎる。

v-on:clickが古いバージョンだとv-on="click:XXXX"になってる。んでさらに悪いことに俺のwebpackから持ってきたvue.jsソースが古かった。 つまり後者で普通に動いた。

しかし後者だとなぜかv-forのレンダリングが聞かない。前者だと効く。

自分で書いたコードは一切変えなくてもAが動いてBが動かない状態からBが動いてAが動かない状態というジレンマ。

まあ最終的にできたので良かった。

compute

初めて使った。理解できるちゃ理解できるんだけど。なんというか説明しにくい。 returnの値がdataの中に入っている同じ名前のキーのプロパティになる。

同一vueインスタンスのdataの値が更新されるときに自動的に発火するのかと思ってたがどうもそのfunctionが依存してるものが変更したときだけ発火されるっぽい。かなり驚いた。

だってユーザー定義のカスタムされた関数の内容をライブラリが捉えるんだよ?まさかASTで構文解析でもしてるとでもいうんですかね。

まあつまり何にも依存してなかったら一度発火された後はもう発火しない。

jp.vuejs.org

vue.jsはwatch関係が強いな。まるで妖怪watch。

created

ここだけ

XXX:{
foo:bar,
}

という形式ではなく

XXX:funxtion(){

}

固定なので注意

vueインスタンスは何個でも作れる

まあ予想はしてたけど。

expressで適当に書いた。汚い。

汚さであげるなら

fetchを使っていない、なんかファイルごとにルーターを書いている、vueインスタンスがたくさんある、ES6っぽことしてない、せっかくいろいろツール覚えたのに何も使っていない等々いろいろ汚い。


覚えたけど結局使わなかった奴

コンポーネント

angular2でもこの辺触れた。いまいち使いどころがよくわからない。

フロントエンドルーター

鯖のルーターは割とわかりやすい概念だと思う。鯖に要求されたときにurlを見て登録したパス側に適応していればそっちにdeligationする。

フロントエンドルーターの場合はアドレスバーが変更したときに実行される?あとreact-routerとか見てるとa hrefとかもルーターで処理できるっぽい。まあこの辺はライブラリによって違うでしょ。

フロントエンドルーターの概念がよくわからなかったのでとりあえずいろんなフロントエンドルーター実装おとして調べまくった。

自分の調べたなかだとpath.jsとかいうのがよさそうだった。

んでそれ入れたらなんかpythonでbuildし始めて草すら生えないんですが。なんでnode-gypとcppとかnativeアドオンとか出てくるんですかね・・・

ちなみにvue.jsにフロントエンドルーターはついていない。vue-routerとかいうライブラリが必要。

今後の予定

さすがにアレでは汚いしちゃんとリファクタする予定。というか今してる。

fetch

久々に使ったので忘れてた。then二回もいるっけな

express

いろいろつらかった。 serve-indexが原因かと思ったけどいろいろググった結果そもそもserve-index使わずにexpress.staticでいけるということを理解した。

まだexpress.staticの使い方いまだによくわかってない。かなりつらかった。

ここでも2時間ぐらい取られた。

追記:

だいぶリファクタできた。

予定の削除機能とかつけた。

ちゃんと同期非同期も改変した。

あとbootstrapで見た目変えたり肉付けしたり。あとせっかくだからtwitter連携も欲しいな。

twitter連携に関しては過去に2~3回付けてるのでたぶん1時間もかからずできるはず。ツイ廃(意味深)ですね・・・