nabbisen

Posted on Feb 12 • Originally published at scqr.net

Svelte 5 on Bun 1.2: 始め方

#svelte #bunjs #javascript #typescript

はじめに

Svelte 最新版 5 では、 $: に代わるリアクティビティへの新しいアプローチとしてルーンが導入されました。 Svelte 4 のプロジェクトを 5 に移行するためには、やらなければならないことがそれなりにあります。それは言っても、ルーンシステムのおかげで、開発者はより優れた柔軟性とパフォーマンスの向上を享受できるようになりました。今回のアップデートでは、アプリをより効率的で保守しやすいものにすることが企図されています。

本記事で Bun での Svelte 5 プロジェクト開発の始め方をご説明します。

環境

アプリ: Svelte 5.19.9 + SvelteKit, "a framework for rapidly developing robust, performant web applications using Svelte" (私訳: 堅牢かつ高性能な Web アプリを高速に開発するための Svelte のフレームワーク)
JavaScript ランタイム: Bun 1.2.2
OS: CathyOS (Linux ディストリビューション)

チュートリアル

簡潔に言うと、手順はわずかです。コマンドラインを実行すれば、すぐに完了します。

1. プロジェクト作成

$ bunx sv create sveltekit-example

インストーラーがいくつか質問して来ます。以下は私の回答例です:

┌  Welcome to the Svelte CLI! (v0.6.20)
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  prettier, eslint
│
◆  Successfully setup add-ons
│
◇  Which package manager do you want to install dependencies with?
│  bun
│
◆  Successfully installed dependencies
│
◇  Successfully formatted modified files
│
◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd sveltekit-example                                                 │
│  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!

プロジェクトが作成され、準備が整いました。進めて行きましょう:

$ cd sveltekit-example

なお、初期時点でのディレクトリとファイル群は次の通りです (選択肢で選んだオプションの内容も含まれています):

$ ls -a1F
./
../
.svelte-kit/
node_modules/
src/
static/
.gitignore
.npmrc
.prettierignore
.prettierrc
bun.lock
eslint.config.js
package.json
README.md
svelte.config.js
tsconfig.json
vite.config.ts

$ find src/
src/
src/app.html
src/app.d.ts
src/lib
src/lib/index.ts
src/routes
src/routes/+page.svelte

2. デモアプリ実行

ミニマルテンプレートでのアプリデモを実行してみましょう:

$ bun run dev --open

次のように表示されます:

実行プロセスはファイル変更を監視します。何らかの変更を検出すると、ブラウザのページを更新して再レンダリングを促します。

3. カスタマイズ

ここまでで、独自のアプリを作成する準備が整いました。たとえば src/routes/+page.svelte を以下のように変更してみましょう:

<script lang="ts">
    let counter: number = $state(0)
    const incrementCounter = () => counter++
</script>

<div class="container">
    <div class="output">{counter}</div>
    <button onclick={incrementCounter}>Increment</button>
</div>

<style>
    .container {
        padding: 0.8rem 0.2rem;
        display: flex;
        justify-content: center;
        border: 0.5em solid #fdfa72;
        border-radius: 1.4rem;
    }

    .output {
        width: 2.5em;
        margin-right: 0.8rem;
        color: #4f68dc;
        text-align: right;
        font-size: 1.2rem;
        font-weight: bold;
    }
</style>

次のように表示されます:

+layout.svelte のような Svelte コンポーネントを追加したり、独自のコンポーネント / レイアウト / スタイル / 型を定義したりもできます。

おわりに

Svelte 5 では、 $: がルーンに置き換えられました。これはリアクティビティの核となるものをより良くするためです。そのおかげでコンポーネントの更新が、より明確かつ効率的になっています。また、大規模プロジェクトで、より優れたスケーラビリティを発揮できるようにという観点でも工夫が施されています。

Svelte 5 で最新の洗練されたアプリ開発をお楽しみください :)

DEV Community