Svelte と React：1つのコンポーネントを2通りで
Svelte と React の比較
Svelte と React：同じコンポーネントを両方で書く | We.Inc
同じカウンター、リスト、フォーム、エフェクトをそれぞれで書いて Svelte 5 と React を比較します。runes と hooks の違いと、次のプロジェクトにどちらが合うかがわかります。
Svelteはコンパイラーです。.svelte ファイルをプレーンなJavaScriptに変換し、$state ルーンで宣言した状態はページを直接更新します。Reactはライブラリで、状態が変わるたびにコンポーネント関数が再実行され、新しいJSXを返します。Svelteは通常コンポーネントあたりのコードが少なく、Reactにはより大きなエコシステムと採用市場があります。
Svelte 5 と React のひと目でわかる比較
- 配布のされ方
- コンパイラーがコンポーネントをJavaScriptに変換
- ブラウザーで読み込まれるライブラリ
- コンポーネントのコードが実行されるのは
- コンポーネントの作成時に1回
- 再レンダリングのたびに毎回
- ローカルの状態
- let count = $state(0)
- const [count, setCount] = useState(0)
- 算出値
- $derived(expression)
- レンダー本体内の普通の式
- 副作用
- $effect（依存関係は自動で追跡）
- 依存配列付きの useEffect
- props
- let { name } = $props()
- 関数の引数
- 双方向バインディング
- bind:value、props には $bindable
- value と onChange
- クリックハンドラー
- onclick={...}
- onClick={...}
- フルスタックフレームワーク
- SvelteKit
- Next.js など
下でコンポーネントを選ぶと、Svelte 5 版と React 版を並べて読めます。どちらもまったく同じ動作をするので、見える違いはフレームワークの違いだけです。どのスニペットも完結しており、新しいプロジェクトでそのまま動きます。
- 4つのコンポーネントから1つを選びます：カウンター、リスト、フォーム、エフェクトです。
- 左側のSvelteのファイルと右側のReactのファイルを読みます。
- メモで、その例がそれぞれのフレームワークのどの規則を示しているかを確認します。
- どちらかの版を新しいプロジェクトにコピーして試します。
- Svelteでは、$state に保持した配列やオブジェクトを直接変更できます。Reactでは、常に新しい配列やオブジェクトをセッターに渡しましょう。
- 2つの値を同期させるために $effect を使うのはやめましょう。Svelteでの答えは $derived の値で、Reactがレンダー中に計算するよう勧めているのと同じです。
- チームがすでにReactを知っているなら、採用とライブラリの観点が、Svelteのコンポーネントの小ささより重視されることが普通です。
- 完全に切り替える前に、小さな社内ページをSvelteで試しましょう。1つのアプリ内で両者を連携させることはできますが、その価値があることはまれです。
よくある質問
Svelte は React より速いですか？
結果はアプリやテストによって変わるため、ここでは速度の数値は挙げません。構造上の違いは確かにあります。Svelteはフレームワークの層をコンパイルで取り除き、変わった部分だけを更新しますが、Reactはコンポーネントを再実行して結果を比較します。
Svelte 5 でもリアクティブな状態に let を使いますか？
let だけでは使いません。Svelte 4 ではトップレベルの let がデフォルトでリアクティブでした。Svelte 5 ではこれが明示的になり、$state で作成したときに変数がリアクティブになります。
Next.js の Svelte 版は何ですか？
SvelteKit です。Svelteのドキュメントは、これを公式のアプリケーションフレームワークと呼んでおり、Svelteのコンポーネントの上にルーティング、サーバーレンダリング、データ読み込みを加えます。
Svelte で React のライブラリを使えますか？
直接は使えません。Reactのコンポーネントの描画にはReactが必要です。日付や検証のヘルパーなど、UI層を持たないプレーンなJavaScriptのライブラリなら両方で動きます。
初心者はどちらを先に学ぶべきですか？
Svelteのテンプレートはプレーンなhtmlに近いので、最初の一歩はより楽です。Reactにははるかに多くのチュートリアルと求人があります。就職が目的ならReactから始めましょう。
runes と hooks
- Svelte 5 は以前の暗黙的なリアクティビティを、$state、$derived、$effect、$props、$bindable という runes に置き換えました。関数呼び出しのように見えますが、実際はコンパイラーのキーワードで、コンパイラーは各値をそれを読むページの部分に結び付けられます。
- Reactの hooks は普通の関数で、コンポーネントのトップレベルで、毎回のレンダーで同じ順序で呼ぶ必要があります。useState は値のスナップショットとセッターを返し、新しい値は次のレンダーで初めて反映されます。
エフェクトと依存関係
- Svelteの $effect は同期的に読み取った状態を追跡し、その状態が変わると再実行されます。await の後に読んだ値は追跡されません。Reactは useEffect の依存配列にすべてのリアクティブな値を列挙するよう求め、漏れがあるとリンターが警告します。
- どちらもブラウザーでのみ実行され、サーバーレンダリング中には実行されません。また、どちらも返り値としてクリーンアップ関数を受け付け、次の実行の前とアンマウント時に実行します。
それぞれが合う場面
- コンテンツサイト、ウィジェット、そしてコードを減らしたくライブラリが少なめでも構わない小さなチームにはSvelteを選びましょう。特定のReactライブラリが必要な場合、大きなチームの場合、またはホスティングが前提とする Next.js のようなフレームワークが必要な場合はReactを選びましょう。
それぞれでプロジェクトを始める
雛形作成のコマンド
1つ目のコマンドは公式の sv ツールで SvelteKit のアプリを始め、2つ目は最もドキュメントが充実したReactフレームワークである Next.js のアプリを始めます。
カウンター
$state が変数をリアクティブにするので、Svelteでは count++ と書けます。Reactではセッターが必要で、新しい値は次のレンダーで反映されます。
リスト
$state の配列は深くリアクティブなプロキシなので、push でページが更新されます。Reactは状態を読み取り専用として扱うので、配列をコピーしてそのコピーをセッターに渡します。
フォーム
bind:value は入力欄と変数を双方向に同期させます。Reactは制御された入力を使い、value は状態から来て、onChange がそれを書き戻します。
エフェクト
Svelteはエフェクトが count を読んでいることを自分で判断します。Reactでは count を依存配列に入れる必要があり、入れないとタイトルが更新されなくなります。
Svelte と React で書いた同じコンポーネント
コンポーネントを選択
Svelte 5（.svelte）
React（.jsx）
Svelte版をコピー
React版をコピー
Svelte：{n} 行、React：{v} 行
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る