未経験からエンジニア転職をするための最強ロードマップロードマップ

【Laravel10】Laravel Breezeで超簡単にログイン機能を実装する方法

目次

はじめに

LaravelにはLaravel Breezeという機能が備わっており、「ユーザー登録機能」や「ログイン機能」、「パスワードリセット機能」、「メール認証機能」、「パスワードリセット機能」などの認証機能を簡単にLaravelへ実装することができます。

Laravel Breezeを使うと簡単にアプリケーションの開発を始めることができるので、ぜひ使い方をマスターしておきましょう。

さっそく実装していきたいと思いますが、Laravelの環境構築ができていない方は、下記を参考にしてLaravelの環境構築をしてみてくださいね!

あわせて読みたい
【Windows版】Laravel sailを使って超簡単にLaravel10の開発環境を整える はじめに Laravelの開発環境を構築する方法はいくつかありますが、今回は公式ドキュメントでもおすすめされている「Laravel sail」を用いた環境構築方法を説明していき...
あわせて読みたい
【Mac版】Laravel sailを使って超簡単にLaravel10の開発環境を整える はじめに Laravelの開発環境を構築する方法はいくつかありますが、今回は公式ドキュメントでもおすすめされている「Laravel sail」を用いた環境構築を行っていきます。 ...

Laravelのプロジェクト作成

まずはLaravelのプロジェクトを作成していきましょう。

今回の例ではLaravel sailを使用して環境構築をしていますが、Composerなど別の方法で環境構築をしている場合でももちろんOKです!

それでは下記のコマンドを実行して、Laravel sailでLaravelのプロジェクトを作成していきましょう。

$ curl -s "https://laravel.build/laravel-breeze" | bash

これでlaravel-breezeというディレクトリにLaravelをインストールすることができたので、下記のコマンドでLaravelを起動しておきましょう。

$ cd laravel-breeze && ./vendor/bin/sail up -d

これでLaravelを使う準備は完了です。

Laravel Breezeのインストール

まずはComposerを使用してLaravel Breezeをインストールしていきます。

下記のコマンドを実行してください。

なお、Laravel sail以外で環境構築をした場合は実行する際の./vendor/bin/sailの部分は除いて実行してください。

# Laravel sailで環境構築をした人用
$ ./vendor/bin/sail composer require laravel/breeze --dev

# Laravel sail以外で環境構築をした人用
$ composer require laravel/breeze --dev

上記コマンドを実行した後に、下記のようなメッセージが表示されていれば、Laravel Breezeのインストールは完了です。

80 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].  

No security vulnerability advisories found
Using version ^1.20 for laravel/breeze

Bladeでの構築

Laravel Breezeでは、フロントエンド側の使用技術をBladeやReact、Vueなどから自由に選ぶことができます。
また、Next.jsやNuxt.jsなどのフロントエンドフレームワークを使用した際のAPIとしても開発ができるように、API型も選択できるようになっています。

今回はBladeを選択しますが、ReactやNext.jsを扱えるのであれば、Blade以外を選択するとLaravel Breezeがいい感じにやってくれるので覚えておくと良いですよ!

それでは、BladeでLaravel Breezeを構築していきましょう。

php artisan breeze:install

下記のコマンドを実行してください。

$ ./vendor/bin/sail php artisan breeze:install

上記コマンドを実行すると下記のように質問されますので、Bladeを選択するために0を入力して、キーボードのEnterを押してください。

Which stack would you like to install?
  blade ................................................ 0  
  react ................................................ 1  
  vue .................................................. 2  
  api .................................................. 3  
❯ 0

次に、フロントエンド側をダークモードに対応するかどうかを聞かれるので、お好みでyesnoを入力して、キーボードのEnterを押してください。

今回はnoを入力してEnterを押しました。

Would you like to install dark mode support? (yes/no) [no]
❯ no

次に、PHPのテストフレームワークをPHPUnitの代わりにPestを導入するかを聞かれるので、お好みでyesnoを入力して、キーボードのEnterを押してください。

今回はnoを入力してEnterを押しました。

Would you prefer Pest tests instead of PHPUnit? (yes/no) [no]
❯ no

下記のようなメッセージが出力されていればOKです。

 INFO  Breeze scaffolding installed successfully. 

マイグレーション

次はLaravelがデフォルトで作成したマイグレーションファイルやLaravel Breezeが新たに作成したマイグレーションファイルをmigrateしていきます。

下記コマンドを実行してください。

$ ./vendor/bin/sail php artisan migrate

下記のようなメッセージが出力されていればOKです。

   INFO  Preparing database.  

  Creating migration table ............................................. 32ms DONE

   INFO  Running migrations.  

  2014_10_12_000000_create_users_table ................................. 51ms DONE
  2014_10_12_100000_create_password_reset_tokens_table ................. 36ms DONE
  2019_08_19_000000_create_failed_jobs_table ........................... 35ms DONE
  2019_12_14_000001_create_personal_access_tokens_table ................ 62ms DONE

フロント側のパッケージインストールとビルド

次はnpmを使用してフロント側のパッケージをインストールして、ビルドまで行っていきます。

下記2つのコマンドを実行してください。

$ ./vendor/bin/sail npm install
$ ./vendor/bin/sail npm run dev

ここまでできればログイン機能などが使える状態になっています!

めちゃ簡単。。。!

動作確認

それでは、無事にログイン機能などが実装できているのかを確認するために、localhostにアクセスしてみましょう。

下記のようなLaravelのページが表示されればOKです!

なお、画面右上の「Register」からユーザーの新規登録、「Log in」からログインをすることができます。

新規登録

それでは、「Register」をクリックして、下記のように入力して「REGISTER」ボタンをクリックしてみましょう。
なお、パスワードの箇所は任意の文字を8文字以上入力してください。

すると新規登録が完了し、下記の通りログイン完了画面が表示されます。

右上のユーザー名「test」をクリックすると「Log Out」と出てくるので、ログアウトする場合はそちらからログアウトしておきましょう。

ログイン

新規登録機能の動作確認ができたので、次はログイン機能の確認をしていきましょう。

localhostにアクセスして「Log in」をクリックして、先ほど作成したユーザー情報を入力して「LOG IN」ボタンをクリックしてみましょう。

すると下記の通りログイン完了画面が表示されます。

最後に

これでログイン機能の実装は終わりです。

どうでしたか?
すごく簡単に実装できましたよね!
次の記事では、ログイン画面や新規登録画面などで英語になってしまっていた部分を日本語化する方法を解説していこうと思います。

楽しみにしていてください!

あわせて読みたい
【必見】Laravel10を脳死で日本語に対応させる方法 はじめに Laravel ではLaravel Breezeなどで簡単にログイン機能を導入することができますが、それら機能のデフォルト言語が英語のため、自分で日本語化をする必要が出て...

無料プログラミング学習コミュニティー

なお、ファドが所属しているDiscordの無料プログラミングコミュニティー「TOMONI CODE」では、プログラミングを学習している方から、現役エンジニア、フリーランスエンジニアの方がワイワイ交流しています。

未経験の方の転職支援やフリーランスになりたい方への案件紹介支援などもしておりますので、ぜひ参加してみてください!

Discord
Discordサーバー「TOMONI CODE」に参加しよう! プログラミングを学習する人のための勉強部屋的なコミュニティー | 11人のメンバー

コメント

    この記事が気に入ったら
    フォローしてね!

    よかったらシェアしてね!
    • URLをコピーしました!

    コメント

    コメントする

    目次