Vueはじめました

今回はJavaScriptのフレームワーク、Vue.jsを昨年の12月あたりから勉強し始めたので書いていきます。
JavaScriptといえば、一部ではライブラリのjQueryは終わったなどと言われていますが未だ健在です。

そんな中少し前から話題になっているVue.jsという、
JavaScriptのフレームワークを触ってみることにしました。

Vue.jsはJavaScriptのフレームワークです。
普通のJavaScriptでコードを書いてコンテンツの動きを実装したりもできるのですが、
ライブラリやフレームワークに頼ったほうが楽に開発できます。

JavaScriptのライブラリといえばjQueryが浮かびます。
実際jQueryを使ってないWebサイトを探す方が難しいくらいですよね。

それに代わってというわけではないですが、軽くて簡単に書けるVue.jsの人気がでてきました。

★ライブラリとフレームワークの違い★
ライブラリは道具が揃っており、それら使って自由に組み立てていくイメージ。
呼び出すタイミングを自由に選べる。

フレームワークは骨組みで、開発者はどういう処理をしたいかを書いていく。
呼び出すタイミングはフレームワークに委ねる。

それではVue.jsでどんなことができるかをコードと一緒に見ていきます。

はじめに公式ドキュメントからCDNなどでVue.jsを読み込んでください。
jp.vuejs.org

See the Pen
message by piko525 (@piko525)
on CodePen.

どこ見てもだいたいこれが最初に書くコードだと思います。
div要素のid属性の範囲にVueで書いたコードが反映されます。
HTMLを触らずにテキストを描画していますね。

See the Pen
v-model by piko525 (@piko525)
on CodePen.

メッセージの同期もこんな簡単にできてしまうんですね。
v-modelもVue独自の属性です。

See the Pen
component by piko525 (@piko525)
on CodePen.

このコンポーネントがVueならではではないでしょうか。
HTMLにはred-circleなんてタグはありません。
自分で自由にタグを生成して、そこに要素を描画できてしまいます。

これがコンポーネントです。
Vue.componentのtemplateで必要なタグを書いて、スタイルはCSSで書けば、
red-circleをコピペするだけで、いくらでも量産することができます。

個人的にはヘッダーやフッターに使えるのではないかと思っています。

Vue.jsを使いこなして、Webサイトやアプリを楽しく開発していけたらいいですね！

Skill up Log