【Nuxt.js】コンポーネントの基本的な分け方【props有】

はじめに

yukiと申します。DMMWEBCAMP にお世話になって、今は WEB エンジニアとして勤務しつつ、自分で仲間を集めてサービス開発したり、プログラミングの家庭教師したり毎日エンジニアライフをエンジョイしています。

未経験から目指している方向けのサポートやエラー質問なども引き受けておりますので、気になった方は DM へお願いします。

記事の対象者

• Nuxt.jsを使い始めてみたけど、結局一枚のvueファイルに全部コードを書いてしまっている方
• コンポーネントを分ける必要があるが、やり方がよくわからない方
• emitなど難しい概念はまだ学習中で、とりあえずコンポーネントを分けてみたい方

コンポーネントを分ける前のコード

趣味で作ったアプリのコードの一部です。

一応宣伝
【NuxtJS×RailsAPI】折角0からプログラミングを勉強したので、推しキャラの誕生日アプリを作ってみた。

index.vue

        <v-container>
          <v-col md="10">
            <v-card target="_blank" href="https://twitter.com/yuki82511988" class="mb-2"
              color="rgba(86, 168, 165, 0.836)">
              <v-list-item-avatar tile size="80">
                <img class="tweet-icon" src="../assets/yuki.png" alt="">
              </v-list-item-avatar>
              <span class="twitter-name">
                programmer
                <span class="twitter-name">
                  Yuki
                </span>
              </span>
            </v-card>

            <v-card target="_blank" href="https://twitter.com/K_raris" class="mb-2" color="rgba(86, 168, 165, 0.836)">
              <v-list-item-avatar tile size="80">
                <img class="tweet-icon" src="../assets/kraris.png" alt="">
              </v-list-item-avatar>
              <span class="twitter-name">
                Illustlator
                <span class="twitter-name">
                  Kraris
                </span>
              </span>
            </v-card>

            <v-card target="_blank" href="https://twitter.com/momoringo_natan" class="mb-2"
              color="rgba(86, 168, 165, 0.836)">
              <v-list-item-avatar tile size="80">
                <img class="tweet-icon" src="../assets/momoringo.png" alt="">
              </v-list-item-avatar>
              <span class="twitter-name">
                Designer
                <span class="twitter-name">
                  ももりんご
                </span>
              </span>
            </v-card>

うーん、パッとみても繰り返しがひどい。。。
今回は、この繰り返されている部分を何とかします。

コンポーネントを分けた後のコード（結論）

切り出された方

components/colabolator/Person.vue

<template>
  <v-card target="_blank" :href="personData.twitter" class="mb-2" color="rgba(86, 168, 165, 0.836)">
    <v-list-item-avatar tile size="80">
      <img class="tweet-icon" :src="personData.avatar" alt="" />
    </v-list-item-avatar>
    <span class="twitter-name">
      {{ personData.position }}
      <span class="twitter-name">
        {{ personData.name }}
      </span>
    </span>
  </v-card>
</template>

<script>
export default {
  name: "Person",
  data () {
    return {}
  },

  props: ['personData'], // index.vueで送ろうとしているデータが入る、その名前で登録されている

}
</script>

切り出した方

index.vue

            <Person :personData="personData.yuki"></Person>
            <Person :personData="personData.momoringo"></Person>
            <Person :personData="personData.kraris"></Person>

<!-- 中略 -->
<script>
import Person from "@/components/collabolator/Person"; // 読み込み

export default {
  components: {
    Person // 登録
  },
  data() {
    return {
      personData: {
        yuki: {
          twitter: "https://twitter.com/yuki82511988",
          avatar: require("@/assets/yuki.png"), 
          position: "programmer",
          name: "Yuki"
        },
        momoringo: {
          twitter: "https://twitter.com/momoringo_natan",
          avatar: require("@/assets/momoringo.png"),
          position: "Web Designer",
          name: "ももりんご"
        },
        kraris: {
          twitter: "https://twitter.com/K_raris",
          avatar: require("@/assets/kraris.png"),
          position: "Illustrator",
          name: "Kraris"
        }
      }
    };
  },

流れと理由を書きます

• componentsフォルダの中にコラボしている人をまとめるディレクトリを作成、その中にPerson.vueを作る
• 繰り返されている部分のうち一個を切り出し、コピペした後に出力を分けたいところでマスタッシュ構文を使う
• propsに親から受け取るデータの名前を記す（personData）
• 親の方（index.vue）にcomponentsを登録し、読み込ませる
• personDataを定義して、の部分で値を送る（この際、表示する値を３種類それぞれ分けている）

データの持たせ方には色々な意見がありますが、今回は知り合いのエンジニアの先輩にアドバイスをいただきまして「indexの画面で誰の値をセットしているのかわかる」ようにするため、このような方法で切り分けました。

明らかにコードがスッキリして分かりやすくなりました。

まだまだ分け方のイロハが分かっておりませんが、これを機に設計やルールなども学んでみようと思いました。
まず、チャレンジしてみましょう！