Laravel SailにLaravel Breezeでユーザー登録機能をつける方法を解説

Laravel Breeze

Laravel SailにLaravel Breezeパッケージをインストールして、手軽にユーザー登録・ログイン画面を搭載する方法を解説します。

動画編もあります↓↓↓

Laravel Sailで開発環境を構築してみよう【Windows・Mac対応】後編 phpMyAmin、 VS Code設定、Laravel Breezeインストール

Laravel SailにLaravel Breezeでユーザー登録機能をつける方法を解説【Laravel Vite対応】

Laravelには認証機能(ログイン)等を手軽につけられるパッケージがいくつかあります。Breezeパッケージが一番使いやすいため、こちらを入れていきます。

Junko
Junko

他のパッケージについてご興味あれば、下記の記事にまとめてあります。

① Breezeのインストール

まずはLaravel Sailを起動します。

プロジェクトの場所で、Breezeパッケージをいれるコマンドを実行します。

次に、下記コマンドを実行します。

”Please execute the [npm install && npm run dev] commands to build your assets.”と表示されます。コマンドを実行していきましょう。

最初に sailをつけて、コマンドを実行します。

② マイグレートする

次に、マイグレートを行います。

③ ログインする

もしLaravel Sailを止めている場合は、下記コマンドで、Laravel Sailを起動します。

ブラウザに http://localhost/ を表示させます。Breezeがインストールされると、右上にlogin Registerメニューが表示されています。

loginボタンをクリックするとloginメニューが表示されます。

④ ユーザー登録をしてみましょう

ここまで出来たら、一通りの最初の設定は終わりです。

http://localhost/registerページを開き、ユーザー登録をしてみてください。

登録したユーザー情報は、phpMyAdminのusersテーブルに登録されているはずです。

⑤ このあとのエラー対策

Tailwind CSSなどを使ったスタイルを反映させるには、Laravel Viteの場合は、プロジェクトのある場所で、下記を実行しておきます。

Windows環境の場合、2022年10月現在、下記のように表示が崩れてしまいます。

対策は別の記事で解説しているので、参考にしてください。

さいごに

Laravel Sail環境に認証機能を搭載しました。

このあとは、色々なコードを入れていきましょう。Visual Studio Codeを使って開発を進めていくと便利です。Laravel SailとVS Codeとの連携方法は、下記をご覧ください。

なおLaravelの使い方をいちから学びたい場合には、【Laravelの教科書】という学習サイトをご用意しています。

Laravelの基本の仕組みを学びつつ、フォーラムサイトを作っていくという実践的な内容です。

【Laravelの教科書を通じて作成するWebアプリの画面】

Junko
Junko

どんな機能が搭載できるのか気になったら、下記の案内ページを見てみてくださいね。基礎編部分は無料です。

Laravelの教科書について詳しく知る

 

Laravel Breeze Laravel Sailで環境構築!

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

社内にWebアプリ開発経験がなくて、困ってませんか?

「自社でWebアプリ開発を始めていきたい」
という企業様のために、Laravelセミナー・プログラミング教育を実施しています。

【セミナー使用スライド】

詳細はこちらご覧ください

Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました