StoryBook駆動で新規システムの開発を試してみた

36.6K Views

January 27, 22

#storybook #フロントエンド #vue.js #nuxt.js #web #StoryBook #UI Development #Test #Install #Documentation

スライド概要

kght6123

@kght6123

スライド一覧

オタクなフロントエンドえんじにあです。

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 2.35MB)

関連スライド

VivlioStyleとRehype／Remarkではじめる、CSS組版による同人誌制作

vivliostyle

kght6123 2.6K

20231224_Next.jsのApp RouterによるWeb開発について

フロントエンド next.js react.js

kght6123 2.1K

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0

ue4 ue5 ue-beginner

エピックゲームズジャパン 1.3M

Unreal Engine5 Lumenの仕組みと肝心なところ

ue5 ue-rendering ue-lumen

エピックゲームズジャパン 1.1M

SQL滅ぶべし

株式会社ホクソエム 850.1K

各ページのテキスト

1. 自己紹介出身地は佐賀です。三重県から地方勤務で虎の穴ラボ株式会社の通販チームにいます。（２０２０年１２月に入社、二児の父です。）フロントエンドは得意で、バックエンドのぼちぼちです。推し・南條愛乃（FripSideのVocal、とある科学の超電磁砲のOPとか）・Node.js／Java ・Nuxt.js／Tailwind CSS Copyright (C) 2021 Toranoana Inc. All Rights Reserved. 3

2. StoryBookとは？フロントエンドエンジニア向けのオープンソースのツールです。 👉 1. コンポーネント駆動型の UI を高速に開発する 👉 2. UI コンポーネントとページを分離して、開発できる 👉 3. UI の開発、テスト、およびドキュメント化を合理化できる公式サイトより https://storybook.js.org/ Copyright (C) 2021 Toranoana Inc. All Rights Reserved. 4

https://storybook.js.org/

2. インストール方法 Nuxt.js なら nuxt/storybook をインストールすると、設定無しで、簡単に既存のNuxt.jsプロジェクトに導入できます（素のVueやReactは公式通りのインストールができて簡単です）公式サイト https://storybook.nuxtjs.org/ 詳しくは、最近作ったQiitaブログで！ Copyright (C) 2021 Toranoana Inc. All Rights Reserved. 6

10.

11.

3. StoryBook駆動開発の進めかた 👉 1. StroyBookで画面イメージを作る（ほぼ静的な HTML） 👉 2. 画面仕様を作る（StoryBook に Markdown で書く or スプレッドシートに貼る） 👉 3. チーム内で画面仕様のレビュー 👉 4. コンポーネントを整理・共通化する（storybook で動かしながら） 👉 5. バックエンドとの結合部分（ロジック）を書く（StoryBook に FetchAPI のモックを書く） 👉 6. Jest でテストケースを作る Copyright (C) 2021 Toranoana Inc. All Rights Reserved. 11

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

4. 得られるメリット 👉 1. ドキュメント作成と並行して開発が進められる ➡ その後の開発が楽に！ 👉 2. 仕様が実際の画面で気軽に確認できる ➡ 実際の動きが誰でも（他の開発者、利用者など）想像しやすい！ 👉 3. バックエンドが無くても開発が進められる（無いこと前提に進める） ➡ スケジュール調整が楽になる！ Copyright (C) 2021 Toranoana Inc. All Rights Reserved. 25

26.

27.

28.

29.

まとめ StoryBook駆動で新規システムの開発をやってみました。今のところ、よく言われるStoryBookの陳腐化的なデメリットは感じて無いです。（スプレッドシートよりは良い感じ、Vue＋StoryBookの情報が少なくてたまに詰まるのが困る。 JSX使いたい。）全体の開発工数を下げつつ、コンポーネントの管理も楽になるので、よろしければ、お試しください😉 （最後のスライド以降に、利用したソースコードを記載） Copyright (C) 2021 Toranoana Inc. All Rights Reserved. 29

30.

31.

32.

[beta]

<!-- components/molcules/TextboxLabel.vue -->
<template>
<div class="tw-relative tw-mb-4">
<label :for="id" class="tw-leading-7 tw-text-sm tw-text-gray-600">
<slot></slot>
</label>
<atoms-html-textbox
class="textbox"
:id="id"
:value="value"
:type="type"
:placeholder="placeholder"
:disabled="disabled"
@input="emitEvent($event, 'input')"
@search="emitEvent($event, 'search')"
@enter="emitEvent($event, 'enter')"
>
</atoms-html-textbox>
</div>
</template>
<script>
export default {
props: {
id: { type: String, required: false, default: '' },
type: { type: String, required: false, default: 'text' },
value: { type: String, required: false, default: '' },
placeholder: { type: String, required: false, default: '' },
disabled: { type: Boolean, required: false, default: false },
},
methods: {
emitEvent(eventValue, eventName) {
this.$emit(eventName, eventValue)
},
},
}
</script>
Copyright (C) 2021 Toranoana Inc. All Rights Reserved.

32

33.

[beta]

// components/molcules/TextboxLabel.stories.js
export default {
title: 'molcules/TextboxLabelMdx',
}
export const Basic = ({}) => ({
template:
'<molcules-textbox-label :type="type" :value="value">Basic</molcules-textbox-label>',
props: {
type: {
default: 'text',
},
value: {
default: 'Basic',
},
},
})
Basic.argTypes = {
type: {
control: {
type: 'select',
options: ['text', 'search', 'password'],
},
defaultValue: 'text',
},
value: {
control: 'text',
defaultValue: '',
},
}
Copyright (C) 2021 Toranoana Inc. All Rights Reserved.

33

34.

[beta]

<!-- components/molcules/TextboxLabel.stories.mdx -->
import { Meta, Story, Props } from '@storybook/addon-docs/blocks'
import { action } from '@storybook/addon-actions'
import MolculesTextboxLabel from './TextboxLabel'
<Meta title="molcules/TextboxLabelMdx" component={MolculesTextboxLabel} />
# This is an awesome button
Some **markdown** description, or whatever you want.
## Example
サンプル
<Story name="Basic" args={{ type: 'text', value: 'Basic' }}>
{{
template:
'<molcules-textbox-label :type="type" :value="value">Basic</molcules-textbox-label>',
props: {
type: {
default: 'text',
},
value: {
default: 'Basic',
},
},
}}
</Story>
```html
<molcules-textbox-label :type="text" :value="Basic" />
```
## Props
<Props of={MolculesTextboxLabel} />

Copyright (C) 2021 Toranoana Inc. All Rights Reserved.

34

35.

[beta]

<!-- components/atoms/html/Textbox.vue -->
<template>
<input
:id="id"
ref="textbox"
:value="value"
:type="type"
:placeholder="placeholder"
:disabled="disabled"
:required="required"
@input="$emit('input', $event.target.value)"
@search="$emit('search', $event.target.value)"
@keydown.enter="$emit('enter', $event.target.value)"
/>
</template>
<script>
export default {
props: {
id: { type: String, required: false, default: '' },
type: { type: String, required: false, default: 'text' },
value: { type: String, required: false, default: '' },
placeholder: { type: String, required: false, default: '' },
disabled: { type: Boolean, required: false, default: false },
required: { type: Boolean, required: false, default: false },
},
}
</script>

Copyright (C) 2021 Toranoana Inc. All Rights Reserved.

35

36.

[beta]

<!-- components/molcules/el/RadioGroupRadioListLabel.vue -->
<template>
<atoms-el-col :span="span">
<div class="tw-text-xs tw-text-gray-600"><slot></slot></div>
<atoms-el-radio-group
ref="atoms-el-radio-group"
:value="value"
:disabled="disabled"
@input="input"
@change="change"
>
<atoms-el-radio
v-if="isVisibleAll"
:label="$constants.SELECT_NUMBER_ALL_VALUE"
>全て</atoms-el-radio
>
<atoms-el-radio
v-for="option in options"
:key="option.key"
:label="option.key"
>{{ option.label }}</atoms-el-radio
>
</atoms-el-radio-group>
</atoms-el-col>
</template>

Copyright (C) 2021 Toranoana Inc. All Rights Reserved.

<script>
export default {
props: {
isVisibleAll: { type: Boolean, required: false, default: true },
value: {
type: [String, Number, Boolean],
required: false,
default: undeﬁned,
},
disabled: { type: Boolean, required: false, default: false },
span: { type: Number, required: false, default: null },
options: {
type: [Array, Object],
required: false,
default: () => {
return []
},
},
},
methods: {
input(value) {
this.$emit('input', value)
},
change(value) {
this.$emit('change', value)
},
},
}
</script>

36

37.

[beta]

// components/molcules/el/RadioGroupRadioListLabel.stories.js
import RadioGroupRadioListLabel from './RadioGroupRadioListLabel'
export default {
title: 'molcules/el/RadioGroupRadioListLabel',
component: RadioGroupRadioListLabel,
argTypes: {},
}
// eslint-disable-next-line no-empty-pattern
export const Basic = (_args, { argTypes }) => ({
components: { RadioGroupRadioListLabel },
props: Object.keys(argTypes),
template:
'<molcules-el-radio-group-radio-list-label v-bind="$props">Basic</molcules-el-radio-group-radio-list-label>',
})
Basic.args = {
options: [
{ key: 777, label: 'メイドちゃん１' },
{ key: 888, label: 'メイドちゃん２' },
],
value: -1,
}
export const NotAll = (_args, { argTypes }) => ({
components: { RadioGroupRadioListLabel },
props: Object.keys(argTypes),
template:
'<molcules-el-radio-group-radio-list-label v-bind="$props">NotAll</molcules-el-radio-group-radio-list-label>',
})
NotAll.args = {
options: [
{ key: 777, label: 'メイドちゃん１' },
{ key: 888, label: 'メイドちゃん２' },
],
value: 8,
isVisibleAll: false,
}

Copyright (C) 2021 Toranoana Inc. All Rights Reserved.

37

38.

[beta]

// components/molcules/el/RadioGroupRadioListLabel.stories.mdx
import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
import { action } from '@storybook/addon-actions'
import RadioGroupRadioListLabel from './RadioGroupRadioListLabel'
<Meta
title="molcules/el/RadioGroupRadioListLabel/Mdx"
component={RadioGroupRadioListLabel}
/>
# 概要
ElementUI のラジオボタン＋テキストラベル、el-col を組み合わせた、Molcule コンポーネントです。
## サンプル
### 表示
export const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { RadioGroupRadioListLabel },
template:
'<molcules-el-radio-group-radio-list-label
v-bind="$props">NotAll</molcules-el-radio-group-radio-list-label>',
viewMode: 'docs',
})

<Canvas>
<Story
name="Basic"
args={{
options: [
{ key: 777, label: 'メイドちゃん１' },
{ key: 888, label: 'メイドちゃん２' },
],
value: -1,
}}
>
{Template.bind({})}
</Story>
</Canvas>
### コード
```html
<molcules-el-radio-group-radio-list-label
v-model="プロパティの名前"
:span="8"
:options="[
{ key: 7, label: 'メイドちゃん１' },
{ key: 8, label: 'メイドちゃん２' },
]"
>
NotAll
</molcules-el-radio-group-radio-list-label>
```
## 補足
- span は ElementUI の el-col タグの span 値になります。
- デフォルトのスロットは、ラベル名になります。
## 属性
<Props of={RadioGroupRadioListLabel} />

Copyright (C) 2021 Toranoana Inc. All Rights Reserved.

38

StoryBook駆動で新規システムの開発を試してみた

kght6123

関連スライド

VivlioStyleとRehype／Remarkではじめる、CSS組版による同人誌制作

20231224_Next.jsのApp RouterによるWeb開発について

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0

Unreal Engine5 Lumenの仕組みと肝心なところ

最新の6.0で学ぶ！初めてのひとのためのSpring Security

SQL滅ぶべし

各ページのテキスト