【Laravel / Blade】条件に応じて画像を切り替える方法（スタンプカードの実装例）

学習の備忘録です。タスク管理アプリを作っています。

今回は、以前考えたやり方を基に、トップ画面でのスタンプカードアイコンの表示機能を実装します。

考え方については以下の記事にまとめていますので、こちらもご確認いただければ幸いです。

やってることは、

1. コントローラーでデータベースのデータを取得
2. blade側（フロント）にデータを渡す
3. blade側（フロント）で表示切替できるようにコードを書く

これだけです。

本記事は個人の学習記録です。内容の正確性を保証するものではありませんので、あらかじめご了承ください。

画像を用意する

まずはスタンプの表示切替のために、スタンプ0個からスタンプ10個までのアイコンを11枚用意し、それをプロジェクトの画像フォルダに置きます。
※選択外の「stampcard」は仮置き用アイコンなので無視でいいです。

コントローラーでデータを取得、blade側（フロント）に送る

獲得スタンプ数を判別するのは、user_statsテーブルの中にあるperfect_stamp_countカラムです。

編集チケットについて改修した時に、ログインしているユーザーのステータス（user_statsテーブルのデータ）を取得できるようにしていたので、それを利用します。

TaskController.phpに以下のコードを追加します。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
  /**省略*/
use App\Models\StampHistory;　//追加
use Illuminate\Support\Facades\DB;

class TaskController extends Controller
{

        /**省略*/

        //編集チケット数取得
        $userStats = $user->userStat;
        $editTickets = $userStats ? $userStats->edit_tickets : 0;　//これを利用する

        /**省略*/

        //獲得スタンプ数を表示
        //$editTickets = $userStats ? $userStats->edit_tickets : 0;をコピペして
        //変数名と取得カラムを変更しただけです。
        $stampCount = $userStats ? $userStats->perfect_stamp_count : 0;

        /**省略*/
                      
        return view('tasks.index', compact('tasks', 'displayDate', 'prevDate', 'nextDate', 'rate', 'editTickets', 'stampCount')); //'stampCount'を追加
    }

blade側（フロント）のコードを編集

blade側（フロント）では、コントローラーから送られてきた$stampCountを受け取って、その時のカウントに合わせてスタンプカードアイコンが切り替わるようにします。

ヘッダーにあるスタンプカードアイコンなので、編集するのはapp.blade.phpのheaderタグの部分。

背景に色が付いている部分が変更点です。

        <header class="main-header">
            <div class="header-flex">
                <div class="menu-area">
                    <button id="menu-open" class="menu-btn"><img class="hamburger-icon" src="{{ asset('images/hamburgermenu_icon.png') }}" alt="ハンバーガーメニュー"></button>
    
                    <div id="menu-modal" class="menu-modal-overlay">
                        @include('layouts._menu_modal')
                    </div>
                </div>
                <a href="{{ route('tasks.index') }}"><div class="app-title">Mission Days</div></a>
                <div class="stamp-area">
                    <a class="stamp-btn" href="#"><img class="stamp-icon" src="{{ asset('images/stampcard.png') }}" alt="スタンプカードアイコン"></a>
                </div>
            </div>
        </header>

        <header class="main-header">
            <div class="header-flex">
                <div class="menu-area">
                    <button id="menu-open" class="menu-btn"><img class="hamburger-icon" src="{{ asset('images/hamburgermenu_icon.png') }}" alt="ハンバーガーメニュー"></button>
    
                    <div id="menu-modal" class="menu-modal-overlay">
                        @include('layouts._menu_modal')
                    </div>
                </div>
                <a href="{{ route('tasks.index') }}"><div class="app-title">Mission Days</div></a>
                <div class="stamp-area">
                    <img class="stamp-icon" src="{{ asset('images/stamp_' . $stampCount . '.png') }}" alt="スタンプカード">
                </div>
            </div>
        </header>

「a href」はリンクさせて別画面表示させるわけでもない（JavaScriptを使ってモーダル表示させる）ので削除しました。

src=”{{ asset(‘images/stamp_’ . $stampCount . ‘.png’) }}”で、コントローラー側から送られてきたデータを組み込むことで、「現在の獲得スタンプ数」に応じてアイコン画像を切り替えることができます。

狙い通りに切り替わるか確認

テストとして、データベースの方でperfect_stamp_countの数値を変更してみます。

変更した数値の通りのアイコンになれば成功です！

まとめ

トップ画面でのアイコン切り替えについては以上です。

今回の一番のポイントは、blade側（フロント）のコード
<img class=”stamp-icon” src=”{{ asset(‘images/stamp_’ . $stampCount . ‘.png’) }}” alt=”スタンプカード”>
ですね。

こうすることでif分岐などさせずに、スタンプの獲得数に応じて切り替え可能です。