Storybook＆SvelteでTypescript/Sassを使う場合の注意点

前回の内容までで、フレームワークをSvelteに指定する際のStorybookをインストールする方法を解説してみました。

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

フロントエンドワークショップ環境・『Storybook』をSvelteで使うためのインストール手順

これでSvelteコンポーネントでもStorybookが使えるようにはできたものの、多少無理をして構築したStorybook(v7)/Viteの組み合わせでは、TypescriptとSassの取り扱いには注意が必要になります。
今回もStorybookの使い方に直接は関係しない話題ですが、SvelteをTypescript/Sass等を使って開発したい方は事前に知っておきたいポイントをまとめてみます。

Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き

超JavaScript 完全ガイド 2024

StorybookでTypescriptを使う

Storybookでは標準で内部のTypescriptを使って、リソースフォルダ内の

.ts

ファイルをトランスパイルしてくれる仕組みになっています。
このため、Typescriptを使うだけなら何も問題ありませんが、場合によっては外部のライブラリを使いたい際に、Vite側の設定をカスタマイズする必要も出てきます。

Storybookのvite-buildersでViteの振る舞いを独自に制御する方法

StorybookのVite設定を独自に定義するための方法がいくつか用意されています。

参考｜Vite - Storybook

Viteをカスタマイズする場合には、

@storybook/builder-vite

を追加し、

開く/閉じる

            yarn add -D @storybook/builder-vite

として、例えば以下のように内部のViteの設定を

viteFinal

関数を介して調整します。

開く/閉じる

            import { mergeConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default {
    //...中略
    core: {
        builder: '@storybook/builder-vite', //👈ビルダーを有効化
    },
    //...中略
    //👇vite.config.jsのカスタマイズ
    async viteFinal(config) {
        return mergeConfig(config, {
            plugins: [svelte()],
        });
    }
}

通常はこの

viteFinal

を使って、必要な設定を追加していく方式で変更を加えるのが一般的のようです。
またVite設定の変更点が多い場合、以下のように

vite.config.js

をごっそり入れ替えるやり方も可能です。

開く/閉じる

            export default {
    //...中略
    core: {
        //👇独自のvite.config.jsを外部ファイルから指定する
        builder: {
            name: '@storybook/builder-vite',
            options: {
                viteConfigPath: './customVite.config.js',
            },
        },
    },
    //...中略
}

Storybook/Viteのバージョンによってはモジュールの読み込みに失敗する

前回の内容

からもSvelte/ViteでStorybookを動かすだけでなんだかとっても疲れてしまいました。
このように現状もStorybook自体がかなり対応できていないバグの温床になっています。
例えば、先程のカスタムVite設定から

@sveltejs/vite-plugin-svelte

を読み込ませようとすると、Storybook(v7)のファイルローダーがきちんとパッケージを読み込んでくれません。

開く/閉じる

            @storybook/cli v7.6.20

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in ./node_modules/@sveltejs/vite-plugin-svelte/package.json
    at exportsNotFound (node:internal/modules/esm/resolve:294:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:584:13)
    at resolveExports (node:internal/modules/cjs/loader:591:36)
    at Module._findPath (node:internal/modules/cjs/loader:668:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1130:27)
    at Module._resolveFilename (./node_modules/esbuild-register/dist/node.js:4799:36)
    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> (./.storybook/main.js:2:24)

別段、

@sveltejs/vite-plugin-svelte

側には問題なさそうなのですが、「

exports

が定義されていない」と不条理なエラーが吐き出させると後はどう対応することもできません。
Viteがカスタマイズできないので、Svelteユーザーにとっては少し困ったことに、Svelteコンポーネントへの埋め込みのTypescriptコードがStorybookに上手く解釈されません。
例えば、以下のようなSvelteコンポーネントを利用しようとしても、

開く/閉じる

            <script lang="ts">
    export let label: any;
</script>

...

Storybookにはこのスクリプト部分はすべてJavascriptと解釈させるため、コンパイルが通りません。

開く/閉じる

            [vite] Internal server error: /usr/src/app/storybook/stories/components/Button/Button.svelte:2:20 Unexpected token
  Plugin: vite-plugin-svelte
  File: /usr/src/app/storybook/stories/components/Button/Button.svelte:2:20
   1 |  <script lang="ts">
   2 |      export let label: any;
                            ^
   3 |  </script>
   4 |

このため、SvelteプロジェクトにStorybookを統合したいのではあれば、

「Svelteコンポーネントの埋め込みスクリプトにはTypescriptを使わない」

ことが推奨されます。
どうしてもTypescriptコードを使いたい場合、ロジックをTSファイルに分離して、Svelteコンポーネント側でインポートするやり方で対応しましょう。
例えば、Svelteコンポーネントと同階層に

index.ts

を新規作成し、そこに外部関数を準備しておきます。

開く/閉じる

            export function toggle(e: any) {
    const items = [...document.getElementsByClassName('hoge')];
    console.log(items);
}

間接的なやり方ですが、これをSvelteコンポーネント側で呼び出して利用することが可能です。

開く/閉じる

            <script>
    //👇tsコードから読み込んだ関数
    import {toggle} from './index';
</script>

<ul>
    <li>
        <span class="hoge" on:click={toggle}>Hoge</span>
    </li>
</ul>

Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き

超JavaScript 完全ガイド 2024

StorybookでSassを使う

Storybook/ViteでSassコードを使いたい場合、いくつかのpeerDependancyになっているライブラリを入れる必要があります。

Sassをインストール

以前の

Svelteプロジェクトのセットアップ方法

でも触れたように、Sassのインストール作業自体は同じです。

開く/閉じる

            $ yarn add -D sass postcss autoprefixer

これでStorybook内部のViteがSassコードを自動で認識してくれるようになります。
使い方はSvelteコンポーネントと同層に

style.scss

などとファイルを新規作成しておき、

開く/閉じる

            .hoge {
    cursor: pointer;
    user-select: none;
    &::before {
        content: "\25B6";
        color: black;
        display: inline-block;
        margin-right: 6px;
    }
}

このスタイルを読み込む際には、Svelteコンポーネントのスクリプトタグで行います。

開く/閉じる

            <script>
    //👇scssコードから読み込んだスタイル
    import './style.scss';
</script>

<ul>
    <li>
        <span class="hoge">Hoge</span>
    </li>
</ul>

「<style lang="scss">」では動かない

先ほどのTypescriptのパートでも説明していましたが、

@sveltejs/vite-plugin-svelte

が正常に動かない影響で、埋め込みの

style

タグに直接Sassを指定してもCSSとして認識されるため、期待通りに動きません。

開く/閉じる

            <style lang="scss">
.hoge {
    cursor: pointer;
    user-select: none;
    &::before {
        content: "\25B6";
        color: black;
        display: inline-block;
        margin-right: 6px;
    }
}
</style>

<ul>
    <li>
        <span class="hoge">Hoge</span>
    </li>
</ul>

SvelteとStorybookを利用する場合、CSSをそのまま使わないならば

style

タグを利用せずに、できるだけ外部ファイルから

script

タグで読み込ませて使いましょう。

Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き

超JavaScript 完全ガイド 2024

まとめ

以上、今回もSvelteとStorybookの開発環境構築の話題となってしまいました。
Storybookの現行のリリースバージョンはv8ですが、サポートするフレームワークの種類が多く、しかも内部のバンドラーにWebpackとViteが選べるという大きなメリットの代償として、放置されたバグも非常に多い印象です。
ただし、Storybookに変わるほどの有力なフロントエンドワークショップはまだ現れてはいなさそうですので、開発者の創意工夫でStorybookと上手く付き合っていくしかないのも事実です。
よって、初期の段階からStorybook側に考慮した形でSvelteプロジェクトを開発できるように心がけることが重要と言えるでしょう。