Laravel10でログイン画面を実装してみる

こんにちは!とびろぐ管理人のとびうおです。

今回は最近リリースされたLaravel10にてログイン画面を実装していこうと思います!

Laravel10でログイン画面を実装してみる
Laravel10でログイン画面を実装してみる

スターターキットを利用してみる

Laravel10では簡単にログイン機能を実装できるスターターキットというのが存在しています。

今回はそれを利用して、空のLaravel10のプロジェクトにログイン機能を作っていこうと思います。

筆者はsailを使って環境構築をしているので、まずsail upをしていきます。

 ./vendor/bin/sail up -d

とうって、まずsailを立ち上げます。

この時にhttp://0.0.0.0/にアクセスをしてしっかり以下の画面が見れるかどうかを確認してください。

Laravel10でログイン画面を実装してみる
Laravel10でログイン画面を実装してみる

実際にbreezeを入れてみる。

では実際にスターターキットのひとつであるbreezeを入れていきましょう。

./vendor/bin/sail composer require laravel/breeze --dev
とびうおくん
とびうおくん

ここでちゃんとsailを

使ってあげることが重要です!

以下のように、無事インストールができていることを確認しましょう

Laravel10でログイン画面を実装してみる
Laravel10でログイン画面を実装してみる

php artisan breeze:installをする

ドキュメントに書いてある通りに、php artisan breeze:installを実行していきます。

./vendor/bin/sail php artisan breeze:install
とびうおくん
とびうおくん

ここでもしっかりsailを

使用してあげましょう!

このコマンドを打つと、

Laravel10でログイン画面を実装してみる
Laravel10でログイン画面を実装してみる

と聞かれるので今回は一番簡単なbladeを選択していきます。

Laravel10でログイン画面を実装してみる
Laravel10でログイン画面を実装してみる

このように、0→yes→yesと進めてください。

そうすると無事インストールが始まります。

Laravel10でログイン画面を実装してみる
Laravel10でログイン画面を実装してみる

ブラウザを確認しにいく

その後、ブラウザを確認しにいくと無事右上にLoginとRegisterが表示されていると思います。

Laravel10でログイン画面を実装してみる
Laravel10でログイン画面を実装してみる
とびうおくん
とびうおくん

しかし、この状態で

Registerをしようとするとエラーがでてしまいます。

migrateやnpm installやdevをする

そこで、続いて以下のコマンドを実行していきます。

まず、migrateをして、データベースにテーブルを追加していきます

 ./vendor/bin/sail php artisan migrate

続いて、npmをインストールしていきます(※しなくてもいいかもですが一応しておきます)

./vendor/bin/sail npm install
Laravel10でログイン画面を実装してみる
Laravel10でログイン画面を実装してみる

そして最後にnpm run devで、css等をコンパイルします。

 ./vendor/bin/sail npm run dev
Laravel10でログイン画面を実装してみる
Laravel10でログイン画面を実装してみる

そうすると、無事regsiterからできるようになると思います。

無事ログインができる

Laravel10でログイン画面を実装してみる
Laravel10でログイン画面を実装してみる

無事、ログインができるようになりました。

とびうおくん
とびうおくん

こんなに簡単にログイン画面が作れるように

なるなんてびっくりですね。

web.phpを見てみる

どんなrouteが増えているのかというのをweb.phpを見にいくと以下のように少し増えていることが確認できますね。

Laravel10でログイン画面を実装してみる
Laravel10でログイン画面を実装してみる

ここら辺の実装がどうなっているかというのも今後記事にしていけれればなと思います!

これ以外のLaravelの記事

とびろぐではこれ以外にも多くのLaravelの記事を書いています。

ぜひ見てみてくださいね!

Laravel
「Laravel」の記事一覧です。
とびうお
ブログ管理人です!
swimaneというアプリをリリースしました!

コメント

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