Laravel 8においてログイン機能を実装する。(Laravel UI)

こんにちは!トビログ管理人のとびうおです。今回はLaravel 8にてLaravel UIを使用してログイン機能を実装する方法を解説します。

ログイン機能を作るのにLaravel UIを使用する理由としては初心者にわかりやすいこと、ログインページのカスタマイズがしやすいことが挙げられます。本稿ではcomposerでエラーが出てしまった時の対処方法も扱っています。

laravel uiをインストールする

Windowsならコマンドプロンプト、Macならターミナルに

composer require laravel/ui

を打ち、実行します。

Laravel 8においてログイン機能を実装する。(laravel ui)

もし上記のようなエラーなどがでてしまったら次のコマンドを打ってみてください。

COMPOSER_MEMORY_LIMIT=-1 composer require laravel/ui

ログイン機能を実装させる

次に以下のコードをコマンドプロンプト若しくはターミナルで実行しましょう。

php artisan ui bootstrap --auth

そうすると

Laravel 8においてログイン機能を実装する。(laravel ui)

このように言われるので

npm install && npm run dev

を実行してください。

確認してみよう!

web.phpを見に行くと

Laravel 8においてログイン機能を実装する。(laravel ui)

これが追加されていることがわかります。ホーム画面を見てみると

Log inとRegisterが追加されています!

しかし、Register画面はこうなってしまっています…。

Laravel 8においてログイン機能を実装する。(laravel ui)

コマンドを見に行くと

Laravel 8においてログイン機能を実装する。(laravel ui)

と言われています。なので試しに

npm run watch

をしてみます。すると、

Laravel 8においてログイン機能を実装する。(laravel ui)

表示されました!

Laravelのnpm run devとnpm run watchの違い
こんにちは!トビログ管理人のとびうおです。本日はLaravel 8(Laravel)のnpm run devと npm run watchの違いについて書いていこうと思います。そもそもnpm run 〇〇がどのような意味なのか分からない方...

しかしこれでRegisterをしてみると

Laravel 8においてログイン機能を実装する。(laravel ui)

このような表示になります。

Register画面を編集してみる

Register画面を編集してみましょう。

resources/views/auth/register.blade.php

の中にRegister画面のbladeファイルがあります。

Laravel 8においてログイン機能を実装する。(laravel ui)

このようにしてみると、

Laravel 8においてログイン機能を実装する。(laravel ui)

このように表示されます。(ここからはみなさんのお好きなように編集してみてください!)

ちなみにログアウトボタンは以下のところの三角形をクリックすると出てきます。

最後に

いかがでしたか?Laravel 8ではJetStreamがログイン機能などにおいては推薦されていますが、Laravel UIを使う方がカスタマイズ等が簡単にできるので自分はよく使っています。

今後もLaravelの記事やプログラミングの記事を書いてきますのでよろしくお願いします!

とびうお
ブログ管理人です!本人が書く記事は少なめ。。ごめんなさい))。

コメント

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