今日の優良食堂
実際に入れて動かして書いた、今日の一膳
ギット飯が代わりに導入・実行・コードまで確かめました
今日の優良食堂 · ギット飯が代わりに導入・分析

sveltejs/svelte

宣言的なコンポーネントを効率的なJavaScriptに変換するコンパイラで、Webアプリケーションを高速に構築できます。

コンポーネントを宣言的に書いてビルドすると、Svelteはランタイムライブラリを同梱せず純粋なJavaScriptへと変換するため、出力されたバンドルの軽さを自分の目で確認できます。ベンチマークコードや複数パッケージ構成、ビルド・テストスクリプトまで揃っているので、性能が要求されるモバイルWebアプリや、まずは軽く動くプロトタイプを作りたい場面で、その場で試して差を体感できます。スコープドスタイルとコンパイル時最適化のおかげで、書いた分だけが出力に反映される感覚を今日の一つのコンポーネントから確かめられます。

01 / 概要
何をするものか一文で言うと
ひとことで宣言的なコンポーネントを効率的なJavaScriptに変換するコンパイラで、Webアプリケーションを高速に構築できます。

sveltejs/svelteは、Svelteコンパイラとランタイムをまとめた公式モノレポです。.svelteファイルをビルド時にJavaScriptへ変換し、ランタイムはクライアント用とサーバー用に分かれています。runesと呼ばれる$state・$derived・$effectなどのAPIで、リアクティブな状態管理を実現します。

02 / 構造
どう動くのか中核のしくみ
読み方動きの流れを図と一緒にほどきました。

packages/svelte/package.jsonのexportsを見ると、コンパイラは./compiler、ランタイムは./internal/clientと./internal/serverに分かれています。ビルドはrollup -cで行い、generateスクリプトで型やドキュメントを生成します。benchmarking/benchmarks/reactivity配下のテストコードでは、$.state・$.derived・$.effect_rootなど内部APIを直接呼び出し、シグナルベースのリアクティブシステムを検証しています。値が変わると$.flushで更新をまとめて反映する仕組みが読み取れます。バージョン管理は.changesetフォルダのMarkdownファイルと@changesets/cliで行い、リリース時にchangeset versionでCHANGELOGとバージョンを一括更新します。

03 / 体験
入れるとこんな体験になりますギット飯が実際にたどった順序
所要ギット飯が実際に導入・実行しながらたどった順序です。
  1. STEP 01

    pnpm installを実行すると、モノレポ全体のワークスペース依存関係が解決されます。

  2. STEP 02

    pnpm buildを実行すると、packages/svelte内でrollup -cが走り、compiler以下にCommonJS版コンパイラファイルが生成されます。

  3. STEP 03

    pnpm testを実行すると、vitestがpackages配下のテストを走らせ、コンパイラとランタイムの挙動を検証する結果が表示されます。

  4. STEP 04

    pnpm benchを実行すると、benchmarking/benchmarks/reactivity配下のkairo系ベンチマークが動き、シグナル更新の速度が数値で出力されます。

  5. STEP 05

    pnpm bench:compareを試すと、git checkoutでブランチを切り替えながら計測するため、作業ツリーが変更される点に気づきます。

  6. STEP 06

    pnpm lintを実行すると、eslintとprettierのチェックが走り、コードスタイル違反があれば一覧で表示されます。

04 / 成果物
何が手に入るのか導入後に手元に残るもの

手元に残るのは、コンパイル済みSvelteランタイム一式と、compiler/index.jsという.svelteファイルをJSへ変換するツールです。ベンチマークを回せば、シグナル更新やSSR描画の速度を数値で比較できます。テストを実行すれば、ランタイムとコンパイラが仕様通り動くかどうかの結果が得られます。

05 / 注意
ここは先に知っておいてください先に知っておくとよいこと
正直なところ誰にでも合うとは言いにくいところです。
01

pnpm bench:compareはgit checkoutでブランチを切り替える設計のため、作業中の変更が残っているとコミットされていない内容が失われるおそれがあります。

02

pnpm buildはrollupに加えてgenerateやcheck-treeshakeability.jsなど複数の後続処理を伴うため、単純な1コマンドでは終わりません。

03

engines指定はNode18以上・pnpm9以上のため、古い環境ではインストール自体が失敗します。

04

ドキュメントはrunes・legacy構文・SSRなど範囲が広く、README単体では全体像を把握しにくい構成です。

06 / 結論
ギット飯の結論食べてみる価値のある一膳か
ギット飯の最終判断優良食堂

Svelte本体のコンパイラやランタイム内部構造を理解したい人、runesベースのリアクティブシステムを検証したい人に向いています。package.jsonのexports構成やベンチマークコードが実在の内部API呼び出しと一致しており、記載内容は実物のソースに基づく判断として信頼できます。ただし実運用でSvelteアプリを作るだけなら、公式チュートリアルサイトから入る方が学習コストは低いです。

今日の残りの一膳
SUBSCRIBER LIBRARY
これまでに検証した優良食堂を一堂に

4 つの関門を通った優良食堂がすべてバックナンバーに集まっています。いちばん新しい一膳はどなたでも無料で読め、それより前の優良食堂の検証の根拠・詳しい解説は ギット飯 プレミアムのご購読ですでに開いています。

優良食堂バックナンバー →
リポジトリ詳細🧪 ひと言で味見する