# Laravel-GeneratorでCRUD機能を作成しよう！ ## 1.LaravelUIインストール LaravelUIをインストールします。プロジェクトディレクトリに移動しているターミナル上で、以下のコマンドを実行してください。 ```zsh # DockerのPHPコンテナ内でLaravelUIをパッケージに追加しインストールするコマンド docker-compose exec php composer require laravel/ui:^3.0 ``` 最後に下記のようなメッセージが出れば成功です。 ```console Package manifest generated successfully. 76 packages you are using are looking for funding. Use the `composer fund` command to find out more! ``` ::: warn 一部の受講者の方からLaravelUIインストール時にエラーが発生すると報告が上がっております。 ```console zsh: no matches found: laravel/ui:^3.0 ``` このようなメッセージが表示された場合は ```zsh docker-compose exec php composer require "laravel/ui:^3.0" ``` 上記コマンドで成功する可能性があります。 ::: 続けてLaravelUIのベースファイルを作成コマンドを実行します。プロジェクトディレクトリに移動しているターミナル上で、以下のコマンドを実行してください。 ```zsh # DockerのPHPコンテナ内でLaravelUIのベースファイルを作成するコマンド docker-compose exec php php artisan ui bootstrap --auth ``` 最後に下記のようなメッセージが出れば成功です。 ```console Bootstrap scaffolding installed successfully. Please run "npm install && npm run dev" to compile your fresh scaffolding. Authentication scaffolding generated successfully. ``` メッセージの内容に ```console Please run "npm install && npm run dev" to compile your fresh scaffolding. ``` `npm install & npm run dev`を実行して土台をコンパイルしてくださいと記載がありますので、ターミナルで実行します。 ```zsh # DockerのPHPコンテナ内でLaravelUIに必要なパッケージのインストール docker-compose exec php npm install # DockerのPHPコンテナ内でアセットのコンパイルコマンド docker-compose exec php npm run dev ``` 最後に下記のようなメッセージが出れば成功です。 ```console Compiled Successfully in 8418ms ┌─────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐ │ File │ Size │ ├─────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤ │ /js/app.js │ 2.92 MiB │ │ css/app.css │ 178 KiB │ └─────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘ webpack compiled successfully ``` 一度LaravelUIがインストールされているか開発サーバを立ち上げて確認してみます。プロジェクトディレクトリに移動しているターミナル上で、以下のコマンドを実行してください。 ```zsh # DockerのPHPコンテナ内でLaravelの開発サーバを立ち上げるコマンド docker-compose exec php php artisan serve --host=0.0.0.0 --port=8000 ``` `http://localhost:8000`にアクセスすると前回と違い、右上に`Log in`と`Register`が出ているはずです。 ![](https://techpit-market-prod.s3.amazonaws.com/uploads/part_attachment/file/24725/ae3fd8ae-340c-4a8b-b728-d0945c41d0e7.png) `http://localhost:8000/login`ログイン画面を確認してみると下記のような画面が出るはずです。 ![](https://techpit-market-prod.s3.amazonaws.com/uploads/part_attachment/file/24726/f2ef3553-ed0d-47e7-a448-b1ac86a17abd.png) 認証に関わるのUIと機能を一気に作ってくれるのがこのLaravelUIです。 UI確認ができたら一度開発サーバを、`Control+C`で終了します。 ## 2.認証に関わるUIをLaravel-Generatorに上書きする Laravel-Generatorの認証ファイル上書きコマンドを実行して、laravelUIパッケージによって生成されたデフォルトの認証ファイルを上書きします。同時に、サイドバー、メニューなどの新しいファイルも生成されます。プロジェクトディレクトリに移動しているターミナル上で、以下のコマンドを実行してください。 ```zsh # DockerのPHPコンテナ内でLaravel-Generatorの認証ファイル上書きコマンド docker-compose exec php php artisan infyom.publish:layout ``` 下記のように上書きしますか？というメッセージが何度か出ますのですべてyを入力して進んでください。 ```console /var/www/html/resources/views/layouts/app.blade.php already exists. Do you want to overwrite it? [y|N] (yes/no) [no]: > ``` 最後にコントローラーの上書きが完了すると終了します。 ```console HomeController.php already exists. Do you want to overwrite it? [y|N] (yes/no) [no]: > y HomeController created ``` ではUIが上書きされているか開発サーバを立ち上げて確認してみます。プロジェクトディレクトリに移動しているターミナル上で、以下のコマンドを実行してください。 ```zsh # DockerのPHPコンテナ内でLaravelの開発サーバを立ち上げるコマンド docker-compose exec php php artisan serve --host=0.0.0.0 --port=8000 ``` `http://localhost:8000/login`にアクセスしてログイン画面を確認してみると上書きされた新しいUIが出るはずです。 ![](https://techpit-market-prod.s3.amazonaws.com/uploads/part_attachment/file/24727/910ebccc-a663-4f12-a9f2-8f7d6ad18894.png) これでLaravel-Generatorの土台が完成しました。 UIの確認ができたら一度開発サーバを、`Control+C`で終了します。 ## 3.CRUD機能開発 Todoを管理するCRUD機能をLaravel-Generatorの機能を使用して作成します。 `model_schemas`フォルダを作成し、Todoを管理するテーブルを定義するファイル`Todo.json`を作成します。プロジェクトディレクトリに移動しているターミナル上で、以下のコマンドを実行してください。 ```zsh # model_schemasフォルダを作成するコマンド mkdir src/resources/model_schemas # Todo.jsonファイルを作成するコマンド touch src/resources/model_schemas/Todo.json ``` `src/resources/model_schemas/Todo.json`ファイルをVSCodeなどのエディタで開いてください。 ``` laravel_sort_search └── src └── resources └── model_schemas └── Todo.json ``` ファイルを開いたら以下のように編集してください。 ```json:src/resources/model_schemas/Todo.json [ { "name": "id", "dbType": "increments", "htmlType": null, "validations": null, "searchable": false, "fillable": false, "primary": true, "inForm": false, "inIndex": false, "inView": false }, { "name": "user_id", "dbType": "bigInteger:unsigned:foreign,users,id", "htmlType": null, "validations": null, "searchable": true, "fillable": true, "primary": false, "inForm": false, "inIndex": false, "inView": false }, { "name": "title", "dbType": "string", "htmlType": "text", "validations": "required|max:255", "searchable": true, "fillable": true, "primary": false, "inForm": true, "inIndex": true, "inView": true }, { "name": "status", "dbType": "integer", "htmlType": "select,未対応:0,処理中:1,処理済み:2,完了:3", "validations": "required|numeric", "searchable": true, "fillable": true, "primary": false, "inForm": true, "inIndex": true, "inView": true }, { "name": "created_at", "dbType": "timestamp", "htmlType": null, "validations": null, "searchable": false, "fillable": false, "primary": false, "inForm": false, "inIndex": false, "inView": true }, { "name": "updated_at", "dbType": "timestamp", "htmlType": null, "validations": null, "searchable": false, "fillable": false, "primary": false, "inForm": false, "inIndex": false, "inView": true } ] ``` JSONの設定内容については下記にまとめました。各カラムの状態を確認したい場合は、参照してください。 |キー名|内容| | --- | --- | |name|カラム名| |dbType|カラムのタイプ| |htmlType|入力フォームのタイプ| |validations|バリデーション| |searchable|トップの検索から引っかかるか| |fillable|入力可否| |primary|主キー可否| |inForm|フォーム表示可否| |inIndex|一覧ページ表示可否| |inView|詳細ページ表示可否| Generatorコマンドを実行し、CRUD機能を作成します。プロジェクトディレクトリに移動しているターミナル上で、以下のコマンドを実行してください。 ```zsh # DockerのPHPコンテナ内でTodo.jsonの定義内容でCRUD機能をGenerateするコマンド docker-compose exec php php artisan infyom:scaffold Todo --fieldsFile=Todo.json ``` 2点ほど質問が来ますので - Todo.jsonの上書きno - マイグレーションの実行yes と答えていきます。 ```console Todo.json already exists. Do you want to overwrite it? [y|N] (yes/no) [no]: > N Do you want to migrate database? [y|N] (yes/no) [no]: > y Migrating: 2021_03_02_174255_create_todos_table Migrated: 2021_03_02_174255_create_todos_table (84.85ms) Generating autoload files ``` ではTodoのCRUD機能が作成されたか、開発サーバを立ち上げて確認してみます。プロジェクトディレクトリに移動しているターミナル上で、以下のコマンドを実行してください。 ```zsh # DockerのPHPコンテナ内でLaravelの開発サーバを立ち上げるコマンド docker-compose exec php php artisan serve --host=0.0.0.0 --port=8000 ``` `http://localhost:8000/register`にアクセスしてユーザー登録画面からユーザー登録するとログイン状態でダッシュボード画面へ遷移します。 ![](https://techpit-market-prod.s3.amazonaws.com/uploads/part_attachment/file/24728/9e97472b-debc-44d2-9aa9-fa2ea7867e0b.png) サイドメニューのTodoを選択するとTodoの管理画面が表示されれば成功です。 ![](https://techpit-market-prod.s3.amazonaws.com/uploads/part_attachment/file/24729/ed8f46b5-6d15-497f-bbae-32efd02aca92.png) ## 3.CRUD機能の修正先ほど作成したCRUD機能を一部修正します。 `TodoController.php`にユーザーIDが登録されるよう修正します。 `src/app/Http/Controllers/TodoController.php`ファイルをVSCodeなどのエディタで開いてください。 ``` laravel_sort_search └── src └── app └── Http └── Controllers └── TodoController.php ``` ファイルを開いたら以下のように編集してください。 ```diff:src/app/Http/Controllers/TodoController.php all(); + $input['user_id'] = Auth::id(); $todo = $this->todoRepository->create($input); Flash::success('Todo saved successfully.'); return redirect(route('todos.index')); } // 省略 } ``` 変更したコードの説明をします。 ```php use Illuminate\Support\Facades\Auth; ``` ログインユーザーの情報を取得できるAuthクラスを追加します。 ```php $input['user_id'] = Auth::id(); ``` 作成するTODOにログインユーザーのIDをセットするコードを追加します。 `Todo.php`にステータスコードからステータス名を返却する処理を追加します。 `src/app/Models/Todo.php`ファイルをVSCodeなどのエディタで開いてください。 ``` laravel_sort_search └── src └── app └── Models └── Todo.php ``` ファイルを開いたら以下のように編集してください。 ```diff:src/app/Models/Todo.php class Todo extends Model { // 省略 + public static $statusNames = [ + '未対応', + '処理中', + '処理済', + '完了', + ]; + public function getStatusNameAttribute(): string + { + return self::$statusNames[$this->status]; + } } ``` 変更したコードの説明をします。 ```php public static $statusNames = [ '未対応', '処理中', '処理済', '完了', ]; ``` データベースではTODOのステータスを数値で管理するため表示用のステータス名を追加します。 ```php public function getStatusNameAttribute(): string { return self::$statusNames[$this->status]; } ``` ステータスの数値からステータス配列のステータス名を取得できるメソッドを追加します。 `table.blade.php`にステータスコードからステータス名を表示する処理に変更します。 `src/resources/views/todos/table.blade.php`ファイルをVSCodeなどのエディタで開いてください。 ``` laravel_sort_search └── src └── resources └── views └── todos └── table.blade.php ``` ファイルを開いたら以下のように編集してください。 ```diff:src/resources/views/todos/table.blade.php

@foreach($todos as $todo) - + @endforeach

``` 変更したコードの説明をします。 ```php {{ $todo->status_name }} ``` 先ほど作成した`getStatusNameAttribute`ステータス名を取得できるメソッドでした。モデルに`get〜Attribute`といった形式で名付けられたモデルのメソッドはアクセサというものになります。このアクセサを利用するには、getとAttributeを取り除いたスネークケースで記述します。よって、`status_name`を記述するとステータス名が取得できることになります。 TodoのCRUD機能が正しく動作するか、何件かTodoを登録・更新・削除して動作確認してみてください。動作確認ができたら一度開発サーバを、`Control+C`で終了します。以上でLaravel-Generatorを使って実装の前準備は終了です。