見出し画像

(1) Vue.jsの概要・機能・メリット - デザイナー向けのVue.js紹介

noonworks

「HTML/CSSはわかるけれど、JavaScriptは少し読んだことがあるくらい」というデザイナー向けの、Vue.js紹介記事です。
この記事では、Vue.jsの概要・機能・メリットの解説をします。
連載をまとめたマガジンはこちら↓

Vue.jsとは？

Vue.js公式サイトの「はじめに」のページにリンクされている動画が非常にわかりやすいです。プログラミングの専門用語を含んだ英語の動画なので、抄訳しつつ用語を言い直して説明します。

ここ10年でWebページはダイナミックになり、ブラウザでJavaScriptコードがたくさん動くようになって、開発や管理が大変になった。
その問題を解決するために、ユーザーインターフェイス用のフレームワークが用いられるようになった。Vue（ビュー）もそのひとつ。

フレームワークとはプログラムの一種で、便利な機能をまとめたものです。VueはUIを構築するための便利な機能がまとまったツールであるというような理解で問題ありません。

Vueは既存のWebページの一部だけに適用させることができる。もちろん、サイト全体をVueと関連ツールで構築することもできる。

ここは重要です。Webサイト全体ではなく一部だけに適用して使えるということは、お試しで使い始めるのも簡単ということになりますね。

VueはWebページを再利用可能なコンポーネントに分割できる。
Vueはリアクティブであり、自動でデータの変更を検知し、画面表示を更新してくれる。

そしてこの「再利用可能なコンポーネントへの分割」と「リアクティブ」こそが、Vue（をはじめとしたUI用フレームワーク）の目玉機能です。
ここは少し難しいので、もう少し詳しく解説します。

再利用可能なコンポーネントへの分割

コンポーネントは「構成要素」という意味の英語で、要するに部品です。Webページの部品といえば、HTMLのタグですね。HTMLには<div>や<h1>や<a>など様々な部品があります。

しかし、実際にWebサイトを作成する際は、HTMLタグそのものよりも大きなまとまりでデザインを考えます。

例として、画像のような「ブログ記事の要約を表示する、カード型の記事アイテム」部品を考えてみましょう。

画像1

HTMLとCSSを使う場合、以下のように記述します。

<div class="article-card">
 <div class="article-card-image">
   <img src="/images/articleXXX.png" />
 </div>
 <div class="article-card-body">
   <div class="article-card-content">
     <h3 class="article-card-title">記事タイトル</h3>
     <p class="article-card-summary">記事の要約</p>
   </div>
   <div class="article-card-controls">
     <a class="button" href="/articleXXX">続きを読む</a>
     <a class="button-star">お気に入り</a>
   </div>
 </div>
</div>

「再利用可能なコンポーネントへの分割」とは、この「カード型の記事アイテム」部品を<ArticleCard>という独自のタグにすることです。

<ArticleCard>という独自タグを使える場合、例えば以下のように記述できます。

<ArticleCard
  title="記事タイトル"
  summary="記事の要約"
  url="/articleXXX"
  image-url="/images/articleXXX.png"
/>

この方法だと、以下のようなメリットがあります。

コードが簡潔になる。
<div class="article-card">より<ArticleCard>の方が短く、入れ子も浅くなります。デザインの都合などでwrapperのdivを複数使っているような部品ではより効果的です。

変更に強くなる。
タイトルを<h3>から<h4>に変更したくなった場合でも、ArticleCardのファイルだけを修正すればOKです。<ArticleCard>タグを使っている側のファイルを気にする必要はありません。

スタイルを閉じ込められる。
CSSだけでスタイルを定義する場合、他と重複しないように命名規則を工夫した長いクラス名をつける必要があります。
Vueのコンポーネントの場合、そのコンポーネントにだけ適用されるCSSを書けるので、他とのクラス名重複を気にする必要がありません。（それに加えて、全体で共通のCSSも使えます。）

機能を閉じ込められる。（プログラマー向け）
これはプログラマー向けのメリットになりますが、スタイルを閉じ込めるのと同様に、機能を閉じ込めることもできます。機能とは「この部品をクリックしたときに何かをする」「ドラッグ＆ドロップで並べ替えられるようにする」というような、JavaScriptで実装するイベントなどを指します。

リアクティブ

これは主にプログラマー向けの機能なので、ごく簡単に説明します。

HTML画面上のデータを書き換える機能を作るためには、通常は「データの変更を検知する処理」と「表示を更新する処理」をプログラマーが作成します。その処理を、データが関係する部品すべてに実装しなくてはいけません。

一方、Vueなどのフレームワークには、データの変更を検知する処理と表示を更新する処理が最初から組み込まれています。そのため、プログラマーは「このデータをこの部品に紐付ける」という情報を登録するだけでよく、手間やミスを減らすことができます。

「リアクティブ」とは英語で「反応的」というような意味で、「データが更新されると反応して自動で画面表示が更新される」イメージでこう呼ばれています。

Vueならではのメリット

ここまで説明した「再利用可能なコンポーネントへの分割」と「リアクティブ」は、Vueだけに限った機能ではありません。他の「フロントエンドフレームワーク」と呼ばれるフレームワークでもだいたい同じ機能があります。（最も有名なのはReactでしょう。）

Vueならではのメリットとしては、記述方法が通常のHTMLに近いという点があります。私が他のフレームワークではなくVueを選択したのは、この点が決め手でした。

Vueのコンポーネント（＝部品、独自タグ）は以下のようなファイルひとつで完結します。
（詳細は今後の記事で説明するので、今は雰囲気だけ掴んでください。）

<template>
 <div :class="$style.container">
   <div v-if="hasImage" :class="$style.image">
     <img :src="imageUrl">
   </div>
   <div :class="$style.body">
     <div :class="$style.content">
       <h3>{{ title }}</h3>
       <p>{{ summary }}</p>
     </div>
     <div :class="$style.controls">
       <a :class="$style.button" :href="url" target="_blank">続きを読む</a>
       <a :class="$style.star">お気に入り</a>
     </div>
   </div>
 </div>
</template>

<style module>
.container {
 /* ... */
}
.image {
 /* ... */
}
</style>

<script>
module.exports = {
 props: {
   title: String,
   summary: String,
   url: String,
   imageUrl: String
 }
 /* ... */
}
</script>

このファイルはパッと見、HTMLファイルにそっくりですね。<template>という独自タグで始まっていたり、classが:classになっているなどの違いはありますが、なんとなく構造をイメージできるのではないでしょうか。
<style>タグにCSSを書き、<script>タグにJavaScriptを書くところも、HTMLの基本形と同じです。

コンポーネントの書き方はフレームワークによって異なりますが、Vueの書き方は特にHTMLに似ているため、HTML/CSSに慣れたデザイナーにはとっつきやすいと思います。逆にいえば、JavaScriptプログラミングに慣れている人にとっては、この特徴はさほどメリットにならないかもしれません。

今回のまとめ

Vue.jsとは？
・UIを構築するための便利な機能がまとまったフレームワークのひとつ

フレームワークに何ができる？
・再利用可能なコンポーネント＝独自タグを作れる
・リアクティブにデータ変更と表示更新をしてくれる（プログラマー向け）

フレームワークにどんなメリットがある？
・独自タグは簡潔で、変更に強く、スタイルを閉じ込められる
・データ変更検知処理や表示更新処理を書かなくてよい（プログラマー向け）

Vue.jsならではのメリットは？
・書き方がHTMLにそっくりなのでとっつきやすい
・プログラミングができる人なら別にVueじゃなくてもいいかも？

-----------------------------

ここまでお読みいただきありがとうございました。次回は、実際にVueのコードを書いて試す準備をして、作業の流れを紹介します。

🐥はげみになります！