Vue.jsとは何かを調べてみる

# Vue.jsとは
ユーザインタフェイスを構築するためのクライアントサイド（Javascirpt）フレームワーク  です。
MVCの派生種である、GUIライブラリに適したMVVM(Model-View-ViewModel)を設計基盤として採用し構築されています。

[MVVM(Model-View-ViewModel)概要まとめ](https://qiita.com/homyu/items/046c9a43b15b9e376198)

## <font color="red">【注意】</font>
公式リファレンスでは前提としていくつかの知識が中レベル必要だと記載されています。

+ HTML
+ CSS
+ JavaScript

公式はこれらの知識をなしに直接入門する事を推奨していません。
かといって他のフレームワーク使用経験は必須としていないので必要最低限、上記の３つを中レベルにしてから挑みましょう

## Vue.jsの魅力と特徴

**特徴は以下の６つです**

+ Simple  
HTML・CSS・JSを書き、JSONを掴み、View Modelを作る、Vue.jsを用いたコードを
書く際に必要な作業はこれだけ
+ Fast  
[DOM](https://qiita.com/KDE_SPACE/items/e21bb31dd4d9c162c4a6)操作をまとめ適切なタイミングで非同期更新することで高速な動作実現されている
+ <font color="red">Composable</font>  
依存のない再利用可能なコンポーネントを作り、組み合わせることができる
+ Powerful  
HTMLに書く式と[計算型プロパティ(Computed property)](https://qiita.com/nack43/items/5e1d7972ed0b54daeb04)は依存するプロパティ(変数)が自動的にトラッキング(追跡)される等、ユーザにとって面倒な動作の多くを肩代わりしてくれます。
+ Module Friendly
モジュールバンドラの中から好みのモジュール管理の仕組みを利用できる。  
  + [browserify](http://browserify.org/)  
  参考サイト：[Browserify: それはrequire()を使うための魔法の杖](https://qiita.com/cognitom/items/4c63969b5085c90639d4)
  + [webpack](https://webpack.js.org/)  
  参考サイト：[webpack 4 入門](https://qiita.com/soarflat/items/28bf799f7e0335b68186)
  + [rollup](https://rollupjs.org/guide/en/)  
  参考サイト：[Rollupがちょうどいい感じ](https://qiita.com/cognitom/items/e3ac0da00241f427dad6)

魅力

+ どんな規模のWebアプリケーションにも導入しやすい。
+ 既存のプロジェクトに途中から導入するのも簡単
+ 学習コストの低さ

## Vue.js概要

### 宣言的レンダリング  
Vue.jsの核は、単純なテンプレート構文を使って宣言的にデータをDOMに反映することを可能にするシステムです。

```html:HTML部分
<div id="app">
  {{ message }}
</div>
```

```javascript:JavaScript部分
let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
```

```:結果
Hello Vue!
```

一見するとただ描画しているだけのように見えますが、Vue.js は内部で多くの作業を行っています。
データと DOM は関連付けられ、そして全てが[リアクティブ](https://qiita.com/hiruberuto/items/39e4126f470d8b84b291)になっています。

### html要素の属性を束縛（バインディング）することもできます。
htmlタグの中には{{ }}のような記法をしようして書くことはできません

```html:html部分
<div id="app-2" v-bind:style="message">
  Hello Vue!
</div>
```

```javascript:JavaScript部分
let app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'color: red'
  }
})
```

```:結果

※テキストの色が赤色に変化しています。
Hello Vue!
```

[htmlタグの属性](https://reference.hyper-text.org/html5/attributes/)(style)をVueインスタンス(app2)のmessageプロパティによってテキスト(Hello Vue!)を赤色に更新して保存しています。

## ディレクティブ
**ディレクティブ**とはv- で始まる特別な属性。
directive(指令)という名前通りVue.jsに何らかの指示を行う

**代表的なディレクティブ**

+ v-bind
+ v-if
+ v-show
+ v-for
+ v-on
+ v-model

※ここでは条件分岐を代表例として説明する
### 条件分岐 v-if
要素の有無をシンプルに切り替える事ができる。

```html:html
<div id="app-3">
  <p v-if="seen"> Now you see me </p>
</div>
```

```javascript:JavaScript部分
let app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
```

```:seenがtrueの場合
 Now you see me 
```

ブラウザ上の開発者ツールのConsoleでseenをfalseにする

```:console
app3.seen = false
```

```:seenがfalseの場合

```
この例はテキストをデータに束縛できるだけでなくDOMの構造にデータを束縛できることを示している。

## コンポーネントによる構成
[コンポーネントシステム](https://qiita.com/seya/items/8814e905693f00cdade2)はVue.jsにおけるもうひとつの重要な抽象概念です。
「軽量で、自己完結的で、（多くの場合）再利用可能なコンポーネント」を組み合わせることで、大規模アプリケーションを構築することが可能になる。
Webページについて考えてみると、ほぼすべてコンポーネントツリーとして抽象化することができる。

![Vue.js公式リファレンス参照](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398252/707d15ba-9243-d051-f8a1-12202ada4295.png)


## あとがき
Vue,jsが難しいものではないと認識してもらえるように自分なりに調べてVue.jsの中核の基本的な機能について手短に紹介しました。  

## 参考資料
[Vue.js公式リファレンス](https://jp.vuejs.org/index.html)
[Vue.js概要？](https://qiita.com/asip2k25/items/bd4bdccd5201d542953c)
[Vue.jsをシンプルに理解しよう](https://qiita.com/yusuke_ten/items/21f97fe961d0070af418)