チーム開発におけるコンポーネントシステムの問題と解決施策

楽楽勤怠は去年リリースされた社内でも新しい方のプロダクトで、フロントエンドの開発ではVue.jsやコンポーネントシステムを採用しています。
しかしプロダクト・チームがスケールするとともに数々の問題が表出してきました。

今回はコンポーネント周りの問題に焦点をあて
・どういったコンポーネントがあるかわからず、重複したコンポーネントが作られる
・利用できそうなコンポーネントがあるがどういった機能があるのか、または使い方がわからない
の解消に向けた施策について発表します。

Transcript

1. #RAKUSMeetup ©2021 RAKUS Co., Ltd. チーム開発における コンポーネントシステムの問 題と解決施策 UI開発課 フロントエンドエンジニア 中田　和宏
2. #RAKUSMeetup 　 : @nalpan 　 : @nal_pan 中田和宏（なかたかずひろ） 趣味 寝ること 音楽ゲーム 温泉地に一人旅 気になるツールの素振り 豆からコーヒーを淹れるのがマイブーム （全自動だけど…） 楽楽勤怠でフロントエンド開発を担当 最近はチーム内の調整や問い合わせ対応が多い Vue.js 日本ユーザーグループ コアスタッフ 未経験者向けハンズオン教材の作成 https://github.com/vuejs-jp/handson-vue3 趣味周りのアプリ開発 https://ddrdraw.surge.sh/
3. #RAKUSMeetup 下記課題感の参考になれば幸いです 🙋 • コンポーネントの切り分けに悩んでいる • Atomic Designなどうまくいかなかった • 実装済コンポーネントの認識共有が大変 • Vue CLI + VuetifyでStoryBookを動作させたい
4. #RAKUSMeetup コンポーネントのレイヤーや責務は 意識しよう！ 本日一番お伝えしたいこと
5. #RAKUSMeetup アジェンダ • 背景と問題の提示 • 問題解決の試みと解決したこと ◦ コンポーネント分類による認識共有 ◦ StoryBookの導入によるカタログ・動くドキュメントの作成 • 次に見えてきた問題とやりたい事
6. #RAKUSMeetup 背景 • 機能開発優先によりコンポーネントの設計・構成について 見直す機会が少なかった ◦ スピード感としては過去1年ほぼ月1リリース • 設計・構成の指針が明示されていなかった • チームの人数が毎月1人ペースで増加 ◦ 2021年度4月〜9月で5人 -> 9人
7. #RAKUSMeetup 問題の表面化 • 不具合の切り分け・修正が困難 ◦ 同じ入力チェックが分散・重複している… 🤔 • コンポーネントに実装済みの機能を再度実装してしまう ◦ use-blank-item,hide-placeholder どちらも未選択項目のon/off… 🤔 • prop,slotの入力で何が変わるのかわかりづらい ◦ readonly,disabled 見た目が同じ… 🤔
8. #RAKUSMeetup コンポーネントを分類
9. #RAKUSMeetup コンポーネントを分類 以前の状態 • <app-root> ◦ components ▪ base -> 最小単位コンポーネント、PC/SPに分かれている ▪ pc -> PC用のコンポーネント ▪ sp -> SP用のコンポーネント ◦ pages -> ページの親コンポーネント、PC/SPに分かれている
10. #RAKUSMeetup コンポーネントを分類 変更前 • <app-root> ◦ components ▪ base ▪ pc ▪ sp ◦ pages 変更後 • <app-root> ◦ components ▪ base • pc • sp ▪ parts ▪ pages
11. #RAKUSMeetup コンポーネントを分類 変更後 • <app-root> ◦ components ▪ base -> 基底コンポーネント ▪ parts -> ページの一部となるコンポーネント ▪ pages -> ページの親コンポーネント • それぞれの配下にpc/sp/mixinディレクトリを配置
12. #RAKUSMeetup baseコンポーネント • Atomic DesignのAtoms,Moleculesに該当 • 汎用的な機能を持つ ◦ 必須入力判定機能、外部から渡された値や範囲の判定機能 • 業務的な知識は持たない ◦ 具体的な値や範囲の判定 ◦ 時刻や期間が該当 ▪ etc, 24時間、前後1ヶ月 コンポーネントを分類
13. #RAKUSMeetup コンポーネントを分類 partコンポーネント • Atomic DesignのOrganismsに該当 ◦ ページの一部を構成するコンポーネント • 業務的な知識や機能を持つ ◦ Moleculesと決定的に異なる点 ◦ 画面固有の入力制限 ▪ etc, 24時間、前後1ヶ月 ◦ 入力による項目表示出しわけ
14. #RAKUSMeetup コンポーネントを分類 pageコンポーネント • Atomic DesignのTemplates,Pagesに該当 ◦ ページの親に該当するコンポーネント • 業務的な知識や機能を持つ ◦ 画面固有の入力制限 ▪ etc, 24時間、前後1ヶ月 ◦ 入力による項目出しわけ
15. #RAKUSMeetup コンポーネントを分類 解決したこと • ロジック実装箇所の認識が統一された 🎉 ◦ 指針ができる事によりどのロジックをどのコンポーネントに実装するか明確に なった
16. #RAKUSMeetup StoryBookを導入
17. #RAKUSMeetup StoryBookを導入 • vue-cli-plugin-storybookを利用 ◦ 楽楽勤怠はVue CLI,コンポーネント指向を用いて開発している ◦ https://www.npmjs.com/package/vue-cli-plugin-storybook ◦ 基本的にはこれで動作する • Vuetifyやプロジェクト固有の対応 ◦ main.js,preview.jsの編集 ◦ 外部リソースの取得（preview-head.html）
18. #RAKUSMeetup StoryBookを導入 main.jsの編集 • VuetifyLoaderPluginを設定 ◦ ビルド時にVuetifyコンポーネントのimportを挿入する ◦ プロダクトコードはvue-cli-plugin-vuetifyにて内部利用している
19. #RAKUSMeetup StoryBookを導入 preview.jsの編集 • plugin, global directive, global mixinの登録 ◦ プロダクトコードと同じように登録
20. #RAKUSMeetup StoryBookを導入 preview.jsの編集 • Global decoratorsの登録 ◦ Vuetifyコンポーネントの動作には<v-app>,<v-main>のラップが必要 https://vuetifyjs.com/ja/components/application/#api
21. #RAKUSMeetup StoryBookを導入 preview-head.htmlの編集 • 外部リソースの取得 ◦ スタイルやフォントなど外部リソースが必要な場合は用意 https://storybook.js.org/docs/vue/configure/story-rendering
22. #RAKUSMeetup StoryBookを導入 無事動作 🎉
23. #RAKUSMeetup StoryBookを導入 解決したこと • コンポーネントの仕様把握 🎉 ◦ 機能実装時に同様の機能が実装済みであるかを確認できる ◦ 実際の操作やpropsの変更でコンポーネントの感触を確認
24. #RAKUSMeetup StoryBookを導入 下記のような効果も… • コードのドキュメンテーション 🎉 ◦ @storybook/addon-docsによりJSDoc/TSDocがdescriptionとなるため、 結果的にJSDoc/TSDocを書くようになった ▪ 厳密にはVue Styleguidist ▪ https://vue-styleguidist.github.io/docs/Documenting.html
25. #RAKUSMeetup 次に見えてきた問題とやりたいこと • storiesをどう実装するか ◦ コンポーネントの仕様策定が必要 • PC/SP同名で別のコンポーネントのstoriesが実装できない ◦ プロダクトではUAにより適したものをグローバルインポートしている ◦ StoryBookには全てを載せたいが上記機構を変えないといけない • StoryBookとコンポーネントテストの統合 ◦ CSF3.0のPlay Function+@storybook/testing-vueに期待 ▪ https://storybook.js.org/addons/@storybook/testing-vue