はじめに

フロントエンドエンジニアのrarayaです。今回は、弊社でのUIカタログ（Histoire）導入の経緯と、その有効活用方法について話したいと思います。しかし、正直に言うと現在は期待通りに活用できているわけではありません。この機会に、UIカタログの活用法を探ると共に、UIカタログの意義や利点についても深堀りしていきます。また弊社ではデザイナーがFigmaでデザインシステムを構築しているため、ツール間でのデザインの一貫性とフロントエンド開発にどう生かしていくかも今後の課題です。

UIカタログの話をする前に、「UIコンポーネント」という基本概念から説明します。UIコンポーネントは、ウェブページやアプリケーションの画面に表示される再利用可能なUIパーツのことを指します。これらを組み合わせることで、多様な画面を構築します。例として「ボタンコンポーネント」があります。これは多くのページで使用され、HTML、CSS、JavaScriptを通じて様々な機能が実装されます。以下にその実装例を示しますが、これを理解しなくてもUIカタログの操作は可能です。

#ButtonComponent

<template>
  <button @click="onClick">
    <slot>デフォルトボタン</slot>
  </button>
</template>

<script setup>
import { defineProps, withDefaults, defineEmits } from 'vue';

const props = withDefaults(defineProps<{
  color?: string;
  textColor?: string;
}>(), {
  color: '#3498db',
  textColor: 'white',
});

const emit = defineEmits(['click']);

function onClick(event) {
  emit('click', event);
}
</script>

#親コンポーネント

<template>
  <div>
    <ButtonComponent @click="handleDefaultClick">デフォルトボタン</ButtonComponent>
    <ButtonComponent color="#e74c3c" textColor="#ffffff" @click="handleCustomClick">カスタムカラーボタン</ButtonComponent>
    <ButtonComponent color="#2ecc71" textColor="#ffffff" @click="handleAnotherCustomClick">別のカスタムカラーボタン</ButtonComponent>
  </div>
</template>

<script setup>
import ButtonComponent from './ButtonComponent.vue';

const handleDefaultClick = () => alert('デフォルトボタンがクリックされました！');
const handleCustomClick = () => alert('カスタムカラーボタンがクリックされました！');
const handleAnotherCustomClick = () => alert('別のカスタムカラーボタンがクリックされました！');
</script>

UIカタログとは何か

UIカタログとは、UIコンポーネントをカタログ形式で確認し、アプリケーションから切り離して描画や動作検証を行えるツールです。Storybookがよく知られています。Histoireもこれに似たツールでVue.jsとViteをベースにした開発環境での使用に適しています。このようなツールを導入することによって、コンポーネントの実装を単体で行うことが可能になります。

UIカタログのメリット

動作確認の容易さ：コードを読むことなく、動作確認が可能。これにより、非エンジニアや新規参画者も容易にコンポーネントの挙動を理解できます。
対応漏れの発見：カタログを通じて、特定の条件下での挙動も確認できるため、見落としが減ります。
コンポーネントの乱立防止：既存のコンポーネントを把握しやすくなり、似た機能を持つコンポーネントの重複作成を防ぎます。

なぜHistoireを導入したのか

弊社はVue.jsとViteをベースにした開発環境で作業しています。開発の効率化とUIコンポーネントの品質向上を目的に、UIカタログツールの導入が急務となりました。UIカタログツールではStorybookが有名ですが、Vue.jsとViteとの親和性、軽量性と速度を重視してHistoireを選択しました。

導入後の課題と対策の検討

Histoireを導入したことで、UIコンポーネントの開発と管理の効率化に向けた一歩を踏み出しました。しかし期待通りにHistoireを活用できていない主な理由は、活用方法の不明瞭さ、実務での使用機会の少なさ、カタログの価値を感じられないことにあります。また、デザイナーとエンジニア間での連携不足や、Figmaでのデザインシステムとの一貫性維持も課題です。

今後の取り組み

使用例と活用方法の明確化と共有: UIカタログの効果的な活用を促進するため新規または更新されたUIコンポーネントを紹介するレビュー会を実施しようと思います。これによりメンバー間でフィードバックを交換し、コンポーネントの改善点について議論する機会を提供します。
デザインと実装の一貫性の確保: FigmaでのデザインシステムとHistoireのカタログ間での一貫性を高めます。デザイナーとフロントエンドエンジニアが定期的なミーティングを設け、FigmaのデザインシステムとHistoireのUIカタログの整合性を確認し、必要に応じて調整します。
定期的なレビューとカタログの更新: Histoireカタログが常に最新状態を反映するよう定期的なレビューと更新を行います。