itLinkedInPocketCopyこんにちは。今回はLaravelのフロントエンドフレームワークであるLivewireのチュートリアルを作りました。記事の内容に沿って実際に手を動かすことで、Livewireがどのような仕組みで動いているのかを理解できるようになることが目的です。今回は、Livewireを使ってごく簡単なカウンターアプリを作っていきます。関連LivewireのインストールLaravelプロジェクト直下で以下のcomposerコマンドを実行します。livewire/livewireインストールは以上で完了です。bladeを作って表示するLivewireコンポーネントを表示させるためのページを作ります。Bladeを作る空のbladeを作ります。resources/views/index.blade.phpHTMLを適当に作ります。以下のコードを貼り付けでOKです。</body></html>ルーティングを作る/indexにアクセスしたら上記のページにアクセスするようルーティングを作ります。view('index');});次のページが表示されれば成功です。Livewireコンポーネントを作るLivewireのコンポーネントを作成します。make:livewireコマンドを実行します。今回はカウンターを作るので名前をcounterとします。counter2つのファイルがセットで作られ、それぞれに明確な役割があります。カウンターのUIを実装するファイル以下は生成されたCounter.phpのコードです。renderメソッドでcounter.blade.phpを表示するよう設定されています。のちのちカウンターの機能を実装していくことになります。}}以下がcounter.blade.phpのソースです。生成された時には<div>要素のみ存在しています。componentという文字を入力してみましょう。component</div>LiveWireコンポーネントを表示する最後に、作成したcounterコンポーネントを表示できるか確認してみましょう。はじめに作ったindex.blade.phpにcounterコンポーネントを埋め込みます。埋め込むためには@livewireStylesと@livewireScriptsというアノテーションを作り、その間にコンポーネントを記述します。コンポーネントの埋め込みは<livewire:[コンポーネント名]>と記述します。</body></html>以下のようにページが表示されれば成功です。今回は、Livewireのインストールからコンポーネントの作成までを解説しました。次回は、今回作成したカウンターコンポーネントの機能部分を実装していきます。【Laravel】特定のテストケースを実行するこんにちは。...LaravelでCookieを扱う(Cookieの発行〜Viewに表示まで)こんにちは。今回はLaravelでCookieを扱う方法を解説します。...【Laravel8】複数のキーでソートするこんにちは。...【Laravel】JetStreamをインストール〜ログインまでを試すこんにちは。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。一覧画面に検索条件、フィルターを設置するこんにちは。モデルの準備と一覧表示画面こんにちは。Filamentのインストール手順こんにちは。UncategorizedWindowsにComposer2をインストールする方法こんにちは。