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

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

nal
October 07, 2021

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

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

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

nal

October 07, 2021
Tweet

More Decks by nal

Other Decks in Technology

Transcript

  1. #RAKUSMeetup   : @nalpan   : @nal_pan 中田和宏(なかたかずひろ) 趣味 寝ること

    音楽ゲーム 温泉地に一人旅 気になるツールの素振り 豆からコーヒーを淹れるのがマイブーム (全自動だけど…) 楽楽勤怠でフロントエンド開発を担当 最近はチーム内の調整や問い合わせ対応が多い Vue.js 日本ユーザーグループ コアスタッフ 未経験者向けハンズオン教材の作成 https://github.com/vuejs-jp/handson-vue3 趣味周りのアプリ開発 https://ddrdraw.surge.sh/
  2. #RAKUSMeetup 問題の表面化 • 不具合の切り分け・修正が困難 ◦ 同じ入力チェックが分散・重複している… 🤔 • コンポーネントに実装済みの機能を再度実装してしまう ◦

    use-blank-item,hide-placeholder どちらも未選択項目のon/off… 🤔 • prop,slotの入力で何が変わるのかわかりづらい ◦ readonly,disabled 見た目が同じ… 🤔
  3. #RAKUSMeetup コンポーネントを分類 以前の状態 • <app-root> ◦ components ▪ base ->

    最小単位コンポーネント、PC/SPに分かれている ▪ pc -> PC用のコンポーネント ▪ sp -> SP用のコンポーネント ◦ pages -> ページの親コンポーネント、PC/SPに分かれている
  4. #RAKUSMeetup コンポーネントを分類 変更前 • <app-root> ◦ components ▪ base ▪

    pc ▪ sp ◦ pages 変更後 • <app-root> ◦ components ▪ base • pc • sp ▪ parts ▪ pages
  5. #RAKUSMeetup コンポーネントを分類 変更後 • <app-root> ◦ components ▪ base ->

    基底コンポーネント ▪ parts -> ページの一部となるコンポーネント ▪ pages -> ページの親コンポーネント • それぞれの配下にpc/sp/mixinディレクトリを配置
  6. #RAKUSMeetup baseコンポーネント • Atomic DesignのAtoms,Moleculesに該当 • 汎用的な機能を持つ ◦ 必須入力判定機能、外部から渡された値や範囲の判定機能 •

    業務的な知識は持たない ◦ 具体的な値や範囲の判定 ◦ 時刻や期間が該当 ▪ etc, 24時間、前後1ヶ月 コンポーネントを分類
  7. #RAKUSMeetup コンポーネントを分類 partコンポーネント • Atomic DesignのOrganismsに該当 ◦ ページの一部を構成するコンポーネント • 業務的な知識や機能を持つ

    ◦ Moleculesと決定的に異なる点 ◦ 画面固有の入力制限 ▪ etc, 24時間、前後1ヶ月 ◦ 入力による項目表示出しわけ
  8. #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)
  9. #RAKUSMeetup 次に見えてきた問題とやりたいこと • storiesをどう実装するか ◦ コンポーネントの仕様策定が必要 • PC/SP同名で別のコンポーネントのstoriesが実装できない ◦ プロダクトではUAにより適したものをグローバルインポートしている

    ◦ StoryBookには全てを載せたいが上記機構を変えないといけない • StoryBookとコンポーネントテストの統合 ◦ CSF3.0のPlay Function+@storybook/testing-vueに期待 ▪ https://storybook.js.org/addons/@storybook/testing-vue