目次

Vue.jsとは
jQueryと比べる
作ってみた
所感

■ 0. はじめに

記事・情報はたくさん落ちていますが、なにぶん初学者なので、自分には難しい説明が多い。
今回はさわりだけ説明します。何となくのイメージで説明する部分&間違った解釈もあるかもしれませんので、ご容赦を。。。
少し調べるとたくさん記事が出てきます！

■ 1.Vue.jsとは

Vue.js とは？

以下、公式より (https://jp.vuejs.org/v2/guide/)

Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、**Vue は少しずつ適用していけるように設計されています。**中核となるライブラリは view 層だけに焦点を当てています。そのため、**使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。**また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

分類としてはjavaScriptのフレームワークの一種です。

・ Vue.js

・ React.js

・ Angular.js

これらが三大フレームワークと言われているものです。

【脱線】ライブラリとフレームワークの違いについて

フレームワーク:
フレームワークは特定のプログラミング言語で書かれた、そのまま利用できるソフトウェアの主要部分の雛形（テンプレート）と、汎用的で再利用可能なクラスやライブラリ、モジュール、APIなどで構成され、また、開発者がコードを記述して機能を追加、拡張するための方法や規約などが定められている。

ライブラリ:
ライブラリ（英: Library）は、汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたものである。ライブラリと呼ぶ時は、それ単体ではプログラムとして作動させることはできない実行ファイルではない場合がある。ライブラリは他のプログラムに何らかの機能を提供するコードの集まりと言うことができる。

React.jsは厳密にはライブラリ。jQueryもライブラリの一種。

フレームワークは全体の骨組み、ライブラリはコードの集まり、みたいなイメージ。

前者は全部入りの設計図、初めから骨組みが決まってる。(wordpressなんかは分かりやすいphpフレームワークの一種。index.phpがあって、mySQLがあって、、、骨組みが用意されている。)

後者は部品箱。便利な機能をまとめたもの。ある機能に特化した関数の集合。目的は、機能・知識の再利用。（例えば、jQueryの【$(".hoge").click(function(){】みたいなの。普通はたくさんコード書かないといけないのに、これだけ書けばライブラリ側の部品を呼び出してクリックしたイベントを呼び出せるようになっている。）

※言葉の意味も変わってきている & 人によって認識が違うので注意！

三大フレームワークについて

Angular.js
- google開発のフレームワーク
- 規模が大きい。開発メンバ多し、開発ルールを定めてしっかりやる大規模本格開発向き。
- フルスタックなのでライブラリを調べたり追加しなくても最初から機能全部入り、大抵のことは実現できる。部分的でなく全面的な導入が基本
- アプリケーション開発によく用いられる (SI開発寄り)
- バージョンアップが2年に一回の頻度であり、そのたびに記法が変わったりする。(AngularJS(無印)とAngular2以降はほぼ別物なので注意。現在はAngular6)
- 上述の理由から3年前の資料が使えなくなるので自分で調べられる技術者向け。個人でやる人も少ないから情報も少ない。
React.js
Vue.js
- 開発者はフリーのエンジニア発案。コミュニティベースで開発がされているフレームワーク(どちらかといえばライブラリ)
- エンジニア主体であることから、日本語ドキュメントも充実しており、情報多め。
- 一般的に、学習コストが少ないので、すぐ使い始めることができる。
- アンチReact。制限が多く固っ苦しいReactでやりにくいことを簡単にできる。
- とにかく自由。小規模導入から大規模導入までできる。でも基本は小規模なシステムに使われがち。

以上説明終わり。
適材適所なのでどれが悪いとかいうわけではないですが、ことweb制作会社という括りでいうと、
jsは部分的に使う程度ですので、今回はVue.jsをクローズアップしました。

■ 2.jQueryと比較してみる

みなさんおなじみのjQuery

jQuery は、DOM(※)セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱える。
(※「Document Object Model」の略。HTMLやXMLを扱うための仕組み、WEBページとJavaScriptなどのプログラミング言語とを繋ぐ)
更新のたびにセレクタから要素を探して操作をするため、複数のUIを連携させるようなページでは、同じデータを表示するはずの複数の要素がちゃんと同期していなかったり、全体の管理が大変になってくる。
シンプルなページにとっては低コストで導入できる＆理解者の多い便利なライブラリなので「そんな複雑な事はしていない」と現状つらい状況でなければ無理に変える必要はない。

Vue.jsでできること

こちらの記事が一番わかりやすかったので、こちらを参照
基礎から学ぶ Vue.js,通称"猫本"を書いてる人の記事

https://qiita.com/mio3io/items/e7b2596d06b8005e8e6f

公式　アニメーションコンポーネント

https://jp.vuejs.org/v2/guide/transitions.html

自作のアニメーション遷移を割と簡単に作れる

http://chibinowa.net/note/vuejs/vue-22.html

Vueの環境構築

大規模アプリケーションを構築するときには、NPMを利用したインストールを推奨しているが、
アニメーションを追加する程度の利用であれば、jQueryと同じようにCDN（インターネット上のファイルをインポートする仕組み）でも利用可能です↓
- jQuery : <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
- Vue.js : <script src="https://unpkg.com/vue"></script>

Vue.jsが流行ってる理由

上章のように、jqueryと同様で導入がとても簡単
ある特定のページだけVue.jsにしてみたり、jqueryと共存することも可能
学習コスト少ない
ReactとかAngularと違って小規模なアプリケーション/webアプリケーションで気軽に導入できる。
小規模な導入から始められて、機能追加していっても発展性がある。jQueryとかだと後々しんどくなってくる。
新しいのに、公式ドキュメントがとてもわかりやすい & Qiitaとか記事がたくさんある。

→ このちょうどいいバランスな気がする。

■ 3.やってみる

ファイル階層の一例

https://codesandbox.io/s/o29j95wx9

基礎編

https://jsfiddle.net/otktry/x3nj8ckL/9/

発展

https://jsfiddle.net/otktry/m5gudx0o/

アニメーション

https://jsfiddle.net/otktry/ptansdko/29/

■ 4.所感

私自身が学習してjqueryと比較した時の所感

コンポーネントがまとまっているのでとても可読性は良い。
HTML側のDOM操作とvue側の処理が分かれているのでHTMLの整合性とか気にしなくていい。
(※jQueryでは、表示されているデータの整合性や、HTML構造自体の整合性を、自分で管理する必要がある。
例えば、<ul>の中には<li>しか記述できないが、それをJavaScriptコードを記述する時点でかなり意識する必要がある。)
イベントコンポーネントは基本的にまとまっているので、複数のイベントの発火の順番とか気にしなくていい。

使い所

割とどこでも使える。
でも、単発のアニメーションとかはjQueryで十分(google先生からコピペしてすぐ使える・動くのはやっぱりjQuery)
Vueも他のフレームワークよりは日本語の情報多いけどjQueryには負ける。
すでにjQueryたっぷりで書かれているコードには導入できない。
複数の機能が重なってくる機能を新規で作成するとき、
例えば入力フォーム (inputを取得/バリデーションチェックして、表示する/ボタン押下で送信/削除ボタンで消去) なんかはjQueryでやるとちょっと大変。
また、一度完成した後にまた機能追加して複雑になっていくことが予想されるなら、Vueで作っちゃったほうがいいかも。
すでに落ちてる出来合いのアニメーションではなく、少し凝ったアニメーションをオリジナルで作成したい時なんかは導入してみたい。

以上です、ありがとうございました。