祝10歳！Svelteが歩んだ10年の歳月と弊社Svelteコースの受講者層のご紹介
はじめに
1. 仮想DOMからの脱却を掲げて誕生（2016年）
Svelteの誕生は2016年、多くのUIフレームワークが仮想DOMを採用していた時期でした。ReactやVueが注目のフレームワークであり、どちらも仮想DOMを利用しています。
そこでSvelteの作者Rich Harris氏は、「よし、Frameworks without the frameworkだ！」と言ってSvelteを開発し、公開しました。
公式ブログ : Frameworks without the framework(https://svelte.dev/blog/frameworks-without-the-framework)
Rich Harris氏は、「フレームワークは思考を構造化する道具」としており、開発のサポートをするためのものだと考えています。
Frameworks are primarily a tool for structuring your thoughts, not your code.（フレームワークは、主に思考を構造化するためのツールであり、コードを構造化するためのツールではない。）
※ 翻訳は筆者によるものです。
一方でフレームワークと内部に含まれる仮想DOMなど、実行に際しての重たい仕組みはアプリの起動や動作を遅くする原因だと指摘しています。
「Frameworks without the framework」は開発時はフレームワークの構造化の恩恵を受けつつ、実行時はフレームワークを除去した純粋なJavaScriptとして軽量化しようという発想を意味します。
Svelteのアプローチは、ビルド時に純粋なJavaScriptに変換するというものです。仮想DOMなどを利用しない単なるJSコードとしてビルドし、それをブラウザはロードします。巨大な仮想DOMが含まれないため、初回ロードが軽く、素早く表示されます。
このようにSvelteは「変換」を軸にしたアプローチであり、作者のRich Harris氏も「Svelteはコンパイラ」だと言うほどです。それほど、純粋なJSへの変換というアプローチはこれまでのReactやVueとは根本から違うものでした。
補足: 仮想DOMはレンダリングを最適化するための仕組みです。画面更新時に必要最小限のDOM操作で済むように仮想DOMが自動的に操作を行います。Svelteはこの仮想DOMを使わずに描画を最適化することを目指しています。
2. thisの残るバージョン2（2018年）
構文を整理して公開したバージョン2ですが、このときのコードはthisキーワードを利用しており、スコープの扱いが複雑になりやすく、敬遠されがちな構文でした。
<!-- バージョン2 時代-->
<h2>Count: {{count}}</h2>
<button on:click="increment()">+1</button>
<script>
export default {
data() { return { count: 0 }; },
methods: {
increment() {
const { count } = this.get();
this.set({ count: count + 1 });
}
}
};
</script>3. 圧倒的に書きやすくなったバージョン3（2019年）
「Rethinking reactivity」を掲げて構文を大改造しました。この変更によりコード量が圧倒的に削減され、簡潔に記述できるフレームワークとなりました。
公式ブログ: Rethinking reactivity(https://svelte.dev/blog/svelte-3-rethinking-reactivity)
コード例は次の通りです。通常の構文であるletで状態宣言が可能になり、簡潔な記述に刷新されました。
<!-- バージョン3 時代-->
<script>
let count = 0;
function increment() { count += 1; }
</script>
<button on:click={increment}>
Count: {count}
</button>4. Rich Harris氏がVercelに移籍（2021年）
Vercelへ移籍し、Svelteの開発に専念できる環境となりました。
Vercelは、Next.jsの開発企業であり、同名のデプロイ環境を提供している企業です。React、Vue、Svelteなどの主要フレームワークとも関わりを持ち、スポンサーや技術提供などで支援をしています。
公式ブログ: Vercel welcomes Rich Harris, creator of Svelte(https://vercel.com/blog/vercel-welcomes-rich-harris-creator-of-svelte)
Vercelへの移籍によりフルタイム開発体制となり、SvelteをベースにしたSvelteKitの開発も並行して進められるようになりました。
5. SvelteKitリリース（2022年）
Vercelに移籍し、そのノウハウを身に宿し、ついにリリースされたのがSvelteKitです。SvelteKitはSvelteをベースとしたフルスタックフレームワークであり、これでSvelteだけでフロントエンドもバックエンドも一手に開発できるようになりました。
公式ブログ: Announcing SvelteKit 1.0(https://svelte.dev/blog/announcing-sveltekit-1.0)
6. 内部刷新と安定化へのバージョン4（2023年）
4年ぶりのアップデートは現代版へのアップデートでした。2019年のバージョン3から4年の月日が過ぎる中でビルドツール回りの環境が変わっており、そういった最適化をするためのバージョンアップでした。
公式ブログ: Announcing Svelte 4(https://svelte.dev/blog/svelte-4)
そうしてこの後訪れる大規模な刷新、バージョン5への下地を整えたのでした。
7. 大規模刷新のバージョン5（2024年）
2024年はSvelteが大きな刷新が行われた年でした。これまでの構文を捨て、全く新しい構文（Runes）へと生まれ変わりました。
公式ブログ: Svelte 5 is alive(https://svelte.dev/blog/svelte-5-is-alive)
Runesという命名はまさに古のルーン文字が由来になっています。Runesの構文では「$」記号が頻出します。この記号は、単なる文字ではなく魔法や魔力を持った文字であるという意味を込めて、Runesと名付けられました。
公式ブログ: Introducing runes(https://svelte.dev/blog/runes)
コード例は次の通りです。
<!-- バージョン5 時代-->
<script>
let count = $state(0);
function increment() { count += 1; }
</script>
<button onclick={increment}>
Count: {count}
</button>これまでの、letで状態宣言をするような構文では、コードが大規模化した際に状態の宣言や変更を追いづらいなど問題がありました。この課題はRunesへ切り替えたことで明示的になり、TypeScriptとの最適化も同時に行われ開発体験が向上しました。
8. そして10周年
2026年Svelteは10周年を迎えました。Runesの構文が定着し、バージョン5を公開してからnpmのダウンロード数は右肩上がりに増加し、「State of JS」でも、実際の採用率が上昇しました。これは実務での利用が増加し、利便性が広く認識され始めていることを表しています。
ダウンロード数の確認: npm trends(https://npmtrends.com/svelte)
State of JS は毎年行われる世界規模の開発者アンケートです。以下のリンクは2025年の調査結果です。
意識調査: State of JS(https://2025.stateofjs.com/en-US/libraries/front-end-frameworks/)
公開当初の「なんか良さそう」という噂から、10年の時を経て「便利じゃん」という実体験に基づいた評価へと変化してきていると考えられます。
弊社Svelteコースの受講者数
弊社の研修コースにSvelteKit入門が追加されたのは2025年であり、バージョン5（Runes）公開直後です。コース公開時は「噂のSvelteを体験しに来た」という受講理由が大半であり、2026年時点でもその状況は変わらずです。
その一方で、実務利用を目的に受講される方や、新人研修カリキュラムにSvelteコースを組み込む案件が増えるなど、国内でも少しずつ利用が広がっていることを感じます。
弊社Svelteコースの流れは、Svelteの基礎を学んだ後にSvelteKitでアプリ全体を作りこんでいくように進み、Webアプリ開発の流れをSvelteを通して体験できるコースとなっています。
JavaScriptフレームワークに触れたことがない方でも、Webアプリ開発の全体像を掴むのに役立つコースになっています。Svelte10年の集大成とWebアプリ開発に興味をお持ちの方は、是非受講を検討してみてください。
お申し込み
講座詳細、開催日程は下記リンクよりお確かめください↓
https://www.casareal.co.jp/ls/service/openseminar/2014-online
