ページ遷移、画像の使い方

Svelteの機能は、大事なところは大体見てきたので、このページではページ遷移を作る方法、そして画像を使う方法を見ていこうと思います。

ページ遷移

いままでいじってきた、src/routes/+page.svelteは、https://(プロジェクトのドメイン)/というページに対応しています。では、https://(プロジェクトのドメイン)/exampleというページを作るにはどうすればいいでしょうか？では、早速作っていきましょう。

src/routes/exampleというディレクトリを作り、そこに+page.svelteというファイルを作成してください。中身はなんでもいいです、下に適当な例でも置いときます。

src/routes/example/+page.svelte

<h1>ここはExampleページです</h1>

これで、https://(プロジェクトのドメイン)/exampleというページができました。では、最初のページから、こちらのページにリンクを飛ばすにはどうすればいいでしょうか。SvelteKitで、ページ遷移を行うときは、普通のHTMLと同様、aタグを使用します。src/routes/+page.svelteに以下のaタグを追加してください。

<a href="/example">Exampleページに行く</a>

これでできたリンクを踏めば、先程作ったExampleページに飛ぶことができるでしょう。

また、ページの階層を深くすることもできます。src/routes/exampleにhogeというディレクトリを作り、+page.svelteというファイルをそこに作成して、中身は適当に変えてください。

src/routes/example/hoge/+page.svelte

<h1>ここはHogeページです</h1>

以下のaタグを任意のページに追加すれば、Hogeページに飛ぶことができます。(/から始まるパスは、ルートからの相対パスなので、どのページからも同じように飛ぶことができます。)

<a href="/example/hoge">Hogeページに行く</a>

画像を使用する

ページ遷移はできるようになったと思うので、次は画像を使用する方法を見ていきましょう。表示したい画像を適当に用意してください。

画像を表示させたいページの+page.svelteと同じ階層に、用意した画像を置いてください。そうしたら、その+page.svelteのスクリプトの部分に、以下のコードを追加してください。

import picture from "./(ファイル名)";

※./から始まるパスは、そのファイルからの相対パスです。

※pictureの部分は好きな名前で構いません。別の名前にするならこの後のpictureの部分を適宜変更してください。

そうしたら、+page.svelteのHTMLの部分に、imgタグを以下のように追加してください。

<img src={picture} alt="(画像の説明)"/>

画像が表示できたと思います。複数のページで共通に使う画像は、src/lib/assetsに置いて、$lib/assets/(ファイル名)からインポートするのがよいでしょう。