Vue.js
元GoogleのエンジニアEvan Youが、Google社発のAngular JSを元に開発したフレームワークです。
]Reactと同様にコンポーネント化が可能で、保守性の向上、再利用による工数削減が実現できます。公式のライブラリも充実しており、ライブラリ選択にあまり迷わないこともことも特徴です。さらに、jQueryのようにCDNで手軽に導入できるため、ランディングページに動的な処理を入れるような小規模開発のニーズにも対応できます。
Reactと異なる点は、HTMLをベースとしたテンプレートが使用されていること。HTML、CSS部分とJSのロジック部分を分離できるため、初めてJavaScriptのフレームワークに触れる方や、デザイナーの方でも理解しやすい構造です。
React
Meta社(旧Facebook社)が主に開発したUIライブラリです。Reactには、JSX記法(JavaScriptの中にHTMLタグを埋め込むような記述)を利用することで、レンダリングが想像しやすいという特徴が挙げられます。
また、ボタン、フォーム、見出しなどを、ページの構成要素をコンポーネントと呼ばれる部品として管理。部品化することで、保守性を高めています。サードパーティライブラリとして公開されているUIパーツの利用や再利用によって開発工数を抑えることができるのもReactならではです。
さらに、React Nativeを学ぶことで、iOS、Android両方に対応したアプリ開発も簡単になるでしょう。Typescriptベースのためコンパイル時にバグを発見しやすく、Facebookやinstagramなどにも使用されているように大規模な開発にも適しています。
jQueryとの違い
ReactとVue.jsという2つのモダンフレームワーク・ライブラリは、ともにhtml構造をコンポーネントと呼ばれる部品にあらかじめ定義し、仮想DOMにJavaScriptオブジェクトを生成した後、実際のDOMに反映するという仕組みを持っています。
jQueryは、実際のDOMを直接操作するため、複雑な処理が必要になった場合、実際にどのようなHTML構造になるのか、コード上でわかりづらいという問題がありました。一方モダンフレームワークは、ある状態に対して、あらかじめ用意したDOMを返すといった動作になるため、コード上でもDOMがわかりやすく、バグを発見することが簡単というメリットがあります。
また、仮想DOMから実際のDOMへの反映は差分だけを更新するため、複雑な操作であっても、短時間でページの更新が可能です。
以上のような特徴から、新規開発ではjQueryではなく、ReactVue.jsなどのモダンフレームワークが使用されることが多くなっています。
LIGHTBOX
The original lightbox script
http://lokeshdhakar.com/projects/lightbox2/
by Lokesh Dhakar