本文へ移動
Laravel Tips

レスポンス（返す中身）

ルートやコントローラーが返すレスポンスの作り方を説明します。文字・JSON・転送・ビュー・ダウンロード・ストリーミング・Cookie とヘッダーの付け方まで引けます。

レスポンスは、サーバーがブラウザへ返す「答え」のことです。表示する画面や文字のほか、成功したかどうかを表す番号（ステータスコード）や、添え書き（ヘッダー）、Cookie（ブラウザに保存される小さなデータ）も含みます。Laravel のルートやコントローラーは、どれも必ず何かを返します。いちばん簡単なのは文字を返すことで、画面・JSON・転送・ファイルなど、返せるものはいろいろあります。

レスポンスを作る#

文字と配列#

ルートやコントローラーから文字を返すと、Laravel が自動で、完全な HTTP レスポンスにしてくれます。

php
Route::get('/', function () {
    return 'Hello World';
});

配列も返せます。自動で JSON（データを文字で表す形式）のレスポンスになります。

php
Route::get('/', function () {
    return [1, 2, 3];
});

補足

Eloquent のコレクションも、ルートやコントローラーから返せます。自動で JSON になります。

レスポンスのオブジェクト#

ふつうは、文字や配列だけでなく、Illuminate\Http\Response のオブジェクト（クラスから作った実体）か、ビュー（画面の見た目を書いたファイル）を返します。

Response を返すと、HTTP のステータスコード（200 なら成功、のような番号）やヘッダーを決められます。Response は Symfony\Component\HttpFoundation\Response クラスを引き継いで（継承して）いて、レスポンスを組み立てるメソッドがたくさんあります。

php
Route::get('/home', function () {
    return response('Hello World', 200)
        ->header('Content-Type', 'text/plain');
});

Eloquent のモデルとコレクション#

Eloquent のモデル（データベースの表を PHP から扱いやすくしたクラス）やコレクションも、そのまま返せます。自動で JSON のレスポンスになり、そのモデルで隠すと決めた属性（JSON に出さない項目）は、出されません。

php
use App\Models\User;

Route::get('/user/{user}', function (User $user) {
    return $user;
});

レスポンスにヘッダーを付ける#

レスポンスを作るメソッドは、多くが、つなげて書けます。header で、ヘッダーを1つずつ足せます。

php
return response($content)
    ->header('Content-Type', $type)
    ->header('X-Header-One', 'Header Value')
    ->header('X-Header-Two', 'Header Value');

withHeaders なら、配列でまとめて足せます。

php
return response($content)
    ->withHeaders([
        'Content-Type' => $type,
        'X-Header-One' => 'Header Value',
        'X-Header-Two' => 'Header Value',
    ]);

返すレスポンスから、特定のヘッダーを外すには、withoutHeader を使います。

php
return response($content)->withoutHeader('X-Debug');

return response($content)->withoutHeader(['X-Debug', 'X-Powered-By']);

キャッシュを決めるミドルウェア#

Laravel には、cache.headers というミドルウェアがあります。これを使うと、ルートのグループに Cache-Control ヘッダー（ブラウザなどに、どれだけ内容を取っておいてよいかを伝えるヘッダー）をまとめて付けられます。指示は、Cache-Control の指示の名前をスネークケース（小文字を _ でつなぐ書き方）にして書き、セミコロン（;）で区切ります。指示に etag を入れると、レスポンスの内容から作った xxh128 のハッシュ（中身から作る、元に戻せない短い文字列）が、自動で ETag（内容が変わったかを見分ける印）になります。

php
Route::middleware('cache.headers:public;max_age=30;s_maxage=300;stale_while_revalidate=600;etag')->group(function () {
    Route::get('/privacy', function () {
        // ...
    });

    Route::get('/terms', function () {
        // ...
    });
});

返す Illuminate\Http\Response に、cookie メソッドで Cookie を付けられます。名前・値・有効な分数を渡します。

php
return response('Hello World')->cookie(
    'name', 'value', $minutes
);

cookie には、あまり使わない引数もあります。意味は、PHP の setcookie の引数とだいたい同じです。

php
return response('Hello World')->cookie(
    'name', 'value', $minutes, $path, $domain, $secure, $httpOnly
);

返すレスポンスをまだ持っていなくても、Cookie を必ず付けたいときは、Cookie ファサード（クラス名と :: で呼べる窓口）で、「順番待ちの列」に入れておけます。queue に Cookie を作る引数を渡しておくと、ブラウザへ送る前に、その Cookie がレスポンスに付けられます。

php
use Illuminate\Support\Facades\Cookie;

Cookie::queue('name', 'value', $minutes);

あとでレスポンスに付けるための、Symfony\Component\HttpFoundation\Cookie のオブジェクトは、どこからでも呼べる cookie のヘルパー関数で作れます。レスポンスに付けないかぎり、ブラウザへは送られません。

php
$cookie = cookie('name', 'value', $minutes);

return response('Hello World')->cookie($cookie);

Cookie を消すには、返すレスポンスの withoutCookie か withoutCookies で、期限切れにします。

php
return response('Hello World')->withoutCookie('name');

return response('Hello World')->withoutCookies([
    'name',
    'email',
    'preferences',
]);

返すレスポンスをまだ持っていないときは、Cookie ファサードの expire で、期限切れにできます。

php
Cookie::expire('name');

Laravel が作る Cookie は、Illuminate\Cookie\Middleware\EncryptCookies ミドルウェアのおかげで、最初からすべて暗号化され、書きかえを見破るための印（署名）が付きます。そのため、ブラウザ側では、書きかえも読み取りもできません。一部の Cookie だけ暗号化しないなら、bootstrap/app.php の encryptCookies メソッドを使います。

php
->withMiddleware(function (Middleware $middleware): void {
    $middleware->encryptCookies(except: [
        'cookie_name',
    ]);
})

補足

ふつう、Cookie の暗号化はやめてはいけません。やめると、ブラウザ側で、Cookie の中身を読まれたり、書きかえられたりするおそれがあります。

転送（リダイレクト）#

転送のレスポンスは、Illuminate\Http\RedirectResponse クラスで表します。ほかの URL へ移すのに必要なヘッダーが入っています。作る方法はいくつかありますが、いちばん簡単なのは、どこからでも呼べる redirect ヘルパー関数です。

php
Route::get('/dashboard', function () {
    return redirect('/home/dashboard');
});

入力に誤りがあったときなど、前にいた場所へ戻したいことがあります。そのときは、back ヘルパー関数を使います。この機能はセッション（同じ人のアクセスをまたいで情報を覚えておくしくみ）を使うので、back を呼ぶルートには、web ミドルウェアグループがかかっている必要があります。

php
Route::post('/user/profile', function () {
    // リクエストを検証する

    return back()->withInput();
});

名前付きルートへ転送する#

redirect を引数なしで呼ぶと、Illuminate\Routing\Redirector の実体が返ります。これに、いろいろなメソッドをつないで呼べます。たとえば、名前付きルート（名前を付けたルート）への転送は、route メソッドで作ります。

php
return redirect()->route('login');

ルートにパラメータがあるときは、2つ目の引数で渡します。

php
// URL が /profile/{id} のルートの場合

return redirect()->route('profile', ['id' => 1]);

Eloquent のモデルでパラメータを入れる#

「ID」のパラメータが、Eloquent のモデルから入るなら、モデルそのものを渡せます。ID は自動で取り出されます。

php
// URL が /profile/{id} のルートの場合

return redirect()->route('profile', [$user]);

ルートパラメータに入る値を変えたいときは、ルートの定義で列を決める（/profile/{id:slug}）か、Eloquent のモデルの getRouteKey メソッドを上書きします。

php
/**
 * Get the value of the model's route key.
 */
public function getRouteKey(): mixed
{
    return $this->slug;
}

コントローラーの動きへ転送する#

コントローラーの動き（メソッド）への転送も作れます。action メソッドに、コントローラーとメソッドの名前を渡します。

php
use App\Http\Controllers\UserController;

return redirect()->action([UserController::class, 'index']);

ルートにパラメータが要るときは、2つ目の引数で渡します。

php
return redirect()->action(
    [UserController::class, 'profile'], ['id' => 1]
);

外のドメインへ転送する#

アプリの外のドメインへ転送したいことがあります。away メソッドを使います。away は、URL のエンコード（特殊な文字の変換）やチェックを何も足さずに、そのまま転送します。

php
return redirect()->away('https://www.google.com');

セッションにメッセージを残して転送する#

新しい URL へ転送するのと、セッションへ一度だけ使うデータを残すのは、同時にやることが多いです。たとえば、操作が成功したあとに、成功のメッセージを残すときです。転送のレスポンスを作るところから、データを残すところまで、メソッドをつないで1つの文で書けます。

php
Route::post('/user/profile', function () {
    // ...

    return redirect('/dashboard')->with('status', 'Profile updated!');
});

転送されたあとに、そのメッセージをセッションから出せます。たとえば、Blade（Laravel のテンプレートの書き方）で書きます。

blade
@if (session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
    </div>
@endif

入力を残して転送する#

RedirectResponse の withInput を使うと、いまのリクエストの入力を、セッションに残してから転送できます。入力にエラーがあったときによく使います。残した入力は、次のリクエストで、フォームに入れ直すために取り出せます。

php
return back()->withInput();

そのほかのレスポンス#

response ヘルパー関数は、いろいろな種類のレスポンスを作れます。引数なしで呼ぶと、Illuminate\Contracts\Routing\ResponseFactory のコントラクト（守るべきメソッドの決まり）を実装したものが返ります。レスポンスを作る便利なメソッドが入っています。

メソッド 説明
response()->view ステータスやヘッダーを決めて、ビューを返す
response()->json JSON のレスポンスを返す
withCallback JSON を JSONP の形にする（json につなぐ）
response()->download ファイルをダウンロードさせる
response()->file 画像や PDF を、ブラウザに直接表示する
response()->stream 作りながら少しずつ送る
response()->streamJson JSON を少しずつ送る
response()->eventStream サーバー送信イベント（SSE）で送る
response()->streamDownload 文字を、ファイルに書かずにダウンロードさせる

ビューを返す#

ステータスやヘッダーを決めたうえで、ビューをレスポンスの内容にしたいときは、view メソッドを使います。

php
return response()
    ->view('hello', $data, 200)
    ->header('Content-Type', $type);

ステータスやヘッダーを決めなくてよければ、どこからでも呼べる view ヘルパー関数で足ります。

JSON を返す#

json は、Content-Type ヘッダーを application/json にして、渡した配列を、PHP の json_encode 関数で JSON にします。

php
return response()->json([
    'name' => 'Abigail',
    'state' => 'CA',
]);

JSONP（JSON を関数呼び出しの形で包んで返す古い形式）のレスポンスにしたいときは、json に withCallback をつなぎます。

php
return response()
    ->json(['name' => 'Abigail', 'state' => 'CA'])
    ->withCallback($request->input('callback'));

ファイルをダウンロードさせる#

download は、ブラウザに、指定した場所のファイルを、必ずダウンロードさせるレスポンスを作ります。2つ目の引数にファイル名を渡すと、ダウンロードする人に見えるファイル名になります。3つ目には、HTTP ヘッダーの配列を渡せます。

php
return response()->download($pathToFile);

return response()->download($pathToFile, $name, $headers);

注意

ファイルのダウンロードを受け持つ Symfony HttpFoundation は、ダウンロードするファイルの名前が ASCII（半角の英数字や記号）であることを求めます。

ファイルを表示する#

file は、画像や PDF などを、ダウンロードさせずに、ブラウザにそのまま表示します。1つ目の引数にファイルの絶対パス（いちばん上のフォルダから書いた、省略しない場所）、2つ目にヘッダーの配列を渡します。

php
return response()->file($pathToFile);

return response()->file($pathToFile, $headers);

ストリーミングのレスポンス#

データを、できた分から少しずつ送ると、メモリ（作業用の記憶の場所）を使う量を大きく減らせます。とても大きなレスポンスでも速くなります。また、送り終わる前に、受け取る側が処理を始められます。

php
Route::get('/stream', function () {
    return response()->stream(function (): void {
        foreach (['developer', 'admin'] as $string) {
            echo $string;
            ob_flush();
            flush();
            sleep(2); // 送るあいだの待ち時間のまね
        }
    }, 200, ['X-Accel-Buffering' => 'no']);
});

stream に渡すクロージャが Generator（値を1つずつ返せる関数）を返すなら、Laravel は、Generator が文字を返すたびに、出力のバッファ（送る前に一時的にためておく場所）を自動で送り出します。Nginx の出力バッファも止めます。

php
Route::post('/chat', function () {
    return response()->stream(function (): Generator {
        $stream = OpenAI::client()->chat()->createStreamed(...);

        foreach ($stream as $response) {
            yield $response->choices[0];
        }
    });
});

ストリーミングのレスポンスを受け取る#

ストリーミングのレスポンスは、Laravel の stream の npm パッケージ（JavaScript の部品）で受け取れます。Laravel のレスポンスやイベントのストリームを扱う、便利な API があります。まず、@laravel/stream-react・@laravel/stream-vue・@laravel/stream-svelte のどれかを入れます。使うフレームワーク（React・Vue・Svelte のような、画面作りの土台）に合うものを選びます。

React の場合です。

bash
npm install @laravel/stream-react

Vue の場合です。

bash
npm install @laravel/stream-vue

Svelte の場合です。

bash
npm install @laravel/stream-svelte

次に、useStream で、ストリーム（少しずつ届くデータの流れ）を受け取ります。useStream はフック（画面の部品の中で呼ぶ、決まった働きをする関数）です。ストリームの URL を渡すと、Laravel から内容が届くたびに、フックが data を、それまでの内容につなげたものに自動で更新します。

React の場合です。

tsx
import { useStream } from "@laravel/stream-react";

function App() {
    const { data, isFetching, isStreaming, send } = useStream("chat");

    const sendMessage = () => {
        send({
            message: `Current timestamp: ${Date.now()}`,
        });
    };

    return (
        <div>
            <div>{data}</div>
            {isFetching && <div>Connecting...</div>}
            {isStreaming && <div>Generating...</div>}
            <button onClick={sendMessage}>Send Message</button>
        </div>
    );
}

Vue の場合です。

vue
<script setup lang="ts">
import { useStream } from "@laravel/stream-vue";

const { data, isFetching, isStreaming, send } = useStream("chat");

const sendMessage = () => {
    send({
        message: `Current timestamp: ${Date.now()}`,
    });
};
</script>

<template>
    <div>
        <div>{{ data }}</div>
        <div v-if="isFetching">Connecting...</div>
        <div v-if="isStreaming">Generating...</div>
        <button @click="sendMessage">Send Message</button>
    </div>
</template>

Svelte の場合です。

svelte
<script>
import { useStream } from "@laravel/stream-svelte";

const stream = useStream("chat");

const sendMessage = () => {
    stream.send({
        message: `Current timestamp: ${Date.now()}`,
    });
};
</script>

<div>
    <div>{$stream.data}</div>
    {#if $stream.isFetching}
        <div>Connecting...</div>
    {/if}
    {#if $stream.isStreaming}
        <div>Generating...</div>
    {/if}
    <button onclick={sendMessage}>Send Message</button>
</div>

send でストリームにデータを送ると、いま続いているストリームのつながりは、新しいデータを送る前に取り消されます。リクエストは、すべて JSON の POST リクエストで送られます。

注意

useStream のフックは、アプリへ POST リクエストを送るので、正しい CSRF トークン（なりすましを防ぐ合言葉）が要ります。いちばん簡単なのは、アプリのレイアウト（どのページにも共通の外枠）の head に、meta タグで入れる方法です。くわしくは CSRF 対策を見てください。

useStream の2つ目の引数には、受け取り方を変えるためのオプションをまとめて渡せます。使えるオプションは次のとおりです。既定の値は、表のあとのコード例のとおりです。

オプション 説明
id ストリームを見分ける ID（決めなければ、ランダムに作られる）
initialInput 最初に送るデータ
headers リクエストに付ける、追加のヘッダー
csrfToken 使う CSRF トークン
onResponse 最初のレスポンスが成功したときに呼ばれる
onData 内容のかたまりを受け取るたびに呼ばれる
onCancel ストリームが取り消されたときに呼ばれる
onFinish ストリームが終わったときと、受け取りの途中でエラーが起きたときに呼ばれる
onError エラーが起きたときに呼ばれる

React の場合です。

tsx
import { useStream } from "@laravel/stream-react";

function App() {
    const { data } = useStream("chat", {
        id: undefined,
        initialInput: undefined,
        headers: undefined,
        csrfToken: undefined,
        onResponse: (response: Response) => void,
        onData: (data: string) => void,
        onCancel: () => void,
        onFinish: () => void,
        onError: (error: Error) => void,
    });

    return <div>{data}</div>;
}

Vue の場合です。

vue
<script setup lang="ts">
import { useStream } from "@laravel/stream-vue";

const { data } = useStream("chat", {
    id: undefined,
    initialInput: undefined,
    headers: undefined,
    csrfToken: undefined,
    onResponse: (response: Response) => void,
    onData: (data: string) => void,
    onCancel: () => void,
    onFinish: () => void,
    onError: (error: Error) => void,
});
</script>

<template>
    <div>{{ data }}</div>
</template>

Svelte の場合です。

svelte
<script>
import { useStream } from "@laravel/stream-svelte";

const stream = useStream("chat", {
    id: undefined,
    initialInput: undefined,
    headers: undefined,
    csrfToken: undefined,
    onResponse: (response) => {},
    onData: (data) => {},
    onCancel: () => {},
    onFinish: () => {},
    onError: (error) => {},
});
</script>

<div>{$stream.data}</div>

onResponse は、ストリームから最初のレスポンスが成功したあとに呼ばれ、もとの Response がコールバック（あとで呼ばれる関数）に渡されます。onData は、かたまりを受け取るたびに呼ばれ、いまのかたまりが渡されます。onFinish は、ストリームが終わったときと、取り出して読む途中でエラーが起きたときに呼ばれます。

ふつう、最初の時点では、ストリームへのリクエストは送られません。initialInput オプションで、最初に送るデータを渡せます。

React の場合です。

tsx
import { useStream } from "@laravel/stream-react";

function App() {
    const { data } = useStream("chat", {
        initialInput: {
            message: "Introduce yourself.",
        },
    });

    return <div>{data}</div>;
}

Vue の場合です。

vue
<script setup lang="ts">
import { useStream } from "@laravel/stream-vue";

const { data } = useStream("chat", {
    initialInput: {
        message: "Introduce yourself.",
    },
});
</script>

<template>
    <div>{{ data }}</div>
</template>

Svelte の場合です。

svelte
<script>
import { useStream } from "@laravel/stream-svelte";

const stream = useStream("chat", {
    initialInput: {
        message: "Introduce yourself.",
    },
});
</script>

<div>{$stream.data}</div>

ストリームを自分で取り消したいときは、フックが返す cancel を使います。

React の場合です。

tsx
import { useStream } from "@laravel/stream-react";

function App() {
    const { data, cancel } = useStream("chat");

    return (
        <div>
            <div>{data}</div>
            <button onClick={cancel}>Cancel</button>
        </div>
    );
}

Vue の場合です。

vue
<script setup lang="ts">
import { useStream } from "@laravel/stream-vue";

const { data, cancel } = useStream("chat");
</script>

<template>
    <div>
        <div>{{ data }}</div>
        <button @click="cancel">Cancel</button>
    </div>
</template>

Svelte の場合です。

svelte
<script>
import { useStream } from "@laravel/stream-svelte";

const stream = useStream("chat");
</script>

<div>
    <div>{$stream.data}</div>
    <button onclick={() => stream.cancel()}>Cancel</button>
</div>

useStream のフックを使うたびに、ストリームを見分けるためのランダムな id が作られます。この id は、リクエストのたびに、X-STREAM-ID ヘッダーに入れてサーバーへ送られます。同じストリームを、いくつかの部品から受け取るときは、自分で id を決めれば、同じストリームを読み書きできます。

React の場合です。

tsx
// App.tsx
import { useStream } from "@laravel/stream-react";

function App() {
    const { data, id } = useStream("chat");

    return (
        <div>
            <div>{data}</div>
            <StreamStatus id={id} />
        </div>
    );
}

// StreamStatus.tsx
import { useStream } from "@laravel/stream-react";

function StreamStatus({ id }) {
    const { isFetching, isStreaming } = useStream("chat", { id });

    return (
        <div>
            {isFetching && <div>Connecting...</div>}
            {isStreaming && <div>Generating...</div>}
        </div>
    );
}

Vue の場合です。

vue
<!-- App.vue -->
<script setup lang="ts">
import { useStream } from "@laravel/stream-vue";
import StreamStatus from "./StreamStatus.vue";

const { data, id } = useStream("chat");
</script>

<template>
    <div>
        <div>{{ data }}</div>
        <StreamStatus :id="id" />
    </div>
</template>

<!-- StreamStatus.vue -->
<script setup lang="ts">
import { useStream } from "@laravel/stream-vue";

const props = defineProps<{
    id: string;
}>();

const { isFetching, isStreaming } = useStream("chat", { id: props.id });
</script>

<template>
    <div>
        <div v-if="isFetching">Connecting...</div>
        <div v-if="isStreaming">Generating...</div>
    </div>
</template>

Svelte の場合です。

svelte
<!-- App.svelte -->
<script>
import { useStream } from "@laravel/stream-svelte";
import StreamStatus from "./StreamStatus.svelte";

const stream = useStream("chat");
</script>

<div>
    <div>{$stream.data}</div>
    <StreamStatus id={stream.id} />
</div>

<!-- StreamStatus.svelte -->
<script>
import { useStream } from "@laravel/stream-svelte";

let { id } = $props();

const stream = useStream("chat", { id });
</script>

<div>
    {#if $stream.isFetching}
        <div>Connecting...</div>
    {/if}
    {#if $stream.isStreaming}
        <div>Generating...</div>
    {/if}
</div>

JSON を少しずつ送る#

JSON のデータを少しずつ送りたいときは、streamJson メソッドを使います。大きなデータを、ブラウザへ順番に送り、JavaScript が簡単に読める形にしたいときに便利です。

php
use App\Models\User;

Route::get('/users.json', function () {
    return response()->streamJson([
        'users' => User::cursor(),
    ]);
});

useJsonStream のフックは、useStream のフック（上の「ストリーミングのレスポンスを受け取る」）とほぼ同じです。ちがうのは、ストリームが終わったあとに、データを JSON として読み取ろうとするところです。

React の場合です。

tsx
import { useJsonStream } from "@laravel/stream-react";

type User = {
    id: number;
    name: string;
    email: string;
};

function App() {
    const { data, send } = useJsonStream<{ users: User[] }>("users");

    const loadUsers = () => {
        send({
            query: "taylor",
        });
    };

    return (
        <div>
            <ul>
                {data?.users.map((user) => (
                    <li>
                        {user.id}: {user.name}
                    </li>
                ))}
            </ul>
            <button onClick={loadUsers}>Load Users</button>
        </div>
    );
}

Vue の場合です。

vue
<script setup lang="ts">
import { useJsonStream } from "@laravel/stream-vue";

type User = {
    id: number;
    name: string;
    email: string;
};

const { data, send } = useJsonStream<{ users: User[] }>("users");

const loadUsers = () => {
    send({
        query: "taylor",
    });
};
</script>

<template>
    <div>
        <ul>
            <li v-for="user in data?.users" :key="user.id">
                {{ user.id }}: {{ user.name }}
            </li>
        </ul>
        <button @click="loadUsers">Load Users</button>
    </div>
</template>

Svelte の場合です。

svelte
<script>
import { useJsonStream } from "@laravel/stream-svelte";

const stream = useJsonStream("users");

const loadUsers = () => {
    stream.send({
        query: "taylor",
    });
};
</script>

<div>
    <ul>
        {#if $stream.data?.users}
            {#each $stream.data.users as user (user.id)}
                <li>{user.id}: {user.name}</li>
            {/each}
        {/if}
    </ul>
    <button onclick={loadUsers}>Load Users</button>
</div>

イベントストリーム（SSE）#

eventStream は、text/event-stream の種類で、サーバー送信イベント（SSE。サーバーから、ブラウザへ向けて、順番に知らせを送るしくみ）のストリーミングのレスポンスを返します。クロージャの中で、yield（値を1つずつ返すこと）で、できた分から順に返します。

php
Route::get('/chat', function () {
    return response()->eventStream(function () {
        $stream = OpenAI::client()->chat()->createStreamed(...);

        foreach ($stream as $response) {
            yield $response->choices[0];
        }
    });
});

イベントの名前を決めたいときは、StreamedEvent クラスのオブジェクトを yield します。

php
use Illuminate\Http\StreamedEvent;

yield new StreamedEvent(
    event: 'update',
    data: $response->choices[0],
);

イベントストリームを受け取る#

イベントストリームも、Laravel の stream の npm パッケージで受け取れます。まず、@laravel/stream-react・@laravel/stream-vue・@laravel/stream-svelte のどれかを入れます。

React の場合です。

bash
npm install @laravel/stream-react

Vue の場合です。

bash
npm install @laravel/stream-vue

Svelte の場合です。

bash
npm install @laravel/stream-svelte

次に、useEventStream で、イベントストリームを受け取ります。ストリームの URL を渡すと、Laravel からメッセージが返るたびに、フックが message を、つなげた内容に自動で更新します。

React の場合です。

jsx
import { useEventStream } from "@laravel/stream-react";

function App() {
  const { message } = useEventStream("/chat");

  return <div>{message}</div>;
}

Vue の場合です。

vue
<script setup lang="ts">
import { useEventStream } from "@laravel/stream-vue";

const { message } = useEventStream("/chat");
</script>

<template>
  <div>{{ message }}</div>
</template>

Svelte の場合です。

svelte
<script>
import { useEventStream } from "@laravel/stream-svelte";

const eventStream = useEventStream("/chat");
</script>

<div>{$eventStream.message}</div>

useEventStream の2つ目の引数は、受け取り方を変えるためのオプションのオブジェクトです。公式ドキュメントが示している既定の値は次のとおりです（onMessage・onError・onComplete は、それぞれのときに呼ばれる関数で、既定では何もしません）。

オプション 既定の値
eventName "update"
endSignal "</stream>"
glue " "
replace false（Svelte の例にだけある）

React の場合です。

jsx
import { useEventStream } from "@laravel/stream-react";

function App() {
  const { message } = useEventStream("/stream", {
    eventName: "update",
    onMessage: (message) => {
      //
    },
    onError: (error) => {
      //
    },
    onComplete: () => {
      //
    },
    endSignal: "</stream>",
    glue: " ",
  });

  return <div>{message}</div>;
}

Vue の場合です。

vue
<script setup lang="ts">
import { useEventStream } from "@laravel/stream-vue";

const { message } = useEventStream("/chat", {
  eventName: "update",
  onMessage: (message) => {
    // ...
  },
  onError: (error) => {
    // ...
  },
  onComplete: () => {
    // ...
  },
  endSignal: "</stream>",
  glue: " ",
});
</script>

Svelte の場合です。

svelte
<script>
import { useEventStream } from "@laravel/stream-svelte";

const eventStream = useEventStream("/chat", {
    eventName: "update",
    onMessage: (event) => {
        //
    },
    onError: (error) => {
        //
    },
    onComplete: () => {
        //
    },
    endSignal: "</stream>",
    glue: " ",
    replace: false,
});
</script>

アプリの画面側で、EventSource というブラウザの部品を使って、自分で受け取ることもできます。eventStream は、ストリームが終わると、イベントストリームに、</stream> という更新を自動で送ります。

js
const source = new EventSource('/chat');

source.addEventListener('update', (event) => {
    if (event.data === '</stream>') {
        source.close();

        return;
    }

    console.log(event.data);
});

イベントストリームに送る最後のイベントを変えたいときは、eventStream の endStreamWith に、StreamedEvent のオブジェクトを渡します。

php
return response()->eventStream(function () {
    // ...
}, endStreamWith: new StreamedEvent(event: 'update', data: '</stream>'));

ストリーミングのダウンロード#

ある処理が作った文字を、ディスク（ファイルの保存先）に書かずに、そのままダウンロードできる形にしたいことがあります。そのときは、streamDownload を使います。引数は、コールバック（動かす関数）・ファイル名・ヘッダーの配列（省略できます）です。

php
use App\Services\GitHub;

return response()->streamDownload(function () {
    echo GitHub::api('repo')
        ->contents()
        ->readme('laravel', 'laravel')['contents'];
}, 'laravel-readme.md');

レスポンスのマクロ#

自分で作ったレスポンスを、いろいろなルートやコントローラーで使い回したいときは、Response ファサードの macro メソッドを使います。ふつうは、サービスプロバイダ（アプリの起動のときに、道具箱へ道具を登録する場所）の1つ、たとえば App\Providers\AppServiceProvider の boot メソッドで呼びます。

php
<?php

namespace App\Providers;

use Illuminate\Support\Facades\Response;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Response::macro('caps', function (string $value) {
            return Response::make(strtoupper($value));
        });
    }
}

macro の1つ目の引数は名前、2つ目はクロージャです。ResponseFactory を実装したものか、response ヘルパー関数から、マクロの名前を呼ぶと、そのクロージャが動きます。

php
return response()->caps('foo');

関連するページ#

公式ドキュメント（英語）

2026年10月5日時点の内容をもとに、日本語でまとめています。

ページの一覧