Svelte(Kit)の世界: Svelteとは? #1


## はじめに

はじめまして、WEB フロントエンドエンジニアの nuintee です。

本記事ではフロントエンドライブラリである [Svelte](https://svelte.jp/) の概要について書きました。

`Svelte` に少しでも興味のある方は、ぜひご覧ください。

## フロントエンドの世界 2024 について

「[フロントエンドの世界 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)」は普段 [`Next.js`](https://nextjs.org/) を書いている筆者が、同じフロントエンドライブラリである [`Svelte(Kit)`](https://svelte.jp/docs/introduction), [`Remix`](https://remix.run/docs/en/main) ,[`SolidJS`](https://docs.solidjs.com/), [`Qwik(City)`](https://qwik.dev/)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

![frontend-assort-2024-banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/7666d209-1aef-9ce5-c298-d8e60847e830.png)

## もくじ

- [はじめに](#はじめに)
- [フロントエンドの世界 2024 について](#フロントエンドの世界-2024-について)
- [もくじ](#もくじ)
- [Svelte とは？](#svelte-とは)
- [SvelteKit とは？](#sveltekit-とは)
- [Svelte の Hello World](#svelte-の-hello-world)
- [Svelte のメリット・デメリット](#svelte-のメリットデメリット)
- [参考記事](#参考記事)
- [おわりに](#おわりに)

## Svelte とは？

https://svelte.jp/

Svelte は Web アプリケーションや UI を構築するためのフロントエンドライブラリです。

仮想 DOM を使用せず、コンパイル時に効率的な JavaScript コードを生成する仕組みによって、軽量なバンドルサイズを実現します。

また、直感的なテンプレート記法とリアクティブな記述が最大の特徴です。

## SvelteKit とは？

`SvelteKit` は、`Svelte` をベースにしたフルスタックなフレームワークで、
`React` に対する `Next.js` のような立ち位置です。

`Svelte` との違いとしては以下の点が挙げられます。

### 1. サーバーサイド機能

`SvelteKit` は、API ルートや SSR（サーバーサイドレンダリング）、プリレンダリングなどのサーバーサイド機能も利用する事が出来ます。
これによりフルスタックなアプリケーション開発が実現できます。

### 2. ファイルベースルーティング

`SvelteKit` では、routes ディレクトリを利用したファイルベースのルーティングが利用可能で、ファイル構造に応じた URL を簡単に構築できます。

### 3. デプロイの最適化

`SvelteKit` ではアダプター機能を利用して、ホスティング先に応じたデプロイの最適化が簡単に行えます。

(参考: [アダプターとは？](https://kit.svelte.jp/docs/adapters))

## Svelte の Hello World

Svelte で Hello World を表示するミニマムなコード例です。

### 1. プロジェクトのセットアップ

Svelte プロジェクトを始めるには、以下のコマンドを実行します。

```shell
npx degit sveltejs/template my-svelte-app
cd my-svelte-app
npm install
npm run dev
```

### 2. App.svelte の編集

プロジェクトのルートにある App.svelte ファイルを以下のように編集します。

```svelte:App.svelte
<script>
  let name = "Svelte";
</script>

<style>
  h1 {
    color: #ff3e00;
  }
</style>

<h1>Hello {name}!</h1>
```

### 3. 結果の確認

ブラウザで http://localhost:5175 を開くと、Hello Svelte! と表示されます。

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

### メリット

1. **パフォーマンス**
   仮想 DOM を使用せず、コンパイル時に最適化されるため、DOM 操作が高速です。
   (参考: [仮想 DOM とは？](https://svelte.jp/blog/virtual-dom-is-pure-overhead#dom-what-is-the-virtual-dom))

   <br>

2. **シンプルな構文**
   HTML ベースのテンプレート記法のため学習コストが`React`等に比べると低いです。
   また構文がシンプルなので、`React`で同じコードを書いた時に比べて記述量を抑える事が出来ます。
   <br>

3. **開発体験の良さ**
   アニメーション、トランジション、ストア等の機能がデフォルトで内包されている点や、Typescript のサポート、インテリセンス・Prettier フォーマットが含まれた VSCode 用[Svelte 公式拡張機能](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)の存在が挙げられます。

### デメリット

1. **エコシステムの規模**
   React や Vue 等のメジャーなライブラリと比較すると、Svelte のエコシステムはまだ小さく、サードパーティライブラリも少ないです。
   <br>
2. **学習リソース**
   ドキュメントや記事が React や Vue 等のメジャーなライブラリよりはまだ少ないので、比較的学習リソースが限られてしまいます。(公式[ドキュメント](https://svelte.jp/docs/introduction)・[チュートリアル](https://learn.svelte.jp/tutorial/welcome-to-svelte)は非常によく出来ています)
   <br>
3. **企業採用率**
   今のところは React や Vue に比べると企業での採用実績は少なく、Svelte を活かした転職・就職の場が限定されてしまう可能性があります。

   ※ 筆者による採用媒体調査の結果なので事実と異なる可能性はあります。

## 参考記事

https://svelte.dev/

https://qiita.com/k-penguin-sato/items/3a85f89bf193b63ed740

https://zenn.dev/k_sato/books/b868c1705b8337/viewer/b58100

## おわりに

`Svelte`はアニメーションやトランジションが簡単に実装出来るので、
動きが多いアプリケーションとの相性は特に良さそうだなと思いました。

また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！

---

この記事は [フロントエンドの世界 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)の 2 記事目です。
次の記事はこちら [Svelte(Kit)の世界: プロジェクトのセットアップ #2](https://qiita.com/nuinteedev/private/c240b8f49f326ceea7e1)