#RAKUSMeetup ©2021 RAKUS Co., Ltd. チーム開発における コンポーネントシステムの問 題と解決施策 UI開発課 フロントエンドエンジニア 中田　和宏

#RAKUSMeetup 　 : @nalpan 　 : @nal_pan 中田和宏（なかたかずひろ） 趣味 寝ること 音楽ゲーム 温泉地に一人旅 気になるツールの素振り 豆からコーヒーを淹れるのがマイブーム （全自動だけど…） 楽楽勤怠でフロントエンド開発を担当 最近はチーム内の調整や問い合わせ対応が多い Vue.js 日本ユーザーグループ コアスタッフ 未経験者向けハンズオン教材の作成 https://github.com/vuejs-jp/handson-vue3 趣味周りのアプリ開発 https://ddrdraw.surge.sh/

#RAKUSMeetup 下記課題感の参考になれば幸いです 🙋 ● コンポーネントの切り分けに悩んでいる ● Atomic Designなどうまくいかなかった ● 実装済コンポーネントの認識共有が大変 ● Vue CLI + VuetifyでStoryBookを動作させたい

#RAKUSMeetup コンポーネントのレイヤーや責務は 意識しよう！ 本日一番お伝えしたいこと

#RAKUSMeetup アジェンダ ● 背景と問題の提示 ● 問題解決の試みと解決したこと ○ コンポーネント分類による認識共有 ○ StoryBookの導入によるカタログ・動くドキュメントの作成 ● 次に見えてきた問題とやりたい事

#RAKUSMeetup 背景 ● 機能開発優先によりコンポーネントの設計・構成について 見直す機会が少なかった ○ スピード感としては過去1年ほぼ月1リリース ● 設計・構成の指針が明示されていなかった ● チームの人数が毎月1人ペースで増加 ○ 2021年度4月〜9月で5人 -> 9人

#RAKUSMeetup 問題の表面化 ● 不具合の切り分け・修正が困難 ○ 同じ入力チェックが分散・重複している… 🤔 ● コンポーネントに実装済みの機能を再度実装してしまう ○ use-blank-item,hide-placeholder どちらも未選択項目のon/off… 🤔 ● prop,slotの入力で何が変わるのかわかりづらい ○ readonly,disabled 見た目が同じ… 🤔

#RAKUSMeetup コンポーネントを分類

#RAKUSMeetup コンポーネントを分類 以前の状態 ● ○ components ■ base -> 最小単位コンポーネント、PC/SPに分かれている ■ pc -> PC用のコンポーネント ■ sp -> SP用のコンポーネント ○ pages -> ページの親コンポーネント、PC/SPに分かれている

#RAKUSMeetup コンポーネントを分類 変更前 ● ○ components ■ base ■ pc ■ sp ○ pages 変更後 ● ○ components ■ base ● pc ● sp ■ parts ■ pages

#RAKUSMeetup コンポーネントを分類 変更後 ● ○ components ■ base -> 基底コンポーネント ■ parts -> ページの一部となるコンポーネント ■ pages -> ページの親コンポーネント ● それぞれの配下にpc/sp/mixinディレクトリを配置

#RAKUSMeetup baseコンポーネント ● Atomic DesignのAtoms,Moleculesに該当 ● 汎用的な機能を持つ ○ 必須入力判定機能、外部から渡された値や範囲の判定機能 ● 業務的な知識は持たない ○ 具体的な値や範囲の判定 ○ 時刻や期間が該当 ■ etc, 24時間、前後1ヶ月 コンポーネントを分類

#RAKUSMeetup コンポーネントを分類 partコンポーネント ● Atomic DesignのOrganismsに該当 ○ ページの一部を構成するコンポーネント ● 業務的な知識や機能を持つ ○ Moleculesと決定的に異なる点 ○ 画面固有の入力制限 ■ etc, 24時間、前後1ヶ月 ○ 入力による項目表示出しわけ

#RAKUSMeetup コンポーネントを分類 pageコンポーネント ● Atomic DesignのTemplates,Pagesに該当 ○ ページの親に該当するコンポーネント ● 業務的な知識や機能を持つ ○ 画面固有の入力制限 ■ etc, 24時間、前後1ヶ月 ○ 入力による項目出しわけ

#RAKUSMeetup コンポーネントを分類 解決したこと ● ロジック実装箇所の認識が統一された 🎉 ○ 指針ができる事によりどのロジックをどのコンポーネントに実装するか明確に なった

#RAKUSMeetup StoryBookを導入

#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）

#RAKUSMeetup StoryBookを導入 main.jsの編集 ● VuetifyLoaderPluginを設定 ○ ビルド時にVuetifyコンポーネントのimportを挿入する ○ プロダクトコードはvue-cli-plugin-vuetifyにて内部利用している

#RAKUSMeetup StoryBookを導入 preview.jsの編集 ● plugin, global directive, global mixinの登録 ○ プロダクトコードと同じように登録

#RAKUSMeetup StoryBookを導入 preview.jsの編集 ● Global decoratorsの登録 ○ Vuetifyコンポーネントの動作には,のラップが必要 https://vuetifyjs.com/ja/components/application/#api

#RAKUSMeetup StoryBookを導入 preview-head.htmlの編集 ● 外部リソースの取得 ○ スタイルやフォントなど外部リソースが必要な場合は用意 https://storybook.js.org/docs/vue/configure/story-rendering

#RAKUSMeetup StoryBookを導入 無事動作 🎉

#RAKUSMeetup StoryBookを導入 解決したこと ● コンポーネントの仕様把握 🎉 ○ 機能実装時に同様の機能が実装済みであるかを確認できる ○ 実際の操作やpropsの変更でコンポーネントの感触を確認

#RAKUSMeetup StoryBookを導入 下記のような効果も… ● コードのドキュメンテーション 🎉 ○ @storybook/addon-docsによりJSDoc/TSDocがdescriptionとなるため、 結果的にJSDoc/TSDocを書くようになった ■ 厳密にはVue Styleguidist ■ https://vue-styleguidist.github.io/docs/Documenting.html

#RAKUSMeetup 次に見えてきた問題とやりたいこと ● storiesをどう実装するか ○ コンポーネントの仕様策定が必要 ● PC/SP同名で別のコンポーネントのstoriesが実装できない ○ プロダクトではUAにより適したものをグローバルインポートしている ○ StoryBookには全てを載せたいが上記機構を変えないといけない ● StoryBookとコンポーネントテストの統合 ○ CSF3.0のPlay Function+@storybook/testing-vueに期待 ■ https://storybook.js.org/addons/@storybook/testing-vue