新規登録画面に登録済データを呼び出しセットする機能をつけてみる2
前回、どのような機能を実装するか説明しました。今回実際に開発はじめるわけですが、まず手始めとして、Bladeのコンポーネントについて学びたいと思います。
コンポーネントをまず作って、そこにロジックを足していきたいと思います。
1. コンポーネントファイルを作成する。
コンポーネント作る上でやりやすいのはArtisanを使うことです。以下のようにコマンドをタイプするとコンポーネントファイルが作成されます。
#php artisan make:component ModalList
今回、コンポーネント名は"ModalList"としました。
コンポーネントとなるBladeファイルは"views/components"の中に生成されます。
そして、同時に、コンポーネントクラスファイルが"app/View/Components"に生成されます。
コンポーネントクラスファイル経由でコンポーネントのBladeファイルを呼び出すイメージです。
2. コンポーネントのBladeファイルを編集する
今回はコンポーネントをまず理解するため、"こんにちは！"という文字を表示するのみでとどめたいと思います。
以下のようにコンポーネントのBladeファイルを編集します。
<div> <h1>こんにちは!</h1> </div>
3. メインのBladeファイルにコンポーネントを記述する
最後にコンポーネントを実装したいメインのBladeファイルにコンポーネントの記述をします。
コンポーネントは、新規登録画面に実装しますので、"mst_customer_create.blade.php"のcard-body内に以下のように記述します。
<x-modal-list />
すると、新規登録画面を開くと"こんにちは!"という文字が表示されたと思います。 コンポーネントを呼び出すには上記のようにHTMLタグのように記述し、タグ名はコンポーネント名の頭に"x-"をつけます。
Reactのコンポーネントを彷彿とさせますね。
4. まとめ
コンポーネントの大まかな仕組みがわかりましたので、次回から、具体的にロジックを組んでいきたいと思います。
