
今回は以下の動画のようなCRUD機能を作成していくよ。
学生を追加、編集、削除できる掲示板です!
この記事の前に、https://aburasoba.org/laravel8-livewire-1/ をやってみてね
まずは、参考にさせていただいた動画の紹介。
以下、英語ですが非常に分かりやすかったです。
こちらを参考にさせていただきながら、実装しました。
上記の動画ではBootstrap4を使用して、modal等を実装しています。
が、私の方ではLivewireのBlade componentsを活用して実装するように変更してあります。
また、Livewireのドキュメントはこちら。
一つ目のタコ?が揺れていますね、可愛い。
ドキュメントのトップにはこんなことが書いてありました。
Building modern web apps is hard. Tools like Vue and React are extremely powerful, but the complexity they add to a full-stack developer’s workflow is insane.
It doesn’t have to be this way…
Ok, I’m listening…
Say hello to Livewire.
Hi Livewire!
https://laravel-livewire.com/
所謂モダンなアプリを作成するのに、VueとかReactとかすごいけど大変だよね!Livewire使ってみようよ!
的な内容ですね。
migration, model を作成
まずは学生のテーブルを作成していきましょう。
bash % php artisan make:model Student -m
上記のコマンドでマイグレーションファイルとモデルが作成できるので、中身を書き換えていきましょう。
database/migrations/2020_11_10_create_students_table.php public function up() { Schema::create('students', function (Blueprint $table) { $table->id(); $table->string('firstname'); $table->string('lastname'); $table->string('email'); $table->string('phone'); $table->timestamps(); }); }
app/Models/Student.php protected $table = "students"; protected $fillable = [ 'firstname', 'lastname', 'email', 'phone', ];
それではマイグレーション をしてテーブルを作成しましょう。
% php artisan migrate
生徒テーブルにダミーデータをいれる
これはやらなくても良いのですが、ダミーデータを入れていきましょう。
ダミーデータ、シーダーって何?という方は下記の記事もご覧ください。
https://aburasoba.org/laravel-factory-seeder/
Factoryを作成しましょう。
% php artisan make:factory StudentFactory
次に、作成したFactoryでFakerを使用する記述を追加します。
database/factories/StudentFactory.php public function definition() { return [ 'firstname' => $this->faker->firstname, 'lastname' => $this->faker->lastname, 'email' => $this->faker->email, 'phone' => $this->faker->phoneNumber, ]; }
次に、コマンドで上記のFactoryが作動するようにDatabaseSeeder.phpにコードを追加していきます。
database/seeders/DatabaseSeeder.php public function run() { // \App\Models\User::factory(10)->create(); \App\Models\Student::factory(10)->create(); }
今回は使用しない、Userに関してはコメントアウトしてあります。

このまま、php artisan db:seed をしても良いのだけど、
外国の方のダミーデータができてしまうので設定を少し変更しましょう。
config/app.php 'faker_locale' => 'ja_JP', //変更
上記でOKです!ではダミーデータを作成していきましょう。
% php artisan db:seed
PHPMYADMIN等で実際にダミーデータの挿入が完了したかを確認しましょう。
その際に、英語名になっていたら
php artisan config:cache
でキャッシュを削除した後、もう一度seedをしてみましょう
Livewireを使う(一覧画面作成)
では、タコ(Livewire)を使っていきます!
ここからは、いつものLaravelでのCRUD作成とは異なってきますので頑張っていきましょう!
% php artisan make:livewire Students
このコマンドを打つことで、Livewire componentが作成されます。
なんぞや…..と思いますが実際に触って慣れていきましょう。
app/http/livewire/Students.php <?php namespace App\Http\Livewire; use App\Models\Student; //追加 use Livewire\Component; class Students extends Component { public function render() { $students = Student::orderBy('id', 'DESC')->get(); //追加 return view('livewire.students.index', compact('students')); //変更 } }
Studentを全員取得し、viewに渡してあげましょう。
view は livewire ディレクトリの中に students ディレクトリを作成して整理しておきます。
必須ではないですが、ファイル数が増えると livewire ディレクトリ内がごちゃごちゃになるので未然に防止しましょう。
まずは生徒一覧画面を作成していきます。
bootstrap ではなく tailwindCSS を活用していきます。
https://tailwindcss.com/
resources/views/livewire/students/index.blade.php <div> <div class="rounded overflow-hidden shadow-lg"> <div class="px-6 py-4"> <div class="font-bold text-xl mb-2">生徒一覧</div> </div> <div class="px-6 pt-4 pb-2"> <table class="table-auto w-full"> <thead> <tr> <th class="px-4 py-2">名前</th> <th class="px-4 py-2">苗字</th> <th class="px-4 py-2">メールアドレス</th> <th class="px-4 py-2">電話番号</th> <th></th> <th></th> </tr> </thead> <tbody> @foreach ($students as $student) <tr> <td class="border px-4 py-2">{{ $student->firstname }}</td> <td class="border px-4 py-2">{{ $student->lastname }}</td> <td class="border px-4 py-2">{{ $student->email }}</td> <td class="border px-4 py-2">{{ $student->phone }}</td> <td class="border px-4 py-2">編集</td> <td class="border px-4 py-2">削除</td> </tr> @endforeach </tbody> </table> </div> </div> </div>
blade の書き方に関しては以前の version と変わりはありませんね。
変数が Controller ではなく livewire から渡されている点が変更点になります。
一覧画面を表示する
既存の Dashbord に表示をしていきましょう。
dashboard.blade.php を編集していきます。
resources/views/dashboard.blade.php <x-app-layout> <x-slot name="header"> <h2 class="font-semibold text-xl text-gray-800 leading-tight"> {{ __('Dashboard') }} </h2> </x-slot> <div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg"> <livewire:students /> </div> </div> </div> </x-app-layout>
<livewire:students /> と記入することで、 students の Livewire component を呼ぶことができるようです。
app/http/livewire/Students.php の renderメソッドが呼び出されます。
それでは、Dashbordを確認してみましょう!
% php artisan serve

ダミーで入力した生徒一覧が表示されましたね!
では次回は新規投稿機能を作成していきましょう!
こんにちは!
Laravel8初心者で勉強させてもらっています。
php artisan make livewireのコマンド打った際に、
Command “make” is not defined.
Did you mean one of these?
livewire:make
などのエラーが出たため、おそらくコードは、
php artisan make:livewire Students
が正しいコードかと!
コメントありがとうございます!
修正箇所のご指摘ありがとうございます!こちら修正させていただきます!
[…] Laravel8で掲示板を作成する②(一覧画面を作成) […]
失礼します。
いまコードを書いていたのですが、
前提として、変数を$studentではなく$snsuserとしておりました。
その設定で開発していたら、
index.blade.phpのほうで
「ErrorException Undefined variable $students」というエラーが発生してしまいました。
エラー表示画面のコード
@foreach ($students as $student)
{{ $snsuser->firstname }}
{{ $snsuser->lastname }}
{{ $snsuser->email }}
{{ $snsuser->phone }}
編集
削除
@endforeach
私が書いたコード
@foreach ($snsusers as $snsuser)
{{ $snsuser->firstname }}
{{ $snsuser->lastname }}
{{ $snsuser->email }}
{{ $snsuser->phone }}
編集
削除
@endforeach
本当にごめんなさい!!
自分のローカル開発環境の中でも
$studentのままになってしまってました!