とりあえず SvelteKit 試してみた #Svelte

What's the deal with SvelteKit?

SvelteKit をご存知でしょうか？

これは、ずっとバージョン 1.0 にならなかった Sapper を Svelte に取り込み再構築したものみたいです。
Sapper を使って Web サービスを公開した身としては、これを使ってみない手はないですね。

ということで、まだオーブンベータも始まっていませんが、 SvelteKit を試していこうと思います！

試した環境

Windows10
Node.js 14.15.4
npm 6.14.10
@sveltejs/kit 1.0.0-next.24

インストール

プロジェクトフォルダで次のコマンドを打てば、 CLI によるインストールが開始します。

npm init svelte@next

プロジェクトフォルダをインストール時に作成する場合は、

npm init svelte@next my-app

このようにプロジェクト名を最後につければ OK です。

コマンドを実行すると……

ｗｗ

「まだ使う準備できてないからブレーキ踏んで！！」 だそうです。
ただ、警告を理解した上で自由に遊ぶのは OK みたいなので、続けていきましょう。

? Directory not empty. Continue? » (y/N)

インストール先にすでにファイルやフォルダがある場合に大丈夫か聞いてくれます。

? Use TypeScript in components? » (y/N)

TypeScript を使うかどうか聞いてくれます。

? What do you want to use for writing Styles in Svelte components? » - Use arrow-keys. Return to submit.
>   CSS
    Less
    SCSS

スタイルシートに CSS Less SCSS のどれを使うか聞いてくれます。
インストールしたら SCSS を導入しようと思っていたので、インストール時に選べるのは嬉しいですね！

@sveltejs/kit バージョン 1.0.0-next.24 時点では以上でインストールが完了します。

アプリ起動

パッケージのインストールは、 yarn でも npm でも OK です。

yarn

npm i

ちなみに、僕の環境だと次のようなエラーが出ました。

error postcss@8.2.4: The engine "node" is incompatible with this module. Expected version "^10 || ^12 || >=14". Got "13.14.0"

なぜか Node.js のバージョン 13 はハブられているみたいなので、エラーが出た人はバージョンを上げると良いです。

あとは起動！

npm run dev

出ましたね！
Sapper に比べてあっさりした画面です。

Sapper と比較してみる

プロジェクト構造

SvelteKit

まずは SvelteKit のプロジェクト構造を見てみます。

画面と同じく、かなりあっさりしています。

Sapper

続いて Sapper 。

考察

プロジェクト構造はほとんど同じものになっていますが、大きな違いは SvelteKit がモジュールバンドラを使わずに Snowpack を利用しているという点です。
Snowpack を利用することで Webpack や Rollup を利用した場合よりも高速に開発が可能になります。

一方、 Sapper には SSR （サーバーサイドレンダリング）を実現するための機構が用意されていますが、 SvelteKit には現時点でそれがないようです。
公式のブログでは Snowpack と連携をとって SSR の準備をしているような記述がありますので、今後追加されるのではないでしょうか。

ソースコード

SvelteKit

<script>
    import Counter from '$components/Counter.svelte';
</script>

<main>
    <h1>Hello world!</h1>

    <Counter/>
    <p>Visit the <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte apps.</p>
</main>

<style lang="scss">
    :root {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    main {
        text-align: center;
        padding: 1em;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4rem;
        font-weight: 100;
        line-height: 1.1;
        margin: 4rem auto;
        max-width: 14rem;
    }

    p {
        max-width: 14rem;
        margin: 2rem auto;
        line-height: 1.35;
    }

    @media (min-width: 480px) {
        h1 {
            max-width: none;
        }

        p {
            max-width: none;
        }
    }
</style>

まあ普通に Svelte のコードです。
インストールでも書きましたが、 SCSS がいきなり使えるのはありがたいです。

また、 Snowpack でエイリアスを設定しているため、コンポーネントをインポートする際のパスの書き方が Sapper と異なっています。

Sapper

<script>
    import successkid from 'images/successkid.jpg';
</script>

<style>
    h1, figure, p {
        text-align: center;
        margin: 0 auto;
    }

    h1 {
        font-size: 2.8em;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 0.5em 0;
    }

    figure {
        margin: 0 0 1em 0;
    }

    img {
        width: 100%;
        max-width: 400px;
        margin: 0 0 1em 0;
    }

    p {
        margin: 1em auto;
    }

    @media (min-width: 480px) {
        h1 {
            font-size: 4em;
        }
    }
</style>

<svelte:head>
    <title>Sapper project template</title>
</svelte:head>

<h1>Great success!</h1>

<figure>
    <img alt="Success Kid" src="{successkid}">
    <figcaption>Have fun with Sapper!</figcaption>
</figure>

<p><strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong></p>

まあ普通に Svelte のコードです。
SCSS を使うためには個別にインストールが必要です。
（インストールするための方法をこちらにまとめていますので、興味がある方はどうぞ）

考察

コーディングをする上で SvelteKit を選んでも、 Sapper を選んでも、大差がないです。
そもそも Svelte がかなり書きやすいフレームワークなので、コーディングのしやすさはそこから来ているものだと思います。

Sapper から SvelteKit への移行について

これは公式ブログで言及されていますが、移行にかかる負担は少ないとのことです。
プロジェクト構造もソースコードも大きな差異がありませんでしたし、たしかにそのとおりだと思います。

現時点では SSR に関わる部分のみ修正が発生すると記載がありますが、これも解消に向かうのではないでしょうか。

まとめ

SvelteKit を試してみましたが、かなり期待の持てるものだと思います！
これからオーブンベータが始まるということなので、引き続き動向を追っていきます！

現時点では Lint などの主要パッケージが入っていないようなので、そのあたりも試したら記事にしてみますね