開発覚書はてな版

個人的な開発関連の備忘録

【Angular】AngularでStorybookを使ってみた

概要

今回はAngularでStorybookを使用したサンプルです。

Storybookとは

  • Angular、React、Vueなどでコンポーネントを分離して開発するためのツールです。
  • 小さく定義したコンポーネントを一覧化して確認が出来ます。
  • Addonを追加することで、Storybookに様々な機能を追加できます。 storybook.js.org

実行環境

  • Node.js - 12.x

使用ライブラリ

  • Angular - 9.1.x
  • @storybook/angular - 5.3.x

サンプルソース

src/app/custom-button.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'custom-button',
  template: `<button>{{ label }}</button>`,
})
export class CustomButtonComponent {
  @Input() label = 'button';
}

src/app/custom-button.component.stories.ts

  • storiesファイルにCustomButtonComponent を定義します。
import { CustomButtonComponent } from './custom-button.component';

export default {
  title: 'CustomButton',
};

export const Basic = () => ({
  component: CustomButtonComponent,
});

.storybook/main.js

  • storybookの対象ファイルのファイルパスを指定します。
module.exports = {
  stories: ['../src/**/*.stories.[tj]s'],
};

.storybook/tsconfig.json

{
  "extends": "../tsconfig.json",
  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
  ],
  "include": [
    "../src/**/*",
  ]
}

実行

  • start-storybook -p 8080 で実行できます。(-p 8080 はポート番号)
  • http://localhost:8080/ にブラウザからアクセスすることで、Storybookの確認が出来ます。

f:id:kakkoya:20200530150344p:plain

サンプルソース一式

github.com

おわりに

  • プロジェクトで使用する共通コンポーネントを Storybook に登録しておくと、デザイン作成時に再利用しやすくなるので便利です。