Svelteとは？SvelteKitとは？

Last updated at 2024-12-31Posted at 2024-12-29

Svelteとは？

Svelte(スベルト)は、フロントエンド開発向けのモダンなJavaScriptフレームワーク（またはコンパイラ）です。

ReactやVue.jsのようなフレームワークと同様に、ユーザーインターフェース（UI）を構築するために使われますが、他のフレームワークとは異なる特徴的なアプローチを持っています。

Svelte(スベルト)は英語の形容詞で、「しなやか」「ほっそりした」「洗練された」という意味を持ちます。
名前の通り、スマートでしなやかな開発体験を提供するライブラリです。

公式サイト、翻訳サイト

Svelte公式サイト
https://svelte.dev

Svelte GitHub
https://github.com/sveltejs/svelte

Svelte日本語翻訳サイト
https://svelte.jp

Svelte日本語翻訳サイト GitHub
https://github.com/svelte-jp/svelte-site-jp

Svelteの特徴

コンパイル時に動作
- Svelteはコンパイラとして機能し、開発時にコードを静的なJavaScriptに変換
- 他のフレームワークのようにブラウザ上で仮想DOMを使用せず、直接効率的なJavaScriptを生成
- ランタイムが小さくなり、パフォーマンスが向上
仮想DOMを使用しない
- ReactやVue.jsが仮想DOMを利用して状態を管理・更新するのに対し、Svelteではコンパイル済みのコードが直接DOMを操作
- 処理のオーバーヘッドが軽減
シンプルな記法
- Svelteのコードは直感的で、JavaScript、HTML、CSSが統合された形で記述
- コンポーネントの作成や状態管理が非常に簡単
状態管理の容易さ
- 内部状態の管理が簡潔で、letや$:などの宣言を用いることでリアクティブな動作が可能
- グローバルな状態管理も組み込みのwritableストアを利用して簡単に実装
バンドルサイズが小さい
- 生成されるJavaScriptが効率的で、最終的なバンドルサイズが小さくなる

Svelteのメリット・デメリット

メリット

高速なパフォーマンス
シンプルで学習コストが低い
小さいバンドルサイズ

デメリット

エコシステムがReactやVueに比べて小規模
開発コミュニティが他のフレームワークほど大きくない

コード例

Svelte、React、Vueのコードの違いが分かる簡単な例を用意しました。
クリックするとカウントが増えるボタンを実装しています。

Svelte

<script>
  let count = 0;
  const increment = () => count++;
</script>

<button on:click={increment}>Clicked {count} times</button>

<style>
  button {
    color: blue;
  }
</style>

状態（count）はletを使って宣言し、直接更新する
イベントリスナーはon:clickで記述する
CSSはコンポーネントにスコープされます

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);

  return (
    <div>
      <button onClick={increment}>Clicked {count} times</button>
    </div>
  );
}

export default Counter;

状態(count)はuseStateフックを使用して管理する
イベントリスナーはonClickで記述する
CSSは外部ファイルやCSS-in-JS(例: styled-components)で管理することが多い

Vue

<template>
  <button @click="increment">Clicked {{ count }} times</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style scoped>
button {
  color: blue;
}
</style>

状態（count）はdataオブジェクトで管理する
イベントリスナーは@clickで記述する
CSSはscoped属性でコンポーネントにスコープされます

全体の違い

Svelteは、ネイティブなJavaScriptの書き方に近く、最もシンプル
Reactは、状態管理にフックを使う必要があり、JSXでHTMLを拡張
VueはテンプレートベースでHTMLに近いが、状態やイベントに専用の構文が必要

SvelteKitとは

Svelte がコンポーネントフレームワークであるのに対し、SvelteKit はアプリケーションフレームワークです。

以下のような機能を提供します。

ルーティング
サーバーサイドレンダリング
データ取得
Service workers
TypeScript インテグレーション
プリレンダリング
シングルページアプリ
ライブラリのパッケージング
プロダクション向けビルドの最適化
様々なホスティングプロバイダーへのデプロイ
etc

SvelteKit アプリはデフォルトではサーバーでレンダリングを行うため、優れた初期ロードパフォーマンスと SEO 特性を備えています。

初回のロードのあとは (モダンな ‘シングルページアプリ’、SPA のような) クライアントサイドナビゲーションに移行するため、ユーザーが画面遷移する際の全読み込みを回避できます。

プロジェクト構成

my-project/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ │ └ [your server-only lib files]
│ │ └ [your lib files]
│ ├ params/
│ │ └ [your param matchers]
│ ├ routes/
│ │ └ [your routes]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ ├ hooks.server.js
│ └ service-worker.js
├ static/
│ └ [your static assets]
├ tests/
│ └ [your tests]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

デモアプリの作り方

miseを使ってbunをセットアップします。
Node(npm)でもokです。

$ mise use -g bun@1.1.42
$ bun -v
1.1.42

$ bunx sv create
┌  Welcome to the Svelte CLI! (v0.6.10)
│
◇  Where would you like your project to be created?
│    (hit Enter to use './')
│  # プロジェクト名を入力。カレントディレクトリに入れたい場合は Enter か ./
│  ./demo-svelte
│
◇  Which template would you like?
│  # プロジェクトテンプレートをどうするか。今回は demo を選択する
│  ○ SvelteKit minimal
│  ● SvelteKit demo (showcase app with a word guessing game
that works without JavaScript)
│  ○ Svelte library
│
◇  Add type checking with Typescript?
│  # TypeScriptを使うか？ 特に使わない選択肢はないと思うのでYes
│  ● Yes, using Typescript syntax
│  ○ Yes, using Javascript with JSDoc comments
│  ○ No
│
◇  What would you like to add to your project? (use arrow
keys / space bar)
|  # プロジェクトに追加したいツールはあるか
|  # デモアプリに必要ないと思うが、コードフォーマッターと静的解析ツールを選択
│  ◼ prettier (formatter - https://prettier.io) # コードフォーマッター
│  ◼ eslint # JavaScript/TypeScript用の静的解析ツール
│  ◻ vitest # ユニットテストフレームワーク
│  ◻ playwright # エンドツーエンド(E2E)テスト用フレームワーク
│  ◻ tailwindcss # CSSフレームワーク
│  ◻ sveltekit-adapter # SvelteKitプロジェクトのビルド先を指定するためのアダプター
│  ◻ drizzle # TypeScript対応の軽量ORM
│  ◻ lucia # 認証ライブラリ
│  ◻ mdsvex # MarkdownとSvelteを統合するためのプラグイン
│  ◻ paraglide # Svelteアプリ用の国際化(i18n)ライブラリ
│  ◻ storybook # UIコンポーネントを個別に開発・テストするためのツール
│
◆  Which package manager do you want to install dependencies
with?
|  # パッケージマネージャを選択。今回はbunを使用する
│  ○ None
│  ○ npm
│  ○ yarn
│  ○ pnpm
│  ● bun
│  ○ deno
│
◆  Successfully setup add-ons
◆  Successfully installed dependencies
│
◇  Successfully formatted modified files
│
◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd demo-svelte                                                       │
│  2: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  3: bun run dev --open                                                   │
│                                                                          │
│  To close the dev server, hit Ctrl-C                                     │
│                                                                          │
│  Stuck? Visit us at https://svelte.dev/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯
│
└  You're all set!

SvelteKitを起動する

$ cd demo-svelte
$ git init && git add -A && git commit -m "Initial commit"
$ bun dev --open

次のウェルカムページが表示できればok

Svelteプレイグラウンド

色んなコード例がお試し実行できます。
内容もブラウザ上で変更して試せます。

Svelteチュートリアル

Svelteは公式チュートリアルも充実しています。

私含め英語苦手な方はチュートリアルも翻訳されていますのでこちらからどうぞ

Basic Svelte
Advanced Svelte
Basic SvelteKit
Advanced SvelteKit

1 > 3 > 4 > 2 の順番でやると良いと思います(個人の感想)

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