Svelteの特徴

Svelteとは

Svelte（スベルト）は、ReactやVue.jsと並んで紹介されることも多い、UIフレームワークです。

ReactやVue.jsは、アプリケーションの状態変化を検知し、それにあわせてUIを更新し、画面を再描画する仕組みです。そして、この仕組みを実行するために必要なコード（ランタイムを含む）をクライアントにダウンロードする必要があります。

それに対し、Svelteではアプリケーションを事前にコンパイルし、アプリケーションの状態が変更されたら直接DOMを更新するという手法をとっています。そのため、ランタイムで必要なコードは、DOMを更新する小さなスクリプトとなるので、仮想DOMで必要だったような大きなランタイムが不要となります。

大きな画像

ファイル形式は独自であるものの、HTMLやCSS、JavaScriptの標準仕様に近い書き方ができることも魅力の一つです。次節で例を示しながら、詳しくみてみましょう。

簡潔な記法

Svelteで作ったアプリケーションのプロジェクトは、.svelte拡張子をつけたファイル群とJavaScriptファイルからなります。.svelteファイル内は、スクリプト、マークアップ、スタイルの3つで構成されます。このファイルの例を見てみましょう。

なお、このシリーズでは、Svelte 5.30.1を使って説明していきます。

次のコードは、ボタンをクリックすると表示カウントが増えていくデモと、その.svelteファイルのコードです。

<script>
let count = $state(0);

function onClickButton () {
  count += 1;
}
</script>

<div>
  <output>{count}</output>
</div>
<button type="button" onclick={onClickButton}>button</button>

<style>
/* 必要なければstyleタグごと消してよい */
</style>

これをコンパイルすれば、デモページで使用しているコードになります。

ご覧のように、非常に簡潔です。

スクリプト部分は、ライブラリなどを用いない素のJavaScriptコードを書く場合とほとんど変わりません。一部、$stateのようなSvelte特有の記法を覚える必要があるくらいで、これまでJavaScriptを書いてきた人であれば、あまり意識することなく書くことができます。

こういった既存の知識や役立つという点から、Svelteを初めてUIライブラリを使う際の候補としてもよいかもしれません。

Svelteを試してみる

それでは、Svelteを実際に触っていきましょう。インストール方法はSvelteのドキュメントに載っているとおりに進めればすぐに終わります。

まずはSvelteプロジェクトを作成しましょう。以下のコマンドを実行します。

npx sv create

このコマンドを実行すると、対話形式でSvelteのプロジェクトを作成することができます。

ここでは、それぞれ次のように選択しています。

まず、プロジェクトを作成する場所を聞かれます。

◆  Where would you like your project to be created?

    ./2025-svelte-demo

Svelteプロジェクトを作成するディレクトリを入力します。ここはご自身の環境に合わせて、お好きなディレクトリを指定してください。

ここでは./2025-svelte-demoとしました。

◆  Which template would you like?
│  ● SvelteKit minimal (barebones scaffolding for your new app)
│  ○ SvelteKit demo
│  ○ Svelte library
└

    SvelteKit minimal

プロジェクトに使うテンプレートを選択します。選択肢中の「SvelteKit」とは、Svelteの利用を前提としたWebアプリケーションフレームワークです。

UIライブラリであるSvelte単体では実現できない、ルーティングや、ビルドなどの機能を提供します。

SvelteKitを使わない選択肢はここには出てきません。Svelte単体でインストールする方法については後述します。

今回は最小構成のファイル群があればいいので、SvelteKit minimalを選択しました。

次にTypeScriptを使うかどうかを選択します。

◆  Add type checking with TypeScript?
│  ● Yes, using TypeScript syntax
│  ○ Yes, using JavaScript with JSDoc comments
│  ○ No
└

    No

これもどちらでも構いませんので、プロジェクトで使いたいほうを選択してください。

TypeScriptの型注釈とそのチェック機能は、ここでの選択にかかわらず利用することができます。より高度なTypeScriptの機能を必要とする場合は有効にします。

本シリーズではTypeScript固有の解説は行わないので、ここではNoを選択しています。

追加でインストールしたい開発ツールを選択します。フォーマッターやリンターなど、必要に応じて選択してください。

今回は何も使うつもりはないので、何も選択せずにEnterを押します。

◆  What would you like to add to your project? (use arrow keys / space bar)
│  ◻ prettier (formatter - https://prettier.io)
│  ◻ eslint
│  ◻ vitest
│  ◻ playwright
│  ◻ tailwindcss
│  ◻ sveltekit-adapter
│  ◻ drizzle
│  ◻ lucia
│  ◻ mdsvex
│  ◻ paraglide
│  ◻ storybook
└

    none

プロジェクトで使用するパッケージマネージャーを選択します。

◆  Which package manager do you want to install dependencies with?
│  ○ None
│  ● npm
│  ○ yarn
│  ○ pnpm
│  ○ bun
│  ○ deno
└

    npm

ここではNode.jsの初期状態でも利用できるnpmを選択しました。なお、npm以外を選択した場合、該当のパッケージマネージャーがあらかじめインストールされていないとエラーとなるので、気をつけてください。

ここまで選択すると、プロジェクトの作成が完了します。依存パッケージのインストールも自動で行われます。

npm create vite@latest

Project name:

  2025-vite-w-svelte-demo

Select a framework:

  Svelte

Select a variant:

  JavaScript

アプリケーションのビルドとサーバーの起動

テンプレートのpackage.jsonには3つのコマンドが用意されています。それぞれの役割を見てみましょう。

アプリケーションをビルドする

あらかじめ用意されているビルドコマンドを使い、アプリケーションをビルドしてみましょう。

npm run build

このコマンドを実行すると、.svelte-kit/outputディレクトリが作成され、その中にJavaScriptファイルとCSSファイルが追加されます。

このディレクトリをHTTPサーバーで公開することで、アプリケーションを閲覧することができるようになります。

サーバーの起動

生成したファイルを実行するサーバーは、以下のコマンドで起動します。

npm run preview

このコマンドは、ローカルサーバーを起動し、上記のnpm run buildで生成したディレクトリをホスティングします。名前からわかるように、プレビュー用のサーバーを起動するコマンドです。

初期状態では、http://localhost:4173/にアクセスすることで動作を確認できます。

大きな画像

サーバーはcontrol＋Cキーで停止します。

ビルドと監視

ソースファイルを監視して、変更があったらアプリケーションを再ビルドする開発用のコマンドがあります。また、このコマンドではサーバーも同時に実行し、再ビルド時には自動で更新が行われます。

npm run dev

サーバーにアクセスするURLは、http://localhost:5173/です。

まとめ

今回はSvelteアプリケーションを作成し、そのまま実行するところまで紹介しました。次回から、簡単なアプリケーションを作りながら、Svelteコンポーネントの機能を紹介していきます。