【Svelte Framework入門】Viteを使って素早くSvelteアプリ開発環境を始めてみる

本記事の執筆開始時、2022年も相変わらず

『Javascriptフレームワーク多すぎ問題』

が中々に世のフロントエンドエンジニアの心を多いに惑わしているようで、これからの数年間もこの傾向は続くような気配がします。
著者としては、2016年頃からずっとベビーな

Angular推し

ですのでその辺はこのブログの全体の記事でなんとなく察していただけると思います。
ここ最近のJavascriptフレームワークの技術トレンドが大きく２つに二極化しつつあり、

「SSRなどを含むサーバーサイド技術方面のへシフト・さらなる高機能化」

に進むものと、esbuildなどに代表されるように

「開発者にとっての軽量・高速・快適なユーザーエクスペリエンスを目指す」

類の方向性のものに分かれつつあります。
Angularなどは元々前者の立ち位置で、この数年ではNext.jsやNuxt.jsなどが大きくシェアを伸ばしています。
後者は、Svelte、Solid.js、Vanilla.jsなど、初学者にもとっつきやすく、学習障壁も低く、Javascriptフレームワーク特有の開発を進めれば進めるほどビルドが非常に重くなってしまうイライラ感もなく、よりストレスフリーなプログラミング環境が構築できます。
個人的な意見ですが、高機能かつ堅牢・セキュアなJavascriptフレームワークと、軽量に動作し作業時間を圧縮できるJavascriptフレームワークを1つずつ修得しておくと、面倒な開発案件も柔軟に捌けるフロントエンド職人になれるような気がします。
そんなわけで、軽量系フレームワークだと、著者基準では

「Svelte推し」

になるのですが、Svelteを学習するときに割と気になるのが、標準バンドラの

「rollup.js」

の存在です。
最初に学ぶJavascriptフレームワークがSvelteだったら、あまり気にはならないかも知れませんが、長年

「webpack」

を使い込んで来た古参のフロントエンドエンジニアほど、rollupへの移行に抵抗を感じます...「あれほど苦労してwebpack覚えてきて、もうこれから新しいバンドラなんて勉強したくない...」という呪いにも気持ちです(※著者の意見です)。
以前の記事で、Svelteの旧式の開発環境である

「rollup.js」

をDocker Alpineでrollupのセットアップを含む、svelteアプリのビルドまでの手順を説明していました。

【Svelte Framework入門】Svelteの開発環境をDocker Alpine内で簡単に構築する

Alpine LinuxコンテナからSvelteアプリ開発環境を構築するやり方を紹介します。

記事内容更新時点の2024年では既にrollupは過去のものとなってほぼほぼ使わなくなったため、情報としての価値はなさそうなのですが、Svelteの歴史の変遷を感じられる内容として残しています。
旧式の内容を見ての通り、過去、SvelteプロジェクトをTypescript対応にしたり、Sass対応にしたりするのにも、rollupのプラグインというもの追加し、逐一設定してあげる必要がありました。
中々これが頭の痛くなる苦痛の作業でした。
そして最近のSvelteは、

『Vite』

が主要なバンドラ兼フロントエンド開発ツールにとって代わり、簡単に様々なフロントエンドフレームワークの開発環境構築ができるようになっています。
ということで前置きが長くなりましたが、ViteをベースにしたSvelteアプリの開発の始め方を簡単に説明します。

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

超JavaScript 完全ガイド 2024

ViteからSvelte&Typescriptのプロジェクトを一発導入

早速、

『Vite』

の

Getting Started

のページを参考にViteを使えるようにしてみます。
以降では前回の記事で

node alpineコンテナ

の構築後でも良いので、適当にnode.jsが利用できる環境を利用します。
注意点として、Viteはnode.jsのバージョンが

>=14.18.0

である必要があります。
Viteのnpm(yarn)のcreateコマンドから一発でプロジェクト生成が可能になっていることが非常に強力です。
Svelteアプリとして

svelte-vite

という名前のプロジェクトをViteから一発生成(Scaffold)してみましょう。

開く/閉じる

            $ yarn create vite
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@5.3.0" with binaries:
      - create-vite
      - cva
✔ Project name: … svelte-vite
✔ Select a framework: › Svelte
✔ Select a variant: › TypeScript

Scaffolding project in /***/svelte-vite...

Done. Now run:

  cd svelte-vite
  yarn
  yarn dev

ここでの

create vite

コマンドを利用すると、対話的にいくつかの選択肢が現れます。
対話型の設定をスキップしたいなら、以下のようにフレームワークのテンプレート指定も可能です。

開く/閉じる

            #👇Svelte/Javascripプロジェクトで開始
$ yarn create vite svelte-vite --template svelte

#👇Svelte/Typescripプロジェクトで開始
$ yarn create vite svelte-vite --template svelte-ts

詳しいオプションは

公式のページ

を読んで頂くとして、ここではSvelteでTypescripがベースとして利用できる

svelte-ts

を選択します。
次に、出力されたコマンドの支持に従い、

開く/閉じる

            $ cd svelte-vite
$ yarn install
$ yarn dev

とすると、Viteで最初のHelloページが意図も簡単に立ち上がります。
もしもDockerコンテナからNodejsを使っている場合には、Viteデフォルトの

5173

ポートを開放しておく必要があるので、コンテナ設定からポートを開く必要があります。

開く/閉じる

            services:
  #...中略
  app:
    ports:
    #👇追加
      - "5173:5173"
#...以下略

また、Dockerコンテナ側からホスト側へIPを晒すために、デフォルトゲートウェイ・

0.0.0.0

をhostオプションとしてpackage.jsonのスクリプトで指定も必要です。

開く/閉じる

            {
  //...中略
  "scripts": {
    "dev": "vite --host 0.0.0.0",
    //...以下略

これでSvelteプロジェクトを開発できる最低限の準備が整いました。
以下のコマンドでSvelte+Viteアプリが立ち上がります。

開く/閉じる

            $ yarn dev
vite

  VITE v3.0.1  ready in 616 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.0.2:5173/

サーバーが起動し、URLをブラウザから覗くと、
604x607

なお、特定のポート番号を指定したい場合には

--port

オプションを使って、

開く/閉じる

            $ vite --host 0.0.0.0 --port [開放先のポート番号]

すると良いようです。
viteコマンドの他のオプションはヘルプコマンドから確認できます。

開く/閉じる

            $ vite --help
#もしくは
$ ./node_modules/.bin/vite --help

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

超JavaScript 完全ガイド 2024

ViteをSass対応にする

ViteでScaffoldしたプロジェクトのスタイルファイルは、デフォルトでCSSになっています。
よってSassへ置き換えるには、少しだけ手直しが必要です。
まずはプロジェクトに

Sass

本体とベンダープレフィックス対応として

autoprefixer

をパッケージインストールします。

開く/閉じる

            $ yarn add sass postcss autoprefixer -D

ViteはSassをインストールするだけで、Sass対応になるようで、すこぶる便利です。
元の

src/app.css

を以下のようにscss形式に整えて、

app.scss

へファイルの名前を変更し以下の内容に仕立て直しましょう。

開く/閉じる

            :root {
    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    @media (prefers-color-scheme: light) {
        color: #213547;
        background-color: #ffffff;
    }
}

body {
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 320px;
    min-height: 100vh;
    a {
        font-weight: 500;
        color: #646cff;
        text-decoration: inherit;
        &:hover {
            color: #535bf2;
            @media (prefers-color-scheme: light) { color: #747bff; }
        }
    }
}

#app {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
    h1 {
        font-size: 3.2em;
        line-height: 1.1;
    }
    .card { padding: 2em; }
    button {
        border-radius: 8px;
        border: 1px solid transparent;
        padding: 0.6em 1.2em;
        font-size: 1em;
        font-weight: 500;
        font-family: inherit;
        background-color: #1a1a1a;
        cursor: pointer;
        transition: border-color 0.25s;
        &:hover { border-color: #646cff; }
        &:focus, &:focus-visible { outline: 4px auto -webkit-focus-ring-color; }
        @media (prefers-color-scheme: light) { background-color: #f9f9f9; }
    }
}

また

src/main.ts

内のスタイルを

app.scss

に指定し直します。

開く/閉じる

            //import './app.css'
//👇こちらに書き換え
import './app.scss'
import App from './App.svelte'

const app = new App({
  target: document.getElementById('app')!,
})

export default app

ベンダープレフィックスを有効にするために、

postcss.config.js

という名前で新規作成し、次のように編集しておきましょう。

開く/閉じる

            import autoprefixer from 'autoprefixer';

export default {
    plugins:[autoprefixer]
}

viteの設定ファイル(

vite.config.ts

)に以下のように追記します。

開く/閉じる

            import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
//👇追記
import postcss from './postcss.config.js';

export default defineConfig({
    plugins: [svelte()],
    //👇追記
    css: {postcss}
})

これで、scssファイルがコンパイル後に自動でベンダープレフィックス対応のcssファイルに出力されるようになります。

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

超JavaScript 完全ガイド 2024

まとめ

Viteを使えばSvelteプロジェクトのTypescript・Sass化も即時整うことが分かりました。
これでRollup時代の細かな設定など煩わしい手続きをすることなく、Svelteアプリ開発に邁進することが可能かと思います。