【Laravel Livewire】チュートリアル　UIコンポーネントの作成 1/2

こんにちは。今回はLaravelのフロントエンドフレームワークであるLivewireのチュートリアルを作りました。記事の内容に沿って実際に手を動かすことで、Livewireがどのような仕組みで動いているのかを理解できるようになることが目的です。

今回は、Livewireを使ってごく簡単なカウンターアプリを作っていきます。

Livewireのインストール

Laravelプロジェクト直下で以下のcomposerコマンドを実行します。

composer require livewire/livewire

インストールは以上で完了です。

bladeを作って表示する

Livewireコンポーネントを表示させるためのページを作ります。

Bladeを作る

空のbladeを作ります。

$ touch resources/views/index.blade.php

HTMLを適当に作ります。以下のコードを貼り付けでOKです。

<html>
    <head>
		    <title>live wire component</title>
    </head>
	  <body>
		    <h1>カウンターコンポーネントのサンプル</h1>
	  </body>
</html>

ルーティングを作る

/indexにアクセスしたら上記のページにアクセスするようルーティングを作ります。

Route::get('/index', function () {
    return view('index');
});

次のページが表示されれば成功です。

Livewireコンポーネントを作る

Livewireのコンポーネントを作成します。artisan make:livewireコマンドを実行します。今回はカウンターを作るので名前をcounterとします。

$ php artisan make:livewire counter

２つのファイルがセットで作られ、それぞれに明確な役割があります。

  • app/Http/Livewire/Counter.php サーバーサイドでカウンターの機能を実装するファイル
  • resources/views/livewire/counter.blade.php カウンターのUIを実装するファイル

以下は生成されたCounter.phpのコードです。renderメソッドでcounter.blade.phpを表示するよう設定されています。のちのちカウンターの機能を実装していくことになります。

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public function render()
    {
        return view('livewire.counter');
    }
}

以下がcounter.blade.phpのソースです。生成された時には<div>要素のみ存在しています。counter componentという文字を入力してみましょう。

<div>
    counter component
</div>

LiveWireコンポーネントを表示する

最後に、作成したcounterコンポーネントを表示できるか確認してみましょう。はじめに作ったindex.blade.phpにcounterコンポーネントを埋め込みます。埋め込むためには@livewireStylesと@livewireScriptsというアノテーションを作り、その間にコンポーネントを記述します。コンポーネントの埋め込みは<livewire:[コンポーネント名]>と記述します。

<html>
    <head>
		    <title>live wire component</title>
		    @livewireStyles
    </head>
    <body>
		    <h1>カウンターコンポーネントのサンプル</h1>
		
		    <livewire:counter>

		    @livewireScripts
    </body>
</html>

以下のようにページが表示されれば成功です。

今回は、Livewireのインストールからコンポーネントの作成までを解説しました。次回は、今回作成したカウンターコンポーネントの機能部分を実装していきます。

Laravel

Posted by kobainmac