書いておかないと忘れるのでおいて置きます。おそらく追記アリ。
始める前の自分
- 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
