Nuxt.js初心者がcomponentsの機能をお勉強する

シェアする：

更新日時：2020年6月29日

この記事をおすすめしたい人

  • Node.jsも知らんのにNuxt.jsを始めようとしてる人
  • Nuxt.jsのComponents機能が気になっている人
  • つまりオレ

何も知らない超初心者が脱WordPressしたくてNuxt.jsでサイト構築していくシリーズです。

前回の記事でindex.vueの範囲、レイアウト機能について学びました。

今回は同じくページを構成する要素であるコンポーネントについてお勉強しました。

自分のメモがてらまとめていきたいと思います。

WordPressの上でな！

※ このブログはWordPress製です

Componentsはデモファイルでも使われている

デモ用のindex.vue↓です。 


<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">nuxt-test</h1>
      <div class="links">
        <a (略)>Documentation</a>
        <a (略)>GitHub</a>
      </div>
    </div>
  </div>
</template>

赤字の部分が「Logo」というコンポーネントです。

レイアウトのdefault.vueにあった「Nuxt」タグと雰囲気が似てますね。

Logoの中身は「components」フォルダの中の「Logo.vue」にあります。

Logo.vueの中身

Logo.vueを開くとこんな↓感じです。
(スタイルシート部分は省略) 


<template>
  <svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
      fill="#00C58E"
    />
    <path
      d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
      fill="#108775"
    />
    <path
      d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
      fill="#2F495E"
    />
  </svg>
</template>

<style>
(スタイルシート)
</style>

何やら難解な風に見えますが、インラインでSVGが1個置いてあるだけです。 簡略化するとこう↓。 


<template>
  <svg>
    <path />
    <path />
    <path />
  </svg>
</template>

デモ画面↓のロゴ画像の部分でした。

出力されたHTML内のLogo.vue

出力されたHTMLはこんな↓感じ。 赤字の部分がLogo.vueの出力です。 


<!doctype html>
<html data-n-head-ssr>
  <head>
    (略)
  </head>
  <body>
    <div data-server-rendered="true" id="__nuxt">
      <div id="__layout">
        <div>
          <div class="container">
            <div>
              <svg>
                <path />
                <path />
                <path />
              </svg>
              <h1 class="title">Hello World</h1>
              <div class="links">
                (リンク部分)
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>(略)</script>
  </body>
</html>

そのままですね。

つまり、コンポーネントというのは、ひとまとまりのコードをまとめて登録しておいて(これがコンポーネント)、それを1タグ(今回はLogo)で呼び出す機能なんでしょう。

WordPressで言うところのショートコードみたいなもの。

コンポーネントはどういう場面で使うべきか

多くのページで使い回す共通のパーツでしょう。

ヘッダやフッタ、サイドバーあたりです。

他にもパンくずリストやSNSのシェアボタン群、ページタイトルと画像なんかもコンポーネントにした方が管理しやすいかもしれません。

ヘッダやフッタはLayoutsに含めればよくない？

全ページで共通なのであればlayoutsのdefault.vueに含めていいんじゃないでしょうか。

こんな↓感じ。 


<template>
  <header>
    (略)
  </header>
  <div>
    <Nuxt />
  </div>
  <div class="sidebar">
    (略)
  </div>
  <footer>
    (略)
  </footer>
</template>

その場合にコンポーネントにするメリットとしては、パーツひとつひとつを1ファイルで管理できるので、コードが読みやすくなる点なんじゃないかと思います。 スタイルシートも分離できますしね。

内容が変わるものもコンポーネント？

まだ不勉強なので詳しくは分かりませんが、コンポーネント内に処理を含めることができるので、パンくずリストのような「構造は同じだけど内容が異なるパーツ」もコンポーネントにできそうです。

なのでシェアボタン(URLなどのパラメータが異なる)や、ページ毎に異なるページタイトルや画像もいけそう。

引数を渡すこともできるみたいです。

Logo.vueはコンポーネントにする意味があるのか？

デモなので意味を問う価値があるのか不明ですが、言うてもSVGの画像1枚です。

わざわざコンポーネントにする意味があったのか。

これはたぶんインラインSVG(＝コードが複雑)で記述しているせいでしょう。

コンポーネントにしておけばどこからでも同じインラインSVGが参照できるし、変更が入った場合もコンポーネント1箇所変更するだけで済みます。

コンポーネントの追加方法

めっちゃ簡単でした。

componentsフォルダに新しくvueファイルを作って、その中に最低限templateタグを入れるだけです。

templateタグの中身がHTMLとして出力されます。

呼び出す時はvueファイルのファイル名をタグにします。 例えば「Test.vue」の場合、こんな↓感じで呼び出せます。 


<Test />

XML式でタグが閉じていますが、閉じないとダメみたいです。 エラーが出ました↓。 


Errors compiling template:

tag <Test> has no matching end tag.

丁寧に閉じるタグ付ける↓のはOK。 


<Test></Test>

大文字/小文字の不一致↓もOK。 


<test />
<teSt />

さすがに全角半角の不一致はダメ。 エラーは出ませんでしたが、タグがそのまま出力されました。 


<Ｔest />

まとめ

前回のレイアウト機能と合わせてこれでHTMLを操作はできるようになったのかな？

まとめるとこんな↓イメージです。

(クリックで拡大)

次回からはheadタグの中身を見ていこうと思います！

以上、WordPressからお届けしました！

Nuxt.js ページ作成編の目次

シェアする：
Nuxt-ページ作成編,Nuxt.js