.svelte ファイル

コンポーネントは Svelte アプリケーションのビルディングブロックです。HTML の上位集合を使用して .svelte ファイルに記述されます。

3 つのセクション（スクリプト、スタイル、マークアップ）はすべてオプションです。

<script module>
	// module-level logic goes here
	// (you will rarely use this)
</script>

<script>
	// instance-level logic goes here
</script>

<!-- markup (zero or more items) goes here -->

<style>
	/* styles go here */
</style>

<script>

<script> ブロックには（lang="ts" 属性を追加すると）JavaScript（または TypeScript）が含まれ、コンポーネントインスタンスが作成されたときに実行されます。最上位レベルで宣言（またはインポート）された変数は、コンポーネントのマークアップで参照できます。

通常の JavaScript に加えて、コンポーネントプロパティ を宣言し、コンポーネントに反応性を追加するためにルーンを使用できます。ルーンは次のセクションで取り上げます。

<script module>

module 属性を持つ <script> タグは、モジュールが最初に評価されるときに 1 回実行され、各コンポーネントインスタンスごとに実行されるのではなく実行されます。このブロックで宣言された変数はコンポーネントの他の場所で参照できますが、その逆ではありません。

<script module>
	let total = 0;
</script>

<script>
	total += 1;
	console.log(`instantiated ${total} times`);
</script>

このブロックからバインディングをexportできます。このバインディングは、コンパイルされたモジュールのexportになります。デフォルトのexportはコンポーネント自体なので、export defaultはできません。

TypeScriptを使用しており、moduleブロックから.tsファイルにこのようなexportをインポートする場合、TypeScriptがそれらに関する情報を把握するようにエディターをセットアップしてください。これはVS Code拡張機能やIntelliJプラグインの場合ですが、それ以外の場合にはTypeScriptエディタープラグインをセットアップする必要があるかもしれません。

レガシーモード

Svelte 4では、このスクリプトタグは<script context="module">を使用して作成されました。

<style>

<style>ブロック内のCSSはそのコンポーネントのスコープ内に限定されます。

<style>
	p {
		/* this will only affect <p> elements in this component */
		color: burlywood;
	}
</style>

詳細については、スタイル設定セクションを参照してください。