UIT INSIDE UIT INSIDE
2021/09/10 に公開 1855 views

このエピソードについて

hey の @ffu_ と @ushiro_noko をゲストにSTORESのフロントエンドの今、デザインシステム、フロントエンドに詳しいCTOがいてよかったことなどについて聞いてみました。

ゲスト

ヘイ株式会社より 2 名のゲストをお呼びしています。

  • @ffu_
    • CTO
  • @ushiro_noko
    • Front-End Engineer

heyの組織とプロダクトについて

  • STORES プラットフォームを開発している
    • EC から始まる様々な領域をトータルマネジメントするような形
    • 実店舗向けのサービスや決済基盤なども提供している
  • 複数のプロダクトや合併した企業の都合を吸収するため、デザインシステムを開発中
    • 技術としては React/Vue が混在しており、両方で TypeScript が使われている状況
    • @ushiro_noko が現在デザインシステムや Front-End Ops の専任者として活動している

デザインシステムの作り方

  • できるだけサグラダ・ファミリアにならないように実装
    • 長大なライブラリをトップダウンで使わせるようなやり方はしない
  • コンポーネントをプロジェクトで実装しつつデザインシステムに取り入れる
    • プロダクトで使う順かつ使う粒度でコンポーネントが出来上がっていく
    • はじめはプロジェクトで実装されたものが、デザインシステムとして他のプロジェクトで利用可能になっていく
  • デザインシステムのチームとプロダクトのチームに分かれるのではなく、実装にも参加していく
    • デザインシステム担当者がプロダクト内でコンポーネントを作ることで、イテレーションも回しやすく
    • フィードバックも受けやすい仕組みに仕上がっていく
  • ようやく1つ目のシステムに適用ができるというフェーズであるが、現状は順調
    • デザインシステムをともに作っていく状態が良い

フロントエンドに詳しい CTO がいることによる影響

  • フロントエンド特有の式年遷宮への理解
    • 技術を移行する場合、短期的にはビジネスインパクトはゼロに近いかもしれない
    • 一方で、それを行うことによる長期の生産性はプロダクトに価値をもたらす
    • その辺りについて、ビジネスインパクトと工数の塩梅を見て経営的意見を聞けることが嬉しい

Vue 3 について

  • @ushiro_noko さんが『Vue3ビギナーズガイド』を出版したが、Productionでの利用状況はどうか
  • 現場が Nuxt なのでまだ Production では利用できていない
    • Nuxt + TypeScript + Composition API なので、 Vue 3 時代の準備はできている
  • 一度デザインシステムのために Vue 3 を利用すること自体は検討した
    • が、前述の通りプロダクトとともに育てる目的があるため断念
    • 今後 Vue 3 が利用できる状況になれば、使っていきたい

Refs