Svelteとは？SvelteKitとは？

## 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

```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

```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

```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 のような) クライアントサイドナビゲーションに移行するため、ユーザーが画面遷移する際の全読み込みを回避できます。

### プロジェクト構成

https://svelte.dev/docs/kit/project-structure

```
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
```

http://localhost:5173

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

![ScreenShot 2024-12-30 3.58.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/4db8c2f4-22f3-b038-1dff-87759393f69d.png)

## Svelteプレイグラウンド

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

https://svelte.dev/playground/hello-world

## Svelteチュートリアル

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

https://svelte.dev/tutorial/svelte/welcome-to-svelte

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

https://svelte.jp/tutorial/svelte/welcome-to-svelte

1. Basic Svelte
2. Advanced Svelte
3. Basic SvelteKit
4. Advanced SvelteKit

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