Vue.js入門-基礎を試しながら学んでみる【javascruptフレームワーク】

久々にjavascriptフレームワークで遊びます。
Vueは昔少し触ったことあるのですが、最近需要も多いようなのでゼロから試しながら学んでいきます。
バージョンは2.xです。

Vue.jsとは

使って体感したほうがいいし概要はざっくり。
あとは公式でも読んでね!

javascriptのフレームワーク

Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

view 層だけに焦点

jQuery大変だよね。

速度速い

仮想DOM!

わかりやすい

AngularJs(1系)は個人的にはすごい好きだし便利だと思うけど…
Vueは簡単に学習できるようだ。

Vue.jsと他のフレームワークの比較が公式に書いてあってすごくいい。
他のフレームワーク使ったことある人は特に理解しやすいので。

他のフレームワークとの比較

Vue.jsに触ってみる

準備

vue.jsを読み込む。

触って学習するためなので、「開発バージョン、便利なコンソールの警告が含まれています」という方を読み込みます。
本番用には本番用のほうを。

cdnでもgitから持ってくるのでもnpmでも読み込めばまずはなんでもOK。

DOMに描画してみる

HTML側

#appのdivの中にmessageが入る感じ。

js側

エレメントに#appを指定してデータのmessageに表示するのを指定。

Hello Vue!が表示されました。

バインディング

HTML側

v-bindというのが出てきました。

JS側

js側は文字列に日時が入っていますが、#appのとあまり変わりません。
結果は「Hover~」という文章は変わりませんがspanのtitleに指定した文章(日時入りの)が入ります。

「v-bind:title=”message”」この部分はtitle属性にmessageを入れるということですね!
titleをclassやrelなどに変えてに動作します。

jQueryの場合だと下記と書いたのと同じ動作です。

Html側に指定があるのでjQueryとの差がどんどん出てきますが。。

条件分岐

if!

HTML

js

文章が表示されますが、seenがfalseだと表示されません!

簡単に条件分岐で切り替えられますね!
jQueryだと値が変わるたびにチェックして表示非表示を変えないといけないので…。

ループ

HTML

js

view見てもどう動作するのかわかりやすいのがいいね。

イベントリスナ

HTML

JS

ボタンを押されたら、文字列を逆さまにして書き換える。
methodsにいろいろ追加すれば動きを追加できますね。

コンポーネント

ちょこっといじるだけでなく規模がでかくなればなるほど重要だなー。
お気に入りボタンとかログインによってログインとログアウトの表示変えるとかけっこうサービスで使いまわすところ多い。

まとめ

今回はVue.jsに触れてみました。
簡単で楽しいですね!

これだけだとアプリケーションは作るのには全然不足なので今後に続きます。
ルーティングとか簡単だといいなー。
あとはサーバーサイドレンダリングが非常に気になってる。

この記事を書いた人

鳥井 慎太郎
鳥井 慎太郎
Web事業家/ブロガー
毎日楽しい。 個人開発(Webサービス、ゲームアプリ)