・0 pv・5 min read
SvelteKit学習メモ ルーティング編
こんにちはー。
今回はSvelteKitで利用できるルーティングについて書きたいと思います。
ルーティングとは？
ルーティングは、どのURLにアクセスした時に、どのページを表示させるかを決める仕組みです。
このようなURLがあった時(たとえぱなのでアクセスしても特にありません)
https://noar-magic.com/
https://noar-magic.com/about
https://noar-magic.com/blog
ルーティングの仕組みがあることで、トップページ、アバウトページ、ブログページをそれぞれ振り分けてくれます。
もともとルーティングの語源は、英語のrouteから来ているようですね、
route = 道筋、経路
元々は、ネットワーク用語だったものがいつのまにかWebの世界でも応用されて、
ブラウザがアクセスするURLを見て、
どのページに進ませるかを決めることを「ルーティング」と呼ぶようになったそうな
SvelteKitのルーティングについて
SvelteKitでは、ファイルとフォルダの構造がそのままルーティングになるっぽい。
src/routes/
├── +page.svelte ← これが `/` のページ（トップページ）
├── about/
│ └── +page.svelte ← これが `/about` のページ
├── blog/
│ ├── +page.svelte ← これが `/blog` のページ（ブログ一覧とか）
│ └── [slug]/
│ └── +page.svelte ← これが `/blog/◯◯` みたいな個別記事ページ
試しに、/src/routesの+page.svelteに下記のコードを書いてみましょう。
src/routes/+page.svelte<nav>
<a href="/">ほーむ</a>
<a href="/about">あばうと</a>
<a href="/blog">ぶろぐ</a>
</nav>
# Home
<p>ここはほーむぺーじだよー</p>src/routes直下に、aboutフォルダと、+page.svelteを作ってみましょう。
src/routes/about/+page.svelte<nav>
<a href="/">ほーむ</a>
<a href="/about">あばうと</a>
<a href="/blog">ぶろぐ</a>
</nav>
# About
<p>ここはあばうとページだよー</p>この状態で、npm run devで実行するとこんな感じになります。
ブログページはまだ作ってないので、Not Foundになりますね。
ブログページを作ってみる
ブログページがNot Foundになっているので、ブログページを作ってみましょうかね。
aboutと同じように、src/routes直下に、blogフォルダ、+page.svelteを作って、下記のものを記述してみる。
src/routes/blog/+page.svelte<nav>
<a href="/">ほーむ</a>
<a href="/about">あばうと</a>
<a href="/blog">ぶろぐ</a>
</nav>
# ぶろぐだよー
<p>ここはブログ一覧ページだよー</p>
<a href="/blog/hello-world">こんにちは、世界</a>表示するとこんな感じ。
続いて、ブログ記事の個別ページを作ってみます。
src/routes/
├── +page.svelte ← これが `/` のページ（トップページ）
├── about/
│ └── +page.svelte ← これが `/about` のページ
├── blog/
│ ├── +page.svelte ← これが `/blog` のページ（ブログ一覧とか）
│ └── [slug]/
│ └── +page.svelte ← これが `/blog/◯◯` みたいな個別記事ページ
上の方で、[slug]という見慣れないフォルダが出てきました。
これは+page.ts(or +page.js)にパラメーターとして渡せるものとして記述できるようです。
+page.tsは、ページ読み込み時のデータ取得の処理を書くときに使われるそうな。
実際のコードなど見ていきまっしょい。
まず、src/routes/blogに[slug]フォルダ(こんなフォルダ名ありなんか？と思うけど、大丈夫)
[slug]フォルダ直下に、+page.svelte、+page.ts(javascriptが好きな人は+page.jsでもOK)を作って、記述していきましょう。
src/routes/blog/[slug]/+page.tsimport {error} from '@sveltejs/kit';
export function load({params})
{
if( params.slug === 'hello-world')
{
return {
title: 'こんにちは、世界',
content: '世界よこんにちは'
}
}
throw error(404, 'Not found');
}load関数を作ってやって、そこにslugのような感じで、先ほど使用した変数が渡せるようになってます。
とりあえず、今は、hello-worldだけ渡せるようにして、それ以外は、はじくようにしてます。
src/routes/blog/[slug]/+page.svelte<script>
export let data;
</script>
<nav>
<a href="/">ほーむ</a>
<a href="/about">あばうと</a>
<a href="/blog">ぶろぐ</a>
</nav>
# {data.title}
<div>{data.content}</div>dataの変数に、page.tsでreturnした変数が入っていて、それをそのまま使用できるみたいです。
実行すると、こんな感じになります。
汎用的にするには、まだ改造が必要そうですが、これでブログの記事が表示できましたね。
(ブログと言うにはまだまだお粗末かもしれないけど。)
とりあえず、今日はこんな感じです！
次回はもうちょっといい感じにブログっぽくしたいなぁ。