はじめに
こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して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テンプレートにおける「?? 演算子」の基本的な使い方とその効果について整理しました。
この演算子を活用することで、データが存在しない場合でもエラーを防ぎ、視覚的な整合性を保つことが可能です。
最後までご覧いただきありがとうございました。