スペースマーケットのエンジニアとデザイナーで今年行ってきた取り組み

はじめまして。スペースマーケットでエンジニアをしている原口です。
リングフィットアドベンチャーを毎日やっていたら、整体の先生からやりすぎだとドクターストップがかかってしまいました😌、

この記事は スペースマーケットプロダクトチーム Advent Calendar 2019 の 12月23日の記事になります。

本日は、今年エンジニアとデザイナーが取り組んできた、コンポーネント推進PJについてお話したいと思います。先日開催された 「年の瀬に振り返る Figma & React コンポーネントでのサービス開発」でも発表をしているので、よろしければご覧ください。

コンポーネント推進PJ？🤔

概要
コンポーネント設計・運用をしていく中での方針を決めたり、設計・運用していく上での課題の共有や相談を行うためのPJ

メンバー
コンポーネント設計・運用を職域としているデザイナー・エンジニア
（※あくまでコンポーネント設計・運用を職域としているメンバーだけで行っているPJです。）

目的
スペースマーケットにおけるコンポーネント設計・運用のガイドラインの策定

どんなことをやってきたか

meetupでは特にお話ししたかった施策のみの発表となりましたが、それ以外にも大小様々な施策や課題解決をおこないました。
それぞれ簡単に解説します。

1. 共通コンポーネントへの移行
スペースマーケットは複数のサービスを運営しており、それぞれのリポジトリから共通コンポーネントを読み込んでいます。
元々共通コンポーネントというものは存在していなかった為、共通コンポーネントが誕生する前に作成されたページに共通コンポーネントを適用していくという作業を行いました。
また、各リポジトリにあったコンポーネントを、共通コンポーネントに移行するという作業も同時に行っています。

2. コンポーネントの粒度&命名規則決め
作業者によって、コンポーネントの粒度や命名に差異があったため、それぞれルールを策定しました。

3. 課題管理フローの策定
日々追加されていくコンポーネントの課題を把握しやすくするために、課題管理のフローを策定しました。

4. プロダクトとStorybookの状態が異なる問題の対応
Storybookのstoriesファイルの更新が忘れられ、プロダクトとStorybookの状態に差が出てしまうという問題がありました。
そのため、まずはstoriesファイルをAPI開発を行っているメンバーに作成してもらうことで、propsの追加や変更がされること自体を減らし、エラーの発生を防ぐというフローを作成しました。

5. コーディングガイドラインの策定
命名規則や粒度決めもここに含まれますが、他にもマークアップ時の細かいルール作り（スタイルの指定の順番や当て方など）の策定をしました。

6. 新規コンポーネントの共有
コンポーネントを設計するメンバーが増えてきた影響で、自分の把握していないコンポーネントが増えていくという問題がありました。その問題の解決のために、新規コンポーネントを追加する際は、課題管理票に起票し、共有を行うというフローを策定しました。

7. コンポーネントのTypeScript化（検討中）
サービス共通コンポーネントを使用している弊害でもありますが、他のページでも使用されているコンポーネントのpropsを変更してしまい、一部のページで表示が崩れるという事故が発生してしまったという経緯があり、現在TypeScriptの導入を検討しています。
まだTypeScriptを触ったことがないメンバーもいるので、モブプロをしながら進めています。

1年間やってみての所感

課題はたくさん
少なくないとは思っていましたが、思っていた以上にやることがありました。
ただ、今まで放置されていたり新たに発見される課題や、やりたくてもできなかった粒度と命名規則の策定などをすることができ、コンポーネントの環境が整備されていってることを実感しています。

他のメンバーと共通の認識を持つことができる
個人的にはここが一番よかったと感じています。
課題やコンポーネント設計に関して、今どのようなことをしないといけないのか、どのような問題があるのかということの共通の認識を持てています。

デザイナーとの連携がとりやすくなった
上記の理由と似ていますが、デザイナーが参加してくれることで、エンジニア、デザイナーそれぞれで抱えていた課題や、こうしていきたいという考えの共有をできることで、今まで以上に連携が取りやすくなったかなと思います。

いかがだったでしょうか？
今年発足されたPJですが、来年も引き続きコンポーネントの整備を行っていきたいと思います💪

明日の Advent Calendar の記事は、エンジニアの Takahito Nara の記事になります！どうぞお楽しみに！