【初心者向け】Vue.jsハンズオン!さわりながら特徴と基本を解説

2022.06.26
WEB開発ナレッジ
安藤 大海
目次

はじめに

こんにちは。
Webディレクターの安藤です。

以前にモダンなweb技術の解説記事として、React・Angular・Vueの概要を紹介しました。

今回は、弊社の開発でもよく用いられるVueについてもう少し詳しく解説しようと思います。
実際に体験しながらのほうがより理解がしやすいと思うので、今回は簡単なハンズオンも説明していきます!
いままでjQueryくらいしか触ったことがないデザイナー、コーダーの方でも大丈夫です。
この記事を読めば、Vue.jsがわからず従来通りのwebを運用してきた方も、その魅力から導入を検討したくなるかもしれません!(笑)

ぜひこの機会にチェックしてみてください。

まずVue.jsとは?

まず大前提としてVue.jsとは、というところからご説明します。

段階的な適用が可能なフレームワークなので、導入がしやすい

Vue.jsは、段階的に少しずつ適用可能なフレームワークという特徴を持っています。

そのため既存のWebアプリケーションの一部として導入することも可能ですし、適用規模が大きくなってもツールやライブラリを導入することで幅広い開発に対応ができる柔軟性があります。

直感的なマークアップで学習コストが低い

Vue.jsは、基本的にはHTMLを拡張したテンプレートと、Javascriptのコードから構成されます。
そのため、HTMLとJavascriptに馴染みがあれば、基本的な使い方は理解しやすいです。

他のフレームワークではBabelやWebpackといったツールの使用を前提としていることもあり、前提知識がないと学習が困難なこともありますが、Vue.jsにはそれらが不要なので、学習が手軽にはじめられます。

また、Vue.jsではSFC(単一コンポーネント)という特徴を持っています。
1つのファイルでコンポーネントごとに HTML/CSS/JavaScriptの記述がまとまっているため、関係性がつかみやすくなっています。

データバインディングで開発の負担軽減

データバインディングとは、Vue.jsで記述したデータとHTML側にあるデータ反映対象に対して、片方が変更されたらそれをもう片方に自動反映する仕組みのことをいいます。

Vue.jsでは、DOM(=JavascriptでHTML・CSSを操作する仕組み)とJavascriptのデータが、データバインディングによって同期しています。

従来のjavascriptでは、データの書き換えを行う際には、
①該当するhtml要素の取得
②変更する内容を定義
③変更した内容を該当のhtml要素と関連付けし、反映
という3ステップの記述をする必要がありました。

しかしVue.jsでは記述を簡略化し、データの反映が自動で行われるのでソースコードの管理や開発の負担が軽減できます。

仮想DOMにより、差分のみをレンダリングするから高速

仮想DOMとレンダリングは少し専門的な単語なので、これだけだとよくわからないかもしれません。
まずレンダリングは、webコンテンツをブラウザに表示することです。

そして、さっきちらっと”DOM”という単語がでてきましたね。
これはJavascriptでHTML・CSSの状態を操作する仕組みのことでした。
もう少し具体的にいうと、DOMは以下のような動きをしています。

1. HTMLドキュメントを解析
2. HTMLドキュメントをツリー構造化(=レンダリングツリー)
3. レンダリングツリーをもとに実際の位置やサイズの情報を加える
4. 画面に描画(=レンダリング)

仮想DOMは、《DOMをJavascriptの要素として扱い、管理するもの》です。
よってDOMとは違い、実際に描画まではしません。

Vue.jsでは変更前・変更後の2つの仮想DOMを用意して比較します。そして変更した差分のみを実際のDOMに渡して反映します。
そのため、レンダリングは差分のみで済むのでパフォーマンスが向上、高速化することができるというわけです。

SPA開発ができる

仮想DOMを駆使することで、SPA(=シングル・ページ・アプリケーション)開発が可能です。

シングル・ページ・アプリケーションとは、同じURLのままで、他のページに遷移しているような画面表示を提供する技術です。

従来はコンテンツを切り替える際に都度サーバーがHTMLをブラウザに返していましたが、SPAの場合は初回のページ表示地のみで、以降のコンテンツの切り替えは、仮想DOMを駆使することで、差分のデータだけを反映します。

コンポーネント指向により、再利用性、開発効率を高める

Vue.jsでは、HTMLの型、つまりテンプレートをあらかじめ作成しておき、それを何回でも使い回すことができるコンポーネント指向があります。

従来では、同じようなパーツを複数のページに実装する場合、同じ内容を何度も書くことがありましたが、既存のコンポーネントを使い回すことで、再利用性、開発効率を高めることができます。

Vue.jsをさわってみる

必要なもの

● Visual Studio Code Visual Studio Code – コード エディター | Microsoft Azure
● Chrome Google Chrome – Google の高速で安全なブラウザをダウンロード
● Chromeアドオン – Vue.js Devtools Vue.js devtools – Chrome ウェブストア
● Vue.jsの読み込み(CDN利用)

Vue.jsの基本

VueクラスとVueインスタンス

Vue.jsのアプリケーションは、VueクラスとVueインスタンスの2つで成り立っています。
あまり聞き馴染みのない言葉かもしれませんね。
それぞれどういったものかを説明します。

● Vueクラス=どのようなデータや、データの処理・操作を実行するか(=メソッド)を定義したもの。
● Vueインスタンス=Vueクラスを実行し、生成した結果(=オブジェクト)。

では早速コードをさわってみましょう。
Vue.jsの公式ガイドから引用してきました。
ブラウザに”Hello Vue!”という文字列を表示する、というものです。

はじめに — Vue.js

以下のようにファイルを準備してください。
index.html
script/
script.js

それぞれに記述する内容は以下になります。

index.html

<div id="app">{{ message }}</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="./script/script.js"></script>

Script/script.js

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

このように表示されればokです。

Scriptの記述を解説していきます。

var app = new Vue({
…
})

ここではappと命名したスクリプトは、Vueを実行することを宣言しています。
new Vue({…})というVueクラスなかに、使用するデータや処理内容(メソッド)を定義します。

el: '#app',

左側の文字列をプロパティ、右側の文字列を値と呼びます。
elプロパティは、右に記述した要素が《Vue.jsが動作する範囲であること》を表します。
この場合、htmlからappと命名されたIDを探し、そのなかでVue.jsを動かすこと表しています。

data: {
...
}

dataプロパティはVue.jsで扱うデータを記述します。

message: 'Hello Vue!'

messageという変数に、”Hello Vue!”という文字列を値として定義しています。

これを実行=インスタンス化すると、htmlで{{ message }}と記述した箇所には、”Hello Vue!”という文字列が入った結果=Vueインスタンスを得ることができます。

Vueクラスの代表的なプロパティ

Vueクラスは非常に多くの機能やプロパティを含んでいます。
代表的なところでいうと、下記のようなものがあります。

el
Vueインスタンスが動作する範囲を指定。

data
Vue.jsで扱うデータを入れておく場所。このデータをHTMLから取得し、画面に表示することができる。またデータが変更されると、その変更内容が即時に画面に反映される。

methods
Vue内で扱える、データの処理・操作内容(=メソッド)を定義する場所。

computed
データに処理を加えて実行結果を返す命令文(=算出プロパティとよばれる関数)を定義する場所。

template
Vueを実行した際に出力される、htmlの型(=テンプレート)を記述。

components
あらかじめ別途定義した部品(=コンポーネント)を呼び出して、htmlの型(=テンプレート)として扱えるようにする。

さわってデータバインディングを理解する

実際のコードで、先程説明したデータバインディングを体感してみましょう。

Chromeのデベロッパーツールを開いて、「コンソール」タブを選択し、下記のコードを入力します。

 app.message = 'Goodbye!'

すると、ブラウザに表示される文字列が”Goodbye!”に更新されます。

従来のJavascriptでは、html要素の取得→変更内容を定義→html要素と変更内容を関連付けし、反映という3段階のコード記述が必要だったことが、このようにVue.jsでは簡略化できます。

表示したいデータが大量になると、データを反映する処理も複雑になりますから、これが簡略化して反映が自動で行われるのは非常に便利ですよね。

まとめ

今回は、Vue.jsの魅力や簡単な動作についてハンズオンでご紹介しましたが、いかがでしたでしょうか。
Wakka Inc.はWeb・アプリ・業務系のシステムのラボ型開発が得意な会社です。今回ご紹介したVue.jsを活用したシステム開発の実績も多数ございます。

UI・UXにこだわりながら開発したい、フロントエンドからサーバーサイドまで対応できる会社を探している、DXや新規事業で伴奏してくれる開発パートナーが欲しい等のニーズがございましたら、お力になれるかと思いますので、まずはお気軽にお問合せください。

弊社の事例・ノウハウについて詳しく知りたい方は「資料ダウンロード・ウェビナー一覧」もぜひご覧ください。

この記事を書いた人
安藤 大海

学生時代にWebサイトを自作したことがきっかけでWebの世界に。制作会社でデザイン、WordPressテーマ開発の実務を経て、テクニカル・ディレクターとして大規模サイト構築のディレクションを経験。2021年からWakka Inc.の日本拠点でWebディレクターとして参画。最近はブロックエディタになったWordPressをもう一度、勉強しています。

  • ホーム
  • ブログ
  • 【初心者向け】Vue.jsハンズオン!さわりながら特徴と基本を解説
Contacts

Wakkaについて詳しく知りたい方はこちら