Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

5decf7f10129094643082b24a97a89ad?s=47 nal
October 07, 2021

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

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

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

5decf7f10129094643082b24a97a89ad?s=128

nal

October 07, 2021
Tweet

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