常連

## 🖊️テーマ
teratailに持っている意見はありますか？
具体的なものでも、こんなものがあればという願望でも、幅広い意見を募集します！📮

## 👤運営メンバーの回答
運営メンバーのFさんは「ユーザーへのメンション機能」とのことでした。
質問にコメントしてくれた人へ追加で聞きたいことがあった際や、個人で仲良くしたい人に使えたら良いと思った、というそうです。
質問内容でしか関わらないからこそ、個人につながる何かがあればまた違う使い方ができるかもしれませんね！

## 〜teratailトーク!とは？〜
詳細を公式ブログで公開しています。ぜひお読みください。
[「teratailトーク!」スタート🎉　気軽に意見交換しよう！](https://blog.teratail.com/entry/teratail-talk)

teratailに追加して欲しい機能はありますか？

### 実現したいこと
下記関数のテストをvitestで書きたいです
```ts
import { randomUUID } from "node:crypto";

export const getRandomUUID = (): string => {
  return randomUUID();
}
```

### 発生している問題・分からないこと
上記関数に対して、下記のようなテストコードを書きました。
```ts
import { beforeEach, describe, expect, it, vi } from "vitest";
import { getRandomUUID } from "./utils";

vi.mock("node:crypto", () => {
  return {
    randomUUID: vi.fn(() => "mock-uuid"),
  };
});

describe("getRandomUUID", () => {
  it("mock-uuid", () => {
    const uuid = getRandomUUID();

    expect(uuid).toBe("mock-uuid");
  });
});
```

すると、下記のようなエラーが出ました
```bash
Error: [vitest] No "default" export is defined on the "node:crypto" mock. Did you forget to return it from "vi.mock"?
If you need to partially mock a module, you can use "importOriginal" helper inside:
```
よって、mock部分を下記のように書き換えました
```ts
vi.mock("node:crypto", async () => {
  const actual = await vi.importActual<typeof import("node:crypto")>("node:crypto");
  return {
    ...actual,
    randomUUID: vi.fn(() => "mock-uuid"),
  };
});
```
そうすると、次のようなエラーが出ました
```bash
AssertionError: expected '5cedbc46-aaaf-40f3-9943-fbaedb9da36b' to be 'mock-uuid' // Object.is equality

- Expected
+ Received

- mock-uuid
+ 5cedbc46-aaaf-40f3-9943-fbaedb9da36b
```
これはrandomUUIDを適切にモックできていないことから起きるAssertionErrorだと思うのですが解決方法がわからず、教えていただきたいです


### エラーメッセージ
```error
上述の通り、エラーは解消されませんでした
```

### 該当のソースコード

```TypeScript
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
特に解決方法が見つかりませんでした

### 補足
特になし

node:cryptoのテストをvitestで書くとエラーが出る

### 実現したいこと
App Routerを設定したNext.js v15にhonoのv4を組み込みたいと思っています。
具体的には、route handlersのAPIをhonoで実装するようにしたいです。
デプロイ先にEC2を予定していますが（現状はMacのローカルでnpm run devで動かしています）、コードの記述内容について不明な点があります。

### 発生している問題・分からないこと
テストで app/api/[[...route]]/route.ts　を作成し、公式サイトの書き方に倣い以下のコードを書きました。

/api/hello　などのエンドポイントにアクセスすると　"Hello Next.js!"　が表示され正しく動作しますがコード前方にある以下の箇所は

```TypeScript
import { handle } from 'hono/vercel'
export const runtime = 'edge'
```

デプロイ先がvercel以外でも必要でしょうか（このhono/vercelというのはデプロイ先のことを言っているのではなく、next.jsに組み込む場合は、この記述が必要ということであればその旨知りたいです）。

よろしくお願いいたします。



### 該当のソースコード

```TypeScript
import { Hono } from 'hono'
import { handle } from 'hono/vercel'

export const runtime = 'edge'

const app = new Hono().basePath('/api')

app.get('/hello', (c) => {
  return c.json({
    message: 'Hello Next.js!',
  })
})

export const GET = handle(app)
export const POST = handle(app)
```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
```
npm create hono@latest [プロジェクト名]
```
のコマンドで、一からhonoプロジェクトを作成し、Which template do you want to use?でnextjsを選んでも、上記のimportは設定されます。

### 補足
特になし

HonoをNext.jsに組み込む方法について知りたい

### 実現したいこと
ReactでSSEを行う際にsetIntervalではなくawait Promise.allで全ての処理を待ってからwriter.closeを行いたいのですが実装方法が分かりません。


### 発生している問題・分からないこと
[Next.js APP (ver14) SSEのサンプルコード](https://qiita.com/bonten999/items/8d55e2ec36acd1d93cfc)
[Next.jsを使ったServer Sent Events](https://www.rasukarusan.com/entry/2023/12/23/104646)
これらのサイトを参考にして、setIntervalを使用して文字を一文字ずつクライアントに渡すAPIを作成しました。このAPIを応用し、「APIから非同期処理を並列に呼び出し、返ってきた順にクライアントへ送信する」という処理を実装しようと考え、以下のコードを書きました。

しかし、このコードを実行すると、クライアント側には最初の「夜」の文字しか送信されません。原因として、await Promise.all(promises);で待機している間にwriter.write(result)が正しく動作していないのではないかと考えています。

await Promise.all(promises);を使用しつつ、他の文字も返せるように実装する方法はありますでしょうか？



### 該当のソースコード

```TypeScript
import { NextRequest, NextResponse } from 'next/server';
//https://qiita.com/bonten999/items/8d55e2ec36acd1d93cfc
//https://www.rasukarusan.com/entry/2023/12/23/104646
const sleep = (time: number) => new Promise((r) => setTimeout(r, time));//timeはミリ秒
export async function GET(req: NextRequest) {
    try {
        const stream = new TransformStream()
        // 以下のwriterにメッセージを入れるとストリーミングメッセージとなる writer.write(message)
        const writer = stream.writable.getWriter()

        const text = '夜空に広がる無数の星々の中、ひときわ明るく輝く星がありました。'

        try {
            let promises: Promise<any>[] = []; // promisesを配列として初期化
            for (let i = 0; i < text.length; i++) {
                promises.push(new Promise(async (resolve, reject) => {
                    // awaitが全ての文字で同時に実行されるがSSEを感じやすくするために時間差を作る
                    await sleep(1000 + i * 100);
                    resolve(`data: ${text[i]}\n\n`);
                    console.log(text[i]);
                }).then((result) => {
                    writer.write(result); // 一文字ずつ書き込み
                }))
            }
            await Promise.all(promises);
            console.log("close");
            writer.write('data: [DONE]\n\n');
            writer.close();
        } catch (error) {
            writer.close(); // エラー発生時にもストリームを閉じる
            console.error(error);
        }
        return new NextResponse(stream.readable, {
            headers: {
                'Content-Type': 'text/event-stream',
                Connection: 'keep-alive',
                'Cache-Control': 'no-cache, no-transform',
            },
        });
    } catch (error) {
        return NextResponse.json({ error: error }, { status: 500 });
    }
}

```

```TypeScript
'use client'
import { useEffect, useState } from 'react';

export default function Home() {
    const [message, setMessage] = useState('初期値');

    useEffect(() => {
        //一度だけAPIにアクセスする
        (async () => {
            const controller = new AbortController();
            const signal = controller.signal;
            const response = await fetch(`/api/SSE`, { signal });
            const reader = response.body?.getReader()
            if (!reader) return
            let decoder = new TextDecoder()
            while (true) {
                const { done, value } = await reader.read()
                if (done) break
                if (!value) continue
                const lines = decoder.decode(value);
                const text = lines.split('data: ')[1].trim()
                setMessage(prev => prev + text)
            }
            return () => {
                //コンポーネントのアンマウント時に実行
                controller.abort();
            };
        })();
    }, []);

    return (
        <p>{message}</p>
    );
}
```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
Promise.allを使わずに非同期処理が終了するたびに最後の処理かどうか判定する方式で実装したところ全ての文字が返ってきました。この方法ではコードの可読性が下がるためPromise.allを使いたいです。
```TypeScript
import { NextRequest, NextResponse } from 'next/server';
//https://qiita.com/bonten999/items/8d55e2ec36acd1d93cfc
//https://www.rasukarusan.com/entry/2023/12/23/104646
const sleep = (time: number) => new Promise((r) => setTimeout(r, time));//timeはミリ秒
export async function GET(req: NextRequest) {
    try {
        const stream = new TransformStream()
        // 以下のwriterにメッセージを入れるとストリーミングメッセージとなる writer.write(message)
        const writer = stream.writable.getWriter()

        const text = '夜空に広がる無数の星々の中、ひときわ明るく輝く星がありました。'

        try {
            let count = 0;
            for (let i = 0; i < text.length; i++) {
                new Promise(async (resolve, reject) => {
                    // awaitが全ての文字で同時に実行されるがSSEを感じやすくするために時間差を作る
                    await sleep(1000 + i * 100);
                    resolve(`data: ${text[i]}\n\n`);
                }).then((result) => {
                    writer.write(result); // 一文字ずつ書き込み
                }).finally(async () => {
                    count++;
                    //countが文字数なら全て送信し終えたとしてcloseする
                    if (count == text.length) {
                        await sleep(1);//連続でwriter.writeは行えない?のでsleepする
                        writer.write('data: [DONE]\n\n');
                        writer.close(); // ストリームを閉じる
                    }
                })
            }
        } catch (error) {
            writer.close(); // エラー発生時にもストリームを閉じる
            console.error(error);
        }
        return new NextResponse(stream.readable, {
            headers: {
                'Content-Type': 'text/event-stream',
                Connection: 'keep-alive',
                'Cache-Control': 'no-cache, no-transform',
            },
        });
    } catch (error) {
        return NextResponse.json({ error: error }, { status: 500 });
    }
}
```

### 補足
特になし

TypeScriptでSSEを行う際にawaitしたい

### 実現したいこと
@hono/zod-openapiを使い、リクエストbodyの任意のフィールドに対して特定の数字であるかどうかをバリデーションしたい。

### 発生している問題・分からないこと
例えば、levelというフィールドの値が 1,3, 5, 9 の値のいずれかであることをチェックしたい場合、どう書いたら良いかわかりません。数字を扱うバリデーションスキーマの場合、以下のように値の範囲を指定することはできましたが範囲になっていない数字を扱い場合はどうすれば良いでしょうか？



### 該当のソースコード

```TypeScript
  level: z
    .number()
    .int()
    .min(1)
    .max(9)
    .openapi({
      type: "number",
      example: 3,
    }),
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
数値の範囲を扱うバリデーションしか解らなかった

### 補足
hono/zod-openapiのバージョン　0.19.2