【Laravel】戻る(Back)ボタンの実装

戻るボタンとは、前のページに戻るために用意されているボタンのことです。

戻るボタンを作成する場合、いろいろな方法があるかと思いますが、今回はLaravelコンポーネントで2種類の方法で戻るボタンの作成するやり方について解説します。

ちなみにAlpinejsを使っているコードとなっています。

解説

セッションを利用した戻るボタン

まず一つ目の方法として、セッションを利用した戻るボタンです。

以下がその方法で作成したコンポーネントです。

<button x-data="{}"
    {{ $attributes->merge([
        'class' => 'c-button',
    ]) }}
    @click="location.href = '{{ url()->previous() }}'"> // ★
    戻る
</button>

★の部分に特に注目して頂きたいのですが、
user()->previous()という処理は、セッションに保存された遷移前のURLを取得処理となっており、href属性に代入しています。

このコンポーネントをクリックすると、Alpinejsの@clickディレクティブが作動して、代入された前のページのURLに飛ぶようになり、
戻るボタンとして機能するようになります。

ただし、これには1つ留意事項があります。

セッションに保存されるURLは、リダイレクト前のURLも対象です。

そのため、Form画面でバリデーションエラーが発生した場合、同一URLへのリダイレクトが起きるため、そのURLも保存されます。

これにより、戻るボタンに代入されるのもバリデーションが起きるまえのForm画面で、一見戻るボタンが正しく動作していないような現象となります。

ですので、このボタンを実装する場合、この辺りのバリデーションを考慮したURLをセッションに保存する仕組みを少し変えてやる必要があります。

Javascriptのブラウザバックを利用した戻るボタン

続いて、2つ目の方法としては、Javascriptでブラウザバックする方法です。

@clickディレクティブにhistory.back()を書くことで、クリック時にブラウザに保存されたURLでJavascriptによりブラウザバックされます。

<button x-data="{}"
    {{ $attributes->merge([
        'class' => 'c-button',
    ]) }}
    @click="history.back()"> // ★
    戻る
</button>

ちなみにセッションを利用した戻るボタンとの違いは★の部分しかありません。

この方法であれば、バリデーションが起きても前の画面に戻るようになります。

ただし、セキュリティの観点では、セッションを利用した場合の方が安全のようですので、
どちらを使うかを吟味した上でお使いください。