Svelte では、アプリケーションは1つ以上の _コンポーネント_ から構成されます。コンポーネントは、HTML、CSS、および JavaScript をまとめてカプセル化した、再利用可能な自己完結型のコードブロックであり、`.svelte` ファイルに記述されます。右側のコードエディタで開いている `App.svelte` ファイルは、単純なコンポーネントです。
データの追加
静的なマークアップをレンダリングするだけのコンポーネントは、あまり面白くありません。データをいくつか追加してみましょう。
まず、コンポーネントに script タグを追加し、`name` 変数を宣言します。
App
<script>
let name = 'Svelte';
</script>
<h1>Hello world!</h1>次に、マークアップで `name` を参照できます。
App
<h1>Hello {name}!</h1>中括弧内には、任意の JavaScript を記述できます。より大きなあいさつにするには、`name` を `name.toUpperCase()` に変更してみてください。
App
<h1>Hello {name.toUpperCase()}!</h1>前へ 次へ
1
2
<h1>Hello world!</h1>