Laravelでクエリパラメーターの使い方とページ遷移の方法

81 回閲覧されました

公開日 : 2024年11月15日
最終更新日 : 2024年9月27日

みなさんこんにちは、jonioです。

個人開発をしている時にクエリパラメーターを使ってページ遷移をしないといけなかったので調べましたがネットでは見つけることができませんでした。

実装できたのでメモとしてこの記事を残します。

またクエリパラメーターの使い方についてもメモを残します。

1 クエリパラメーターとは
2 ルーティング
3 コントローラー
4 view.blade.php
5 edit.blade.php
6 $request->query()と$request->input()
7 $this->request->only()

クエリパラメーターとは

下記のURLの赤枠の部分です。

これを使うとページに表示されている特定の内容を編集するのが可能になります。

例えばページに「お金」・「日にち」・「メモ」が表示されている場合にお金の編集ページ・日にちの編集ページ・メモの編集ページに入れるといった感じです。

今回はこれを実装します。

ルーティング

web.phpのコードを下記にしました。

Route::controller(PriceController::class)->group(function(){
    Route::get('/item/{id}/view', 'view')->name('price.view');

    Route::get('/item/{id}/edit', 'edit')->name('price.edit');
});

コントローラー

コードを下記にします。

public function view($id)
{
    $target = CategoryPrice::find($id);

    return view('price.view', compact('target'));
}

public function edit($id, Request $request)
{
    $target = CategoryPrice::find($id);

    $field = $request->query('field');

    return view('price.edit', compact('target', 'field'));
}

アクションがview→editの流れでページ遷移させますがeditアクションの中に「$request->query(‘field’);」があります。

これでクエリパラメーターを取得します。

view.blade.php

コードを下記にします。

<div class="container pt-6 pb-6">
    <a class="text-left" href="{{ route('price.index') }}">戻る</a>
    <h2 class="text-center">入力内容詳細</h2>
    <div class="d-flex justify-content-between width">
        <p>金額 : {{ $target->price }}</p>
        <a href="{{ route('price.edit', ['id' => $target->id, 'field' => 'price']) }}">price</a>
    </div>
    <div class="d-flex justify-content-between width">
        <p>カテゴリ : {{ $target->category->name }}</p>
        <a href="{{ route('price.edit', ['id' => $target->id, 'field' => 'category']) }}">カテゴリ</a>
    </div>
</div>

edit.blade.phpにクエリパラメーターを渡しているのは6行目です。

「route」の第三引数で指定します。

下記の書き方でも同じaタグの表示になります。

<a href="{{ route('price.edit', ['id' => $target->id]) }}?field=price">price</a>

edit.blade.php

クエリパラメーター（field）の値がpriceかcategoryかでページの表示の切り替えをします。

コードを下記にします。

<div class="container pt-6 pb-6">
    <h2 class="text-center">編集ページ</h2>
    <form method="POST" action="{{ route('price.update', ['id' => $target->id]) }}">
        @csrf
        @if ($field == 'price')
            <div class="form-group">
                <label for="price">金額</label>
                <input type="number" name="price" value="{{ old('price', $target->price) }}" class="form-control">
                @error('price') <p>{{ $message }}</p> @enderror
            </div>
        @elseif ($field == 'category')
            <div class="form-group">
                <label for="category">カテゴリ</label>
                <select name="category" class="form-control">
                    @foreach ($categories as $category)
                        <option value="{{ $category->id }}" {{ $target->category_id == $category->id ? 'selected' : '' }}>
                            {{ $category->name }}
                        </option>
                    @endforeach
                </select>
                @error('category') <p>{{ $message }}</p> @enderror
            </div>
        @endif
        <button type="submit" class="btn btn-primary">更新</button>
    </form>
</div>

クエリパラーメーターの値で表示の切り替えをしているのは5行目・11行目です。

これでクエリパラメーターを使ってページ遷移をして表示の切り替えをするのは完成です。

$request->query()と$request->input()

今回は下記を使いました。

$request->query('field');

これはURLのクエリパラメーターしか取得できません。

だからHttpメソッドの中で「GET」の場合しか使うことができません。

クエリパラメーターを取得する方法として下記もあります。

$request->input();

この場合に取得できるのは下記になります。

GETの場合のデータ
POSTの場合のデータ
JSONデータ

サンプルコードとして下記のコードがあったとします。

<form action="/store" method="POST">
    @csrf
    <input type="text" name="field" value="price">
    <button type="submit">Submit</button>
</form>

「value=”price”」を取得するコントローラーは下記の記述をします。

public function store(Request $request)
{
    $field = $request->input('field');
    
    return $field;
}

「$request->input()」を使うと何を取得するのかがはっきりしない（GETで使うのかPOSTで使うのか分からない）のでクエリパラメーターを取得する場合は「$request->query()」の方がいいと個人的に思いました。

$this->request->only()

これはHTTPメソッドのGET・POST・PUT・DELTEで使えます。

また特定のクエリパラメーターだけを取得できるので可読性が上がります。

コードは下記になります。

public function handleRequest(Request $request)
{
    $attributes = $request->only(['name', 'age', 'job']);
    
    // 'name' パラメーターを利用
    $name = $attributes['name'];

    return $name;
}

クエリパラメーターとして使う場合はPOST・GETの両方で使える為GETの場合はやはり「$this->request->query()」の方がいいと思います。

しかしリクエストパラメーターとしてPOSTで使う場合はめちゃくちゃ便利です。

テーブルに値を保存する簡単な例で見ていきます。

テンプレートに下記のコードを書いたとします。

<form action="/users" method="POST">
    @csrf
    <div>
        <label for="name">名前:</label>
        <input type="text" name="name" id="name" required>
    </div>

    <div>
        <label for="email">メールアドレス:</label>
        <input type="email" name="email" id="email" required>
    </div>

    <div>
        <label for="password">パスワード:</label>
        <input type="password" name="password" id="password" required>
    </div>

    <button type="submit">登録</button>
</form>

コントローラーのコードは下記にします。

public function store(Request $request)
{
    $data = $request->only(['name', 'email', 'password']);

    // パスワードをハッシュ化して保存
    $data['password'] = bcrypt($data['password']);

    User::create($data);
}

usersテーブルに値を保存するのは8行目だけでコードを凄く短く書けるので便利だと思います。