LaravelにはJetstreamという標準の認証機能があります。
これをインストールするとログイン機能やアカウント作成の処理が自動で追加されます。
今回はこれをインストールします。
さらに非同期通信を可能にするLaravelのライブラリがあるのですが、これも合わせてインストールしてみます。
ここで使用せている環境は次の通りです。
- Windows
- Xampp
- Laravelのプロジェクト名は「laravel-test」
以下のページで「http://laravel-test/」でアクセスできるようになっている前提となります。
Jetstream
Jetstreamは本家サイトに以下のように説明があります。（Chromeで翻訳してます）
Laravel Jetstreamは、Laravel用に美しく設計されたアプリケーションスターターキットであり、次のLaravelアプリケーションの完璧な出発点を提供します。Jetstreamは、アプリケーションのログイン、登録、電子メール検証、2要素認証、セッション管理、Laravel Sanctumを介したAPI 、およびオプションのチーム管理機能の実装を提供します。
https://jetstream.laravel.com/2.x/introduction.html
基本的なログイン機能周りを実装してくれる感じですね。
Livewire
LivewireはJavascriptの記述なしで非同期通信の機能を実装できるLaravel Jetstreamのライブラリです。
通常であればVue.jsなどを使用して非同期通信を実装するかと思うのですが、LivewireはPHPのみで非同期通信処理を実現できます。
LaravelのBradeというテンプレートを使用した形で非同期通信を実装します。
Vue.jsを全く知らないPHP開発者でも非同期通信を実装可能です。
ちなみにLivewireのほかにInertiaというVue.jsの使用を前提としたライブラリがあります。
Jetstream Livewireのインストール方法
それではインストールしていきましょう。
ここではWindowsを使用していますのでPowerShellを使用しています。
まずはLaravelをインストールしたフォルダに移動し、Conposerを使用してJetstreamをインストールします。
cd C:\xampp\htdocs\laravel-test\
composer require laravel/jetstreamずらずらっとインストールが始まって少し待つとインストールが完了します。
続いてLivewireをインストールします。
php artisan jetstream:install livewireインストールはすぐに終わります。
さらに続いてデータベース周りを登録する必要があります。
XAMPPコントロールパネルを開いてApache、Mysqlを起動します。
MySQLにログインします。
mysql -u root -pMySQLにログインしたらデータベースを作成します。
デフォルトはプロジェクト名と同じ名前のデータベースを見るようになっていますのでこの名前で作成します。
（テーブル名についてはプロジェクト名のハイフンはアンダーバーに変換して作成する必要があります）
create database laravel_test;
作成されました！
MySQLから出ましょう。
exit続いてJetstreamを使用できるようにテーブル作成などを行います。
npm install
npm run dev
php artisan migrate
これでインストールできました！
インストールできたか確認
インストールしたら動作を確認してみましょう。
起動したらブラウザのURL欄に「laravel-test」と入力しましょう。
表示されたら右上部分を見るとログイン関連の機能が追加されていますね。
ログインするにはユーザー登録する必要があるので右上の「Register」を押します。
ユーザー登録画面が出るので諸々を入力して「REGISTER」ボタンを押します。
ユーザーが登録されたらそのままログインできました。
右上にも登録したユーザー名が表示されていますね。
右上のユーザー名からアカウントメニューが表示できます。
初めは「Profile」「Log Out」の2つだけですがちゃんと動きます。
このアカウントメニューの「Profile」を押してみましょう。
ユーザー情報を変更できる画面が表示されました。
試しに「SAVE」ボタンを押してみると非同期で保存されているのがわかります。
表示されているページが切り替わらずにボタン横に「Saved.」の文字が数秒表示されますね。
このSAVEボタン部分の機能がLivewireで実装されている非同期処理になっています。
これでいったんJetstream Livewireのインストールが完了です。
お疲れ様でした。