ハーフスタック・エンジニアへの道〜2回目(Nuxt.js)

　前回のブログからの続きで、第2回目になります。

はじめに

　9月に行った「生活110番」を刷新するにあたって、さまざまな新しい技術や考え方を導入しました。技術以外にも数え切れないほどの改修を行いましたが、このブログでは新たに取り入れた技術や考え方について大きく簡単に触れていきます。

コンポーネント駆動開発について

　今までコンポーネントについては、計画性をあまり持たないで必要に迫られたときに考えて設計していました。それでも開発は進めなくてはならないため、コンポーネントを細かい粒度から作り、それらを組み合わせてページを作るボトムアップの方式で実装を行いました。

コンポーネント化の主なメリット
・再利用による保守性の向上
・コンポーネント単位でテストが行えるため、UIの品質の向上
・異なるメンバー間で並列的な進行が可能
・コンポーネント単位で開発行うため、直感的でタスク管理が行いやすい

Atomic Designを導入した！

コンポーネント駆動開発の一貫として、Atomic Designの導入をしました。

画像を構成するUIコンポーネントの3要素

• Atoms(原子)
  アイコンやテキストなど、最も小さい粒度であり、それ以上分解できない要素
• Molecules(分子)
  ボタンなどの複数の原子を組み合わせて独自の機能を持つ要素
• Organisms(有機体)
  ヘッダーやサイドウィジットなどの単体でも機能するデザインパーツ要素

に分類し、ページ、テンプレートといった5つの要素で組み合わせる実装の手法を取り入れました。

コンポーネントの再利用性向上の取り組みについて

以下のようなソースをコンポーネントした場合についてお話します。

子コンポーネント(base-link.vue)

<template>
  <a class="base-link" :class="computedClass" href="" @click="$emit('click')">
    {{ label }}
  </a>
</template>

<script>
export default {
  props: {
    //ボタンのラベル
    label: {
      type: String,
      default:'',
    },
    href:{
      type: String,
      default:'',
    },
    //カラータイプ
    colorType: {
      type: String,
      default: 'orange',
      validator(val) {
        return ['blue', 'red', 'green'].includes(val)
      },
    },
  },
  computed: {
    computedClass() {
      return this.colorType + 'Link'
    },
  },
}
</script>
<style lang="scss" scoped>
.base-link {
  cursor: pointer;
  &:hover {
    color: orange;
  }
  &.blueLink {
    color: blue;
  }
  &.redLink {
    color: red;
  }
  &.greenLink {
    color: green;
  }
}
</style>

親コンポーネント

<baseLink href="https://google.com" label="Google" />

今までの方法

　Propsでリンクのテキストを受け取ってリンクを表示する共通化コンポーネントを利用していたとします。開発の途中で、「テキストの前にアイコンを表示したい」といった要望が出た場合、新たにPropsでIconを受け取るように変更を行います。

声：「テキストの前にアイコンを表示したい」
↓
作業：新たにPropsでIconの受け取り処理

　その後、今度は「テキストの後にアイコンを表示したい」といった要望が出た場合、PropsのIconをBeforeIconにリネームし、新たにAfterIconと追加して・・・とすると、アイコン付きアイコンを頻繁に使う場合はいいですが、Propsを追加していくとどんどん複雑になってしまいます。

声：「テキストの後にアイコンを表示したい」
↓
作業：PropsのIconをBeforeIconにリネームし、新たにAfterIconと追加して・・・

新しい方法

　今までの方法での問題を解消するため、テキスト表示部分を「Defaultスロット」を使用して書き換えます。

Defaultスロットの利用

<a class="base-link" :class="computedClass" href="" @click="$emit('click')">
    <slot>{{ label }}</slot>
</a>

　Slotにコンテンツがなければ従来通りにPropsのラベルにして、アイコンなどのDomを表示したい場合はSlotに挿入して利用します。

作業は簡単で、しかも拡張性を向上させます。

PropsにValidationを設定

• PropsのValidationを設定することで、設定可能な値を制限することが可能
• ほかの開発者に意図せぬ値を設定しないように周知することができ、バグを未然に防ぐことが可能

　話は尽きないため、今回はこれくらいにしておきます。このブログはフロントエンド・エンジニア達が実際に職場で行っているお仕事の一例になります。最後まで読んでいただきましてありがとうございました。
　シェアリングテクノロジーでは一緒に働くメンバーを募集しています。気軽に遊びに来てくださいね！！