【2025】今最も注目されているJavaScriptフレームワーク【Svelte】
フロントエンドエンジニアとしてJavaScript、TypeScriptを書く中で、ReactやVue.jsなどのフレームワークを使うことがあると思います。利用していてとても便利な反面、「ホントにこのやり方が最新か？」「イマドキもっといい方法があるんじゃない？」と思うこともあるのではないでしょうか。
JavaScriptにおける技術革新は日に日に進んでいくばかりですが、どうせキャッチアップするならこれから波に乗ってきそうな技術を身に着けたいもの。今回は世界のJavaScriptエンジニアが最も注目するJavaScriptフレームワークを紹介します。
本記事の対象となる方
・最新のJavaScriptフレームワークの動向を知りたい人
・ReactやVue.jsなど、JavaScriptフレームワークを使ってコードを書いたことがある人
・Svelteがどんな仕組みのフレームワークなのか概要を知りたい人
注目してるってどうやって調べるのさ
State Of JSというサイトを見ると、世界中のJavaScriptを使うエンジニアが答えてくれたアンケート結果を見ることができます。
https://2024.stateofjs.com/ja-JP/ (2024年版の結果です)
フロントエンドフレームワークの「Interest」カテゴリを見てみると・・・
登場以来6年連続で1位を獲得しているフレームワークがある！見てみると、Svelteというフレームワークだそうで。
Svelteとは
Svelteとは、フランス語由来の英語で、公式ドキュメントでは「魅力的でスリム」「優雅でスタイリッシュ」という意味で紹介されています。その名の通り、Svelteはシンプルな構文を用いて少ないコードで効果的にUIを構築できるよう設計されています。また、「スリム」なのは記述量だけでなく、実行時のコード量も可能な限り少なくできるようにしています。
どの辺が「スリム」なの
クライアントが高速で動作できる：処理のスリム化
SvelteのJavaScriptフレームワークとして最も大きな特徴は、仮想DOMを使用しないということです。そのおかげで、仮想DOMを使ったページよりも高速な動作を実現することができます。
現在JavaScriptフレームワーク人気2トップのReact、Vue.jsは、仮想DOMが使用されています。
クライアントの操作によってDOMが変わった場合、元々の仮想DOMと変更された仮想DOMの比較差分を検出することによって、実際のDOMに再描画する箇所を決定しているため、直接DOMを変更するより操作が増えます。また、クライアントにはWebページのコンテンツそのものと、仮想DOMを操作するためのデータを追加で送信する必要があります。
対して、Svelteは、DOMが変わりうる箇所を考慮したJavaScriptのコードにコンパイルすることで、直接DOMを操作するためのコードを生成します。そのため、先ほど送信していた仮想DOMを動かすためのコードを送る必要がないため、データの通信量を抑えることができます。
また、そもそも変更された仮想DOMの比較差分を出力する操作がなく、直接DOMを操作するため、より軽量にWebページを動かすことができます。
開発者がシンプルなコードで記述ができる：記述のスリム化
下記は、ボタンをクリックするとカウントアップするアプリケーションを、React、Vue.js、Svelteでそれぞれ記述したものです。
・Reactの場合
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
</>
);
}・Vue.jsの場合
<script setup>
import { ref } from "vue";
const count = ref(0);
</script>
<template>
<p>Count: {{ count }}</p>
<button @click="count++">+</button>
</template>・Svelteの場合
<script>
let count = $state(0);
</script>
<p>Count: {count}</p>
<button onclick={() => count++}>+</button>Svelteだけ「通常のHTMLかな？」と思えるくらいの記述になっています。Svelteは可能な限り元々のHTMLやJavaScriptを使って記述するように設計されているため、フレームワーク独自の仕様がほか二つに比べて非常に少ないです。
フレームワーク独自の仕様を覚える量が最小限で済むので、学習コストを大幅に削減することができます。
また、記述量そのものもほか二つに比べると少なくなり、少ない記述量で直感的にアプリケーションを作ることができます。
実際に動かしてみる
物は試し。実際に動かしてみましょう。公式ドキュメントからPlaygroundというメニューにアクセスすると、お試しでSvelteコンポーネントを操作することができます。
2025年9月2日現在は、入力欄とボタンが用意されていて、入力した値がそのまま上部に転記表示される機能と、クリックするとカウントアップするボタンが用意されています。
もし今回の記事通りの環境にするのであれば、下記コードを使ってコピー＆ペーストしてください。
<script>
let name = $state('world');
let count = $state(0);
</script>
<h1>Hello {name}!</h1>
<input bind:value={name} />
<button onclick={() => count += 1}>
clicks: {count}
</button>テンプレートエンジンとしての役割
基本的にはHTMLの記述をそのまま使うことができます。また、script要素内で宣言した変数を、HTMLの要素内で「{ }」を使うことで使用できます。実際にcompanyという変数を宣言して、p要素の中で使用してみます。
DOM変更に関する記述
$state()として代入した変数が、先ほど記述した「DOMが変わりうる」変数として宣言されます(この変数の値を状態といいます)。stateの()の中身を変更すると状態の初期値が変わりました。
クライアント側のテキストボックスを変更すると、上部の表記にテキストボックスの内容を反映させることができます。これは、input要素のbind:value属性が入力値とnameという状態をバインドしているためです。
もしやこれ、配列にも対応している？？
クリックするたび、テキストボックスにある名前を配列に追加して再描画することができます！Svelteでは配列やオブジェクトも状態として管理することができ、変更があれば即時反映されて再描画することができます。
使い心地はどうなの
直感的にコードを記述できる
HTMLを基準に書くことができるため、フレームワーク専用の書き方が最小限でいいというのは本当にありがたいです。フレームワークで書いているというのを少し忘れてしまうレベルです。
あと、他のフレームワークであるイベントハンドラのonClickとか@click等、あれどっちだったっけみたいなものが少なくて、地味にストレス減なのがイイです。
Runesが便利
状態を書く時にも使いましたが、「$」から書き始めることで、RunesというSvelte独自の記法を使うことができます。
2024年10月にリリースされたばかりの機能なのですがこれがとにかく便利！今までフレームワークを使っていて「よく使う機能だからもっと簡単に書けないかな」を、「$」と書くだけで機能として呼び出せる感覚です。
今回は状態を管理する$stateを使用しましたが、他にも変更された状態を再計算する$derivedや、コンポーネント間で値を受け渡す$propsなどがあります。
公式ドキュメントより引用
また、これがあまり多すぎないのも良いポイントです。現在は全部で7種類ほどです。機能は多すぎると迷ってしまうもの。丁度いい数だと思いますし、もし今後増えるにしても、最初から多すぎると使いづらくなってしまいます。
他にもできるこんなこと
・HTMLの中に条件分岐や繰り返し表現を入れて、動的ページを作る
・コンポーネントを親子関係にして、値を引き継いだコンポーネントを利用する
・どのコンポーネントからも参照・管理できる共有状態を作成する
SvelteKitでバックエンド開発もできます
ReactでいうNext.js、Vue.jsでいうNuxt.jsにあたるものが、Svelteからも出ていて、SvelteKitといいます。
これを使うことで、SSRを活用したバックエンド開発もできます！
どうやって技術習得すればいい？
こんな素晴らしいフレームワークを勉強してみたいと思った方向けにお知らせです！
株式会社カサレアルではSvelte/SvelteKit講座を開講しています。
簡単なアプリケーションを作成する過程を追いながら、Svelte/SvelteKitの使い方をマスターしていく講座で、上記では語り切れなかったSvelteの魅力や、SvelteKitを使ったルーティング、フォーム、外部APIの接続まで盛りだくさんの内容になっております。
次世代を担う注目度の高いJavaScriptフレームワークを、今こそ学んでみませんか。講師として皆さんとお会いできることを、心よりお待ちしております。
講座詳細、開催日程は下記リンクよりお確かめください↓
https://www.casareal.co.jp/ls/service/openseminar/2014-online
