ここでは、Vue.jsを始める前に知っておきたい情報などをまとめています。
これからVue.jsを入門しようと思っている方や、導入を検討されている方の参考になれば幸いです。
目次
Vue.jsとは
Vue.jsは、Webアプリケーションのユーザーインターフェース（UI）を構築するために利用できるJavaScriptのフレームワークです。
Vue.jsは、他の主要なフレームワークと同様に、オープンソースで開発が行われています。
フレームワークはアプリケーションの開発を効率化するために用意された枠組みで、ルールや決まりごとが決められています。
フレームワークには、アプリケーションの開発を行っているとよく遭遇する問題に対するイディオム（定石）、設計、開発でよく利用されるコード（方法）を「再利用可能なクラス」の集まりとしてまとめられています。
フレームワークが再利用可能なクラスとしてあらかじめ用意してくれているので、アプリケーションの開発者は、フレームワークが提供する枠組みに従って、開発するアプリケーションの固有の処理（コード）を加えていくことで、一定の品質を保ったアプリケーションを開発（実装）することができます。
フレームワークを使用することで、アプリケーション開発中に起こる「同じ処理、または少ずつ違うが同じような処理」により、似たようなコードが散乱することを、ある程度防ぐことができます。
フレームワークはjQueryなどのライブラリでは解決できなかった問題も解決してくれます。
主なJavaScriptフレームワーク
Vue.js
Evan You氏によって開発されているビュー（View）に特化したシンプルなフレームワークで、インタラクティブなユーザインタフェースを構築するために必要な機能を提供してくれます。
Vue.jsは、導入のハードル・学習コストが低く、使い始めるのも簡単で、他のライブラリや既存のプロジェクトに統合するすることも簡単にできます。
【参考URL】
https://jp.vuejs.org/
https://v3.ja.vuejs.org/
Angular
Googleを中心に開発されている「フルスタックフレームワーク」です。
フルスタックフレームワークとは、あらゆる（または数多くの）ニーズに対応できるように、多くの機能が用意されたフレームワークです。
Angularは、ビューからサービスまで幅広くサポートされた高機能なフレームワークですが、フルスタックであるために、使用するにあたって学習すべきことが数多くあり、導入のハードルが高くなっています。
【参考URL】
https://angular.jp/
React
Facebookが開発したフレームワーク、Vue.jsと同様にインタラクティブなユーザインタフェースを構築するために必要なビューの機能を提供してくれるフレームワークです。
Angularのようにフルスタックフレームワークではないため、導入のハードル・学習コストは比較的低くなっています。
【参考URL】
https://ja.reactjs.org/
Vue.jsの特徴
Vue.jsは、どのような規模や段階のプロジェクト、アプリケーションにも対応できるプログレッシブフレームワークです。
他の一般的なフレームワークとは異なり、Vue.jsは段階的に適用できるように設計されています。
段階的に少しずつ適用可能なフレームワークであるため、アプリケーションの成長に合わせて必要な機能を追加していくことができます。
プログレッシブフレームワークとは
「フレームワークはどんな時にでも、どんな規模でも、段階的に柔軟に使えるべきである」
という作者のEvan You氏が提唱した考え方のもとで開発が進められているフレームワークです。
Vue.jsはプログレッシブフレームワークであるため、幅広い規模の開発に対応できる柔軟性（スケーラビリティ）を備えています。
Vue.jsは主にビューを取り扱うシンプルなフレームワークです。
ユーザーに表示されるWebページの内容（画面）を自在に処理できるjQueryのようなライブラリとしての側面もあります。
コアとなるライブラリはビュー層にのみ焦点を当てているため、他のライブラリや既存のプロジェクトにも簡単に統合できます。
最新のツールやサポートライブラリと併用すれば、高機能なシングルページアプリケーション（SPA）も構築できるようになります。
Vue.jsはVue本体だけではなく、関連するライブラリもVue.js公式プロジェクトとして開発、管理されています。
Vue本体に加えて、いくつかのライブラリを組み合わせることで、総合的なフレームワークのように扱うこともできるようになっています。
Vue.jsは設計の特徴（デザイン）としてMVVMパターンに影響を受けています。
導入ハードルの低さ
Vue.jsではHTMLベースのテンプレート構文を採用しています。
HTMLとJavaScript（jQueryを含む）にある程度触れたことがあるユーザー（開発者）であれば、Vue.jsの使い方が理解しやすいように設計されています。
Babelやwebpackなどのツールを必須としないため、JavaScriptのファイル（vue.js）をインポートすれば、すぐに実行が可能になっています。（jQueryなどの既存のライブラリと同様に使い始めることができます。）
学習コストの低さ
Vue.jsはシンプルなAPIを提供しています。
UIの構築にはHTMLベースの比較的簡単なテンプレートを利用します。
Vue.jsを利用するユーザー（開発者）にとって、書き方や使い方が想像しやすいライブラリです。すでにHTMLやJavaScriptを多少触っていれば、Vue.js固有の知識がほとんどなくてもすぐに利用することができます。
Vue.jsはライブラリ単体も使いやすいですが、関連ライブラリやツールなど、すべての工程でわかりやすく使いやすくなるように工夫がされています。
初歩的な利用にあたっては、ビルドツールやパッケージ、ECMAScript2015（ES2015）移行の知識は必要はなく、すぐに動作するアプリケーションを実装することができます。
インストールなど実際に使い始めるまでの手間もほとんどありません。
APIなどの文法そのものも簡単に設計されていますが、開発環境整備のしやすさや事前知識の必要性の薄さなど、現在の高度化したフロントエンド開発を行うための機能がほぼそろっています。
開発環境構築が容易ですぐ始められ、事前にJavaScriptへの深い知識もそれほど必要とせず、ライブラリ固有の難しい決まり事を知らなくてもすぐ使えるようになっています。
このため、一部の開発者にとっては難しいと敬遠されることがあった最先端のフロントエンド開発が、抵抗感なくスムーズに始められます。
Vue.jsのコミュニティーの活動は活発に行われています。
ドキュメントサイト（V2、V3）には、「ガイド」「スタイルガイド」「クックブック」「例」などが整理されて用意してあります。
日本語ドキュメントが整備されており、内容も充実しているため、日本人のユーザー（開発者）にとっても学習コストが低くなっているのがうれしいところです。
プログラミング入門によくあるHello Worldの例
最後に初歩的なプログラミング入門書などでは定番となっている「Hello world」のVue.jsでのプログラミング例を掲載しておきます。
HTML
Hello worldのHTMLは以下のようになります。
|
1 2 3 |
<div id="app"> {{message}} </div> |
「{{message}}」の部分にメッセージ（文字列）が表示されます。
JavaScript
Hello worldのJavaScriptは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// V2 new Vue({ el: '#app', data: { message: 'Hello World!' }, }) // V3 Vue.createApp({ data: function() { return { message: 'Hello World!' } }, }).mount('#app') |
「message」が表示するメッセージ（文字列）です。
HTMLとJavaScriptを数行書くだけでHello worldを作成できます。
Vue.jsは、導入のしやすさと学習のしやすさが魅力の、素晴らしいJavaScriptフレームワーク（ライブラリー）です。
これからフロントエンド開発を始めようという方には、ぜひとも触れてもらいたいフレームワークとなっています。
