StorybookでSvelteプロジェクト向けのUIデザイン開発環境を構築する


※ 当ページには【広告/PR】を含む場合があります。
2024/07/02
【Svelte Framework入門】Svelteアプリのビルド出力をindex.htmlのみにするViteプラグインを導入してみる
Storybook&SvelteでTypescript/Sassを使う場合の注意点
蛸壺の技術ブログ|StorybookでSvelteプロジェクト向けのUIデザイン開発環境を構築する

個人開発でウェブサイトを作り込んでいくと、ふとした時点でコンポーネント単位で独自のCSSデザインを作成したり、ページ全体のレイアウトを変更したいなどの作業が次第に開発者の負荷の高いものになってくることは避けられません。

著者的にも長らくフルスタック開発を一人で行っているため、カスタマーやクライアント側の受け取り方次第で評価の決まる
「UIデザイン」には"プロセスとしての正解"が見いだしにくく、メインの業務から疎かになりがちになってしまいます。

他方で、現代のウェブサイト作りにおいての「UIデザイン」は、付加価値的な意味合い以上に
、UX(ーザーエクスペリエンス)を向上させる重要なフロントエンド技術の一角となっているため、手を抜くことができなくなりました。

このような開発者のニーズの高まりとともに、
「UIカタログ」として集中して作業を行えるアプリケーションが脚光を浴びてきました。

今回はJavascriptフレームワーク向けのメジャーなフロントエンドワークショップである
「Storybook」をローカルにインストールして、Svelte向けに導入するまでの手順を紹介します。

参考|Storybook


合同会社タコスキングダム|蛸壺の技術ブログJavascript(js)&Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍&教材の手引き

超JavaScript 完全ガイド 2024

Storybookをローカル環境に立ち上げる

Storybookはローカルサーバー経由でプラウザから利用するSPAとして起動することができます。

それでは主に
公式のStorybookインストール手順に従って、Storybookの導入を行っていきます。

今回のフレームワークのターゲットは
Svelteとして説明を進めますが、以下のフレームワークの他にプレインなHTMLにも対応しています。

            
            - React
- Vue
- Angular
- Umber
- Svelte
- Preact
- Solid
- Qwik
        
それでは公式の手順に従って始めてみます。

なおNodejs関連の開発環境が必要ですので、そこらへんの事前準備の説明は省略させていただきます。

ちなみに手元の環境では、

            
            $ node --version
v20.10.0
$ npm --version
10.2.3
$ yarn --version
1.22.19
        
となっています。

Storybookプロジェクトの初期化

執筆時現在2024年7月時点で、最新のStorybook v8をSvelteで使おうとすると、結構セットアップがしんどいことになっています。

まずはダメな例からやってみます。

            
            #👇空のpackage.jsonを用意しておく
$ yarn init
#👇Storybook v8がインストールされる
$ npx storybook@latest init
        
インストール過程で、ターゲットのフレームワークとバンドラを聞いてこられるので、SvelteViteに指定しておきます。

インストールはこれで完了で、実際にStorybookを立ち上げてみましょう。

合同会社タコスキングダム|蛸壺の技術ブログ

いきなりエラーが出ています。

こちらのページで、現行最新のStorybook v8でフレームワークをSvelteで使うと深刻なバグが存在しているようです。

仕方ないので、Storybookを
latestから安定してSvelteが動くバージョンまでダウングレードさせます。

            
            $ npx storybook@7 init
        
いくつか躓くポイントがありましたが、結論として、現状7系は使っても問題なさそうです。

合同会社タコスキングダム|蛸壺の技術ブログ

Svelteを入れてたつもりでsvelte/compilerエラーが出る時

上の手順だと、すんなりStorybook v7が動いているような気になりましたが、手元のDebianOSで正常起動するためにはいくつかのバグへの対処が必要でした。

まずは1つ目のエラーとして以下のような症状が起こってしまう場合です。

            
            $ storybook dev -p 5384
@storybook/cli v7.6.20

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: @storybook/svelte-vite/preset.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

Error: Cannot find module 'svelte/compiler'
Require stack:
- ./node_modules/@storybook/svelte-vite/dist/preset.js
- ./node_modules/@storybook/core-common/dist/index.js
- ./node_modules/@storybook/telemetry/dist/index.js
- ./node_modules/@storybook/cli/dist/generate.js
- ./node_modules/@storybook/cli/bin/index.js
- ./node_modules/storybook/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (./node_modules/@storybook/svelte-vite/dist/preset.js:9:265)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.newLoader (./node_modules/esbuild-register/dist/node.js:2262:9)
    at extensions..js (./node_modules/esbuild-register/dist/node.js:4838:24)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at loadPreset (./node_modules/@storybook/core-common/dist/index.js:15:82)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
        
ひとまずpackage.jsonを覗くと、デフォルトとなっているReactはそのままいるようですが、Svelte本体がいない状態になっています。

            
            {
  //...省略
  "devDependencies": {
    "@storybook/addon-essentials": "^7.6.20",
    "@storybook/addon-interactions": "^7.6.20",
    "@storybook/addon-links": "^7.6.20",
    "@storybook/blocks": "^7.6.20",
    "@storybook/svelte": "^7.6.20",
    "@storybook/svelte-vite": "^7.6.20",
    "@storybook/test": "^7.6.20",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "storybook": "^7.6.20"
  }
}
        
どうやらSvelteとViteがpeerDependence扱いで、個別に入れないといけないようです。

            
            $ yarn add -D svelte
#👇Viteのバージョンに注意!
$ yarn add -D vite@^4.0.0
        
SvelteとViteを手動で入れる際にも、パッケージバージョンには注意が必要で、Svelteは現行のv4で構わないのですが、Viteは現時点で1つ前のv4でないと上手く動きません。

ここまでも結構骨が折れましたが、困ったことにまたちょっとバグが出ます。

更に再度Storybookを立ち上げてみると、以下のエラーが発生します。

            
            #...
/***/node_modules/wide-align/align.js:2
var stringWidth = require('string-width')
                  ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /***/node_modules/string-width/index.js from /***/node_modules/wide-align/align.js not supported.
Instead change the require of index.js in /Users/phil/Projects/FPV/nextmission/node_modules/wide-align/align.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/***/node_modules/wide-align/align.js:2:19)
    at Object.<anonymous> (/***/node_modules/gauge/render-template.js:2:13)
    at Object.<anonymous> (/***/node_modules/gauge/plumbing.js:3:22)
    at Object.<anonymous> (/***/node_modules/gauge/index.js:2:16)
    at Object.<anonymous> (/***/node_modules/npmlog/log.js:3:13)
    at Object.<anonymous> (/***/node_modules/@storybook/node-logger/dist/index.js:1:1141)
    at Object.<anonymous> (/***/node_modules/@storybook/cli/dist/generate.js:1:1014)
    at Object.<anonymous> (/***/node_modules/@storybook/cli/bin/index.js:9:1)
    at Object.<anonymous> (/***/node_modules/storybook/index.js:3:1) {
  code: 'ERR_REQUIRE_ESM'
}
        
これもStorybook v7を使ってSvelteを使おうとする際に起こるのバグのようで、対処法は以下のサイトで述べられいるように自前で解決しないといけないようです。

参考|string-width dependency stops storybook from executing #22431

必要なライブラリ依存性のうち、
jackspeakのバージョンに齟齬が発生しているようなので、package.jsonresolutionsフィールドに、

            
            {
    //...中略
    "resolutions": {
        "jackspeak": "2.1.1"
    }
}
        
というようなバージョンの指定をすると上手くようです。

なお
package.jsonを書き換えた場合には、以前のキャッシュが残っているときがあるので、再度yarn installの前にパッケージを一旦クリーンにして、変更を適用させる必要があるかもしれません。

            
            $ rm -rf yarn.lock node_modules
$ yarn install
        
おそらくはこれでSvelte対応のStorybookが動作するはずです。

無論、少し待てばStorybook v8でのバグ対応がなされると信じて、しばらくはStorybook v7で我慢しておきましょう。


合同会社タコスキングダム|蛸壺の技術ブログJavascript(js)&Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍&教材の手引き

超JavaScript 完全ガイド 2024

まとめ

今回は現行のStorybookのSvelte/Vite対応の話題をピックアップしてお届けしてみました。

やはり今やフロントエンド開発のデファクトとなった「React」や「Vue」と比べると、Svelteなどは些か開発者人口が減ってしまうので、潜在的なバグの対応が遅かったりもするようですが、一つ一つ問題を対処していけばまだまだStorybookも問題なく使えると感じました。

さて、今回はStorybookのセットアップだけにフォーカスした内容でしたが、気が向けば次回以降で具体的なSvelte UIコンポーネントの作成方法などを解説してみようかと思います。

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。

合同会社タコスキングダム|蛸壺の技術ブログJavascript(js)&Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍&教材の手引き