【プロフィールページ改修第5回】ざっくりコーディング

引き続き、プロフィールページを作成していきます。

yushi-dev.hatenablog.com

技術スタックは下記の通りです。

nuxt.js
SCSS
Tailwind CSS

今回はざっくりコーディングを進めていきます。

方針

コーディングを進めていきます。
今回採用しているVue.jsをできるだけ活用していきます。

セクションや部品ごとに、Single File Component（SFC、.vueファイル）に分けて定義する
繰り返し項目は、JS上で内容を定義し、v-forで表示する

実例

スキルのセクションでは、画像のように実装しました。

f:id:yushi0:20220123220143p:plain

この画面では、PHP・JavaScriptなどの持っているスキルについて、名前・経験年数・説明の3項目を含むカードを並べて表示しています。

SFCとしては、SkillSection.vueとSkillCard.vueの2ファイルです。

SkillCard.vueでは、カードの中身を表現します。

<template>
  <li class="card-wrap">
    <h3 class="h3">{{ title }}</h3>
    <p class="experience">{{ experience }}</p>
    <p class="description">{{ description }}</p>
  </li>
</template>

...

SkillSection.vueは、Skillsセクション全体の表示と、SkillCardのコンテンツの管理を行います。

<template>
  <section>
    <h2 id="skills" class="section-title">SKILLS</h2>
    <ul class="flex flex-wrap justify-between">
      <SkillCard
        v-for="skill in skills"
        :key="skill.title"
        :title="skill.title"
        :experience="skill.experience"
        :description="skill.description"
        class="skill-card"
      />
      ...
    </ul>
  </section>
</template>

<script>
export default {
  computed: {
    skills() {
      return [
        {
          title: 'PHP',
          experience: '実務4年',
          description: 'サーバサイドではPHPを使う機会が多い。Laravelを中心に、CakePHP2も経験がある。'
        },
        ...
      ]
    }
  },
}
</script>