現在 Vue.js の勉強をしているところなので、知識の整理として残しておきます。
これから学ばれる方は参考にしていただければ(^^)
参考書
Vue.js とは？
Vue.js とは、JavaScript のフレームワークの一つです。
フレームワークとは、アプリケーション開発を効率化するために作られた枠組みのことです。
つまりフレームワークを利用することで、素の JavaScript で書くよりも記述量が少なく済んだり、メンテナンスがしやすいといったメリットがあるわけですね。
他にも有名な JavaScript のフレームワークとして、React や AngularJS があります。
Vue.js と合わせたこれら３つの JavaScript フレームワークが現在非常に高い人気を誇っています。
では、Vue.js の具体的な特徴を見てみましょう。
Vue.js の特徴
大きく次の４つの特徴があります。
①幅広い規模の開発に対応できる柔軟性
ウェブサイトの一部だけに Vue.js を利用したり、拡張ライブラリを使うことで大規模開発にも利用することができる柔軟性を持ち合わせています。
②環境設定が簡単で学習コストが低い
一般に大規模なアプリケーション開発では開発環境を利用する必要があり、その導入にですら初心者なら苦戦することもあるでしょう。
しかし Vue.js なら、小規模なアプリケーション開発から始める場合はそのような開発環境は必須ではありません。
HTMLに<script>タグを追加して Vue.js を読み込むだけで利用できます。
③日本語ドキュメントが充実している
日本語化がされていなかったり、初心者には難解な開発者向けドキュメントが少なくない中、 Vue.js には丁寧な日本語で解説された公式ガイドがあります。
専門的な開発経験のない初心者でも取り組みやすいのが特徴です。
④JavaScript のデータと DOM が自動的につながる
JavaScript のデータが変更された際、それを DOM に反映させるためにはプログラムを書かないといけませんよね？
なんと、そのような記述をしなくても自動で行ってくれます！
初めて Vue.js で書いたときは結構感動しました( ;∀;)
下に Vue.js の簡単なプログラムを書いてみます。
書き方はひとまず置いといて、その挙動に注目してください。
<div id="app">{{message}}</div>var app = new Vue({
el: '#app',
data: {
message: 'Hello'
}
});すると、ブラウザには ‘Hello’ と表示されます。
今まで jQuery や素の JavaScript しか触れてこなかった人からすると、もうこの時点ですごくありませんか？
おそらく予想はついていると思いますが、{{message}} は message プロパティの値を表示するという役割をもっています。
では次に、message プロパティの値を変更してみましょう。
var app = new Vue({
el: '#app',
data: {
message: 'Hello'
}
});
app.message = 'Good bye';この場合も、ただプロパティの値を変更しただけで、DOMの操作に関するプログラムは一切書いていないですよね。
しかしブラウザを更新すると…
ちゃんと変更が反映されています。
これで、「JavaScript のデータと DOM が自動的につながる」ということがお分かりいただけたかと思います(^^)
Vue.js のインストール
非常に簡単です。下記の script タグを HTML にコピペするだけです。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>必ず Vue.js のプログラムを書く script タグよりも前に配置しましょう。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>これだけです。
具体的なプログラムの書き方を知りたいという方は下記からどうぞ(^^)
参考書
コメント