Svelteってなに？

Svelte（スベルト）は、Webサイトを作るための道具です。

ボタンを押したら数字が増える。
入力した文字を画面に表示する。
そんな「動く画面」を簡単に作れます。

特徴は、とにかくコードがシンプルなことです。

Svelteを使ってみよう

まずはSvelteを使えるようにします。

1. Node.jsを入れる

以下のサイトからインストールします。

Node.js

インストールできたら、ターミナルで確認します。

node -v

数字が表示されたらOKです。

2. Svelteプロジェクトを作る

ターミナルで以下を実行します。

npm create vite@latest my-app -- --template svelte

3. フォルダに移動

cd my-app

4. 必要なものをインストール

npm install

5. 起動する

npm run dev

表示されたURLをブラウザで開くと、Svelteが動きます。

はじめてのSvelte

<script>
  let name = 'Svelte';
</script>

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

これだけで画面を作れます。

何をしている？

let name = 'Svelte';

これは「nameという箱にSvelteを入れる」という意味です。

そして、

{name}

と書くと、画面に表示されます。

ボタンを押してみる

<script>
  let count = 0;

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

<button on:click={plus}>
  {count}
</button>

動き

最初は 0 が表示される
ボタンを押す
数字が増える

Svelteは、数字が変わると自動で画面も更新してくれます。

入力した文字を表示する

<script>
  let text = '';
</script>

<input bind:value={text} />

<p>{text}</p>

動き

入力した文字が、そのまま下に表示されます。

条件で表示を変える

<script>
  let login = true;
</script>

{#if login}
  <p>ログイン中</p>
{:else}
  <p>ログアウト中</p>
{/if}

true は「はい」
false は「いいえ」
という意味です。

繰り返し表示する

<script>
  let fruits = ['りんご', 'ばなな', 'みかん'];
</script>

<ul>
  {#each fruits as fruit}
    <li>{fruit}</li>
  {/each}
</ul>

一覧表示したいときによく使います。

Svelteで何が作れるの？

Svelteでは、普段みなさんが使っているようなWebサービスを作れます。

例えば、

ホームページ
ブログ
管理画面
チャットアプリ
Todoアプリ
SNS風アプリ
ECサイト
ダッシュボード

などです。

つまり、「ブラウザで動く画面」はほとんど作れます。

実際に使っている企業

Svelteは個人開発だけでなく、有名企業でも利用されています。

例えば、

Apple
Spotify
IKEA
The New York Times
Square
Brave

などです。

Apple MusicのWeb版などでもSvelteが使われています。

「軽くて速い画面」を作りたい企業に人気があります。

なぜSvelteは軽いの？

Reactなどは、「画面を更新するための仕組み」をブラウザの中で動かしています。

そのため、まず内部で変更を確認してから、画面を書き換えます。

一方Svelteは、あらかじめ「どのコードが、どの画面を変更するか」を作ってから出力します。

つまり、ブラウザの中で大きな仕組みを動かさなくていい、という特徴があります。

例えば、数字が変わったときも、

React
- 変更を確認する仕組みを動かす
Svelte
- 直接その場所だけを書き換えるコードを作っておく

という違いがあります。

そのため、

ファイルサイズが小さい
動作が軽い
起動が速い

というメリットがあります。

つまりSvelteは、

「実行時にたくさん考える」のではなく、
「先に必要なコードを作っておく」

タイプの仕組みです。

Svelteの良いところ

書き方がシンプル
コードが少ない
動きが軽い
初心者でも理解しやすい

まとめ

Svelteは「シンプルにWeb画面を作れる道具」です。

難しい設定が少なく、直感的に書けます。

まずは、

ボタン
入力フォーム
Todoアプリ

などを作ってみるのがおすすめです。

Svelte超入門

目次