【学習ログ】Svelteチュートリアル「Introduction」まとめ

こんにちは、現在Svelteチュートリアルを進めているYoheiです。

この記事では、Svelte公式チュートリアルの最初のセクション「Introduction」で学んだ内容を、初心者目線でまとめていきます。
Svelteってどんな感じ？と気になっている方の参考になれば嬉しいです。

✅ 1. 最初のコンポーネント（Your first component）

Svelteでは、HTML・CSS・JavaScriptが1つの .svelte ファイルにまとまったコンポーネントとして記述されます。

基本の書き方はこちら：

<script>
	let name = 'Svelte';
</script>

<h1>Hello {name.toUpperCase()}</h1>

{} 内には JavaScript が書けます。
このように、テンプレートに JS を自然に埋め込めるのが直感的で気に入りました。

✅ 2. 動的な属性設定（Dynamic attributes）

変数はテキストだけでなく、HTMLの属性値にも埋め込めます。

<script>
	let src = '/tutorial/image.gif';
	let name = "Mike";
</script>

<img {src} alt="{name} dances."/>

src={src} のように、変数名と属性名が同じなら {src} のように省略可能です。
この書き方、めちゃくちゃスッキリして好きです。

✅ 3. スタイルはコンポーネントごとに完結（Styling）

Svelteでは、<style> タグ内のCSSはそのコンポーネントの中だけに適用されます。

<p>This is a paragraph.</p>

<style>
	p {
		color: goldenrod;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

グローバルなクラス設計や、スタイルの衝突に悩む必要がないのが本当にありがたいです。

✅ 4. コンポーネントの入れ子（Nested components）

React同様、他のコンポーネントをインポートして再利用できます。

<script lang="ts">
	import Nested from './Nested.svelte'
</script>

<p>This is a paragraph.</p>
<Nested />

<style>
	p {
		color: goldenrod;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

複雑なUIも小さなパーツに分けて管理できるのが◎。
Svelteの柔らかい構文で、入れ子構造も自然に書けます。

✅ 5. HTMLを生で埋め込むには？（HTML tags）

もし変数の中にHTML文字列があって、それをそのまま埋め込みたいときは {@html} を使います。

<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

<p>{@html string}</p>

⚠️ 注意：XSSの危険があるため、信頼できない入力には絶対に使わないこと！

🔚 おわりに

Svelteの最初の一歩、Introductionセクションを終えて感じたのは「すごく自然で楽しい！」ということでした。

これから「Reactivity（リアクティブ性）」の章に進みつつ、実際のアプリにも少しずつ反映していければと思っています。