Svelte | メッセージを表示する

Svelte でメッセージを表する方法について調べてみた。

メッセージを表示する

public/index.html をテンプレートとして、<body> タグ内を JavaScript で書き換える。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width,initial-scale=1'>

        <title>Svelte app</title>

        <link rel='icon' type='image/png' href='/favicon.png'>
        <link rel='stylesheet' href='/global.css'>
        <link rel='stylesheet' href='/build/bundle.css'>

        <script defer src='/build/bundle.js'></script>
</head>

<body>
</body>
</html>

src/App.svelte ファイルを編集する。

src/App.svelte ファイルは、

  1. <script> タグ
  2. <main> タグ
  3. <style> タグ

から構成される。

1
2
3
4
5
6
7
8
9
10
<script>
        const message = 'Hello, world'
</script>

<main>
        {message}
</main>

<style>
</style>

実行すると、以下の HTML ファイルに変換される。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en"><head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<title>Svelte app</title>

	<link rel="icon" type="image/png" href="/favicon.png">
	<link rel="stylesheet" href="/global.css">
	<link rel="stylesheet" href="/build/bundle.css">

	<script defer="" src="/build/bundle.js"></script>
<script async="" src="//localhost:35729/livereload.js?snipver=1" id="livereloadscript"></script></head>

<body>


<main>Hello, world</main></body></html>

<body> タグ内が src/App.svelte で指定した <main> タグに変換されていることがわかる。