Zenn
Open4

Svelte/SvelteKitを触ってみる

Web
frontend
Svelte
SvelteKit
MerucuMerucu

Svelte/SvelteKit について

https://svelte.dev/
良さげなフロントエンドフレームワーク。
細かい説明は他に任せますが、事前コンパイルすることにより仮想DOMを使用せずに描画されるという特徴をもつ。

MerucuMerucu

SvelteKitテンプレートの生成

npm, pnpm, yarnなどで実行

pnpx sv create

ダイアログが出てくるのでお好みに選択します。

Which would you like your project to be created?という質問に対しては、小さなアプリが実装されており、フォルダ構成などを学べるSvelteKit demoを選択すると良いです。
新規にアプリのベースとして使用するにはSveltKit minimalを使用すると良さそうです。

MerucuMerucu

フォルダ構成

src/app.html

最終的に生成されるファイルの一番外側(大枠)。%sveltekit.head%及び%sveltekit.body%にSvelteで生成されるコードが埋め込まれる。

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>

src/routes/+page.svelte

このファイルを基にルート(/)にアクセスしたときのページが表示される。.svelteファイルにはHTML, CSS, JSを一つのファイルにまとめて書くことが出来る。

src/routes/+layout.svelte

HeaderやFooterなどの全てのファイルで共通する構造を記述する。

ログインするとコメントできます