技術ブログプログラミングフレームワークLaravelPHPTipsフレームワークこんにちは、秦です。自社サービスや受託開発にてphpのフレームワークである「Laravel」を使用して開発を行っておりますが、その中で重宝したLaravelの開発Tipsをご紹介して参ります。今回は、Bootstrap4と組み合わせた場合のView側(bladeファイル)の効率化についてご紹介します。同じようなコードが並び冗長的になりがちです。これに対し、カスタムディレクティブとコンポーネントで部品化し、冗長性を排除して行きます。今回ご紹介する内容によって、以下のようにコードをスッキリさせることができます。'email'])@endcomponent以下より詳細を解説して行きます。本記事で使用する技術の対象バージョンは以下を前提とします。以下のような部品を作成するかと思います。Laravel上記のイメージと参考記事より、Laravel+Bootstrapでは以下のような実装を行うことになります。@endforeach</div>@endif「email」というフィールドにエラーがあった場合、エラーありの表示とエラーメッセージを表示する、という内容の実装です。ログイン画面であれば2~3個ほどの入力項目で済みますが、マスタデータや業務データについては多数の項目になることが通常ですよね。その度に、各項目毎に判定をしてclass属性にis-invalidを付与して、エラーの有無を判定して、該当するエラーメッセージを取り出して表示して...といったコードを書いて行くとなるといかがでしょう。@endforeach</div>@endif冗長的になり、コード量は増え、可読性が下がり、その結果、メンテナンス性も損なわれることとなります。大多数の項目は統一されたデザインであることが求められると思います。全ての項目の全てのエラー表示箇所を修正することはとても現実的とは思えません。コードの冗長性を排除するさて、上記の通り、冗長的になるコードから冗長性を排除するにはどのような実装を行えば良いでしょうか。一例として、「カスタムディレクティブ」と「コンポーネント」を組み合わせる方法を解説します。カスタムディレクティブとコンポーネントについては、Laravelの公式ドキュメントを参照ください。Laravelカスタムディレクティブの作成と適用まずは、カスタムディレクティブにできる部分から考えて行きます。各input要素のclass属性に着目してみてください。value="">$errorsに各name属性の値がある場合は、「is-invalid」というclassを追加する判定があります。is-invalid自体はinputへのエラー表示と、下のinvalid-feedbackを表示するためのclass属性です。将来的にBootstrapのバージョンアップを行った時、このclass属性の名称が変更されたら...エラーがある場合に、is-invalidに加えて独自のclass属性を追加したくなったら...そういった可能性を考慮して、こちらをカスタムディレクティブで共通化します。value="">まずは@invalidというカスタムディレクティブを作成する想定で、bladeファイルを書き換えます。可変になるのはname属性の値、この場合だと「email」になりますので、ディレクティブの引数としてname属性の値が渡すように設計しました。次にカスタムディレクティブの中身について実装します。標準で作成されているAppServiceProviderクラスのboot()に、以下のコードを加えます。});}$errorsの判定を行い、エラーがある場合はis-invalidを出力します。カスタムディレクティブを作成したら、以下のコマンドを実行します。このコマンドを実行しないと、AppServiceProviderへの変更が反映されませんのでご注意ください。次に、コンポーネントにできる部分について考えてみましょう。input属性の下に記述されているinvalid-feedbackの部分に着目してみてください。@endforeach</div>@endifこちらもname属性の値が変化するだけで、他のコードは共通化できそうですね。判定やループが入ったこの部分については不向きであると考えました。そこで、コンポーネントを使って置き換えてみたいと思います。新規にinvalid_feedback.blade.phpを作成します。@endforeach</div>@endif可変となるname属性の値を$nameとして変数化しました。元のbladeをこのコンポーネントに置き換えてみます。'email'])@endcomponentコンポーネント名、引数としてname属性の値、この場合は「email」を渡します。$errorsは各bladeで使用できますので、渡す必要はありません。整理されたコード最終的にこうなりました。変更の前後を比較してみましょう。'password'])@endcomponentいかがでしょう。ひと工夫できるとすれば、name属性の値を変数化することかと考えます。おわりにLaravelには、とても便利な機能が備わっています。バージョンが上がるに連れて、こういった便利な機能も増えています。冗長性を排除して、可読性・保守性の高いコードを書くための一助になれば幸いです。最後までお付き合い頂き、ありがとうございました。社内にて受託開発を担当しています。社内コーディング規約やガイドラインの策定など、生産性向上や品質向上に努めて行く中で得た、業務で使えるノウハウをご紹介します。MaterialsEN。