【Svelte】React と比較しながら理解する Svelte

Last updated at 2026-11-06Posted at 2026-11-06

はじめに

この記事では、Svelte 5 のプロジェクト作成と、画面表示、テキスト入力、ボタン操作の実装手順を記載します。また、各手順には React で同じ動作を書く場合との対応表を載せます。

開発環境

OS：Windows
エディタ：Visual Studio Code
Node.js：24.21.0
create-vite：9.2.1
Vite：8.3.2
Svelte：5.57.1
TypeScript：6.0.3

Vite 8.3.2 が対応する Node.js のバージョンは、npm で確認できます。

npm view vite@8.3.2 engines

{ node: '^20.19.0 || >=22.12.0' }

プロジェクトの作成

npm create vite

Svelte の公式ドキュメントは、SvelteKit でのプロジェクト作成を推奨しています。SvelteKit は、ルーティングなどの機能を Svelte に加えたフレームワークです。この記事は Svelte の書き方が対象なので、同じページに記載された Vite のテンプレートを使います。

Vite は、開発サーバーとビルドの機能を提供するツールです。

npm create vite@latest hello-svelte -- --template svelte-ts --no-immediate

hello-svelte は、作成するフォルダの名前です。オプションを指定しない場合、npm create vite はテンプレートなどを対話形式で質問します。この記事で指定した値は次のとおりです。

オプション	内容
`--template svelte-ts`	Svelte と TypeScript のテンプレートを使う
`--no-immediate`	作成直後に、依存パッケージのインストールと開発サーバーの起動を行わない

開発サーバーの起動

cd hello-svelte
npm install
npm run dev

  ➜  Local:   http://localhost:5173/

ブラウザで http://localhost:5173/ を開くと、テンプレートの初期画面が表示されます。npm run dev の実行中は、ファイルを保存するとブラウザの表示が更新されます。

Svelte のチームは、VS Code の拡張機能を公開しています。

https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode

編集するファイル

Svelte では、コンポーネントを .svelte ファイルに書きます。1つのファイルは、次の3つの要素で構成されます。3つとも省略できます。

要素	内容
`<script>`	コンポーネントの作成時に実行する処理と変数。`lang="ts"` を付けると TypeScript で書ける
マークアップ	画面の HTML。`<script>` の外にそのまま書く
`<style>`	このコンポーネントだけに適用する CSS

この記事では src/App.svelte を編集します。
また、App.svelte は src/main.ts により、画面に表示されます。

src/main.ts

import { mount } from 'svelte'
import './app.css'
import App from './App.svelte'

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

export default app

mount() は、コンポーネントを target の要素の中に表示します。target には、index.html の <div id="app"> を指定しています。

React との対応は次のとおりです。JSX は、JavaScript の中にマークアップを書く構文です。

項目	React	Svelte
コンポーネントの定義	JSX を返す JavaScript の関数	`.svelte` ファイル
マークアップの置き場所	関数の戻り値	`<script>` の外

画面表示

Svelte には rune という記述方法があります。$ で始まるキーワードです。Svelte のコンパイラが処理します。$state で宣言した変数に代入すると、Svelte は画面の表示を更新します。

src/App.svelte の中身を次の内容に書き換えます。

src/App.svelte

<script lang="ts">
  const title = $state('Svelte 入門')
</script>

<h1>{title}</h1>

{ } は、中に書いた式の値を画面へ表示します。$state の変数は、{title} のように通常の変数と同じ書き方で読みます。

ブラウザに「Svelte 入門」の見出しが表示されます。

React の代表的な記述方法との比較は以下の通りです。

項目	React	Svelte
状態の宣言	`const [title, setTitle] = useState('Svelte 入門')`	`let title = $state('Svelte 入門')`
値の読み取り	`{title}`	`{title}`
値の更新	`setTitle('...')`	`title = '...'`

テキスト入力

src/App.svelte

<script lang="ts">
  const title = $state('Svelte 入門')
  let name = $state('')
</script>

<h1>{title}</h1>

<label>
  名前
  <input bind:value={name} />
</label>
<p>入力中の値：{name}</p>

bind:value={name} は、input の値と変数 name を同期します。Svelte は input にイベントリスナーを登録します。入力のたびに、リスナーは name を更新します。

入力欄へ「山田」を入れると、下の行が「入力中の値：山田」に変わります。

React の代表的な記述方法との比較は以下の通りです。

項目	React	Svelte
入力値の保持	`const [name, setName] = useState('')`	`let name = $state('')`
input と値の接続	`value={name}` と `onChange={e => setName(e.target.value)}` を両方書く	`bind:value={name}` を書く
入力中の値の表示	`{name}`	`{name}`

ボタン操作

src/App.svelte

<script lang="ts">
  const title = $state('Svelte 入門')
  let name = $state('')
  let greeting = $state('')

  function greet() {
    greeting = `こんにちは、${name}さん`
  }
</script>

<h1>{title}</h1>

<label>
  名前
  <input bind:value={name} />
</label>
<p>入力中の値：{name}</p>

<button onclick={greet}>挨拶する</button>
<p>{greeting}</p>

コード	内容
`greeting = $state('')`	挨拶の文を保持する変数
`greet()`	`name` から作った挨拶の文を、`greeting` に代入する
`onclick={greet}`	ボタンのクリックで `greet()` を実行する

on で始まる属性は、イベントリスナーとして登録されます。属性名は大文字と小文字を区別します。onClick は、click ではなく Click という名前のイベントを受け取ります。

入力欄は「山田」のまま、ボタンを押します。挨拶の行に「こんにちは、山田さん」が表示されます。

React の代表的な記述方法との比較は以下の通りです。

項目	React	Svelte
クリック時の処理の登録	`onClick={greet}`（関数を渡す）	`onclick={greet}`（関数を渡す。属性名は小文字）
処理の中での状態の更新	`setGreeting(...)`	`greeting = ...`（代入）

まとめ

この記事では、Svelte 5 のプロジェクト作成と、画面表示、テキスト入力、ボタン操作の実装について記載しました。

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up