パラメータフォルダー

パラメータフォルダーを使用すると、URLパスの一部を値として受け取り、ページ内で利用できます。

クエリ文字列（GET変数）でも値を渡すことはできますが、パラメータフォルダーを使用すると、商品や記事の情報をURLパスに含めた、意味が分かりやすく共有しやすいアドレスを作成できます。

たとえば、次のような商品ページがあるとします。

/products/red-chair
/products/coffee-table
/products/desk-lamp

商品ごとに個別のページファイルを作成せず、次のようなパラメータフォルダーを使用できます。

/public/products/[product-id]/+page.essepage

角括弧で囲まれた [product-id] フォルダーは、URLの該当する位置に入力された値を product-id という名前で渡します。

/products/red-chair

上のアドレスでは、product-id の値は次のようになります。

red-chair

ページファイルでは、次の構文で値を使用できます。

{{$ folder_param : product-id $}}

パラメータフォルダーは、URLパスの一部を値として受け取り、同じページファイルで異なるコンテンツを表示する場合に使用します。

パラメータフォルダーを作成する

商品詳細ページを例に、パラメータフォルダーを作成してみましょう。

必要なファイル構成は次のとおりです。

/public
└── products
    └── [product-id]
        └── +page.essepage

フォルダーとページファイルを作成する

/public フォルダー内に products フォルダーを作成します。
products フォルダー内に [product-id] フォルダーを作成します。
[product-id] フォルダー内に +page.essepage ファイルを作成します。
ページファイルを開いてコードを記述します。
ファイルを保存して初回公開します。

パラメータフォルダーの名前は、必ず角括弧で囲む必要があります。

[product-id]

角括弧内の product-id は、ページファイルで値を取得するときに使用する名前です。

URLの値を表示する

/public/products/[product-id]/+page.essepage ファイルに次のコードを記述してください。

<main>
    <h1>Product</h1>

    <p>
        Product ID:
        <strong>{{$ folder_param : product-id $}}</strong>
    </p>
</main>

ページを公開したあと、次のアドレスにアクセスします。

/products/red-chair

ページには次の内容が表示されます。

Product ID: red-chair

アドレスを次のように変更すると:

/products/coffee-table

同じページファイルに次の内容が表示されます。

Product ID: coffee-table

URLごとに個別のページファイルを作成するのではなく、1つの +page.essepage ファイルで複数のパラメータ値を処理します。

クエリ文字列との違い

URLを通じて値を渡すときは、クエリ文字列（GET変数）を使用することもできます。

/aaa/bbb?ccc=ddd

上のアドレスでは、/aaa/bbb がページパス、ccc が変数名、ddd が値です。

JavaScriptでは次のように値を取得できます。

<script>
    const query = new URLSearchParams(window.location.search);

    const value = query.get("ccc");
</script>

パラメータフォルダーとクエリ文字列は、それぞれ次のような場合に使用できます。

区分	パラメータフォルダー	クエリ文字列
URLの例	`/products/red-chair`	`/products?id=red-chair`
適した用途	特定の商品や記事の表示	検索、並べ替え、絞り込み
値の取得	`{{$ folder_param : product-id $}}`	`URLSearchParams`

2つの方法を一緒に使用することもできます。

/products/red-chair?color=blue

上のアドレスでは、red-chair がパラメータフォルダーの値で、color=blue がクエリ文字列です。

JavaScriptで使用する

パラメータ値はJavaScriptでも使用できます。

<h1 id="productTitle">Product</h1>

<script>
    const productId = "{{$ folder_param : product-id $}}";

    document.getElementById("productTitle").textContent = `Product: ${productId}`;
</script>

次のアドレスにアクセスすると:

/products/red-chair

ページには次の見出しが表示されます。

Product: red-chair

パラメータ値は文字列として渡されます。数値として計算する必要がある場合は、JavaScriptで数値に変換してください。

<script>
    const pageNumber = Number("{{$ folder_param : page-number $}}");
</script>

複数階層のURLパスを受け取る

1つのパラメータフォルダーで、複数階層のURLパスを受け取ることもできます。

次のようなファイル構成を作成します。

/public/products/[product-info]/+page.essepage

このページでは、次のようなアドレスを処理できます。

/products/furniture/red-chair

この場合、product-info にはパラメータフォルダーに該当する残りのパスが渡されます。

furniture/red-chair

ページファイルでは、次の構文で値全体を確認できます。

<p>{{$ folder_param : product-info $}}</p>

ページには次の内容が表示されます。

furniture/red-chair

JavaScriptの split("/") を使用すると、パスを個別の値に分割できます。

<h1 id="productTitle"></h1>

<p>
    Category:
    <span id="category"></span>
</p>

<p>
    Product ID:
    <span id="productId"></span>
</p>

<script>
    const productInfo = "{{$ folder_param : product-info $}}";

    const [category, productId] = productInfo.split("/");

    document.getElementById("productTitle").textContent = productId;
    document.getElementById("category").textContent = category;
    document.getElementById("productId").textContent = productId;
</script>

次のアドレスにアクセスすると:

/products/furniture/red-chair

各変数には次の値が格納されます。

変数	値
`productInfo`	`furniture/red-chair`
`category`	`furniture`
`productId`	`red-chair`

同じページファイルで、次のようなアドレスも処理できます。

/products/books/learning-html
/products/electronics/wireless-keyboard
/products/furniture/coffee-table

複数階層の動的パスを処理するときは、複数のパラメータフォルダーを入れ子にせず、1つのパラメータフォルダーで残りのパス全体を受け取ります。

次のような構成にはせず:

/public/products/[category]/[product-id]/+page.essepage

1つのパラメータフォルダーを使用します。

/public/products/[product-info]/+page.essepage

そのあと、split("/") を使用して必要な値に分割します。

パラメータページにリンクする

通常のページと同じ方法で、パラメータ値を含むアドレスにリンクできます。

<a href="/products/red-chair">Red Chair</a>
<a href="/products/coffee-table">Coffee Table</a>
<a href="/products/desk-lamp">Desk Lamp</a>

すべてのリンクは次のページファイルに接続されます。

/public/products/[product-id]/+page.essepage

リンクのURLに応じて、product-id の値だけが変わります。

複数階層のパスを使用するリンクも同じ方法で記述します。

<a href="/products/furniture/red-chair">
    Red Chair
</a>

<a href="/products/books/learning-html">
    Learning HTML
</a>

上のリンクは次のページファイルに接続されます。

/public/products/[product-info]/+page.essepage

サイト内のページを接続する基本的な方法については、ナビゲーションとリンクを参照してください。

ページが開かない場合

パラメータページが開かない場合や値が表示されない場合は、次の項目を確認してください。

パラメータフォルダーが /public 内にあるか
フォルダー名を [product-id] のように角括弧で囲んでいるか
パラメータフォルダー内に +page.essepage ファイルがあるか
ページファイルを公開しているか
URLに角括弧ではなく実際の値を入力しているか
フォルダーのパラメータ名とコードで使用する名前が一致しているか
構文が {{$ folder_param : product-id $}} の形式になっているか

次のステップ

パラメータフォルダーの使用方法を理解したら、次のドキュメントに進んでください。

存在しないアドレスに表示するページを作成する: カスタム404ページ
JavaScriptで外部データを取得する: 外部APIを使用する
ブラウザから直接呼び出せないAPIに接続する: Proxy API
ファイルとフォルダー名の詳しい規則を確認する: ファイル命名規則
メニューとリンクでページを接続する: ナビゲーションとリンク

言語

目次

Title