Svelte（スベルト）

📖 もうちょい詳しく

何が新しいの？

Svelte（スベルト）は、Webサイトの画面を作るための仕組み（フレームワーク）のひとつです。ReactやVueといった先輩がいる中で、2016年ごろに登場しました。いちばんの違いは、画面を動かす役目を「ブラウザで動かす本番」ではなく「作っている最中」にこなしてしまう点です。

どうやって動いてるの？

多くのフレームワークは、画面を更新する仕組みをまとめた本体（ライブラリ）を、利用者のブラウザに送り込んでそこで動かします。Svelteはその発想を変えて、開発者が書いたコードを公開前に素のJavaScriptへ翻訳（コンパイル）しておきます。つまりSvelteはコンパイラ（変換する道具）であり、できあがったコードはSvelte本体を持ち歩かずに動きます。

何ができるの？

ボタンを押すと数字が増える、入力した文字がその場に映る、といった「動く画面」をやさしい書き方で作れます。送り込むコードが小さくなりやすいので、表示が軽くなりやすいのも利点です。個人ブログから業務アプリまで、画面のあるWebづくり全般で使えます。

🌱 身近なたとえ

料理で例えると、Svelteは「下ごしらえを店の裏で全部すませてから出す」やり方に近いです。多くのフレームワークは、食材と調理器具をお客さんのテーブルに運んでその場で調理します。Svelteは盛りつけ済みのお皿だけを出すので、テーブル（ブラウザ）の上の道具が少なくてすみ、配膳が軽くなります。

✅ まず覚えるポイント

• Svelteは画面を作るためのフレームワークの一種です
• 正体はコンパイラ（コードを事前に変換する道具）です
• 変換は本番ではなく「作っている最中」に行われます
• ブラウザに送るコードが小さくなりやすいです
• 書き方がシンプルで初心者にも入りやすいとされます
• 同じ仲間にReact・Vueがあります

🧭 よくある勘違い

Svelteを使うと表示が必ず速くなるの？

送り込むコードが小さくなりやすいので軽くなる場面は多いですが、「必ず速い」とは言い切れません。中身の作り方や画面の規模、扱うデータの量しだいで結果は変わります。仕組みが有利というだけで、速さを約束するものではありません。

ReactやVueの完全な上位互換なの？

そうではなく、考え方が違う別の選択肢です。Reactは利用者が多く参考情報や周辺の部品がとても豊富で、Svelteはコードを小さく書ける軽さが魅力、というふうに得意分野が異なります。どれが向くかは作るものやチームの慣れによります。

Svelteを動かすには専用のソフトを入れてもらう必要があるの？

利用者側に特別な準備は不要です。Svelteは公開前にふつうのJavaScriptへ変換されているので、できあがったページは一般的なブラウザでそのまま開けます。

🧩 関連して覚えると楽な言葉

• React: Meta発の代表的なUIフレームワーク。利用者がとても多いです。
• Vue: 学びやすさで人気のUIフレームワーク。Svelteとよく比べられます。
• コンパイラ: 人が書いたコードを別の形へ翻訳する道具。Svelteの正体です。
• 仮想DOM: 画面の差分を効率よく当てる仕組み。Svelteはこれを使わない設計です。

🏁 ひとことでまとめ

Svelteは、画面を動かす手間を本番より前に終わらせてしまう、軽さ重視の画面づくりの道具です。