はかせだけど博士じゃない

無職が就活しないでプログラミングとかする

Vue.jsの学習メモ

学習

フロントエンドの勉強もしたいみたいなことを言ってたので、Vue.jsを勉強していきます。ちなみにSPA開発は前職でBackbone.jsベースの内製フレームワークとAngularJS (1.4.x) くらいしか経験がありません。

React.jsと迷いましたが迷うならどっちも触ればいいじゃんということで、まずはVue.jsを選んでみました。決め手は見た目のキムワイプ感です。

ググって出てきた以下の記事をそのままなぞるだけのつもりなので、気になったところだけ脳内を出力していきます。

qiita.com

Vue.jsアプリにホストOSからアクセスできない

vagrantで作った環境を使ってプロジェクトを生成したところ、アプリを起動してホストOSからlocalhost:8080にアクセスしても「サイトにアクセスできません」という画面になった。

アプリケーションのログで「headlessな環境ではopenフラグを使うな」みたいなメッセージが出ていたので、よくわからないがpackage.jsonの以下の部分を修正。

修正前

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",

修正後

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot",

メッセージは出なくなったが相変わらずアクセスはできない。

tmuxを起動してウィンドウを二つにして、一方でアプリを起動してもう一方でlocalhost:8080をwgetしてみると、index.htmlの中身が取得できた。

なんか設定が必要なんだろうか。試しにN予備校のアプリケーションを起動してみたところホストOSからアクセスできた。うーむ。

「vagrant webpack dev server」とかでググると出てきた情報をもとにwebpack.config.jsを編集。

編集前

  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },

編集後

  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    host: "0.0.0.0",
    port: 8000
  },

私の環境だとhost: "0.0.0.0"だけではアクセスできず、試しにポートを8000にしたらホストOSからhttp://localhost:8000でアクセスできた。やっと進められる。

f:id:s-hakase:20180313163904p:plain

ところでvue-cliでのプロジェクト生成時、webpack-simpleではなくwebpackを指定するとテスティングフレームワークとかLinterとか入ってて便利とのこと。今回はVue.jsの学習のためいったん置いておき、今後何かアプリをつくるときに改めて調べてみる。

ここまででやったこと

  • N予備校の講座でvagrantで作った環境をそのまま使うことにした
  • vue-cliをインストール
  • vue init webpack-simple project-nameでプロジェクトを生成

vagrant上の環境でhot reloadが効かない

解決策

qiita.com

解決できるっぽいが、しばらくは手動でちくちくやる。

ここまでやったこと

  • 画面遷移はないのでrouterは後回しにした
    • なのでindex.html App.vue main.jsの3つだけの最小構成で作る（と思う）
  • .vueのtemplate要素の子にdivを二つ作ったら「ルートは一つにしろ」って怒られた
  • formでボタンとかインプットとかチェックボックスとか置いた
    • 最終形の確認のためタスクのリストは一旦手で複数書いてる

ボタンをクリックするとリロードされる

追加・削除のボタンの関数を実装してv-onでそれぞれの関数が実行されるようにしたところ、ボタンをクリックしたらページがリロードされてURLの末尾に?が付くみたいな感じになった。困った。

イベントを購読していない普通のbuttonでも同様の動きをするので、GETメソッドになってクエリパラメータの?がついてしまうみたいなHTMLの動きだと思うたぶん。ひとまずevent.preventDefault()でデフォルトの挙動を無視するようにした。対応がこれで合っているのか分からないがリロードされなくなったので良しとした。

ここまでやったこと

  • リストレンダリングv-for
    • タスクをループで記述
  • 双方向バインディングv-model
    • VueコンポーネントにnewTodoを定義してテンプレート側のinput要素のv-model属性に指定すると、入力がnewTodoに反映される
  • イベントを購読v-on:clickしてTodoリストを更新するように実装
    • @clickのような省略も可能らしい
  • v-if v-else属性でフラグによって表示する要素を変更する
  • v-bind:classでフラグによってclassを書き換える

GitHub pagesで公開されない

npm run buildの出力結果が違うので何とかする。ちょっとこれから用事があるので今日はここまで。