【Vue3対応】Vue.jsコンポーネントとは?すぐに使えるオススメコンポーネントも紹介

Vue.jsの様々な要素の中でもまず使いたい要素が『コンポーネント』です。

このコンポーネントを利用するために、Vue.jsを使う方も多くいらっしゃるのではないでしょうか。

今回はこのコンポーネントとは何かについて解説すると共に、すぐに使えるオススメのコンポーネントについても合わせてご紹介していきます。

※ 最新VersionであるVue3を基に解説しています

 

Vue.jsのコンポーネントとは?

Vue.jsのコンポーネントとは、UI部品のことを指しています。

Vue.jsで画面を構築していく場合はこのコンポーネントという部品を組み合わせてページを構成していくのが基本的な設計です。

つまり、Vue.jsアプリのページとはこのコンポーネントの集合体であり、Vue.jsを学習するということはコンポーネントを学習するといって過言ではありません。

Vueのコンポーネント構成
Vue.jsは複数のコンポーネントファイルの組み合わせでページが作られている

コンポーネントはひとつの画面に同じコンポーネントファイルを複数配置したり、コンポーネントの中にコンポーネントを設置するなど入れ子の状態にすることも可能です。

コンポーネント化するメリット

コンポーネント化する一番のメリットはコードをシンプルな形にすることが出来る点です。

例えば以下のような同じデザインのパーツが3つ並んでいる場合です。

例えComponentメリット

HTMLとCSSのみ実装するのであれば、こんなコードを書きます。

このレイアウトを実装するだけで35行のコードを書いています。

今度はVue.jsのコンポーネント使ってこのレイアウトを再現すると以下のようになります。Vue コンポーネント化

同じデザインの箇所を『Card』というコンポーネント作成しまとめて記述することでコード量を削減することができ、シンプルで見やすいページを作成することが可能です。

結果としてコードの行数は19行と約半分弱に押さえることが出来ました。

Vue.jsの別の機能であるディレクティブの機能を使えばさらにコード数を減らすかつシンプルなコードを書くこと可能ですが、コンポーネント化するだけでもただHTML、CSSで書くよりも大幅に削減していくことが可能になります。

 

コンポーネントファイルの作成


Vue.jsのコンポーネントファイルを作成してみましょう。

例えば、上記で作成した『Card.vue』はこのような内容になっています。

Componentファイルの中身

内容について簡単に見ていきます。

Vue.jsのコンポーネントファイルは<template>タグ、<script>タグ、<style>タグの3つから構成されています。

それぞれの役割を簡単にご紹介すると

タグ 概要
<template> HTMLを記述し、コンポーネントのUIを構成するデザインになります。
<script> コンポーネントのロジックを書く場所です。クリックした時のイベントや表示させる情報の加工など、処理が必要な場合この<script>タグ内に記述します。
<style> スタイルをCSSやSCSSで記述することでコンポーネントにスタイル適応できます。

このような役割があります。

また、上記の例では<template>内のHTMLに

{{から}}で囲んでいる箇所はPropsと呼ばれる値で、Cardをコンポーネントを設置した際に渡した値を表示しています。

コンポーネント Props

コンポーネント呼び出す


コンポーネントの呼出し方法はすごく簡単で、設定したコンポーネントのファイル名をタグとして呼び出すだけです。

コンポーネント呼出

属性には先程解説した表示させる内容を設定します。

このPropsを設定があることで、同じUIでもメッセージを変えられるなど再利用性が高いパーツを作成していくことが可能です。

 

コピペで使える!コンポーネント例を紹介


最後に実際の実務で役に立つコンポーネントをご紹介します。

コピペしてvueファイルに貼り付けるだけで使えるのでぜひ作ってみてください。

Swiper

カルーセルコンポーネントです。『vue-awesome-swiper』ライブラリを使用しているので、CDNで利用する際はヘッダーに追加してください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.0.2/css/swiper.min.css">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fswiper%405.0.2%2Fjs%2Fswiper.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue-awesome-swiper%403.1.3%2Fdist%2Fvue-awesome-swiper.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

 

HTMLのヘッダーに追加したら、以下のコードをVueファイルに追加すると、カルーセルが表示されます。

<template>
  <div class="bg-black">
    <h1 class="card-title p-3">PHOTO GALLERY</h1>
    <swiper
        :modules="modules"
        slides-per-view="auto"
        :effect="'coverflow'"
        :grab-cursor="true"
        :centered-slides="true"
    >
      <swiper-slide class="slide" v-for="index in 15" :key="index">
        <img :src="`https://picsum.photos/260/16${index}.jpg`" />
      </swiper-slide>
    </swiper>
  </div>
</template>
Vue.js コンポーネント

 

まとめ


コンポーネントはVue.jsの中でも重要な機能です。

それぞれのパーツをコンポーネント化することで、再利用することができコンポーネントを組み合わせることで、UI開発をより効率的に行うことが可能です。

ぜひコンポーネント機能を利用してみてください。