Nuxt.js に Storybook を導入する方法

フロントエンド界隈で Storybook を使っているとの話をよく聞いていたのですが使ったことがなかったため、動作確認をしてみました。
この記事では以前に作成した Nuxt プロジェクトに Storybook を導入しています。

＊Storybook とは

開発環境と分離された環境で UI コンポーネントを個別に作成し、コンポーネントの再利用やテストを容易にすることができるツールです。アプリケーションの依存関係を気にする必要がないため迅速な開発ができます。カタログのように可視化することができるため、周囲への共有も簡単になります。
拡張機能も充実しており、スナップショットのテストをしたり、Storybook でコンポーネントの修正をしたりすることもできます。Angular や Vue、React、React Native にも対応しています。
具体的な例は公式サイトのサンプル集を参照してください。

＊環境

macOS
nuxt 2.8.1
storybook/vue 5.2.1

＊参考

＊インストール

今回は以前に作成した Nuxt プロジェクトに Storybook を導入します。
プロジェクト直下で下記コマンドを実行します。
CLI を使うと面倒な設定を自動で全てやってくれます。自分でカスタマイズしたい場合はnpm install @storybook/vue --save-devを使います。（公式サイトの Manual setup を参照）

$ npx -p @storybook/cli sb init --type vue

下記コマンドを実行すると、Storybook が起動しブラウザに表示されます。

$ npm run storybook

もしくは下記URLにアクセスします。
http://localhost:6006/

補足ですが、今回 CLI では下記ファイルの作成を自動でやってくれます。

<.storybook/addons.js>

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';

<.storybook/config.js>

import { configure } from '@storybook/vue';

// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.js$/), module);

そのほかstoriesディレクトリにサンプルファイルを作成します。

＊SCSSの読込み設定

SCSS を使っている場合はデフォルトのままだと読み込めずエラーになるので .storybookディレクトリにwebpack.config.jsを新規作成する必要があります。
webpack.config.jsとは webpack を使って Javascript / CSS のビルドをするために必要な設定ファイルです。Storybook は webpack を使っているため、webpack.config.jsで CSS を読み込む設定をします。
（参考：公式サイト / custom-webpack-config）

下記を新規作成します。
<.storybook/webpack.config.js>

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
          {
            loader:'sass-resources-loader',
            options: {
              resources: ['./assets/scss/style.scss']
        }}],
        include: path.resolve(__dirname, '../'),
      }
    ]
  }
}

resourcesに指定している SCSS ファイルは独自で必要なファイルを指定してください。今回はstyle.scssで全ての SCSS ファイルを読み込むようにしているため 1つのファイルしか指定していませんが、複数のファイルを指定することが可能です。
<assets/scss/style.scss>

@charset "utf-8";

@import '_variables';
@import '_base';
@import '_section-title';
@import '_effect';

＊コンポーネントを追加

サンプルとしてボタンのコンポーネントを新規作成します。
<components/common/ButtonWide.vue>

<template>
  <div>
    <button class="btn-blue">Button</button>
  </div>
</template>
<style scoped lang="scss">
.btn-blue {
  font-size: 18px;
  background-color: #668ad8;
  color: #fff;
  width: 200px;
  height: 50px;
  border-radius: 5px;
  text-decoration: none;
  border-bottom: solid 4px #627295;
}
</style>

storiesディレクトリにbutton.stories.jsを新規作成します。
storiesOf()にグループ名を指定し、add()でコンポーネントのストーリー名を追加します。1グループに複数のストーリーを追加することができます。
<stories/button.stories.js>

import { storiesOf } from '@storybook/vue'
import ButtonWide from '../components/common/ButtonWide.vue'

storiesOf('ButtonWide', module).add('default', () => ({
  components: { ButtonWide },
  template: `<button-wide></button-wide>`
}))

再度、Storybook を起動しなおすと作成したボタンのコンポーネントが表示されます。

$ npm run storybook

＊所感

今回は Storybook の簡単な動作確認をしてみたので試していないですが、コンポーネントの中で外部のライブラリを使っている場合は別途読み込む設定が必要そうでした。また、コンポーネントの中でパスを指定して画像を表示している場合、Storybook と開発環境で読み込む設定を同じにする必要がありそうです。そのため、開発環境と異なる環境でコンポーネントを作成することができる反面、開発環境と同様の設定を Storybook でもいちからする必要があるため手間がかかりそうでした。
サービスの立ち上げ時は Storybook で汎用的に使えるようなコンポーネント化を意識しつつ、サービスの拡大見込みができて作業に余裕があるときに導入するのが良いかと思いました。

もぐもぐプログラミング

＊Storybook とは

＊環境

＊参考

＊インストール

＊SCSSの読込み設定

＊コンポーネントを追加

＊所感

人気の投稿