More than 3 years have passed since last update.

Vue・Reactを超える！？近年話題の Svelte に入門してみよう！

Last updated at 2020-11-20Posted at 2020-11-17

はじめに

今回は最近ちょいちょい使われているフロントエンドフレームワーク Svelte.jsについて解説します¹。
最近だと、ロイターの大統領選挙ページで使われてましたね。

Svelte.jsは速くて軽く、簡単に実装できるフレームワークです。

どうやら、React, Vue, Angular, Emberよりも速いらしいです！
https://svelte.dev/blog/frameworks-without-the-framework#Introducing_Svelte

Tutorialも充実しており、サイト上で実際に書きながら学ぶこともできます。

本記事はTutorialを触る前に、ざっと概要を学びたい方向けに書いてます！

YouTube動画

動画で確認したい方はこちらもどうぞ。
【YouTube動画】 VueやReactを超える！？次世代のフロントエンドフレームワーク Svelte.jsをご紹介！！

基本の書き方

それでは基本の書き方をみていきます。
Tutorialを始める前に、さらっと読んでおくと理解が捗ると思います！

変数の使い方

svelte.jsでは、scriptタグ内でletを定義するだけで変数として利用できます。

<!-- svelte.js -->
<script>
  let name = 'World';
</script>

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

Vue.jsで同じように出力しようとすると、以下のようになります。
svelteと比較して、記述量が多めです。

<!-- vue.js -->
<template>
  <h1> Hello, {{ name }} !! </h1>
</template>

<script>
export default {
  data() {
    return {
      name: "World"
    }
  } 
}
</script>

属性の使い方

属性の書き方も簡単です！
vueで画像を表示しようとすると次のようになります。

<!-- vue.js -->
<template>
  <img :src="image" alt='yassun youtube' />
</template>

<script>
export default {
  data() {
    return {
      image: "https://img.youtube.com/vi/rbhMST4A1Hs/0.jpg",
    };
  },
};
</script>

svelteだともっと簡単に書くことができます。
ちなみに、altを省略すると、A11y (Accessibility) の警告が出てきます。

<!-- svelte.js -->
<script>
  let src="https://img.youtube.com/vi/rbhMST4A1Hs/0.jpg"
</script>


<main>
  <img {src} alt='yassun youtube'>
</main>

styleの書き方

styleに直接記述するだけで、スタイルを当てることができます。
また、デフォルトでスコープがコンポーネント内になるため、クラス名の競合を意識しなくて大丈夫です。

<!-- svelte.js -->
<style>
  p {
    color: purple;
  }
</style>

<p>テスト！</p>

他コンポーネントの使い方

インポートするだけで使えます。

<script>
  import Nested from './Nested.svelte'
</script>

<Nested />

Reactive

on:イベントでイベント発火条件を書き、scriptタグ内のメソッドを呼び出すだけで、メソッドが使えます。
vueのようにmethodsを定義する必要がありません。

<script>
  let count = 0;

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

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

preventDefaultやstopPropagationの追加もパイプで繋ぐだけで、簡単にできます。

<script>
  function handleForm() {
    console.log('handleForm');
  }
</script>

<form on:submit|preventDefault={handleForm}>
  <button>ボタン</button>
</form>

ある変数と連動して別のコードが動いて欲しい場合には、$:を使います。
例えば、scriptタグに以下のように書くと、countが変化した時にコンソールにログが流れます。

let count = 0;

$: console.log(`count: ${count}`);

変化するコードをグルーピングしたい場合は{}で括ります。

let count = 0;

$: {
  console.log('hello');
  console.log(`count: ${count}`);
}

ifで別途、コードが連動する条件を指定することもできます。
以下の場合は、countが2以上になったら、動きます。

let count = 0;

$: if (count >= 2) {
  console.log(`count: ${count}`);
}

props

propsはscript内でexportするだけで、別のコンポーネントで使えるようになります。
exportする際にデフォルト値を指定することもできます。

<!-- Child.svelte -->
<script>
 export let answer;
</script>

<p>{ answer }</p>

<script>
  import Child from './Child.svelte'
</script>

<Child answer={10} />

slot

slotはこんな感じで入れます。

Comp.svelte

<div>
  <slot></slot>
</div>

App.svelte

<script>
  improt Comp from './Comp.svelte'
</script>

<Comp>
  <div>スロット</div>
</Comp>

if

if文はこのように書きます。
/ifでif文の終わりを決めます。

{#if count > 10 }
  <p>Big!!</p>
{:else if count > 5 }
  <p>Medium</p>
{:else}
  <p>Small</p>
{/if}

await

awaitはif文と似たような感じで書けます。

{#await promise}
  <p>waiting...</p>
{:then number}
  <p>number is {number}</p>
{:catch error}
  <p>{error.message}</p>
{/await}

loop (each)

for文に慣れていると間違えそうですが、cats as catというように、各要素はasの右側に書きます。

{#each cats as cat, i}
  <div>{i}-th cat is {cat}</div>
{/each}

bind

bindはvueっぽく書けます。

<input bind:value={name}>

Lifecycle

ライフサイクルのメソッドは以下のように、svelteからインポートして使います。
onMount, onDestroy, beforeUpdate, afterUpdate, tickなどが用意されています。


<script>
  import { onMount } from 'svelte';

  let test = '';

  onMount(async () => {
    test = await somePromise();
  })
</script>

<p>{ test }</p>

Store

storeもsvelteに入っているため、以下のようにして使うことができます。
writable(0)をセットすることで、値のupdate, set, subscribeが使えるようになります。

他にもsvelte/storeには、読み込み専用のreadableや別のstoreを使って新しくstoreを作るderivedなどがあります。

import { writable } from 'svelte/store';

export const test = writable(0);

test.update(n => n + 1)
test.set(x)
test.subscribe(value => {})

{ $test }

以下のようにメソッドを制限したカスタムstoreを作成することもできます。
ここら辺の詳しい話もTutorialに詳細があるので、ぜひ確認してみてください。

function createCount() {
  // writable(0)をセットし、メソッドを呼び出す
  const { subscribe, set, update } = writable(0);

  return {
    subscribe,
    // 値を1だけ増やすメソッドを設定
    increment: () => update(n => n + 1),
    // 値を1だけ減らすメソッドを設定
    decrement: () => update(n => n - 1),
    reset: () => set(0)
  };
}

おわりに

Svelte.jsを試してみたくなりましたか？
簡単に始めることができるので、ぜひ試してみてください！

Tutorialはこちら
https://svelte.dev/tutorial/basics

自由に触りたい方は以下の方法もオススメです！
Svelteの公式ページでREPLを試す。
https://svelte.dev/repl

CodeSandboxのSvelte.jsのテンプレートを試す。
https://codesandbox.io/dashboard/home

npxでローカルにインストールして試す。
https://svelte.dev/blog/the-easiest-way-to-get-started

公式サイトでもフレームワークと名乗っているので、フレームワークという語を使います。https://svelte.dev/blog/frameworks-without-the-framework#Introducing_Svelte ↩

534

287

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

Vue・Reactを超える！？ 近年話題の Svelte に入門してみよう！