LESSON 12 · 約32分
テスト・公開・小さな完成作品
動くことを確かめ、公開方式と更新方法まで仕上げます。
コードを試す前に
02〜09の静的な最小作品を基本にします。Playwrightとサーバー版は独立した発展例で、依存関係と実行先の設定が別途必要です。
各コードは独立した学習用の例で、すべてを順に一つのプロジェクトへ上書きする形式ではありません。同じレッスン内の対応ファイルは組み合わせます。依存関係・入力ファイル・実行条件は各noteに記載します。
開発環境の準備を確認する →このレッスンでわかること
- 重要な操作を本番ビルドで確かめられる
- 静的公開とサーバー公開の要件を区別できる
- 最小の制作課題を完成させられる
まず壊れたら困る経路を決める
ホームから一覧、記事へ進めること、記事URLを直接開けること、見つからないURLを区別できることを確かめます。操作UIがあるならキーボード操作、繰り返し操作、再読み込みも試します。見た目だけでなく、ページタイトル・見出し・リンク名を確認します。
ビルドとテストは役割が違う
npm run buildが成功しても、ボタンが期待通り動く保証にはなりません。Playwrightなどで実際のブラウザー経路をテストできます。通常のJavaScript関数はユニットテストで分けて検証します。astro checkを追加する場合は必要な検査用依存関係を導入し、JavaScriptで書くことと検査設定を分けて考えます。
出力に合う場所へ公開する
静的な完成版は通常distのHTML・CSS・JavaScriptを配信できる場所へ置けます。オンデマンドの版は対応adapterとサーバーランタイムが必要です。開発用devや確認用previewを、そのまま本番サービスとして使い続ける前提にしません。公開先で環境変数、404、サブパス、画像、HTTPSを確かめます。
最初の完成は小さくする
3件の記事、一覧と詳細、共通レイアウト、レスポンシブな画像、読了の一時表示を作れば、基本がつながります。公開後はMarkdownを一件変更して再ビルド・更新できることを確認します。ログイン・DB・ライブデータ・Actionsは、静的版を完成させた後に必要なものから追加しましょう。
本番出力をローカルで確認する
npm run build
npm run preview02の既定スクリプトがある静的構成です。previewで表示されたURLを使用します。SSR版はadapterの案内に沿って本番実行も確認します。
ページと島の操作を検証する
import { test, expect } from '@playwright/test';
test('島のボタンで回数が増える', async ({ page }) => {
await page.goto('/island/');
await expect(page.getByRole('heading', { name: '港の散歩' })).toBeVisible();
const button = page.getByRole('button', { name: '行きたい：0' });
await button.click();
await expect(page.getByRole('button', { name: '行きたい：1' })).toBeVisible();
});08のページが前提です。別途Playwrightを導入し、実際に起動したサイトのURLをbaseURLへ設定します。webServer設定または手動起動も必要な、テストファイルの例です。
TRY IT YOURSELF
旅のメモを完成させる
- 静的版を先に完成し、本番buildを成功させる
- リンク・直接URL・404・キーボード・細い画面を確認する
- 初期HTMLと読み込まれるJavaScriptを開発者ツールで観察する
- 公開方式と記事更新の手順を短いREADMEに残す
できたらOK：内容更新からビルド・検証・公開確認まで自分で繰り返せる
QUICK CHECK
理解を確かめよう
公式資料でもう少し詳しく
ここまで読めたら、ひとつ前進。