【Nuxt.js】Nuxt文法編：component①

前置き

componentとは
使いまわしができる、
再利用ができるものです🌟

シンプルなボタンでも
CSSが長くなったりして
まいかい書くのは面倒ですよね…😔
それを解決してくれるのが
componentです🌟

作り方、表示のさせ方を解説していきます✍️

componentの種類と使用箇所

種類

まずは種類を把握しましょう。
おおまかに全部で3つあります💡
今回は1の自作のコンポーネント
について解説していきます🍎
前置きに書いたボタンのような場合は
自作のコンポーネントに該当します🙋‍♀️

<好きに命名した名前 />
=自作のコンポーネント
importが必要！
<nuxt />
layouts内でのみ使用
<nuxt-child />
ネストされたルート内で使用

nuxtとnuxt-childについては
別記事でご紹介します🌟

公式: コンポーネントの基本
https://jp.vuejs.org/v2/guide/components.html

コンポーネントで使えるイベントや
v-bind, v-model, slotなどは
それぞれ別の記事に分けております✍️
イベント: https://wp.me/pc9NHC-ht
v-bind: https://wp.me/pc9NHC-nh
v-model: https://wp.me/pc9NHC-kO
slot: https://wp.me/pc9NHC-k3

使用箇所

componentsが使える場所
(インポートできる場所)は
ページを構成する部分です！

layout
他のコンポーネント
pageコンポーネント

自作のコンポーネントの場合は
この中のどれでも使用可能です🤗

基本コード

基本コードがこちら。
あとは使いまわしたい物に
作り替えていきましょう👍✨

) components

<template>
  <h1 class="red">Hello {{ name }}!</h1>
</template>

<script>
  // dataやらmethodsやらJSを書ける場所
  export default {
    // dataは関数でなければなりません
    data () {
      return {
        name: 'aLiz',
      }
    },
    // そしてもっと多くの機能を見つける
    ...
  }
</script>

<style>
  .red {
    color: red;
  }
</style>

<h1 class="red">Hello {{ name }}!</h1>

</template>

// dataやらmethodsやらJSを書ける場所

export default {

// dataは関数でなければなりません

data () {

return {

name: 'aLiz',

}

// そしてもっと多くの機能を見つける

...

}

</script>

<style>

.red {

color: red;

}

</style>

Step1: 使い回すコンポーネントを作る

では早速つくってみましょう❣️

ボタンのデザインとかいちいち面倒なので
コンポーネントにしちゃって
中身のテキストはslotで親で決める…
なんてことができます💡

スタイリングとか細かいことは置いといて
とりあえず⬇️のコードを
コピペして作ってみましょう💃
作成箇所はこちらです。

slotを使う場合

今回は使いませんが
slotでテキストを変えた場合はこんな感じ❗️

やってみたい方は
こちらをチャレンジしてみてください🔥💪
https://wp.me/pc9NHC-65

コード

) components

<template>
 <button class="button-default">
   ここにテキスト
 </button>
</template>

<script>
 export default { }
</script>

<style lang="scss" scoped>
 .button-default {
   cursor: pointer;
   display: block;
   text-align: center;
   height: 80px;
   border-radius: 8px;
   border: 1px solid #dddddd;

   &:hover {
     transform: scale(1.04);
     transition-duration: 40ms;
   }

   > p {
     margin-top: 20px;
     font-family: 'Noto Sans CJK JP';
     font-size: 20px;
     letter-spacing: 0.1em;
   }
 }
</style>

ここにテキスト

</button>

</template>

export default { }

</script>

.button-default {

cursor: pointer;

display: block;

text-align: center;

height: 80px;

border-radius: 8px;

border: 1px solid #dddddd;

&:hover {

transform: scale(1.04);

transition-duration: 40ms;

}

> p {

margin-top: 20px;

font-family: 'Noto Sans CJK JP';

font-size: 20px;

letter-spacing: 0.1em;

}

</style>

Step2: コンポーネントをインポートする

作ったコンポーネントを
pageコンポーネントに表示させます🌟
表示させるためには
作成したコンポーネントを
importする必要があります❗️

解説

import ButtonDefault from '~/components/ButtonDefault.vue'
インポートしたいコンポーネントの
場所(path)と名前を書きます。

export default { components: {コンポーネント名 }}
インポートしたコンポーネントの
使用登録をします。

<ButtonDefault />
登録したコンポーネントを
template内の使いたい場所に書きます。
閉じタグも一緒にした方で
<ButtonDefault></ButtonDefault>と
意味は全く同じです。

コード

) pages

<template>
  <div class="page">
    // 何度でも再利用できます
    <ButtonrDefault />
    <ButtonrDefault />
    <ButtonrDefault />
  </div>
</template>

<script>
import ButtonDefault from '~/components/ButtonDefault.vue'

export default {
  components: {
    ButtonDefault,
  },
}
</script>

// 何度でも再利用できます

</div>

</template>

import ButtonDefault from '~/components/ButtonDefault.vue'

export default {

components: {

ButtonDefault,

}

</script>

いちいちファイルの場所書くの！？😵
面倒くさい〜😖💦

と思った方もいるでしょう笑

実は❣️

自動でインポートできるので
書く必要はありません😉❤️

と言っても
ちゃんとやり方があるので
見ていきましょう👀

自動でインポートする

コード

不思議〜❣️🤭
なんとこれだけで表示できちゃいます✨

) pages

<template>
  <div class="page">
    <ButtonDefault />
  </div>
</template>

<script>
export default {
}
</script>

</div>

</template>

export default {

}

</script>

やり方

公式はこちら
https://ja.nuxtjs.org/guides/directory-structure/components/#components-discovery

Nuxtのアップグレードが済んでいればOK！
まだの方はこちらの手順を見ながら
アップグレードをしてください🍒
https://ja.nuxtjs.org/guide/upgrading/

ターミナルでバージョンを確認しましょう👀

terminal

$ npx nuxt -v

@nuxt/cli v2.14.3

実行してエラーがなければOK⭕️

terminal

$ npm run dev

フォルダ別に同じコンポーネント名がある場合

そもそもファイル名を個別につけていれば
必要ないのですがご紹介しておきます💡🙋‍♀️

例えばサイズ別のボタンを作ったとします。
これだと<Button />だけでは
どのサイズのボタンか指定ができません🤔💭

コード

そこでnuxt.config.jsに
予め場所と名前(prefix)を
記載しておきます✍️
読み込む時には<Button />の先頭に
追記したprefixをつければOK🙆‍♀️⭕️

公式はこちら
https://ja.nuxtjs.org/guides/directory-structure/components/#nested-directories

) file

export default {
  components: {
    dirs: [
      '~/components',
      {
        path: '~/components/medium/',
        prefix: 'medium'
      },
      {
        path: '~/components/large/',
        prefix: 'large'
      },
    ],
  },
}

export default {

components: {

dirs: [

'~/components',

{

path: '~/components/medium/',

prefix: 'medium'

{

path: '~/components/large/',

prefix: 'large'

}

ポイント

階層が深くなっても問題ないです！
path: ''~/components/atom/buttons/,
prefix: 'atombutton'

インポートする際は
<AtombuttonTitle />です。
<AtomButtonTitle />では
表示されないのでご注意を！

) pages

これで全てのサイズの
ボタンが表示されます！

<template>
  <div class="page">
    <Button />
    <MediumButton />
    <LargeButton />
  </div>
</template>

<script>
export default {
}
</script>

</div>

</template>

export default {

}

</script>

遅延読み込み

最初から全て読み込むのではなく
必要ないものは読み込まない=遅延

必要とされた時だけ読み込んで
表示の高速化が可能です🏃‍♀️💨

v-if, v-elseやモーダルなど
すぐに必要とされる要素ではない場合
lazy プレフィックスを使って
遅延読み込みができます💡

コード

) pages

<template>
  <div class="page">
    <Button />
    <MediumButton />
    <LazyLargeButton v-if="show" />
    <button @click="show = !show">Change</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false,
    }
  },
}
</script>

<button @click="show = !show">Change</button>

</div>

</template>

export default {

data () {

return {

show: false,

}

</script>

まとめ

自作コンポーネントは使い回しが効き、 ページを構成するほとんどの部分で使用可能
作成したコンポーネントは使いたい場所にインポートをすることで使用できる
インポートは自動で行うこともできる