前回は、静的サイトでStorybookを活用するメリットについてご紹介しました。
今回は実際にStorybookを導入し、HTMLコンポーネントを作成するための環境構築を行っていきます。
フレームワークを使わないStorybookの環境構築は、意外と難しいポイントがあるため、つまずきやすいポイントを踏まえながら丁寧に解説していきます。
R
実際に自分のPCで作業しながらやってみましょう！
必要な開発環境の準備
Node.jsのインストール
まずはNode.jsが必要です。以下の手順で準備していきましょう：
1. Node.jsのインストール
bash
# nodeのバージョン確認
node -v
# v18.0.0以上であることを確認2. プロジェクトの初期化
bash
# プロジェクトディレクトリの作成
mkdir my-static-storybook
cd my-static-storybook
# package.jsonの生成
npm init -yStorybookのセットアップ
1. インストールと初期設定
bash
# Storybookのインストール（HTML用）
npx storybook@latest init --type html
# 開発サーバーの起動
npm run storybook2. 生成されるファイル構造
my-static-storybook/
├── .storybook/
│ ├── main.js
│ └── preview.js
├── stories/
│ ├── assets/
│ └── Button.stories.js
├── package.json
└── README.md3. 設定ファイルの解説
javascript
// .storybook/main.js
module.exports = {
stories: ['../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
],
framework: {
name: '@storybook/html-vite',
options: {},
},
docs: {
autodocs: 'tag',
},
};このファイルで重要な設定項目：
stories: ストーリーファイルの配置場所addons: 使用するアドオンframework: HTML用のフレームワーク設定
最初のコンポーネント作成
1. ボタンコンポーネントの作成
javascript
// stories/components/button.stories.js
export default {
title: 'Components/Button',
argTypes: {
label: { control: 'text' },
primary: { control: 'boolean' },
},
};
// テンプレート関数
const createButton = ({ label = 'Button', primary = true }) => {
const btn = document.createElement('button');
btn.innerText = label;
btn.className = `btn ${primary ? 'btn-primary' : 'btn-secondary'}`;
return btn;
};
// ストーリーの定義
export const Primary = {
render: (args) => createButton(args),
args: {
label: 'Primary Button',
primary: true,
},
};
export const Secondary = {
render: (args) => createButton(args),
args: {
label: 'Secondary Button',
primary: false,
},
};2. スタイルの適用
javascript
// .storybook/preview.js
import '../src/styles/main.css';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};css
/* src/styles/main.css */
.btn {
padding: 8px 16px;
border-radius: 4px;
border: none;
cursor: pointer;
font-size: 16px;
}
.btn-primary {
background-color: #0066ff;
color: white;
}
.btn-secondary {
background-color: #f0f0f0;
color: #333;
}よくあるトラブルと解決方法
1. スタイルが適用されない
- CSSファイルのパスが正しいか確認
- preview.jsでのインポートを確認
- Viteの設定を確認
2. アセットが読み込めない
javascript
// .storybook/main.js
module.exports = {
staticDirs: ['../public'], // 静的ファイルのディレクトリ指定
// ...
};3. ホットリロードが効かない
package.jsonのスクリプトを確認- Viteの設定を確認
- キャッシュのクリア
次のステップ
環境構築ができたら、次は実際のコンポーネント制作に入ります。次回は以下の内容を予定しています：
- 実用的なコンポーネントの作成
- バリエーションの追加
- ドキュメントの作成方法
まとめ
今回は環境構築に焦点を当てて解説しました。特に以下のポイントを押さえておくことが重要です：
- 適切なNode.jsバージョンの使用
- HTML用のStorybook設定
- 基本的なコンポーネント構造の理解
- スタイル適用の方法
これらの基礎を押さえることで、次回以降のコンポーネント制作をスムーズに進めることができます。
次回は「コンポーネント制作編」として、実践的なコンポーネントの作り方を解説していきます。
