はじめに

こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して7ヶ月目に入りました。PHPとLaravelを学習しながらポートフォリオを作成中です。
ポートフォリオ作成手順や学びを中心に記録していこうと思います。今回は、LaravelのBladeテンプレートで使用できる「?? 演算子」の仕組みと、その活用方法について解説します。

概要

Laravel Sailを使った開発環境で、Bladeテンプレートを用いてデータの表示を行いました。
その際に役立ったのが「??（null合体演算子）」です。この演算子を利用することで、データが存在しない場合の代替表示を簡単に実現できます。

?? 演算子の概要と仕組み
実際のコード例での活用
動作の詳細解説
従来のif文との比較

経緯と問題点

活動場所データが存在しない場合の対応

開発中のポートフォリオで、ユーザーが活動場所の情報を登録していない場合でも、空白のまま表示されるのではなく、代替テキスト（例:「データなし」）を表示させたいと考えました。

しかし、登録データがない場合にエラーが発生したり、適切な表示がされないことがあり、以下の方法を採用しました：

?? 演算子 を使用して、データがnullのときに代替テキストを表示。

コード例

以下のコードを使用して、活動場所を表示する機能を実現しました。

<!-- 活動場所の名前 -->
<div class="bg-gray-100 p-4 rounded-md">
    <h3 class="text-lg font-bold">活動場所の名前</h3>
    <p class="text-gray-700">{{ $mapInfo->activity_location ?? 'データなし' }}</p>
</div>

??演算子の動作と詳細

{{ $mapInfo->activity_location ?? 'データなし' }}

仕組み

mapInfo->activity_locationの値を確認
存在し、かつnullではない場合：
→ $mapInfo->activity_locationの値を表示
存在しない場合またはnullの場合：
→　データなし　を表示

動作の具体例
$mapInfo->activity_locationが「新宿区」の場合：

$mapInfo->activity_location = "新宿区";

表示結果：

新宿区

$mapInfo->activity_locationがnullの場合：

$mapInfo->activity_location = null;

表示結果：

データなし

$mapInfo自体がnullの場合

$mapInfo = null;

表示結果;

データなし

従来のif文との比較

以下のif文と同じ意味を、??演算子で簡潔に表現すると以下になる
従来の書き方

if (isset($mapInfo->activity_location) && $mapInfo->activity_location !== null) {
    echo $mapInfo->activity_location;
} else {
    echo 'データなし';
}

演算子を使った書き方

{{ $mapInfo->activity_location ?? 'データなし' }}

メリット：

コードが簡潔で読みやすくなる
ネストが深くならず、テンプレート内での記述量が減少

最終的な成果

?? 演算子を使用することで、データがnullの場合でも代替テキストを表示できるようになった
Laravel BladeテンプレートとTailwind CSSの組み合わせで、簡単に整ったUIを構築可能

まとめ

今回の記事では、LaravelのBladeテンプレートにおける「?? 演算子」の基本的な使い方とその効果について整理しました。
この演算子を活用することで、データが存在しない場合でもエラーを防ぎ、視覚的な整合性を保つことが可能です。

最後までご覧いただきありがとうございました。