JavaScriptフレームワークのひとつ「Astro」は、そのシンプルさと学習コストの低さで最近注目を集めています。
Astroはアップデートが活発な反面、公式ドキュメントの整備や日本語訳が追いついていないことから、実はできるのにあまり知られていないことがいくつかあります。
AstroコンポーネントにおけるGETパラメータやPOSTデータの扱いもそのひとつです。
APIルートでこれらを扱う方法は公式ドキュメントで説明されていますが、Astroコンポーネントで扱う方法はよく探さないと知ることができません。
そこでこの記事ではAstroコンポーネントでGETパラメータやPOSTデータを扱う方法を説明します。
AstroコンポーネントでGETパラメータやPOSTデータを扱うには、前提としてサーバーサイドレンダリング（SSR）を有効にしておく必要があります。
下記の公式ドキュメントを参照してSSRの有効化を設定しておきましょう。
Astroではリクエストオブジェクトに対して Astro.request を使ってアクセスすることができます。
Astro.request はJavaScript標準の Request インターフェースです。したがって Astro.request.method を使ってHTTPメソッドを判定することができます。
GETの場合は 'GET' に、POSTの場合は 'POST' になります。
実は、Astro自体にGETパラメータを取得するための特別なメソッドが用意されているわけではありません。
HTTPメソッドと同じように、リクエストURLは Request インターフェースの url プロパティから得られるためこれを利用します。
つまり Astro.request.url がクエリパラメータを含むURLを文字列で返すので、JavaScript標準の URL インターフェースを使ってGETパラメータ（クエリパラメータ）を取り出します。
例えば search_key というパラメータを取り出すには下記のようにします。
let searchKey = '';
if (Astro.request.method === 'GET') {
const url = new URL(Astro.request.url);
const params = new URLSearchParams(url.search);
searchKey = params.get('search_key');
}
Astroコンポーネント全体は下記のようになります。
外部入力を受け付けるため try...catch を使って例外処理を行なっています。
---
let searchKey = '';
try {
if (Astro.request.method === 'GET') {
const url = new URL(Astro.request.url);
const params = new URLSearchParams(url.search);
searchKey = params.get('search_key');
}
} catch (error) {
console.error(error);
}
---
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GETパラメータのテスト</title>
</head>
<body>
<p>search_key: {searchKey}</p>
</body>
</html>次はAstroコンポーネントでPOSTデータを扱ってみましょう。
AstroでPOSTデータを扱うには、GETと同じく Astro.request から Request オブジェクトを参照する必要があります。
Request インターフェースにはフォームデータを得るための Request.formData() メソッドが用意されているため、これを Astro.request.formData() のように呼び出し FormData オブジェクトを得た後、 formData.get('username') のようにして値を取得します。
例えば username という名前のデータを得るには次のようにします。
Request.formData() メソッドはプロミスを返すため await が必要であることに注意しましょう。
let username = '';
if (Astro.request.method === 'POST') {
const formData = await Astro.request.formData();
username = formData.get('username');
}
Astroコンポーネント全体は下記のようになります。
フォームの値は文字列以外にバイナリ形式（Blob）になる可能性があるため、オブジェクトの種類をチェックする必要があります。
---
const handledErrors = ['invalid username'];
let username = '';
let errorMessage = '';
try {
if (Astro.request.method === 'POST') {
const formData = await Astro.request.formData();
username = formData.get('username');
if (typeof username !== 'string' || username === '') {
throw new Error('invalid username');
}
}
} catch (error) {
if (error instanceof Error && handledErrors.includes(error.message)) {
errorMessage = error.message;
} else {
console.error(error);
}
}
---
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>POSTデータのテスト</title>
</head>
<body>
<h1>Form</h1>
{Astro.request.method === 'POST' && errorMessage === '' ? (
<p>ユーザー名は {username} です</p>
) : (
<form action="/" method="post">
<label>
ユーザー名:
<input type="text" name="username" />
</label>
{errorMessage === 'invalid username' && (<p>ユーザー名を入力してください</p>)}
<button type="submit">Submit</button>
</form>
)}
</body>
</html>
今回紹介したAstroコンポーネントでPOSTデータを扱う方法は公式ドキュメントでは下記でレシピとして紹介されています。
以上です。
この記事ではAstroコンポーネントでGETパラメータやPOSTデータを扱う方法を説明しました。
コメントを送る
コメントはブログオーナーのみ閲覧できます