Vue.js入門講座（初心者向け） UIを構築しよう

Vue.jsとは、ユーザーインターフェース（UI）を構築するためのJavaScriptのフレームワークです。つまりフロントエンドのためのツールとなります。フレームワークとは簡単に言うと、開発を効率的に行なうことのできる機能を備えた枠組みのようなものです。JavaScriptのフレームワークは他にもいくつか用意されていますが、Vue.jsはその中でも構造がシンプルな故に比較的学習コストの低いフレームワークと言えます。但し、Vue.jsはJavaScriptのフレームワークである為、ある程度のHTML、CSS、JavaScriptの知識が必要となります。学習がまだの方はそれぞれの入門ページへ進んでみましょう。

Vue.jsとは
【入門講座】Vue.jsの開発環境を整えよう
【入門講座】Vue.jsでできる事
Vue.js入門の問題集をやってみよう
まとめ

Vue.jsとは

Vue.jsとはユーザーインターフェースを構築するためのJavaScriptのフレームワークです。また冒頭で述べた通り、SPAの開発に向いています。SPAの特徴は都度読み込みを行なうHTTP通信ではなく、部分的な更新ができる非同期通信を使っているところです。

JavaScriptの基礎を学びたい方は、忍者コードのJavaScript入門講座をご覧ください！

非同期通信とは、受信者と送信者がそれぞれ都合の良いタイミングで通信を行なうことの出来る通信方式です。つまりリクエストを送った時にレスポンスを待たずに更新することができます。代表的なものにLINEやGoogleマップなどが挙げられます。

Vue.jsはルーティングという機能を使い、ページ遷移をしているかのように見せることができるので、SPA（単一のHTMLページで構成されるWebアプリケーション）に向いていると言えます。

Vue.jsの特徴

アプリケーションの構造には、「Model」「View」「Controller」の3つの機能で分割したMVCモデルというものがあります。RubyのフレームワークであるRuby on RailsやPHPのフレームワークLaravelなどでもこのMVCに基づいて構成されます。

対してVue.jsはこのモデルの「View」を得意とするフレームワークのため、MVCモデルから派生したMVVMモデルを採用しています。MVVCは「Model」「View」「ViewModel」の3つの機能で設計されています。

また、Vue.jsのコンセプトの1つにコンポーネントシステムというものがあります。これは、構成要素や部品といった意味がありますが、Vue.jsではユーザーインターフェースのそれぞれの要素をコンポーネントという単位で作成し、それを組み合わせることでアプリケーションを構築していきます。このような特徴からVue.jsは「コンポーネント思考」と呼ばれ、幅広い規模のアプリケーション開発が可能となっています。

コンポーネント思考やその他Vue.jsの特徴についてはVue.js公式サイトのガイドで詳しく説明されているので確認してみましょう。

Vue.js公式サイト/ガイド

Vue.jsの長所

Vue.jsの構文はシンプルな上、直感的にコードを書くことができます。JavaScriptをある程度操作できる状態であれば、簡単に利用することができます。

Vue.jsは数あるフレームワークの中でも比較的学習コストが低いと言われています。フレームワークは専用の記法をたくさん覚えなければいけないことが多いですが、Vue.jsはシンプルに設計されている為、他フレームワークに比べて覚えやすいです。

また、CDNを使って読み込ませることも可能なので、導入も簡単に行うことができます。Vue.jsの長所には拡張性の高さも挙げられます。必要に応じてプラグインを追加することで機能を拡張することができます。

＼Vueについてもっと詳しく知りたい方必見！／

これからVueを学ぶ方には、Web制作コースの独学プランがおすすめです!

WEB制作コースの詳細はこちら

【入門講座】Vue.jsの開発環境を整えよう

Vue.jsを使ってWebアプリケーションを開発するにはまず、環境構築が必要になります。インストール方法にはCDNを使った方法やvue-cliというものを使った方法がありますが、今回はvue-cliを使って環境構築を行ないます。環境構築と聞くと少し面倒なイメージがあると思いますが、Vue.jsのインストールはそこまで難しくないので安心してください。インストールが済んだらVue.jsを起動させてみましょう。

node.jsのインストール

node.jsを使うわけではありませんが、node.jsに含まれる「npm（Node Package Manager）」というパッケージ管理ツールを使用します。npmはnode.jsをインストールすると自動的にインストールされます。

因みにnode.jsはサーバーサイドのJavaScriptフレームワークです。Node.jsの公式サイトからインストールしましょう。

インストールが終わったらCLIで「node --version」を実行してインストールが出来ているか確認しておきましょう。「Node.js v12.19.0」のようにバージョンが表示されていればちゃんとインストールができています。

npmを使ってVue.jsをインストールしよう

Vue.jsをインストールするにはnode.jsと同時にインストールされるnpmを使用します。今回はVue.js-cliを使ってインストールします。Macであればターミナル、Windowsであればコマンドプロンプトでコマンドを打ってインストールします。インストールができたらCLIで「npm install -g @vue/cli」コマンドを実行してVue.jsをインストールしましょう。

インストールが終わったら「vue.js --version」コマンドを打って確実にインストールができているかを確認しておきましょう。

＼Vueについてもっと詳しく知りたい方必見！／

これからVueを学ぶ方には、Web制作コースの独学プランがおすすめです!

WEB制作コースの詳細はこちら

【入門講座】Vue.jsでできる事

Vue.jsは、できることがいくつかありますが、ここでは代表的な2つを紹介します。Vue.jsを使って何ができるのかを知っていることで、使いどころが分かり、Vue.jsのパフォーマンスを十分に引き出すことができます。

データを同期することができる

Vue.jsでは、データが変化すると、変化した内容が即座にDOMに反映されます。エクセルの関数式のような仕組みです。Vue.jsが持つこのような仕組みを「リアクティブシステム」と言います。

「リアクティブシステム」はどちらか片方のデータが更新されると、もう片方も更新される仕組みです。また、JavaScriptのデータをDOMと結びつけることを「データバインディング」と言います。データバインディングされた状態でJavaScriptのデータを更新することによって、HTMLのDOM要素に表示されるデータが自動的に更新されます。このようにVue.jsでデータを同期させるには、HTMLの要素に「v-」で始まる属性を与えてあげる必要があります。このVue.js特有の属性のことを「ディレクティブ」と言います。

ディレクティブには、「v-bind」や「v-model」などがあります。このリアクティブシステムをjQueryや生のJavaScriptで書こうとすると、複雑で冗長なコードになってしまいます。コードを簡潔に書くことができる点もVue.jsの長所と言えます。

再利用できるコンポーネント

コンポーネントとは前述でもあった通り「部品」という意味を持ち、Vue.jsではそれだけで完結するプログラムごとに分けた小さな部品のことを言います。全てを一から開発するとなると膨大な時間がかかってしまいますが、仕上がった小さなプログラムを組み合わせていく方法であればトータルで掛かる時間や労力を大幅に減らすことができます。このような方法でアプリケーションを構築していく概念のことを「コンポーネントシステム」と言います。

Vue.jsの無料問題集をやってみよう

ここまでの解説でザックリVue.jsについて知識を得られていれば、早速問題集に挑戦してみましょう。実践的にコードを書きながら挙動を確認することが最も重要です。分からない部分が必ず出てくると思いますので、その都度ググって問題をクリアしていきましょう。

VueVue.js入門講座（9問）

まとめ

こちらではVue.jsがどのようなフレームワークなのか、どのような特徴があるのかを解説してきました。文中でも書いた通りVue.jsは学習コストが低い上、できることが多いフレームワークです。昨今ではそのような特徴から非常に人気があるフレームワークです。初級問題ができたら次は中級、上級問題集にも挑戦してVue.jsを習得していきましょう。

プログラミング入門講座へ戻る