1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

1
Last updated at Posted at 2017-04-09

作ったもの

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())と書ける。これならトランスコンパイラなしでも動く。
1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?