今からVue.jsをはじめたいという方へ、まずはVue.jsとは何か、Vue.jsの特徴などを本記事では紹介します。
Vue.jsの入門の第一歩として見ていただければと思います。
Vue.jsとは、JavaScriptのフレームワークです。
Vue.js以外のJavaScriptのフレームワークとして、以下代表的なフレームワークがあります。
- Angular
- React
- Vue.js
Vue.jsは他のフレームワーク(AngularやReactなど)と比べると見た目の部分に特化したフレームワークになります。
とくに導入は簡単で、例えばVue.jsをjQueryで管理していたアプリに導入したい場合、簡単に後乗せできます。
Vue.jsは部品化されたコンポーネントを組み合わせることでページを構成していきます。
Javaなどオブジェクト指向の言語の経験がある方は、同じような要領かと思うのである程度学ぶと使えるようになるのではないかと思います。
ちなみにReactも見た目の部分に特化していると感じますが、Vue.jsの方がより簡単に導入できるように思います。
また、Angularはなんでもできる高機能なフレームワークですが導入のハードルが高く、初期段階で学ぶことが多いことがあげられます。
なお、本記事ではVue.jsを取り上げておりますが開発規模ややりたいことを考え、どのフレームワークにするかを判断していただけると良いかと思います。
以下にVue.jsの特徴を記載します。
- 学習コストが低い
- 導入ハードルが低い
- コンポーネント(部品)単位で画面を構成できる
- ドキュメント、ライブラリが他のJavaScriptフレームワークに比べて充実している
⚫︎学習コストが低い
Vue.jsはHTMLベースのテンプレート構文を採用しています。
そのため、HTMLやJavaScriptを使用したことがある方はすぐに理解できるようになると思います。
⚫︎導入ハードルが低い
前述でもお話しさせていただいた通り、Vue.jsはHTMLベースのテンプレート構文を採用しています。
そのため、HTML, JavaScript, CSSを使用したWEBサイトと同じように導入可能であり、置換えも他のフレームワークより簡単にできると考えます。
⚫︎コンポーネント(部品)単位で画面を構成できる
Vue.jsは部品化されたコンポーネントを組み合わせることでページを構成できます。
そのため、ヘッダーとフッターは共通のコンポーネントを使用して、URL毎にメインの表示画面だけを変えるといったこともできます。
個人的に、Javaのオブジェクト指向と同じような感じで画面を作ることができると感じました。
⚫︎ドキュメント、ライブラリが他のJavaScriptフレームワークに比べて充実している
公式ドキュメントが充実しています。もちろん日本語です。
Vue.jsの現在の最新バージョンは3.xですが2.xの差分情報なども確認することができます。
手っ取り早くVue.jsを試してみたいという方は、ライブラリをインポートして実行環境を作ってみるのをおすすめします。
HTMLファイルに、「<script>ライブラリパス</script>」を挿入するだけでVue.jsが使えるようになります。
本格的にVue.jsでアプリを開発したいという方は、コマンドラインツールを利用して実行環境をつくることをおすすめします。
実行環境構築後は、追加設定など不要で単一ファイルコンポーネント(HTML, JavaScript, CSSを同じ1ファイルに記載する)も使用可能です。