Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

画面要素を再利用できる、Vue.jsのコンポーネント機能を学ぼう

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用 第4回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、Webページのユーザーインタフェース(UI)フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回は複数のページを切り替えるNuxt.jsのルーティング機能を紹介しました。今回は、Webページの一部分を部品として再利用できるコンポーネント機能について説明していきます。

目次

はじめに

 Nuxt.jsは、Webページのユーザーインタフェース(UI)フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。

 Vue.jsでは、共通に利用されるWebページの一部分を「コンポーネント」として実装できます。コンポーネントを組み合わせてWebページを構築することで、開発効率や品質の向上が期待できます。また、コンポーネントを部品として再利用することもできます。

 本記事では、Nuxt.jsで利用できるVue.jsのコンポーネント機能を、サンプルとともに説明していきます。

対象読者

  • 似たような画面要素がたくさん出てくるWebページを作る必要がある方
  • Nuxt.jsのWebページ作成で、できるだけ作業効率を上げたい方
  • コンポーネントを利用した部品化再利用に興味がある方

必要な環境

 本記事のサンプルコードは、以下の環境で動作を確認しています。

  • Windows 10 64bit版
    • Node.js v12.13.0 64bit版
    • Nuxt.js 2.10.2
    • Vue.js 2.6.10
    • Microsoft Edge 44.18362.449.0

 サンプルコードは、Nuxt.jsのCLIツール(create-nuxt-app)で生成したプロジェクトを元に実装しています。CLIツールの利用法やプロジェクト構成などの詳細は、連載第1回の記事を参照してください。

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「npm run dev」コマンドを実行して、Webブラウザーで「http://localhost:3000/」を開きます。

基本的なコンポーネントの利用方法

 基本的なコンポーネントの利用方法を、図1のサンプルで説明します。「Apple」「Samsung」の2種類のコンポーネントをWebページに表示します。

図1:基本的なコンポーネントのサンプル(p001-basic)
図1:基本的なコンポーネントのサンプル(p001-basic)

 コンポーネントは、プロジェクトのcomponentsフォルダー配下に、Webページと同じ*.vueファイル形式で実装します。Appleコンポーネントの実装をリスト1に示します。ここでは<template>と<style>だけを実装していますが、コンポーネントにロジックが必要な場合は<script>で実装できます。Samsungコンポーネントもほぼ同じ形式です(詳細はサンプルコードを参照してください)。

[リスト1]Appleコンポーネント(p001-basic/components/Apple.vue)
<template>
  <div class="component">
    <h1>Apple</h1>
    <ul>
      <li>iPhone 11</li>
      <li>iPhone 11 Pro</li>
      <li>iPhone 11 Pro Max</li>
    </ul>
  </div>
</template>
<style scoped><!--(1)-->
.component {
  background-color: #ffafaf;
  border: 1px solid black;
  margin-bottom: 10px;
  padding: 10px;
}
</style>

[補足]スタイルの適用範囲をコンポーネント内に限定する「scoped」

 リスト1(1)の<style scoped>は、スタイルの適用範囲をそのコンポーネント内に限定する記述です。サンプルコードでは、AppleコンポーネントとSamsungコンポーネントで、同じ名前の「component」クラスに異なる背景色を設定していますが、scopedによって、それぞれの設定が干渉せずに背景色が適用されます。

 コンポーネントを利用するWebページは、リスト2の通り実装します。

[リスト2]コンポーネントを利用するWebページ(p001-basic/pages/index.vue)
<template>
  <div class="container">
    <h1>基本的なコンポーネントの例</h1>
    <Apple/><!-- Appleコンポーネント ...(1)-->
    <Samsung/><!-- Samsungコンポーネント ...(2)-->
  </div>
</template>
<script>
// コンポーネントを参照 ...(3)
import Apple from '~/components/Apple'
import Samsung from '~/components/Samsung'
// ページ実装部
export default {
  // 利用するコンポーネントを定義 ...(4)
  components: {
    Apple,
    Samsung
  }
}
</script>

 まず、<script>のimport文(3)でコンポーネントのファイルを参照して、export default内のcomponents(4)に定義します。コンポーネントに対応する独自タグ「<Apple/>」「<Samsung/>」を、<template>に(1)(2)の通り記述すると、その場所にコンポーネントが表示されます。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5