20210809 story book_driven_new_system_development_nuxtjs

Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
StoryBook駆動で
新規システムの開発を試してみた
虎の穴ラボ古賀
1

アジェンダ
1. 自己紹介
2. StoryBookとは？
3. インストール方法
4. StoryBook駆動開発の進めかた
5. メリット
6. まとめ
2

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

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

インストールは簡単です！
5
Nuxt.js ならすぐに使い始められます！

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

Step1. npm インストール
7
@nuxtjs/storybook、postcssをインストール

Step2. .gitignoreに追記
8

Step3. nuxt.conﬁg.jsに追記
9
後は、npx nuxt storybookで起動！

３ステップで完了🎊
10
nuxt/storybook が無い時は手順が多くて大変でした、、、

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

Markdownで仕様を書ける！
🎊
12
Markdownで書けると捗りますよね、Documentation As Code 🙌

3-2. StoryBook に Markdown で仕様を書ける！
13

👉 使用例をコピーできる
14

👉 コンポーネントの属性の一覧を生成してくれる
15

16
👉 Markdown で仕様が書ける

17
👉 Markdown で仕様が書ける

18
👉 nuxt.config.js に追記が必要！

Fetch APIのモックを書ける！
🎊
19
APIが無くても開発進められる！

3-5. StoryBook に API のモックを書ける！
20
👉 下記のモックを書くと・・・

3-5. StoryBook に API のモックを書ける！
21
👉 FetchAPI（axios）の結果をモックに差し替えられます

モックのインストールが必要で
す
22
今回は storybook-addon-mock を使います

Step1. npm インストール
23

Step2. nuxt.conﬁg.js に追記
24

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

全体の開発工数を抑えられる
🎊
26
設計工数↑開発工数↓↓
（実際の動きが想像しやすいので、仕様ミスが減る）
（バックエンドの進捗を気にせずに、コーディングが進められる）

仕様の確認も楽に
🎊
27
1. 〜画面で検索して〜エラーになったら、どうなったっけ？的な疑問も
2. 再利用する既存のコンポーネントを試しに動かしたい

これらが全てコードに、
🎊
28
スプレッドシートの管理が避けられる

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

ご静聴、ありがとうございました
30

Appendix
31

32

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

33
// 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: '',
},
}

34

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} />

35

<template>
<input
:id="id"
ref="textbox"
:value="value"
:type="type"
:placeholder="placeholder"
: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: '' },
required: { type: Boolean, required: false, default: false },
},
}
</script>

36

<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"
@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>
<script>
export default {
props: {
isVisibleAll: { type: Boolean, required: false, default: true },
value: {
type: [String, Number, Boolean],
required: false,
default: undeﬁned,
},
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>

37
// 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 }) => ({
template:
'<molcules-el-radio-group-radio-list-label v-bind="$props">NotAll</molcules-el-radio-group-radio-list-label>',
})
NotAll.args = {
options: [
],
value: 8,
isVisibleAll: false,
}

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

20210809 story book_driven_new_system_development_nuxtjs

Recommended

More Related Content

Similar to 20210809 story book_driven_new_system_development_nuxtjs (20)

More from 虎の穴開発室 (20)

Recently uploaded (20)