vue.jsで簡単な計算機を作る2017

  • 0
    Like
  • 0
    Comment

    作ったもの

    FGO Activity Predictor - GitHub
    FGO Activity Predictor - bl.ocks.org

    FGOというスマホゲーのAP計算機を作った。例によって、Googleスプレッドシートで作ってたものを移植。
    経済APというのは、端的に言うと寝てる間にAPが無駄にならないように最低限減らしておくべき値のこと。これでもう5分おきに起きなくていいですね所長。

    感想

    • 日本語のドキュメントが完備されていて、それだけで完結できて大変良かった。 https://jp.vuejs.org/v2/guide/
    • <script src="https://unpkg.com/vue"></script>で即使える。手軽でいいし最高。最近のブラウザはES6も普通に使えるし。
    • ドキュメントが揃っていたのもあるだろうけど、前回よりかなり楽だった。本体では大きくつまる所もなく。前はもっと覚えないといけない規則がいっぱいあった気がする。
    • とはいえ、componentを分けていくところは結構苦痛もある。$emitとは……。整理後、はたしてこれは見通しがよくなったのだろうかという疑問も。
    • 最近はReactを使っていたので、すっかりマインドセットが変わっていた事に自分で驚いた。なんと素のHTMLを書いているのに違和感がある。vueもJSXで書けるようになっていたけど、そうなると同じような感じになるんだろうか。
    • 言っても高度な使い方はほとんど読んでないので、そこまで行くとまた違った感想になるかもしれない。でもそこまで行かなくても、これくらいは十分書けるというのも良さかと。
    • 大きなコードになってくると大変そうな印象はあるが、HTMLの世界に親しみがあれば直感的に理解できるし、jQueryのコードをもう少し交通整理したいだとか、デザイナーさんがちょろっと使うには最適なんじゃないかと思う。何と言っても導入が楽なのは大きい。

    感想 2017-05-05

    vuexを使うように変えたので追加

    • vuexも日本語のドキュメントがありすぐ使える。
      https://vuex.vuejs.org/ja/
    • vuexもCDNから使用可能。<script src="https://unpkg.com/vuex"></script>
    • ただ、普通に使うならwebpackなりを使うと思うので、一応お試しはできるぐらいの話だと思う。
    • vuexを全部インラインで書く、1ファイルでという形なので、正直ロジックが大きいComponentからstoreに移っただけという感じになった。とはいえ、ModelとViewの分離ができた感はあった。なにせサーバとの通信もないので、Routerとかその辺も触ればまた違うと思われる。
    • 当然なんだけどvue側へのサポートが充実しており、つなぎ込みが非常に楽。Reactだとこの辺面倒な印象がある。
    • ところで、...mapState()とかはObject.assign({},Vuex.mapState())と書ける。これならトランスコンパイラなしでも動く。