「React で作っています」「最近は Svelte もいいらしい」。ホームページやアプリの話で、よく出てくる2つの名前です。どちらも、画面を作るための道具です。何が同じで、何が違うのか。中学生にもわかるように整理します。
この記事の結論
- React（リアクト）も Svelte（スベルト）も、ホームページやアプリの画面を「部品」の組み合わせで作る道具です。
- React は、画面が変わるたびに「前と後」を見比べて、変わった所だけ直します。Svelte は、先に組み立て方を翻訳しておき、変わった所を直接直します。
- React は使う人が多く、Svelte は書く量が少なく軽い。どちらが上ではなく、作るものと、直せる人で選びます。
同じところ：画面を「部品」で作る
ホームページの画面を、よく見てみてください。上のメニュー、写真、説明のカード、ボタン。同じ形のものが、何度も出てきます。
React も Svelte も、この一つひとつを「部品」として作っておき、組み合わせて画面にします。専門の言葉では、部品を「コンポーネント」と呼びます。
おもちゃのブロックに近い考え方です。ボタンの部品を一度作れば、どのページでも使えます。ボタンの色を変えたいときは、部品を1か所直すだけで、全部のページのボタンが変わります。
Reactとは？
- 生まれFacebook（今の Meta）が作り、2013年に誰でも使えるように公開しました。2026年2月からは、Meta の手を離れ、いろいろな会社が支える「React Foundation」という団体が運営しています。
- 使っている人世界の開発者への調査（Stack Overflow 2025）では、回答者の44.7%が使っていると答えました。画面を作る道具の中で、いちばん多い数字です。
- スマホのアプリもReact Native（リアクトネイティブ）という兄弟の道具で、iPhone や Android のアプリも作れます。
Svelteとは？
- 生まれ新聞社でニュースの図を作っていた Rich Harris（リッチ・ハリス）さんが作り、2016年に公開しました。2021年には Vercel という会社に移り、Svelte づくりを仕事にしました。
- 使っている人同じ調査で、使っている人は7.2%。React よりずっと少ないです。
- 好かれている一方で、「使ってみて、また使いたい」と答えた人の割合は62.4%。React（52.1%）より高く、使った人に好かれている道具です。
- Svelte 52024年10月に大きく新しくなった Svelte 5 が出ました。
しくみの違い
画面の中身が変わったとき（ボタンを押して数が増えた、など）の直し方が違います。家の修理にたとえます。
- React＝その場で見比べる大工さん何か変わるたびに、頭の中で「新しい家の設計図」を描き、今の家と見比べて、違うところだけを直します。見比べる手間はかかりますが、どんな変化にも同じやり方で対応できます。
- Svelte＝先に組み立てておく工場家を建てる前に、「この窓はこう変わる」という直し方を、工場で先に決めておきます。だから現場では、見比べずに、決まった所をすぐ直せます。運ぶ荷物（プログラムの量）も小さくなりがちです。
Svelte が先にしておく準備を、専門の言葉で「コンパイル（翻訳）」と言います。Svelte は自分のことを、「翻訳する道具（コンパイラ）を使う、画面づくりの道具」と説明しています。
それぞれの良いところ
React と Svelte
数字は Stack Overflow Developer Survey 2025 より
Next.js・SvelteKit との関係
React も Svelte も、それだけでは「画面の部品を作る道具」です。ページの切りかえや、サーバーとのやりとりまでそろえて、ホームページ一式を作るための骨組みが別にあります。
- Next.js（ネクストジェイエス）React で作るための骨組みです。
- SvelteKit（スベルトキット）Svelte で作るための骨組みです。
「部品の道具」と「骨組み」の関係は、フレームワークとは？ でくわしく説明しています。
どちらを選べばいい？
- React が向いている大きなサービスやアプリ、たくさんの人で作るもの、スマホのアプリも一緒に作りたいもの。直せる人を見つけやすいことが、いちばんの強みです。
- Svelte が向いている少人数で速く作りたいもの、軽く速く表示したいもの、書く量を少なくしたいもの。
どちらでも、ちゃんと作れば良いホームページになります。会社やお店の立場で大事なのは、名前より「作った人がいなくなっても、ほかの人が直せるか」です。
茂原・長生郡の小さな会社にとっては
茂原市や長生郡（一宮町・睦沢町・長生村・白子町・長柄町・長南町）、市原市・木更津市・東金市・大網白里市の小さな会社やお店のホームページなら、React か Svelte かで、見に来るお客さまの満足が大きく変わることは、あまりありません。
それより、「自分たちで更新したいか」「作った人に任せたいか」「将来、ほかの人にも直してもらえるか」。この3つで作り方を決めるほうが、ずっと大切です。
Yoraku は、茂原市を拠点に、長生郡・市原市・木更津市・東金市・大網白里市へ伺っています。更新のしかたまで考えた ホームページ制作 や、AIの使い方を一緒に学ぶ AI研修・家庭教師 のことも、気軽にご相談ください。
よくある質問
Q. React と Svelte は、いっしょに使えますか。
ふつうは、どちらか一つを選んで使います。同じ画面に両方を入れることもできなくはありませんが、運ぶ量が増え、直す人も両方を覚える必要があるので、あまりしません。
Q. Vue（ビュー）や Angular（アンギュラー）とは何ですか。
どちらも、React や Svelte と同じ「画面を部品で作る道具」です。同じ調査では、Angular が18.2%、Vue が17.6%の人に使われていました。
Q. React や Svelte で作ると、検索に出にくくなりませんか。
作り方しだいです。見る人のスマホの中で、あとから文字を組み立てるだけの作りだと、AIの読み取り係などには本文が見えないことがあります。Next.js や SvelteKit で、サーバー側で先にページを作っておけば、その心配はへります。くわしくは サーバー会社でAI検索の見え方は変わる？ をどうぞ。
参考（2026年10月時点）