LaravelでTwitter風webアプリケーションを作ってみよう！#2【ユーザ管理機能】

[前回](https://qiita.com/ku6kaw/items/a54eca56d75f1f85b1c7)に引き続き Laravel を用いた Twitter 風アプリケーションを実装していきます。

今回は
- phpmyadmin の追加
- Breezeによるユーザ管理機能の実装

を行います。

# phpMyAdmin の追加

Laravel では DB と連携したアプリケーションを実装する．DB の内容を確認するためのアプリケーションとして「phpmyadmin」を使えるようにしておく．

## コンテナの停止

コンテナが動いている場合は下記コマンドで停止させる．

```bash:
$ ./vendor/bin/sail down
```

## phpMyAdmin のコンテナを追加

`docker-compose.yml` に下記を追記する．

```yml:docker-compose.yml
phpmyadmin:
image: phpmyadmin/phpmyadmin
links: - mysql:mysql
ports: - 8080:80
environment:
MYSQL_USERNAME: "${DB_USERNAME}"
    MYSQL_ROOT_PASSWORD: "${DB_PASSWORD}"
PMA_HOST: mysql
networks: - sail
```

追記場所は `selenium` 付近．

```yml:docker-compose.yml
selenium:
image: "selenium/standalone-chrome"
volumes: - "/dev/shm:/dev/shm"
networks: - sail

# この下に同じインデントの階層となるよう追記
```

yaml ファイルはインデントが重要

## 動作確認

下記コマンドでコンテナを起動する．うまく立ち上がらない場合はコンテナを停止（`./vendor/bin/sail down`）して PC を再起動し，再度コンテナを起動する．

    💡Point

    Mac の人はターミナル，Windows の人は Windows ターミナルで実行しよう．

    ディレクトリを必ず確認！

    Windows の人は「Windows ターミナル」と「Git Bash」の使い分けがあります．

    - Git 関連のコマンドは Git Bash で実行．

    - Laravel 関連のコマンドは Windows ターミナルで実行．

```bash:
$ ./vendor/bin/sail up -d
```

立ち上がったら，ブラウザで `localhost:8080` にアクセスすると phpmyadmin にアクセスできる．

ユーザ名とパスワードは以下の通り．

| ユーザ名 | パスワード |
| :------: | :--------: |
|   sail   |  password  |

ログインして下記の画面が表示されれば OK！

![phpmyadmin 画面](https://gs-dec-202208.deno.dev/laravel/laravel_setup/img/phpmyadmin.png)

## 注意点

Laravel ではテーブルの設定などはマイグレーションによって行うため，phpmyadmin で不用意に操作すると予期しないエラーが発生する場合がある．

そのため，カラム名の調整などは phpmyadmin から行わないことをオススメする．

レコードの追加などは問題ないので適宜活用していきましょう．

# ユーザ管理機能の実装

## ライブラリ準備

作成するアプリケーションでライブラリを使用する場合はコマンドでインストールを行う．今回は認証を実装するための `Laravel Breeze` をインストールする．

まず，作成したアプリケーションのディレクトリに移動しておく．

```bash:
$ cd PROJECT_NAME
```

    💡 Key Point

    Laravel アプリケーションに対してコマンドを実行する場合にはアプリケーションのディレクトリ内でコマンドを実行する．

下記コマンドを実行し，必要なファイルをダウンロードする．

```bash:
$ ./vendor/bin/sail composer require laravel/breeze --dev
```

```bash:実行結果
...
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
73 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
```

下記コマンドでインストールする．

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

```bash:実行結果
INFO Breeze scaffolding installed successfully.
```

下記コマンドを順番に実行し，その他必要なパッケージをインストールしてビルドする（ここで Node.js が動く）．

```bash
$ ./vendor/bin/sail npm install
$ ./vendor/bin/sail npm run build
```

```bash:実行結果
vite v3.0.9 building for production...
✓ 59 modules transformed.
public/build/manifest.json 0.25 KiB
public/build/assets/app.ac81e540.css 23.22 KiB / gzip: 4.77 KiB
public/build/assets/app.ab93cf8a.js 129.03 KiB / gzip: 46.77 KiB
```

上記の結果を確認できたら下記のコマンドを実行する．

```bash
./vendor/bin/sail php artisan migrate
```

```bash:実行結果
INFO Preparing database.

Creating migration table ................................................................ 43ms DONE

INFO Running migrations.

2014_10_12_000000_create_users_table .................................................... 73ms DONE
2014_10_12_100000_create_password_resets_table .......................................... 71ms DONE
2019_08_19_000000_create_failed_jobs_table .............................................. 73ms DONE
2019_12_14_000001_create_personal_access_tokens_table ................................... 97ms DONE
```

ブラウザで `localhost` にアクセスし，動作を確認する．

以下の画面が表示されれば OK（右上に `Login` と `register` が表示される）．

![breeze インストール確認](https://gs-dec-202208.deno.dev/laravel/laravel_setup/img/breeze-installed.png)

右上の `login` や `register` をクリックし，それぞれの画面が表示されれば OK．

![register 画面](https://gs-dec-202208.deno.dev/laravel/laravel_setup/img/register.png)

ここまででライブラリの準備は完了．そして，同時にユーザの管理機能が完成している．

## テストユーザーデータの作成

この段階で，ユーザテーブルなどの認証に使用するテーブルも用意された状態となる．

Laravel には「seeder」という機能があり，テスト用のデータを簡単に作成することができる．

今回はダミーデータを 10 件作成する．`database/seeders/DatabaseSeeder.php` を以下のように編集する．

```php:database/seeders/DatabaseSeeder.php
<?php
namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
  /**
   * Seed the application's database.
   *
   * @return void
   */
  public function run()
  {
    // 🔽 この行をコメントから外す
    \App\Models\User::factory(10)->create();

    // 🔽 こちらはそのまま
    // \App\Models\User::factory()->create([
    //     'name' => 'Test User',
    //     'email' => 'test@example.com',
    // ]);
  }
}
```

下記コマンドを実行してテストユーザを作成する．

```
$ ./vendor/bin/sail php artisan db:seed
```

```bash:実行結果
INFO Seeding database.
```

コマンドを実行したら phpmyadmin でユーザーデータを確認する．パスワードはハッシュ化されているが全員 `password` となっている．

ブラウザの画面からメールアドレスとパスワードでログインできることを確認しよう．

ログインすると，下記の画面が表示される．

![ユーザ登録完了](https://gs-dec-202208.deno.dev/laravel/laravel_setup/img/register-success.png)

💡tips
`Email` は `example.com` が使用されている．これはテスト用に用意されているドメインであり，誰かのメールアドレスを使用してしまうリスクを回避できる．

# まとめ

今回は

- phpmyadmin の追加
- breeze によるユーザ管理機能の実装

を行いました。

[次回]()は tweet に関する

- テーブル作成
- モデル作成
- ルーティング作成
- コントローラ作成

を行いたいと思います。