From 461744e8ac130addfd1198737c7452af60f5d714 Mon Sep 17 00:00:00 2001 From: jp-knj Date: Wed, 23 Apr 2025 21:26:18 +0900 Subject: [PATCH 1/6] add sessions guide --- src/content/docs/ja/guides/sessions.mdx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/content/docs/ja/guides/sessions.mdx diff --git a/src/content/docs/ja/guides/sessions.mdx b/src/content/docs/ja/guides/sessions.mdx new file mode 100644 index 0000000000000..7e61a05765951 --- /dev/null +++ b/src/content/docs/ja/guides/sessions.mdx @@ -0,0 +1,25 @@ +--- +title: セッション +description: オンデマンドレンダリングページのリクエスト間でデータを共有するための方法。 +i18nReady: true +--- + +import Since from '~/components/Since.astro'; +import ReadMore from '~/components/ReadMore.astro'; + +

+ +

+ +セッションは、[オンデマンドレンダリングページ](/ja/guides/on-demand-rendering/)のリクエスト間でデータを共有するための方法です。 + +[`cookies`](/ja/guides/on-demand-rendering/#cookies)とは異なり、セッションはサーバーでデータを保存するため、より大きなデータを保存することができます。また、サイズ制限やセキュリティの問題も気にする必要がありません。ユーザーのデータ、ショッピングカート、フォームの状態などを保存するのに便利です。クライアント側のJavaScriptを使わないで機能します。 + +```astro title="src/components/CartButton.astro" {3} +--- +export const prerender = false; // 'server'出力の場合は不要 +const cart = await Astro.session?.get('cart'); +--- + +🛒 {cart?.length ?? 0} 点 +``` From d4023b457b835cdb4397178a4569e1b60e831537 Mon Sep 17 00:00:00 2001 From: jp-knj Date: Wed, 23 Apr 2025 21:31:48 +0900 Subject: [PATCH 2/6] translate configuring sessions --- src/content/docs/ja/guides/sessions.mdx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/content/docs/ja/guides/sessions.mdx b/src/content/docs/ja/guides/sessions.mdx index 7e61a05765951..14ca604142bff 100644 --- a/src/content/docs/ja/guides/sessions.mdx +++ b/src/content/docs/ja/guides/sessions.mdx @@ -23,3 +23,20 @@ const cart = await Astro.session?.get('cart'); 🛒 {cart?.length ?? 0} 点 ``` + +## セッションの設定 + +セッションデータを保存するにはストレージドライバーが必要です。[Node](/ja/guides/integrations-guide/node/#sessions)・[Cloudflare](/ja/guides/integrations-guide/cloudflare/#sessions)・[Netlify](/ja/guides/integrations-guide/netlify/#sessions) の各アダプターはデフォルトドライバーを自動的に設定します。しかし、その他のアダプターでは [ドライバーを手動で指定](/ja/reference/configuration-reference/#sessiondriver) する必要があります。 + +```js title="astro.config.mjs" ins={4} + { + adapter: vercel(), + session: { + driver: "redis", + }, + } +``` + + + ストレージドライバーの設定方法やその他の設定項目の詳細については、[session設定オプション](/ja/reference/configuration-reference/#session-options)を参照してください。 + From be50053f99393e794be8e584a6b762e1d4bc355e Mon Sep 17 00:00:00 2001 From: jp-knj Date: Wed, 23 Apr 2025 21:43:58 +0900 Subject: [PATCH 3/6] translate interacting with session data --- src/content/docs/ja/guides/sessions.mdx | 80 +++++++++++++++++++++++++ 1 file changed, 80 insertions(+) diff --git a/src/content/docs/ja/guides/sessions.mdx b/src/content/docs/ja/guides/sessions.mdx index 14ca604142bff..6fa403bfe2aac 100644 --- a/src/content/docs/ja/guides/sessions.mdx +++ b/src/content/docs/ja/guides/sessions.mdx @@ -40,3 +40,83 @@ const cart = await Astro.session?.get('cart'); ストレージドライバーの設定方法やその他の設定項目の詳細については、[session設定オプション](/ja/reference/configuration-reference/#session-options)を参照してください。 + +## セッションデータを操作する + +[`session` オブジェクト](/ja/reference/api-reference/#session) を使うと、保存されているユーザー状態（例：ショッピングカートへの商品の追加）やセッションID（例：ログアウト時にセッションID Cookieを削除）を操作できます。このオブジェクトはAstroのコンポーネントおよびページでは`Astro.session`として、API エンドポイント・ミドルウェア・アクションでは`context.session`として利用できます。 + +セッションは初回利用時に自動生成され、[`session.regenerate()`](/ja/reference/api-reference/#regenerate) でいつでも再生成でき、[`session.destroy()`](/ja/reference/api-reference/#destroy) で破棄できます。 + +ほとんどの場合は、[`session.get()`](/ja/reference/api-reference/#get) と [`session.set()`](/ja/reference/api-reference/#set) の2つだけで十分です。 + + + 詳しくは [Sessions APIリファレンス](/ja/reference/api-reference/#session)を参照してください。 + + +### Astro コンポーネントとページ + +`.astro` コンポーネントやページでは、グローバル `Astro` オブジェクト経由でセッションにアクセスできます。たとえば、ショッピングカート内の商品数を表示する例です。 + +```astro title="src/components/CartButton.astro" "Astro.session" +--- +export const prerender = false; // 'server'出力の場合は不要 +const cart = await Astro.session?.get('cart'); +--- + +🛒 {cart?.length ?? 0} 点 +``` + +### API エンドポイント + +APIエンドポイントでは、セッションは`context`オブジェクト上で利用できます。たとえば、ショッピングカートに商品を追加する例です。 + +```ts title="src/pages/api/addToCart.ts" "context.session" +export async function POST(context: APIContext) { + const cart = await context.session?.get('cart') || []; + const data = await context.request.json<{ item: string }>(); + if (!data?.item) { + return new Response('Item is required', { status: 400 }); + } + cart.push(data.item); + await context.session?.set('cart', cart); + return Response.json(cart); +} +``` + +### アクション + +アクション内でも、`context`オブジェクト上でセッションにアクセスできます。たとえば、ショッピングカートに商品を追加する例です。 + +```ts title="src/actions/addToCart.ts" "context.session" +import { defineAction } from 'astro:actions'; +import { z } from 'astro:schema'; + +export const server = { + addToCart: defineAction({ + input: z.object({ productId: z.string() }), + handler: async (input, context) => { + const cart = await context.session?.get('cart'); + cart.push(input.productId); + await context.session?.set('cart', cart); + return cart; + }, + }), +}; +``` + +### ミドルウェア + +:::注意点 +エッジミドルウェアでは、現在セッションはサポートされていません。 +::: + +ミドルウェア内では、`context`オブジェクト上でセッションにアクセスできます。たとえば、セッションに最終訪問した時刻を保存する例です。 + +```ts title="src/middleware.ts" "context.session" +import { defineMiddleware } from 'astro:middleware'; + +export const onRequest = defineMiddleware(async (context, next) => { + context.session?.set('lastVisit', new Date()); + return next(); +}); +``` \ No newline at end of file From ee6687a2db271b683b899626fd8840ef33a6a03f Mon Sep 17 00:00:00 2001 From: jp-knj Date: Wed, 23 Apr 2025 21:51:54 +0900 Subject: [PATCH 4/6] translate session data types --- src/content/docs/ja/guides/sessions.mdx | 39 ++++++++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/src/content/docs/ja/guides/sessions.mdx b/src/content/docs/ja/guides/sessions.mdx index 6fa403bfe2aac..b6289c68e4db6 100644 --- a/src/content/docs/ja/guides/sessions.mdx +++ b/src/content/docs/ja/guides/sessions.mdx @@ -119,4 +119,41 @@ export const onRequest = defineMiddleware(async (context, next) => { context.session?.set('lastVisit', new Date()); return next(); }); -``` \ No newline at end of file +``` + +## セッションデータの型 + +デフォルトではセッションデータに型はなく、任意のキーに好きなデータを保存できます。値のシリアライズ／デシリアライズには、コンテンツコレクションやアクションでも使われている [devalue](https://github.com/Rich-Harris/devalue) が使用されます。そのため、文字列・数値・`Date`・`Map`・`Set`・`URL`・配列・プレーンオブジェクトなど、同じ型がサポートされています。 + +必要に応じて、`src/env.d.ts` ファイルを作成し、`App.SessionData` 型を宣言することでセッションデータに TypeScript の型を付けることもできます。 + +```ts title="src/env.d.ts" +declare namespace App { + interface SessionData { + user: { + id: string; + name: string; + }; + cart: string[]; + } +} +``` + +これにより、エディター上で型チェックと補完を受けながらセッションデータにアクセスできます。 + +```ts title="src/components/CartButton.astro" +--- +const cart = await Astro.session?.get('cart'); +// const cart: string[] | undefined + +const something = await Astro.session?.get('something'); +// const something: any + +Astro.session?.set('user', { id: 1, name: 'Houston' }); +// Error: Argument of type '{ id: number; name: string }' is not assignable to parameter of type '{ id: string; name: string; }'. +--- +``` + +:::注意点 +これは型チェック専用であり、実行時のセッション動作には影響しません。ユーザーのセッションに既にデータが保存されている状態で型を変更すると、実行時エラーが発生する可能性があるため注意してください。 +::: \ No newline at end of file From c0face5d39a11696765fd1b9e46019e050ed40e9 Mon Sep 17 00:00:00 2001 From: jp-knj Date: Wed, 23 Apr 2025 22:08:28 +0900 Subject: [PATCH 5/6] trim spaces --- src/content/docs/ja/guides/sessions.mdx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/docs/ja/guides/sessions.mdx b/src/content/docs/ja/guides/sessions.mdx index b6289c68e4db6..fbb5326e287b4 100644 --- a/src/content/docs/ja/guides/sessions.mdx +++ b/src/content/docs/ja/guides/sessions.mdx @@ -26,7 +26,7 @@ const cart = await Astro.session?.get('cart'); ## セッションの設定 -セッションデータを保存するにはストレージドライバーが必要です。[Node](/ja/guides/integrations-guide/node/#sessions)・[Cloudflare](/ja/guides/integrations-guide/cloudflare/#sessions)・[Netlify](/ja/guides/integrations-guide/netlify/#sessions) の各アダプターはデフォルトドライバーを自動的に設定します。しかし、その他のアダプターでは [ドライバーを手動で指定](/ja/reference/configuration-reference/#sessiondriver) する必要があります。 +セッションデータを保存するにはストレージドライバーが必要です。[Node](/ja/guides/integrations-guide/node/#sessions)・[Cloudflare](/ja/guides/integrations-guide/cloudflare/#sessions)・[Netlify](/ja/guides/integrations-guide/netlify/#sessions) の各アダプターはデフォルトドライバーを自動的に設定します。しかし、その他のアダプターでは [ドライバーを手動で指定](/ja/reference/configuration-reference/#sessiondriver)する必要があります。 ```js title="astro.config.mjs" ins={4} { @@ -43,19 +43,19 @@ const cart = await Astro.session?.get('cart'); ## セッションデータを操作する -[`session` オブジェクト](/ja/reference/api-reference/#session) を使うと、保存されているユーザー状態（例：ショッピングカートへの商品の追加）やセッションID（例：ログアウト時にセッションID Cookieを削除）を操作できます。このオブジェクトはAstroのコンポーネントおよびページでは`Astro.session`として、API エンドポイント・ミドルウェア・アクションでは`context.session`として利用できます。 +[`session`オブジェクト](/ja/reference/api-reference/#session) を使うと、保存されているユーザー状態（例：ショッピングカートへの商品の追加）やセッションID（例：ログアウト時にセッションID Cookieを削除）を操作できます。このオブジェクトはAstroのコンポーネントおよびページでは`Astro.session`として、APIエンドポイント・ミドルウェア・アクションでは`context.session`として利用できます。 -セッションは初回利用時に自動生成され、[`session.regenerate()`](/ja/reference/api-reference/#regenerate) でいつでも再生成でき、[`session.destroy()`](/ja/reference/api-reference/#destroy) で破棄できます。 +セッションは初回利用時に自動生成され、[`session.regenerate()`](/ja/reference/api-reference/#regenerate)でいつでも再生成でき、[`session.destroy()`](/ja/reference/api-reference/#destroy)で破棄できます。 -ほとんどの場合は、[`session.get()`](/ja/reference/api-reference/#get) と [`session.set()`](/ja/reference/api-reference/#set) の2つだけで十分です。 +ほとんどの場合は、[`session.get()`](/ja/reference/api-reference/#get)と[`session.set()`](/ja/reference/api-reference/#set)の2つだけで十分です。 詳しくは [Sessions APIリファレンス](/ja/reference/api-reference/#session)を参照してください。 -### Astro コンポーネントとページ +### Astroコンポーネントとページ -`.astro` コンポーネントやページでは、グローバル `Astro` オブジェクト経由でセッションにアクセスできます。たとえば、ショッピングカート内の商品数を表示する例です。 +`.astro`コンポーネントやページでは、グローバル`Astro`オブジェクト経由でセッションにアクセスできます。たとえば、ショッピングカート内の商品数を表示する例です。 ```astro title="src/components/CartButton.astro" "Astro.session" --- @@ -66,7 +66,7 @@ const cart = await Astro.session?.get('cart'); 🛒 {cart?.length ?? 0} 点 ``` -### API エンドポイント +### APIエンドポイント APIエンドポイントでは、セッションは`context`オブジェクト上で利用できます。たとえば、ショッピングカートに商品を追加する例です。 @@ -123,9 +123,9 @@ export const onRequest = defineMiddleware(async (context, next) => { ## セッションデータの型 -デフォルトではセッションデータに型はなく、任意のキーに好きなデータを保存できます。値のシリアライズ／デシリアライズには、コンテンツコレクションやアクションでも使われている [devalue](https://github.com/Rich-Harris/devalue) が使用されます。そのため、文字列・数値・`Date`・`Map`・`Set`・`URL`・配列・プレーンオブジェクトなど、同じ型がサポートされています。 +デフォルトではセッションデータに型はなく、任意のキーに好きなデータを保存できます。値のシリアライズやデシリアライズには、コンテンツコレクションやアクションでも使われている [devalue](https://github.com/Rich-Harris/devalue) が使用されます。そのため、文字列・数値・`Date`・`Map`・`Set`・`URL`・配列・プレーンオブジェクトなど、同じ型がサポートされています。 -必要に応じて、`src/env.d.ts` ファイルを作成し、`App.SessionData` 型を宣言することでセッションデータに TypeScript の型を付けることもできます。 +必要に応じて、`src/env.d.ts`ファイルを作成し、`App.SessionData`型を宣言することでセッションデータにTypeScriptの型を付けることもできます。 ```ts title="src/env.d.ts" declare namespace App { From fd19f407b08e8bb61c320cb3f0e8cdc289f6de2b Mon Sep 17 00:00:00 2001 From: jp-knj Date: Wed, 23 Apr 2025 22:17:25 +0900 Subject: [PATCH 6/6] fix those text to show as section --- src/content/docs/ja/guides/sessions.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/ja/guides/sessions.mdx b/src/content/docs/ja/guides/sessions.mdx index fbb5326e287b4..6bd77eed3f851 100644 --- a/src/content/docs/ja/guides/sessions.mdx +++ b/src/content/docs/ja/guides/sessions.mdx @@ -106,7 +106,7 @@ export const server = { ### ミドルウェア -:::注意点 +:::caution エッジミドルウェアでは、現在セッションはサポートされていません。 ::: @@ -154,6 +154,6 @@ Astro.session?.set('user', { id: 1, name: 'Houston' }); --- ``` -:::注意点 +:::caution これは型チェック専用であり、実行時のセッション動作には影響しません。ユーザーのセッションに既にデータが保存されている状態で型を変更すると、実行時エラーが発生する可能性があるため注意してください。 ::: \ No newline at end of file