2017.10.17
Livvon#21【スタック】
LarvelのためのTipsコーナーと化していますが、今日はいつの間にか追加されていたスタックという機能について見てみたいと思います。
これ、最初見た時はよくわかんなくて、サブビューとかセクションとかと何が違うんだろう？？？って思ったんですが、どうやらこれ、HTMLが退避できるって解釈で良さそうですね。
そんなに使うことはないかなぁと思ってたんですが、細かいパーツの差し込みとかにはかなり有用っぽいので使ってみようと思います。
場面としては「新規登録」と「プロフィール更新」のフォームの共通化です。
新規登録画面とプロフィール画面って結構似てて、フォームのほぼ全てが共通化できるんですよね。
ただ、新規登録画面にしかないパーツがあったり、後に続く処理が若干異なってたりで完全に共通化できないから自然と画面が別れてたんですが、スタックを使えば共通化できそうな気がしてきたのでやってみようと思うのです。
まぁ実装方法は簡単です。
@push('required')
<span class="red">(必須)</span>
@endpush
@push('if_register_required')
@if(!Auth::check())
@stack('required')
@endif
@endpush
@push('id')
@php $column="name"; @endphp
<div class="flex profile_row div-{{$column}}">
<div class="profile_column">ID @stack('if_register_required')<\div>
<div class="flex1">
<div>
<input type="text" class="flex1 form-control" name="{{$column}}" value="{{(isset($user))?$user->user->$column:'' }}">
</div>
<div class="attention">(半角英数字15文字以内 記号は_-のみ許可)<\div>
<div class="help-block none"><\div>
</div>
</div>
@endpush
@push('nickname')
@php $column="nickname"; @endphp
<div class="flex profile_row div-{{$column}}">
<div class="profile_column">ニックネーム</div>
<div class="flex1">
<div>
<input type="text" class="flex1 form-control" name="{{$column}}" value="{{(isset($user))?$user->user->$column:'' }}">
</div>
<div class="attention">(15文字以内)<\div>
<div class="help-block none"><\div>
</div>
</div>
@endpush
......
こんな感じで退避させると、整理しやすくていいですね。
使い方も単純です。
<div class="table width100">
<form id="user_profile" method="POST" class="width100" action="{{ route('change_profile_ajax') }}">
{{ csrf_field() }}
@stack('id')
@stack('nickname')
@stack('name')
@stack('email')
@stack('password')
@stack('password_confirmation')
@stack('tel')
@stack('sex')
@stack('age')
@stack('profile')
<br>
<div style="text-align:center">
<button type="submit" class="square_btn_profile">
変更を保存する
</button>
</div>
<div id="user_profile_message" style="margin-top:1em;height:5em;text-align: center;"></div>
</form>
</div>
こんな感じに入力すると･･････
こんな画面になります。正確には、タブの中身ですね。
こうすることで何が嬉しいかって、現状これは新規登録画面で使い回してるので、新規登録画面とレイアウトを揃えられるというところに尽きますね。
今はレスポンシブデザインはそれどころじゃないということで諦めていますが、ほんとはモバイルファーストで作りたいのでそのうち対応する予定ではいるんですね。
とはいえ、たぶんやるとしたらこのフォーム部分が二列になってるのを一列にするだけなので、bootstrapのグリッドシステムなんか使ってお手軽に作っちゃうつもりではいるんですけど。
でも、これ、もーちょっと合理的にコーディングできそうな感じしますよね。
これを更に共通化する仕組みとしてスロットというものがあるので、明日はそれを紹介したいと思います。