---
# System prepended metadata

title: 第3回会議

---

# 第3回会議
### StoryBookの導入
- 現在開発は`Home.vue`に自分が担当しているコンポーネントのみ読み込み，`Home.vue`はGitにあげず(`git add`せず)に開発している状態
    - `Home.vue`を誤ってCommit, Pushしてしまった場合面倒
    - そもそも`Home.vue`だけあげないように気をつけるとかめんどくさい
    - `Home.vue`はみんなのものなのでひとりじめしてはいけないっ！！
- StoryBookを導入しよう
    - コンポーネントカタログ
    - 設定ファイルを用意すれば各コンポーネントごとにプレビューが見れるのでわざわざ`Home.vue`を変更する必要がない．すばらしい．
    - いくつかのPropsの組み合わせで挙動の確認ができるので，テストにも使える．すばらしい．
#### みんながやること
##### `Header.vue`の場合
`/src/stories/Header.stories.js`
```
// コンポーネント読み込み
import Header from '@/components/Header/Header.vue'

// 各種設定オブジェクトをデフォルトエクスポート
export default {
    title: 'components/Header', // StoryBook上でつかうコンポーネントの名前．/区切りでフォルダ構造化できる．
    component: Header // 先程インポートしたコンポーネントオブジェクト
}

const Primary = () => ({
    components: { Header },
    template: '<Header></Header>'
}) // 大元となるVueコンポーネント

export const Default = Primary // デフォルト状態のコンポーネント

```
##### プレビューの起動
`npm run storybook`