動的ルートパラメーター：[id]
フォルダー名の角括弧記法を使用して、URLセグメントをパラメーターとして取得します。
「動的ルートパラメーター：[id]」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
角括弧のフォルダー名
動的セグメントには、フォルダー名に角括弧を使用します。
src/routes/blog/[slug]/+page.svelte -> /blog/:slugパラメーターへのアクセス
ページ内では、$app/stores の $page ストアを使用します。
import { page } from "$app/stores";
<p>Slug: {$page.params.slug}</p>load関数からのアクセス
+page.js のload内では、params.slug を直接使用します。
export function load({ params }) { return { slug: params.slug }; }複数のパラメーター
複数セグメントのパスには、複数の角括弧を使用します。
src/routes/[lang]/[slug]/+page.svelteパラメーターの検証
パラメーターが無効な場合は、loadから404を返します。
if (!isValid(params.slug)) error(404, "Not found");マッチャー
パラメーターに正規表現を適用するには、src/params マッチャーを追加します。
src/routes/blog/[slug=alpha]/+page.svelteマッチャーの定義
関数をエクスポートする src/params/alpha.js を作成します。
export function match(value) { return /^[a-z]+$/.test(value); }SlugによるSEO
Slugは通常、URLで安全に使えるIDです。タイトルからSlugを生成すると、分かりやすいURLになります。
静的ルートと動的ルートの組み合わせ
動的フォルダーと静的フォルダーを並べて配置できます。競合した場合は静的ルートが優先されます。
型安全性
SvelteKitはルートごとにparamsの型を生成し、load関数の引数から利用できるようにします。
動的ルートの事前レンダリング
事前レンダリングする値を列挙するには、+page.js の entries を使用します。
確認問題
動的セグメントはどのように宣言しますか？
まとめ
動的セグメントには [param] フォルダーを使用します。load内の params または $page.params からアクセスできます。
よくある質問
「動的ルートパラメーター：[id]」レッスンは無料ですか？
はい。「動的ルートパラメーター：[id]」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「動的ルートパラメーター：[id]」で何を学びますか？
フォルダー名の角括弧記法を使用して、URLセグメントをパラメーターとして取得します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「動的ルートパラメーター：[id]」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。