【Laravel Livewire】チュートリアル　超簡単なTodoListを作ろう！

2021年10月17日

こんにちは。今回はLivewireを使って超簡易的なTodoListを作る手順を紹介します。Livewireでアプリを作る感覚をなんとなく掴んでいただけたらいいなと思い作りました。作成にかかる時間は３０−４５分くらいだと思います。気軽に取り組んでみてください。

アプリの全体像

まずはじめにアプリの完成イメージを共有します。大きく３つの部分に分けて機能を作っていきます。

アプリの完成イメージ

①はTodoの登録部分です。テキストボックスにTodoを入力し登録ボタンで登録します。

②は①で登録したTodoをリスト表示します。それぞれのTodo横には完了ボタンがあり、クリックすることでTodoを完了状態にします。

③は完了済のTodoを表示します。初期状態では完了済のTodoは非表示としておきます。また、誤って完了してしまったTodoを再度未完了にするために、取り戻し機能を付けました。

以上が今回作るTodo登録アプリの全体像です。

アプリを作る

ここから先は実際にアプリを作る手順を解説します。

todoを保存するテーブル作成

マイグレーションでtodoを保存するテーブルを作成します。名前はtodosとします。

$ php artisan make:migration create_todos_table
Created Migration: 2021_10_07_111645_create_todos_table

項目はシンプルに以下の２つです。

  • todo …todoの内容
  • done …todoが完了したかどうか
    public function up()
    {
        Schema::create('todos', function (Blueprint $table) {
            $table->id();
			      $table->string('todo');
			      $table->boolean('done');
            $table->timestamps();
        });
    }

マイグレーションを実行してテーブルを作成します。

$ php artisan migrate
Migrating: 2021_10_07_111645_create_todos_table
Migrated:  2021_10_07_111645_create_todos_table (45.27ms)

TodoのEloquentモデルを作成

今回、データベースへの入出力にはEloquentモデルを使用します。artisan make:modelコマンドでTodoモデルを作成します。

$ php artisan make:model Todo
Model created successfully.

Livewireコンポーネントを作成

artisan make:livewireでTodoListのコンポーネントを作成します。CLASSとVIEWがセットで作成されます。

$ php artisan make:livewire TodoList
 COMPONENT CREATED  🤙

CLASS: app/Http/Livewire/TodoList.php
VIEW:  resources/views/livewire/todo-list.blade.php

まずはVIEWを作っていきます。

<div>
	<h2>Todo List</h2>
   <!-- ①Todo登録部分-->
    <input type="text" wire:model="todo">
    <button wire:click="addTodo">登録</button>

    <!-- ② 未完了Todoの表示部分-->
    <h2>未完了</h2>
    <ul>
        @foreach($undoneTodos as $todo)
        <li>
            <button wire:click="updateTodo({{ $todo->id }} , true)">完了</button>
            {{ $todo->todo }}
        </li>
        @endforeach
    </ul>

    <!-- ③完了済のTodo表示部分 -->
    @if($isShowDoneTodos)
        <button wire:click="showDoneTodos(false)">完了したTodoを隠す</button>
        <h2>完了</h2>
        <ul>
            @foreach($doneTodos as $todo)
            <li>
                <button wire:click="updateTodo({{ $todo->id }}, false)">取り戻し</button>
                {{ $todo->todo }}
            </li>
            @endforeach
        </ul>
    @else
        <button wire:click="showDoneTodos(true)">完了したTodoを表示する</button>
    @endif
</div>

次にCLASSの処理を作ります。CLASSはVIEWのバックエンド部分に当たりますので、基本VIEWから参照される存在です。ですので、VIEWのどの部分から呼び出されるかを主に解説しております。解説はコードにコメントとして記述しました。

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Todo;

class TodoList extends Component
{

    public $todo; // ①のテキストボックスとバインドするプロパティ
    public $undoneTodos; // ②の未完了Todoとバインドするプロパティ
    public $doneTodos; // ③の完了済リストのプロパティ
    public $isShowDoneTodos = false; //③で完了済Todoの表示非表示を制御するフラグ。デフォルトは非表示。

    public function render()
    {
        return view('livewire.todo-list');
    }

    // 画面表示時の処理
    public function mount()
    {
        $this->getTodos();
    }

   // 未完了、完了済のTodoを取得
    public function getTodos()
    {
        $this->undoneTodos = Todo::where('done', false)->get();
        $this->doneTodos = Todo::where('done', true)->get();
    }

   // Todoを登録する。①の登録ボタンクリック時にコールする
    public function addTodo()
    {
        // todoを登録
        $todo = new Todo();
        $todo->todo = $this->todo;
        $todo->done = false;
        $todo->save();

        // 入力欄をクリア
        $this->todo = null;

        // データを再取得
        $this->getTodos();
    }

   // Todoの状態を更新する。②の完了ボタン、③の取り戻しボタンクリック時にコールする
    public function updateTodo($id, $isFinished)
    {
        // Todoを更新
        $todo = Todo::find($id);
        $todo->done = $isFinished;
        $todo->save();

        // データを再取得
        $this->getTodos();
    }

    // 完了済のTodoの表示非表示を切り替え
    public function showDoneTodos($isShow)
    {
        $this->isShowDoneTodos = $isShow;
    }
}

まとめ

いかがでしょうか。Livewireでアプリケーションを作る感覚が何となくわかっていただけたでしょうか。MVVMのフレームワークに慣れているかたであれば、同じような感覚で開発できるので入りやすいのではないかと思います。

Laravel

Posted by kobainmac