Vue.jsでwebアプリを作ろう#01

こちらはJavaScript中級者向けの記事となります。

Vue.jsとは

JavaScriptのフレームワークです。JavaScriptはほぼ全てのブラウザで動くプログラミング言語で、フロントエンドのアプリケーション開発に使用されます。

JavaScriptのフレームワークで最も有名なのは jQuery です。jQueryは導入もしやすく、多くのフロントエンドアプリケーションで使用されています。 
他にもAngularJSやReactなどがあります。

特徴を見ながら違いを見ていきましょう。

特徴１：シンプルで自由に組める

Vue.jsは全体にとてもシンプルに作られています。好みのやり方でWEBアプリを構築していくことができます。本格的なWEBアプリから、簡単な一部の機能の実装もできることがメリットです。
また他のライブラリとの組み合わせが自由にできるので、足りない部分を他のライブラリから組み合わせて使うことが可能です。

特徴２：MVVMフレームワーク設計

 MVVM(Model、View、 ViewModel) の3つでアプリケーションを構築します。「Model（データ）」「View（画面）」「ViewModel（メイン処理）」に分けて処理を行うことができるので、プログラムが管理しやすく追加修正が行いやすくなります。

MVVMの仕組み参照記事：Vue.jsではじめるMVVM入門

https://design.dena.com/engineering/vue-js%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8Bmvvm%E5%85%A5%E9%96%80/

特徴3：コンポーネント化

プログラムを部品化して再利用ができる仕組みです。同じ処理をまとめて使い回したり、外部から持ってくることも可能です。それにより、プログラムの量が減るため、開発効率を上げることができるのです。

特徴4：学習効率が高い

構造がシンプルで日本語のドキュメントもいっぱい落ちているので、学習が簡単に始められます。HTML、CSSとJavaScriptの基礎があれば、すぐに使い始めることが可能です。

特徴5：SPAのアプリに向いている

SPAとは、シングルページアプリケーションです。画面遷移がなく、1ページでサクサク動く使い勝手の良いアプリケーションです。Javascriptで書くと大量のコードを書く必要がありますが、Vue.jsのようなフレームワークを使えば、簡単に実現が可能です。

導入方法

vue.jsの公式ページ（https://jp.vuejs.org/）の『GET STARTED』から

こちらのコードをコピーして</body>のとじタグの前に貼り付けます

 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>

これで導入ができました。

次回は実際にコードをうって動作を確認していきます。