かとのぼのマイコード・マイライフ

プログラミング初心者とアプリの個人開発者向けのブログ。たまに銭湯

Vue.jsを始める【JavaScriptフレームワークでプログラミング開発】

この記事をシェアする

Vue.js

Vue.jsを始めたい初心者向けに、Vue.jsとは何かの説明とVue.jsの特徴と使うメリット、その学習方法について解説しています。

Vue.jsとは?

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

wikiの説明では以下のようにされています。

Vue.js(ヴュージェイエス)、またはVueは、Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースのJavaScriptフレームワークである。他のJavaScriptライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。一方で高機能なシングルページアプリケーション(SPA)を構築することも可能である。

Vue.js - Wikipedia

読み方は「ヴュージェイエス」です。

Vue.jsは、誰でも使えるオープンソースです。

そして、ユーザーが見る画面側(ユーザーインターフェイス)を構築するために使うフレームワークです。

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

プログラミングでは、使いたい機能はある程度共通します。そういったいつも使うであろう機能を簡単に利用できるようにしたのがフレームワークです。

フレームワークの参考はこちら: 

www.katonobo.com

つまりVue,jsはJavaScriptというプログラミング言語を便利に使うために開発されたフレームワークだということです。

(もしJavaScriptを知らない方はこちらの記事を参考にしてください。)

www.katonobo.com

Vue.jsの公式サイトはこちらです。

Vue.js

Vue.jsの特徴

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だとデータが変更されると描画( View )も更新されます。

リアクティブの探求 — Vue.js

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

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

Vue.jsの学習方法

Vue.jsの学習方法ですが、まず前提に、HTMLとCSSとJavascriptの学習経験が必要です。

なぜなら、最初に説明したように、Vue.jsはJavascriptのフレームワークです。

そのため、基礎知識がないとVue.jsの独特なコードのルールとJavascriptのルールの区別がつかず学習効率が下がるからです。

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

Vue.jsが学べる書籍

Vue.jsはフレームワークなのでお約束ごと(ルール)がそれなりにあります。

そのルールを学習する場合、最初は体系的にまとまった知識に当たった方が良いです。

体系だった知識を得るには書籍や動画が一番です。

購入するべき書籍は「基礎から学ぶ Vue.js」です。

基礎から学ぶ Vue.js

この本はVue.jsの知識が網羅されていて、一通り学習した後は辞書のように使えます。かなり細かいところまで言及されているので、この本を使って学習するときは、まずは全てを完全に理解しようとせず、概要を掴むイメージでやりましょう。

Vue.jsが学べる動画

f:id:katonobo:20190828090432p:plain 

Vue JS入門決定版!jQueryを使わないWeb開発

動画で学習したい方はこちらのコースがおすすめです。

Udemyの講義は英語がほとんどですが、このコースは日本語なので安心です。

ちなみに平常時はUdemyのコースの料金は高いです。

ただ、Udemyはすぐにセールを行います。そうすると普通の技術書よりも安い値段になります!(1,200円とか)。

ですのでセールの時に買いましょう。

Vue.jsの便利さを体験しよう

Vue.jsは一度覚えると、Vue.jsを使わない開発と比べてかなり楽になります。

それはコンポーネント化やリアクティブ機能などがあるからです。

ぜひ Vue.jsを学習し、その便利さを体験してみてください。

実際のVue.jsを使ったプロジェクトを作成してみたい場合はこちらの記事をどうぞ

www.katonobo.com

 

最後に、個人的に、初心者向けのVueのサンプルコード集サイトも作っているのでそちらも参考にしてください。

code.ameneko.com

関連記事:

www.katonobo.com