Laravelのslot機能を使ってボタンの文言を変えて使い回す！

こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら

はじめに

Laravelのbladeでhtmlのコーディングを行っていると、「Vueのコンポーネントの様に中身だけ変えて使い回したい！って場面が多々出てくると思います。

そんな時にLaravelに元々あったsectionとは別にslotという機能がめちゃくちゃ感覚的に使えて良かったので説明していきます。

slot機能とは

まず、プロダクトの中で使い回すパーツをコンポーネントと呼びます。
例えば、こんな感じのボタンですかね。

これをslot機能を使う事で、中の文言だけ変えて色々なところで使い回していきます。

slotの使い方

##コンポーネント作成
まずコンポーネントを作っていきます。

変えていきたい部分を {{$slot}} としておきます。

views/button.blade.php

<button class="Button -fill -blue" type="button">
    <span class="Button__inner">
        <span class="Button__text">
            {{$slot}}
        </span>
    </span>
</button>

ちなみにボタンのscssはこんな感じですでに定義しています。

views/button.scss

.Button {
    @at-root {
        & {
            display: inline-flex;
            border: 0;
            border-radius: 3px;
            background-color:#ffffff;
            color: black;
            font-size: 14px;
            text-decoration: none;
            vertical-align: middle;
      
            &:hover {
                opacity: 0.8;
            }

            &.-fill {
                background: linear-gradient(to bottom, #fefefe 0%, #f3f5f7 100%);

                &.-blue {
                    background: linear-gradient(180deg, #1E4A91 0%, #193E79 100%);
                    color: $white;
                }

                &.-red {
                    background: linear-gradient(180deg, #F85359 0%, #DC151D 100%);
                    color: $white;
                }
            }

        .Button__inner {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 32px;
            padding: 4px 15px;
            border: 1px solid $border-color;
            border-radius: 3px;
        }

        .Button__text {
            flex: 0 1 auto;
        }
    }
}

これにてボタンのコンポーネントはできました。

コンポーネントを呼び出す

先ほど作ったコンポーネントを呼び出していきます。

top.blade.php

@component('button')
    確認画面
@endcomponent

この様に('button')の部分にコンポーネント名。
@componentと@endconponentの間に{{$slot}}に入れたい文言を書きます。

ボタンを使い回す！

今後ボタンを使うときは、先ほどやった様に文言を指定して呼び出してあげるだけで簡単にできます。
top.blade.phpのみをいじる事で様々な文言のボタンを出してみましょう。

top.blade.php

<div class="Button_group">
  @component('button')
    下書きを削除
  @endcomponent
  @component('button')
    下書きの保存して一覧の戻る
  @endcomponent
  @component('button')
    確認画面
  @endcomponent
</div>

<style>
.Button_group{
display:flex;
}
</style>

こんな感じで簡単に文言違いのボタンを複製できますね。
slotを使う事で、@includeだけでは実践できなかった、ちょっとした変更ができる様になります。

【余談】自社だけでなく、定期的にカジュアル面談や面接の打席に立つと良いよ！！

技術の話とは少し逸れますが、エンジニアとして働き続けていると「この先もずっとこの会社でいいのかな？」と、ふと立ち止まる瞬間ってありませんか？

僕自身、今すぐ転職したいわけじゃなくても、「もし明日会社がなくなっても、自分一人で食っていける選択肢がある」 と確信できている状態が、一番メンタルに良い影響を与えてくれました。

実際に僕は正社員になった後もエージェントで定期的にカジュアル面談や面接をしています。
自社だけに囚われて市場価値が停滞したくないな、という理由で始めましたが、スキルの棚卸しや知識の整理のきっかけにもなるのでおすすめです。

タイミングとやりたいことが合った時は、週2〜3の副業に繋がったりもしました。

「へぇ、そんな世界もあるんだ」くらいの軽い気持ちで、読み物としてどうぞ。