引き続き、プロフィールページを作成していきます。
技術スタックは下記の通りです。
- nuxt.js
- SCSS
- Tailwind CSS
今回はざっくりコーディングを進めていきます。
方針
コーディングを進めていきます。
今回採用しているVue.jsをできるだけ活用していきます。
- セクションや部品ごとに、Single File Component（SFC、.vueファイル）に分けて定義する
- 繰り返し項目は、JS上で内容を定義し、v-forで表示する
実例
スキルのセクションでは、画像のように実装しました。
この画面では、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>
Pull Request
https://github.com/nek0meshi/profile/pull/4
まとめ
Vue.jsだとコンポーネントごとに分けられたり、繰り返しを簡単に記述できるのがメリットです。
デメリットとしては、ビルドに結構時間がかかることです。
viteを使えるとかなり速くなるのですが...。
