やりたいこと

コンポーネントを作っていく時に、DOMの組み立て方から、 <div> として振舞ってほしかったり <span> として振舞って欲しかったりと、HTMLタグのみ変えたいという事が希にあります。

同じように、同じ見た目だけど見出し要素のレベルだけ変えたい( <h1> にしたり <h3> にしたり）という事もあります。

これを実現するために、以下の機能を持った <HeadText> コンポーネントを用意します。

使う側から見出しのテキストを指定できる
使う側から見出しレベルを指定できる
指定された見出しレベルに応じて、見出し要素 <h1> とか <h2> とか... が出力される

利用するもの

Vue で予約されている <component>要素 と、その is属性 を利用した、動的コンポーネントの機能を使います。

is属性 はコンポーネントの切り替えの例をよく見ていましたが、 <h1> <h2> ... といったHTMLの要素も利用できるようです。

今回は、 headTagByHeadLebel() という関数を作り、受け取った値を h の後に文字列連結する事で、見出し要素を柔軟に出し分けられるようにしました。

※このサンプルではTypeScriptを利用しています

作ったコンポーネント

~/components/HeadText.vue

<template>
  <component
    :is="headTagByHeadLevel({level})"
  >
    {{ text }}
  </component>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

export interface HeadTextProps {
  text: string;
  level?: string;
}

@Component
export default class HeadText<HeadTextProps> extends Vue {
  @Prop()
  public text!: string;
  @Prop({
    default: '1'
  })
  public level?: string;

  public headTagByHeadLevel({ level }) {
    return `h${level}`;
  }
}
</script>

上記にstyleを書いてあげれば、コンポーネントとしては完成です。

こうすることで、このコンポーネントを使う側（親）は以下のようなシンプルな記述でこのコンポーネントを利用して、要素を切り替えられます。

~/pages/index.vue

<template>
  <div class="container">
    <section>
      <h1>HeadTextコンポーネント</h1>
      <HeadText text="ここはh1で指定" level="1" />
      <HeadText text="ここはh2で指定" level="2" />
      <HeadText text="ここはh3で指定" level="3" />
      <HeadText text="ここはh4で指定" level="4" />
      <HeadText text="ここはh5で指定" level="5" />
      <HeadText text="ここは指定なし" />
    </section>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

import HeadText from '../components/HeadText.vue';

@Component({
  components: {
    HeadText
  }
})
export default class indexPage extends Vue {}
</script>

スタイルを設定し、表示確認をしてみます。

見た目は同じで、きちんとHTMLタグが切り替わっている事が確認できました。（見出しを h1 にしちゃったので h1 が2つという状態になってますが...）

さいごに

今回は見出し要素の出し分けでしたが、冒頭のような <div> <span> の切り替えであれば、同じようにそれぞれ動的にバインドされた関数で、判定してあげて要素を返してあげるとよさそうです。

今回試したものについて、 github に置きましたので、載せておきます。
https://github.com/aktuehr/learn-nuxt

Nuxt.jsで同じ見た目だけど見出し要素のレベルだけ変えたいときのコンポーネント

やりたいこと

利用するもの

作ったコンポーネント

さいごに