Vue.jsは、jQueryに取って代わるとも言われる注目のJavaScriptのフレームワークです。
ずっと気になってしょうがなかったのですが、やっと触れることが出来ました。
Vue.jsを使ってツールを開発してみた感想を書こうと思います。
私の開発環境
C#erなので
- Visual Studio 2015
- ASP.NET MVC
- .NetFramework 4.5.2
- Vue.js
- Bootstrap4
- axios
Vue.jsについてはNuGet経由で取得しましたが、Visual Studioに拡張機能を入れて、npm経由でインストールした方がよかったかもしれません。
axiosについては後述しますが、POSTやGETしたいときに使うライブラリです。
今回は、使いませんでしたがBootstrap4を使うのであれば、Bootstrap+Vue.jsの組み合わせで使うことの出来るBootstrap-Vueを使うならばNuGet経由ではインストールできず、npm経由でインストールすることになるためです。
まず、公式サイトを読むべき
Vue.jsには日本語の公式サイトがあります。
まず、ここを読んで把握すべきでしょう。
横着な私は、必要な情報だけGoogleで検索して、あっちゃこっちゃ飛び回って作業してました。
さらにいきなりTypeScriptで!と思ったのですが、これは無謀でした。
POSTとかGETは、どう行うの?
ボタンを押した時にAjaxでサーバーサイドから情報取ってきて表示したいというケース。
意外に、検索すると、あまり情報が見つかりませんでした。
vue-resourceを使うというのがヒットしましたが、現在は axiosというライブラリが推奨されています。
ちゃんと公式サイトに記載されていますね。そういう意味でも、公式サイトを読んで勉強すべきでした。
GETもしくはPOSTして他のページを取得してセットする方法
C#でASP.NET MVCを使ってるからですかね。こういうことをしたくなるのは。
下記のページを参考にさせていただきました。(中国語ですがコードを見てもらえれば)
jQueryに取って代わる?
どこかで聞いたこの言葉を私は鵜呑みにしていました。
jQueryというライブラリはHTMLから欲しいタグの値を取得したり、設定するのに対して、Vue.jsというのはHTMLに変数を埋め込むフレームワークです。
あくまでも私の中のイメージの話です。
下記の記事からも勉強させていただいたのですが、どちらかというとjQueryよりKnockout.jsに近いといった方がしっくりきます。
感想としては
(あくまでも私が、少し触っただけの感想です)
学習コストが低いと言われてはいますが、学習しなかったら使えないです。
Vue.jsには独特の構文があるため、これについては勉強し直さなければならないです。
私がやや期待し過ぎたのもあるのか、開発しやすさとか開発していて楽しいといったポジティブな驚きはありませんでした
そういう意味でも、気になっているだけじゃなくて、さっさと触ってみるべきだったと思います。
下記のIntelliJのPluginでは、コード補完できそうなので、こういうのを活用して Vue.jsの構文に早く慣れるようになったらいいですね。
ともあれ、Vue.jsが次世代フレームワークなのは、仮想DOMアルゴリズムを持っていることでしょう。
これにより、パフォーマンスの向上が期待です。
下記サイトを見ていても、Vue.jsの勢いは感じますし、勉強しておいて損はないライブラリだと思います。