2017.10.18
Livvon#22【スロット】
今日はスロットについてお勉強したいと思います。
っていうか、僕のコーディングがやたら遅いのって、こーいう知らないことを学習しながら作らざるを得ないからなんだよなぁって最近思うんですよね･･････。ヴィオラなんかやってないでシステム開発を趣味にしてれば良かったなぁとか思うんですよね。楽器練習しても彼女なんてできねえしな！！！ハハッ！！！！あ、ディズニーいきたい･･････
スロットってなんぞやって感じですけど、これ要するに部分的にHTMLを差し替えるという仕組みですね。
つまり、フォームで言うと、枠組みは一緒だけどinputのタイプは変わる･･････みたいな部分で大活躍してくれます。そんな機能があるのを見つけちゃったので、使ってみることにしましょう。
実装はちょっとめんどくさくて、ビューファイルが増殖します･･････。
<div class="flex profile_row div-{{$column}}">
@component('Profile.Parts.Slots.column_title',["has_error"=>$has_error])
{{$title}}
@endcomponent
<div class="flex1">
<div class="{{($has_error)?"has-error":""}}">
{{$slot}}
</div>
@if(!empty($attention))<div class="attention">({{$attention}})</div> @endif
<div class="help-block none"></div>
</div>
</div>
まずこんなファイルを用意してます。
これ自体も実はスロットでして･･････
<div class="profile_column {{($has_error)?"red":""}}">
{{$slot}}
</div>
こんなファイルも作ってしまいましたが、正直要らなかったですね。
ただ、分かりやすいと思われるのでこれを使って説明すると、この"slot"という変数が肝なんですよね。
@componentディレクティブでビューファイルを読んでるんですけど、この中に好きなHTMLを挟むことができて、その中身が$slotとしてビューで使えるようになるんですよね。
で、これを効果的に使ったのが、更にこいつを呼び出してる部分、つまり･･････
@push('price')
@php $column="price";
$has_error = ((to_null($user->user->price)===null || $user->user->price < MIN_PRICE))?true:false;
@endphp
@component('Profile.Parts.Slots.input',["title"=>"設定価格","column"=>$column,"has_error"=>$has_error,
"attention"=>MIN_PRICE."円以上が設定可能"])
<input style="display: inline;width:150px;" type="text" class="form-control" name="{{$column}}" value="{{to_null($user->user->price) }}" > 円/人/泊
@endcomponent
@endpush
@push('sex_validate')
@php $column="sex_validate"; @endphp
@component('Profile.Parts.Slots.input',["title"=>"異性の申し込み","column"=>$column,"has_error"=>false])
<input type="radio" name="{{$column}}" value="0" @if ($user->user->sex_validate=== 0) checked @endif required> 許可
<input type="radio" name="{{$column}}" value="1" @if ($user->user->sex_validate=== 1) checked @endif> 許可しない
@endcomponent
@endpush
こんな風に、スタックと併用するとかなーーりいい感じにラクができます。
ちょっと変数を渡しすぎてごちゃごちゃしてる感もあるのですが、サブビューとか使うよりはるかに経済的に書くことができます。
中のHTMLだけ差し替えたい、っていう要望って結構あるとので、そういう時には重宝するんじゃないかなぁって思います。
今はまだやんないですが、そのうちスタックだけで終わってたやつも全部スロットに書き換えることでメンテしやすくしようかなって計画はあります･･････。
まぁ、一応サンプル画面。これを使って実装されたのがこちらになりますね。
一部の項目には最初からエラー表示をする必要があったので、論理値を渡して判定させています。この辺もコントローラーとかでやっても良かったんですけどね。同じロジック使ってる部分があるんで･･････。
まぁ考えるのがめんどくさいのでいいです。ほんとはよくないけど、思いつきで作ってるとそうなるんですよ。良くない典型ですね。
実は未だにプロフィール画面の制作で作業が止まっていて、今はこのホスト画面の完成が待たれています。
ただ、このホスト画面が完成すれば、やっと検索画面に着手できるので、頑張りたいところですね。
基本的なロジックは出来てるんですけど、Ajaxに書き直すところでバグを量産しててきっついですね。ホストの写真登録機能も、プロフィール画像のを使い回せばいいとはいえちょっとめんどくさそうですね。
まぁ、今の状況としてはそんな感じです。進まないなぁ･･････。