@props

アットプロップス（ビューとBlade）

意味コンポーネントの属性定義

@propsとは？

@propsはLaravelのBladeコンポーネントで、親コンポーネントから渡される属性（プロパティ）を定義するためのディレクティブです。コンポーネントが受け取る入力値を明示的に宣言することができます。

@propsの具体的な使い方

プロパティ定義の例

{{-- alert.blade.php --}}
<div>
    @props(['type' => 'info', 'message'])
    
    <div class="alert alert-{{ $type }}">
        {{ $message }}
    </div>
</div>

{{-- 使用例 --}}
<x-alert type="warning" message="これは警告メッセージです。" />
<x-alert message="これは情報メッセージです。" />

👇出力結果

<div class="alert alert-warning">
    これは警告メッセージです。
</div>
<div class="alert alert-info">
    これは情報メッセージです。
</div>

この例では、alertコンポーネントで@propsを使用して'type'と'message'プロパティを定義しています。'type'にはデフォルト値'info'を設定し、'message'は必須としています。使用例では、警告メッセージと情報メッセージを表示するために、このコンポーネントを異なる設定で2回使用しています。

型指定とバリデーションの例

{{-- button.blade.php --}}
<div>
    @props(['label' => 'ボタン', 'type' => 'button', 'color' => 'primary'])
    
    @php
        $colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'];
        $color = in_array($color, $colors) ? $color : 'primary';
    @endphp
    
    <button type="{{ $type }}" class="btn btn-{{ $color }}">
        {{ $label }}
    </button>
</div>

{{-- 使用例 --}}
<x-button label="送信" type="submit" color="success" />
<x-button label="キャンセル" color="danger" />

👇出力結果

<button type="submit" class="btn btn-success">
    送信
</button>
<button type="button" class="btn btn-danger">
    キャンセル
</button>

この例では、buttonコンポーネントで@propsを使用して'label'、'type'、'color'プロパティを定義しています。さらに、PHPブロック内でcolorプロパティのバリデーションを行い、無効な値が渡された場合はデフォルト値を使用するようにしています。使用例では、送信ボタンとキャンセルボタンを異なる設定で作成しています。

@propsに関するよくある質問

Q. @propsの目的は？

A. @propsディレクティブの主な目的は、コンポーネントが受け取る属性（プロパティ）を明示的に定義することです。これにより、コンポーネントの入力を明確にし、型チェックやデフォルト値の設定が可能になります。

Q. デフォルト値の設定方法は？

A. デフォルト値を設定するには、@props配列内で属性名と値のペアを使用します。例：@props(['type' => 'info']) とすると、'type'属性が指定されなかった場合に'info'がデフォルト値として使用されます。

Q. 必須属性の指定方法は？

A. 必須属性を指定するには、単に属性名を@props配列内にリストアップします。デフォルト値を設定しない属性は必須とみなされます。例：@props(['message']) とすると、'message'属性は必須になります。

@propsが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、Laravelの@propsや@break、@endempty、@yield、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。