app.use("*", basicAuth({
  username: "admin",
  password: "password"
}));

/** ハンドラー側 */
app.post("/task/create", async (c) => {
  const body = await c.req.parseBody();
  const parsedResult = TaskFormSchema.safeParse(body);
  // バリデーションエラーの場合 
  if (!parsedResult.success) {
    return c.html(<CreateTask 
      inputValue={body} // ユーザーが入力した値を画面に初期値として入力しておく
      error={parsedResult.error} // エラー内容を画面に表示
    />);
  }

  // 正常な場合
});

/** JSX側 */
 {error && (
  <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-md">
    <h3 className="text-sm font-medium text-red-800 mb-2">
      入力エラーがあります
    </h3>
    <ul className="text-sm text-red-600 space-y-1">
      {error.issues.map((err: any, index: number) => (
        <li key={index}>
          • {err.path.join(".")}: {err.message}
        </li>
      ))}
    </ul>
  </div>
)}

<form encType="multipart/form-data">
  <input type="file" accept="image/*" />
</form>

export const TaskSchema = z.object({
  image: z
    .file()
    .mime(["image/jpeg", "image/gif", "image/jpg", "image/webp", "image/png"])
    .max(10_000_000), // 10MB
});

/** ハンドラー側 */
// webの[Fileインタフェース](https://developer.mozilla.org/ja/docs/Web/API/File)を満たしている
const imageFile = parsedResult.data.image; 
const ab = await imageFile.arrayBuffer();
const buffer = Buffer.from(ab);
return c.html(<CreateTask image={{ file: imageFile, buffer }} />);

/** JSX側 */
<img
  src={`data:${image.file.type};base64,${image.buffer.toString("base64")}`}
  alt="選択された画像"
  className="w-full max-w-xs mx-auto rounded-lg shadow-md border border-gray-200"
/>

<input
  type="file"
  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
/>

// 文字列を渡す場合
app.get("/download/csv", (c) => {
  const csvStringData = generateCSV();
  return new Response(csvStringData, {
    status: 200,
    headers: {
      "Content-Type": "text/csv; charset=utf-8",
      "Content-Disposition": 'attachment; filename="data.csv"',
    },
  });
});

// s3のファイルをStreamとして渡す場合
app.get("/download/csv-from-s3", async (c) => {
  const s3Client = new S3Client({
    region: process.env.AWS_REGION || "ap-northeast-1",
  });
  const command = new GetObjectCommand({
    Bucket: "hono-survey-csv-data",
    Key: "ratings.csv",
  });
  const response = await s3Client.send(command);
  return new Response(response.Body?.transformToWebStream(), {
    status: 200,
    headers: {
      "Content-Type": "text/csv; charset=utf-8",
      "Content-Disposition": 'attachment; filename="data.csv"',
    },
  });
});

const s3Client = new S3Client({
  region: process.env.AWS_REGION || "ap-northeast-1",
});

const command = new GetObjectCommand({
  Bucket: "hono-survey-csv-data",
  Key: "ratings.csv",
});

const presignedUrl = await getSignedUrl(s3Client, command, {
  expiresIn: 3600,
});

return c.redirect(presignedUrl); // ステータスコード301でリダイレクト

<input type="hidden" name="title" value={taskData.title} />
<input
  type="hidden"
  name="description"
  value={taskData.description}
/>
<input type="hidden" name="priority" value={taskData.priority} />
<input type="hidden" name="dueDate" value={taskData.dueDate} />

// 全てのステップでは同じパス（=同じハンドラー）にsubmitしてます
app.post("/task/update/:id", async (c) => {
  const body = await c.req.parseBody();
  // ステップ1のバリデーション
  const parsedResultStep1 = TaskUpdateStep1Schema.safeParse(body);
  if (!parsedResultStep1.success) {
    // ステップ1のバリデーションエラーがある場合は、ステップ1の画面に戻す
    return c.html(
      <UpdateTask1 inputValue={body} error={parsedResultStep1.error} />
    );
  }

  // ステップ1の画面からsubmitされた場合、ステップ2のバリデーションをせずステップ2に進む
  if (parsedResultStep1.data.step === "1") {
    return c.html(<UpdateTask2 taskData={parsedResultStep1.data} />);
  }

  // ステップ2のバリデーション
  const parsedResultStep2 = TaskUpdateStep2Schema.safeParse(body);
  if (!parsedResultStep2.success) {
    // ステップ2のバリデーションエラーがある場合は、ステップ2の画面に戻す
    return c.html(
      <UpdateTask2
        taskData={parsedResultStep1.data}
        inputValue={body}
        error={parsedResultStep2.error}
      />
    );
  }

  // ...大体一緒なので省略

  console.log(
    "更新完了",
    parsedResultStep1.data,
    parsedResultStep2.data,
    parsedResultStep3.data
  );
  return c.redirect("/task/list");
});

app.use(
  "/assets/*",
  serveStatic({ root: "." })
);

{/* headタグの中 */}
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />

const fn = new cdk.aws_lambda_nodejs.NodejsFunction(this, "lambda", {
  bundling: {
    commandHooks: {
      afterBundling: (inputDir: string, outputDir: string): string[] => [
        `cp -r ${join(inputDir, "..", "assets")} ${outputDir}`,
      ],
      beforeBundling: () => [],
      beforeInstall: () => [],
    },
  },
});

// セットアップこれだけ
<script src="https://cdn.tailwindcss.com"></script>