めるノート

一児の母 兼 へっぽこWebエンジニアの内省ノート

Vue.jsで旗揚げゲームを作ってみた

f:id:c5meg1012:20170717114650p:plain:w200

自分の傾向として写経ばっかりしがちなので、たまには自分で考えて作ってみようと思って作りました。

作ったものはこちら。

https://c5meg1012.github.io/vue-flag/

リポジトリ

https://github.com/c5meg1012/vue-flag

JavaScriptフレームワークの話題でよく出てくる、

  • componentをどう切るかが難しい
  • データをどう持つかが難しい
  • どこまで大きくなったらVuex(Redux)を入れれば良いのかが難しい

という感覚を、だいぶ理解できるようになったと共に、そのあたりの甘さが思いっきり出た感じになりました。。
Vuexを入れればApp.vueはほぼ表示に専念できるのかも、と思ったり。

あと、この手のJavaScriptはどうやってテストを書くのだろう、とも思ったり。
そもそも言語問わずテストの書き方自体をあまり知らないので、そこからなのですが。
メソッドの振る舞いを確認すればよいのかしら。これもちゃんと勉強しよう。

それから、デプロイ方法を探して悩みました。
github pagesは、masterブランチでなら/docs配下を公開できるようなんですが、パッと見gh-pagasブランチだとそれができなさそうなので…
herokuでもちょっとだけやってみたのですが、やはり/dist配下を公開するためのsubtree pushでエラーが出て詰まってしまいました(´・ω・`)
ということで、結局まだデプロイはしていません。
お手軽な方法ないのかな。Firebaseがいいのかなぁ。うーん。

JavaScriptの師匠が欲しくなってきたので、いろいろコードリーディングしてみても良さそうです。

2017/07/17 22:28追記
github pagesでデプロイできました!
gh-pagasブランチではビルドしたファイルだけにしてあとのファイルは全部消します。
ビルドしたファイルをdistの外に出して、distディレクトリも消して、
index.htmlやビルドしたjsファイルの中で、外部ファイル読んでるところのpathを調整してあげるとうまくいきました。
若干強引ではありますが(^^;)