Svelteの始め方 — SvelteKitでチケット枚数と合計を表示する

ひよこ

Svelteを試したいけど、最初に何を作ればいい？

ペンギン先生

チケットを1枚増やすボタンを作ろう。枚数と合計金額が一緒に変われば成功だよ。まず1ページだけにして、Svelteの状態と表示の関係を見てみよう。

ひよこ

SvelteとSvelteKitは違うの？

ペンギン先生

Svelteはコンポーネントを作るためのUIフレームワーク、SvelteKitはルーティングやサーバー処理などを組み合わせるアプリ用のフレームワークだよ。今回はSvelteKitで練習用ページを作るよ。

ひよこ

古い記事にはnpm create svelteとあるよ。

ペンギン先生

今の公式の作成ツールはsv CLIだよ。新しい空の場所で、下のminimalテンプレートを作成しよう。既存のプロジェクトへ上書きしないようにね。

ひよこ

ファイルはどこに書くの？

ペンギン先生

トップページはsrc/routes/+page.svelteだよ。scriptに処理、HTMLに表示を書く。styleを同じコンポーネントへ書くこともできるんだ。

ひよこ

$stateって何をするの？

ペンギン先生

画面と連動する状態を作るよ。今回は枚数を$state(1)で持ち、ボタンで増やす。Svelte 5のRunes方式では、普通にletと書くだけで全部がリアクティブになるわけではないよ。

ひよこ

合計も別のボタンで更新するの？

ペンギン先生

枚数から計算する合計は$derivedで表そう。毎回2つの値を手でそろえなくて済むよ。この単純な計算に$effectを使う必要はないんだ。

ひよこ

ページが増えたらどうするの？

ペンギン先生

about/+page.svelteなら/aboutになるよ。親から子へ値を渡すときは$propsを使う。まず1ページを完成させてから、部品へ分ける練習に進むと分かりやすいね。

ひよこ

できたらすぐ公開できる？

ペンギン先生

型チェックとビルドを行い、表示やボタンを確認しよう。SSRやprerenderの設定と公開先に合うアダプターも確認する。今回は再読み込みで枚数が1へ戻るので、保存までできたと思わないようにね。

最初の目標：ボタンで1枚から3枚へ、合計も変わる

チケットは1枚150円とします。ボタンを2回押すと「枚数：3枚」「合計：450円」になる、という小さなページを作ります。購入・決済・データ保存は扱いません。

Node.jsとnpmを用意した環境で、既存のプロジェクトとは別の空の場所から始めます。ここではNode.js 24系での確認例です。使うテンプレートが要求するNode.jsの範囲も確認してください。

npx sv create hiyopen-svelte --template minimal --types ts --no-add-ons --install npm
cd hiyopen-svelte

sv create が成功し、依存関係が導入されたら、次のファイルを編集します。対話が出た場合も、練習用の新規フォルダーと指定内容を確認して進めます。

+page.svelteを丸ごと置き換える

src/routes/+page.svelte に次を保存します。

<script lang="ts">
  let quantity = $state(1);
  let total = $derived(quantity * 150);
</script>

<svelte:head>
  <title>チケットの枚数</title>
</svelte:head>

<main>
  <h1>チケットの枚数</h1>
  <p>1枚150円です。</p>
  <button onclick={() => quantity += 1}>
    1枚増やす
  </button>
  <div aria-live="polite">
    <p>枚数：{quantity}枚</p>
    <p>合計：{total}円</p>
  </div>
</main>

<style>
  main {
    max-width: 32rem;
    margin: 2rem auto;
    padding: 1rem;
    font-family: sans-serif;
    line-height: 1.7;
  }
  button {
    padding: .75rem 1rem;
    border: 2px solid #24629b;
    border-radius: .5rem;
    background: #eaf3fc;
    color: #2c3e50;
    font: inherit;
    cursor: pointer;
  }
  button:focus-visible {
    outline: 3px solid #996000;
    outline-offset: 3px;
  }
</style>

開発サーバーを起動します。

npm run dev

表示されたローカルURLを開きます。既定の5173が使用中の場合は別のポートになることがあるため、ターミナルの表示に合わせます。終了はそのターミナルでCtrl+Cです。

3つの確認で、状態と計算を理解する

1. 初回は1枚・150円か。
2. ボタンを2回押すと3枚・450円か。TabとEnterでも操作できるか。
3. 再読み込みで1枚・150円へ戻るか。

$state が枚数、$derived が枚数から求める合計です。合計だけ別に書き換えるのではなく、計算の関係を表します。再読み込みで戻るのは、この例に永続化の処理がないためです。

RunesはSvelteが処理する構文です。任意の普通のJavaScriptファイルへ同じ記述を貼るだけで動くものではありません。Svelte 4の説明やSvelte 5のレガシーモードの説明と、この例の方式を区別しましょう。

ページ・部品・公開へ進む順番

ページを増やすなら、src/routes/about/+page.svelte が /about になります。共通のレイアウトは +layout.svelte、サーバー側のデータ取得は +page.server.ts など、ファイルの役割が分かれています。

部品へ分け、propsをTypeScriptで受け取るときは、必要な値の型も宣言します。今回の最初の例は1ファイルで完結させています。

<!-- src/lib/Greeting.svelte の小さな部品例 -->
<script lang="ts">
  let { name }: { name: string } = $props();
</script>
<p>こんにちは、{name}さん！</p>

この部品を使う段階では、ページ側で読み込み、例えば name="ひよこ" を渡します。ファイルを作っただけではページに表示されません。

公開前に次を実行します。

npm run check
npm run build

SvelteKitの既定のSSRと、ビルド時にページを作るprerenderは区別します。静的公開では対象ページが事前生成できるかを確かめ、サーバー処理が必要なら公開先に合うアダプターを選びます。「Svelteなら必ずJavaScriptが不要」「どの公開先でも同じ設定で無料」とは考えません。

JSの変数や関数で迷ったらJavaScript入門、ページの構造や色の付け方はHTML/CSS入門へ戻ると、この例の理解につながります。

参考資料

• Svelte — sv create — 現行CLIと作成オプション
• Svelte — $state — Runesの状態
• Svelte — $derived — 状態からの計算
• Svelte — $props — 値の受け取りと型
• SvelteKit — Routing — ファイルとURL・サーバーの役割
• SvelteKit — Page options — SSR・prerenderの区別
• SvelteKit — Adapters — 公開環境に合わせたビルド