Vue.jsの基礎を学ぶ

Vue.jsとは？

Vue.jsは、一言でいえばJavaScriptのフレームワークです。

少し細かく言うと、ユーザーが見る画面（ユーザーインターフェイス）を構築するために使うフレームワークです。

フレームワークとはある一定のルールを決めることで開発を容易にするプログラムを指します。

つまり、Vue.jsとは、ウェブサービスの画面（ユーザーインターフェイス）を構築するためのJavaScriptフレームワークを指します。

そして、誰でも利用することができます。（オープンソース）。

Vue.jsの代表的な特徴も述べておきましょう。

パソコンに画面を表示させる時はHTMLで記述します。

Vue.jsではこの画面で表示させる部分をテンプレートと呼びます。

Vue.jsのテンプレートはただのHTMLではなく、Vue特有の書き方をすることでテンプレートをデータやロジックと結び付けることできます。

つまり、テンプレートで表示している文字や数字は、データを変えることで連動して表示を変えることができます。

そして逆に、テンプレートで文字を入力すればデータが変更されます。

これを「データバインディング」と言い、Vue.jsの優れた機能の一つです。

Vue.jsのコンポーネント機能を使えば、HTML CSS Javascriptを一つのファイルにまとめることができます。

普通は、HTMLはhtmlファイルに、CSSはCSSファイルに、JavascriptはJavascriptファイルと別にします。

ところが、Vue.jsには「.vue」という拡張子ファイルにすればHTML CSS Javascritp 全てを一つにまとめられます。

これを単一ファイルコンポーネントと呼びます。

コンポーネント機能を使えば、プロジェクトが大きくなってもコンポーネント単位でプロジェクトを管理できます。

リアクティブ機能は、データが更新されたらリアルタイムに表示も変更される機能を指します。

テンプレート機能でも述べましたが、Vue.jsだとデータが変更されると描画( View )も更新されます。

Vue の最大の特徴の1つは、控えめなリアクティブシステムです。モデルは単なるプレーンな JavaScript オブジェクトです。それらを変更するとビューが更新されます。

この他にもまだまだ便利な機能がありますが、あとは実際に学習して実感していただく方が早いでしょう。

まず前提に、Vue.jsの学習を始める前に、「HTML」「CSS」「JavaScript」の事前の学習が必要です。

Vue.jsは「JavaScript」を元に開発されているフレームワークです。

そのため、「HTML」「CSS」「Javascript」の基礎知識がないとVue.jsの独特なコードのルールとJavaScriptのルールの区別がつかず上手く学習が進みません。

まだJavaScriptの学習をしていない方は、ドットインストールやプロゲートで学習しましょう。

Vue.jsは、日本語の公式ドキュメントが優秀です。

これからVue.jsを学習する際、公式ドキュメントは何度も読み返すでしょう。

また、ある程度の経験と知識が身に付けば、調べたいことは公式ドキュメントで探すことができます。

ただし、全くの初心者の段階だと公式ドキュメントは少し不親切です。

そのため、書籍と一緒に学習をしましょう。

公式ドキュメントと一緒に勉強するならこの本が一番です。

Vue.jsの知識が網羅されています。

ただ、今はVue.jsの本も充実してきているので、自分のレベルに合った本を探すと良いでしょう。