Twitter

Category

もっと見る

Tag

もっと見る

    HOME  >  Web開発 >  【Vue + vue-cli】コンポーネントの基本

Web開発

【Vue + vue-cli】コンポーネントの基本

【Vue + vue-cli】コンポーネントの基本

目次

  1. コンポーネントとは？
    1. コンポーネント指向の開発のメリット
    2. コンポーネントの図解
  2. コンポーネント実装
    1. コンポーネントファイルの作成
    2. コンポーネントのインポート
  3. まとめ

今回はvue.jsのコンポーネントについて触れていきたいと思います。

環境構築と単一ファイルコンポーネントについては以前の記事で触れていますので、そちらもご覧ください。

https://www.dailyupblog.com/web_development/716/
https://www.dailyupblog.com/web_development/726/

今回は上記二記事を読んでいる前提で説明をいたしますので、ご了承ください。

使う、データも上記二記事で用意したものを流用いたします。

ちなみにvue-cliを使用しています。

それではいきましょう。

コンポーネントとは？

そもそもvue.jsにおけるコンポーネントとは何なのかについて、触れていきたいと思います。

コンポーネントとは、ページを構成する再利用可能なインスタンスのことです。

簡単にいうと、何度も再利用できるページ内のパーツや構成部品のようなものです。

近年、vue.jsなどのjavascriptフレームワークによるモダンなフロントエンド開発において、コンポーネント単位で開発をすることは主流となっています。

コンポーネント指向の開発のメリット

コンポーネント指向での開発によるメリットはたくさんあります。

ざっくりと以下になります。

  • コンポーネント単位で開発をするため、管理がしやすい
  • 変更・更新等が発生しても、コンポーネント単位で作業するため、手間がかからない
  • コンポーネントは再利用可能なため、開発効率が上がる
  • コンポーネントはいくらでも流用ができるため、カスタマイズが容易
  • SPA開発などに応用ができる

上記などがあげられます。

要するに、より効率的でモダンな開発ができるということです。

コンポーネント単位で開発するため、何かエラーが起きたとしてもすぐ原因の切り出しもできるということです。

コンポーネントの図解

例えば、ページを構成するヘッダー、フッター、サイドメニュー、ページ内コンテンツを全てコンポーネント単位で開発するとします。

その例を以下に図解で示してみます。

上記のようになります。

ヘッダー、フッター、サイドバーをそれぞれ「components」フォルダ内からインポートして、「pages」フォルダ内からトップページのページファイルをインポートして、コンテンツ部分に表示させます。

SPAになると、このページコンテンツ部分のコンポーネントを別ページに切り替えることで実現します。

コンポーネント実装

それでは実際にコンポーネントを使って、ヘッダーとフッターを実装したいと思います。

前回のデータを用意してください。

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

まずは、「components」フォルダ内にあるHelloWorld.vueを削除して、Header.vueとFooter.vueを作成してください。

それぞれのファイル内には以下を記述してください。

<template>
  <header>
    <h1>{{title}}</h1>
  </header>
</template>

<script>
export default {
  data () {
    return {
      title: "ヘッダー"
    }
  }
}
</script>

<style scoped>
header {
  padding: 1em 0;
  background: #778899;
}
h1 {
  margin: 0;
  color: #fff;
}
</style>
<template>
  <footer>
    <div>
      <p>{{msg}}</p>
    </div>
  </footer>
</template>

<script>
export default {
  data () {
    return {
      msg: "フッター"
    }
  }
}
</script>

<style scoped>
footer {
  background: #dcdcdc;
  padding: 0.5em 0;
}
</style>

次に「components」フォルダと同階層に「pages」フォルダを作成してください。

そのフォルダの中にTop.vueファイルを作成してください。

Top.vueファイルの中には以下を記述してください。

<template>
  <main>
    <h2>{{title}}</h2>
  </main>
</template>

<script>
export default {
  data () {
    return {
      title: "TOPページです。"
    }
  }
}
</script>

<style scoped>
main {
  height: calc(100vh - 152px);
  padding: 3% 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
h2 {
  margin: 0;
}
</style>

コンポーネントのインポート

次に作成したコンポーネントをインポートしたいと思います。

App.vueにて、ヘッダーとフッターをインポートしましょう。

App.vueに以下のように記述してください。

<template>
  <div id="app">
    <Header />
    <router-view />
    <Footer />
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
  components: {
    Header,
    Footer
  }
}
</script>

<style>
body {
  margin: 0;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

ひとつずつ見ていきましょう。

import Header from './components/Header.vue'
import Footer from './components/Footer.vue'

上記の記述にて、ヘッダーとフッターのコンポーネントファイルをインポートしてきます。

export default {
  components: {
    Header,
    Footer
  }
}

export default内にコンポーネントで「Header」と「Footer」を指定します。

これを記述することによって、HTML内でそれぞれを利用することができます。

<template>
  <div id="app">
    <Header />
    <router-view />
    <Footer />
  </div>
</template>

上記、HTMLを見てみると、<Header />と<Footer />タグによって、コンポーネントを利用することができます。

ページ内のページコンポーネントを呼び出す方法ですが、今回は「vue-router」を使っていますので、それによって、表示させます。

「vue-router」については別記事で詳しく解説したいと思いますので、今回は省略したいと思います。

「router」フォルダの中にあるindex.jsを開いて、ください。

import Top from "@/pages/Top";
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "Top",
      component: Top
    }
  ]
});

上記のように記述してください。

これで、コンポーネントの作成と呼び出しは以上です。

ブラウザでページを開いてみると、下記のように表示されます。

まとめ

今回はざっくりとコンポーネントの基本について説明いたしました。

かなり基本的なものでしたが、vueではこのページ単位でもパーツ単位でも全てコンポーネントで制作して、使いまわしていくというのが基本的な開発の流れです。

今回はかなりざっくりとした説明でしたが、コンポーネントはかなり奥が深いものなので、また別記事でより踏み込んだコンポーネントの説明ができたらいいです。

今回は以上です。

お疲れ様でした！

関連記事

関連記事