0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vue.jsとは

Last updated at Posted at 2020-12-05

#はじめに
本記事では数多くあるJavaScriptのフレームワークの中の**Vue.js**に焦点を当て、その特徴と他のフレームワークについて書きます。

#Vue.jsとは?

Vue.jsとは、UI(ユーザーインターフェース)を構築するためのJavaScriptフレームワークです。
フレームワークとは開発をする時に必要な機能などをまとめて提供してくれるソフトウェアのことで、使用することで開発の効率を上げることができます。

Vue.jsでコードを書く時は、冗長な記述を少なくすることができます。Vue.js独自の規格やルールも少ないため、他のフレームワークよりも自分の好きなやり方でアプリ開発を行うことも可能です。

#Vue.jsの特徴

###■気軽に使える
Vue.js はjQueryと同様に、scriptタグを1行書くだけで使い始めることができます。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

###■双方向データバインディング
双方向データバインディングとは、データの変更があればUIの表示を更新し、UIの変更があればデータの更新を自動的に行う機能を指します。
Vue.jsはこの双方向データバインディングをシンプルに行うことに重点を置いています。

###■MVVM
MVVMとは、「Model(M)-View(V)-ViewModel(VM)」という設計手法を表す用語です。
「Model(データ)」「View(画面)」「ViewModel(メイン処理)」とのように分けて開発を行うこと可能です。
これにより、各プログラムを役割を分けて開発ができるので、可読性が高まります。

大規模なアプリなどでも保守、運用が行い安くなるのがMVVMの特徴です。
###■コンポーネント
コンポーネントとは、各プログラムを部品化して再利用ができる仕組みです。
1つのHTMLファイルを使いわましたり、同じ処理をまとめて外部から利用するといったことが可能です。
これにより、書くプログラム量が減るため、再利用性が高くなり、開発の生産性を上げることができます。

###■ディレクティブ
ディレクティブを利用することでDOM操作をすることができ、HTML要素の表示・非表示などを柔軟に変化させることができます。
これにより、直接DOMを操作するコードの記述量を減らすことができるため、開発スピードを早めることができます。

#参照
Vue.js

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?