15
4

More than 1 year has passed since last update.

お客さんによって表示内容を変えるテンプレートを作るには(Vue)

Last updated at Posted at 2021-12-05

お客さんによって表示内容を変えたい

やったー!ついに最強のテンプレートができた!
これでどんな案件にも対応でき・・・あれ、利用規約とか会社情報とかは、お客さんによって変える必要があるな・・・

方法は・・・

まず、プロジェクトによって変わる値を設定したいな
.env.development.localを作ろう、アヒル社だからahiruっと

// .env.development.local
VUE_APP_PROJECT=ahiru

こうするとVue3の場合、npm run serve した時に、読み込めるんだったよね
とりあえず読み込めてるかチェックしてみよう

// TermsOfService.vue
<template>
  {{project}}
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    const project = process.env.VUE_APP_PROJECT);
      return {
        project
      }
    }
})

よしよしテンプレートでもちゃんと読み込めてるね

ahiru

TermsOfService.vueに直接利用規約を書いちゃうと、表示が分けられないから別ファイルにしよう

// Ahiru.vue
<template>
利用規約
第1項:アヒルであること
第2項:いつでもアヒルたること
</template>

ahiruだったらAhiru.vue, kaeruだったらKaeru.vue, hiyokoだったらHiyoko.vue
というふうに読み込めばいいよね

ひとまずAhiru.vueを読み込んでみよう

// TermsOfService.vue
<template>
  <Ahiru/>
</template>

<script>
import { defineComponent } from "vue";
import Ahiru from "./Ahiru.vue";
export default defineComponent({
  setup() {
    component: {
      Ahiru
    },
    const project = process.env.VUE_APP_PROJECT;
    return {
      project
    }
  }
})
利用規約
第1:アヒルであること
第2:いつでもアヒルたること

うんできた

ここで疑問

あとはprocess.env.VUE_APP_PROJECTの値によって読み込むコンポーネントを分けられたら完成だ・・・
importのところを変えればいいでしょ。これでどう?

// TermsOfService.vue
<template>
  <Ahiru/>
</template>

<script>
import { defineComponent } from "vue";
import Ahiru from `./${process.env.VUE_APP_PROJECT}.vue`;
export default defineComponent({
  setup() {
    components: {
      Ahiru
    }
  }
})

結果:エラー!!エラー!!

なんで・・・・?

検索

どうやって読み込むコンポーネントを分けるんだろう?

import 可変 vue

検索結果

・タブ機能の作り方
→ 今作ってないし・・・
・非同期コンポーネントの表示
→今使ってないし・・・

はまる

うーん、VueRouterを使ってhttp://〇〇/ahiru/terms_of_serviceだったらAhiru.vueを読み込むとか?
いや、URLについちゃうのは困る・・・

先輩に聞く

あぁそれならこんなふうにしてあげれば?
projectがahiruだったらAhiru.vue, projectがhiyokoだったらHiyoko.vue
というふうに読み込めるよ

<component v-bind:is="project"></component>

いきなり解決

できたー!

// TermsOfService.vue
<template>
  <component v-bind:is="project"></component>
</template>

<script>
import { defineComponent } from "vue";
import Ahiru from "./Ahiru.vue";
import Kaeru from "./Kaeru.vue";
import Hiyoko from "./Hiyoko.vue";
export default defineComponent({
  setup() {
    const project = process.env.VUE_APP_PROJECT;
    return {
      project
    }
  }
})

学習したこと

検索結果は背景を読もう

タブ機能や非同期コンポーネントといった言葉で反射的にバックするのではなく、確かに可変できてるよな
ここからエッセンスを掴めるかもな・・という発想

やっぱり人に聞くのが一番できるわかる

いきなり聞くとふーんとかしかならないので、とりあえず自分で悩んでから

補足

もっといいやり方あるよという方ぜひJoinして私に教えてください
その際には「小林のQiitaみた」と一言あると、いいことあります

15
4
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
4