JavaScript
vue.js

手探りVue.js入門記

書いておかないと忘れるのでおいて置きます。おそらく追記アリ。

始める前の自分

  • Node.js サーバサイド開発経験
  • 多少のHTML, CSS, JavaScriptの知識
  • めんどくさいことは少しPythonにやってもらっている程度
  • フロントエンドフレームワークって何?

とりあえず、リッチなフロントエンド開発を始めたいと思いVue.jsを選択。

使ってみて思ったこと

まずはメリット面から。

DOM操作をしている自覚がなく、扱いやすかった。
以前使ったjQueryとは違い、厄介なDOM操作をしている印象が皆無だった。特に、変数に何か代入した時点でページの内容が変わるので、流れが追いやすくデバッグが簡単だった。

手軽である。
Vue.jsはCDNにて管理されているので、HTMLに一行追加するだけで試すことができた。
これらのフレームワークは大規模なアプリケーションを作るのに選択されるイメージがあったが、小規模なアプリケーションでも使う価値があるように感じた。

学習コストは低い
JavaScriptと多少のHTML&CSSの知識でサーバとちゃんと連携するページを書くことが出来た。他所でも言われていたことだが、それなりに直感的に出来ていると感じる。

比較対象が無いのでデメリットは今のところ思いつかない。

ハマったポイント

JSの読み込み場所はBody内にしなければならなかった。
Head内で読み込んでも全然適応されなくて困った。公式ページでは全然触れられていなかったので、Vue.jsを使っているページのソースを見て判明した。

thisが一体何を指しているのかわからなかった。
thisが指していたのはdataオブジェクト。よって、this.data.hogeと書いてもundefinedになってしまいアクセスすることが出来ない。

methods内の無名関数はアロー関数を使用することができなかった。
function()を使わずアロー演算子を使用したところ上手く動かなかった。
この記事がわかりやすく説明している。

成果物

2018-01-26 Node.jsからJSONを受け取り色を変更するスクリプト
やっていることは簡単なことではあるが、Vue.jsの特徴をつかめたと思う。
GitHub

動画