Laravel DB.com 操作マニュアル。  〜コード書かずに超スピード開発（DEMO動画あり）〜

みなさんこんにちは
[ジーズアカデミー主席講師 山崎ですm(_ _)m](https://gsacademy.jp/mentor/)
今回はLaravleでサクッとモックアップが作成できる「Laravel DB.com」についてMemoしておきます。

## Laravel DB.com ってなに？
ER図書いて「 Migrationコード or 基本ベースのCRUD(β版) 」までを自動生成可能です。
そこからの細かい仕様に合わせる部分は自身で修正する必要はあリます。
**最低限テーブル設計/LaravelのCRUDを書けるくらいの基礎知識は必要（命名規則とか間違ってるとエラーの山に）**
超速でMigrationファイルやCRUDのザックリコードを作るまでは自動って感じで、あとは自分でアレンジして使うって感じですね。

## 「 LaravelDB.com 」の特徴
- テーブル設計をクラウドに保存可能 （ 他アプリの設計に使い回せる！ ）
- 「 家・会社のパソコン 」でも同じデータを活用できる
- Migration自動生成 / CRUD自動生成 ※必要であればテストデータ（Faker）自動生成可能
- Validation（テーブル設計時のカラム型を参照して自動生成 ※Enum型は自分でCODE修正必要かも...）
- 確認環境：　Mac: Chromeブラウザ
- 開発環境：　Laravel5.5 ~ 6.x / PHP7.2.1 / MySQL5.6.38


##DEMO動画（操作方法）
####操作説明（Youtube）
https://youtu.be/sHt5v4XOWbc
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/sHt5v4XOWbc/0.jpg)](https://youtu.be/sHt5v4XOWbc)


注意）以前に見たことがある人は「PWA」でChcheAPIが効いてて古い画面のままかもしれません。
その場合には、[開発者ツール]→[Application]→[Clear Storage]でキャッシュを削除してください。





##【 CRUD(ベータ版)： 新しいプロジェクトを用意 】
**最低限Laravelがインストールした状態（Welcomeページ表示）**を準備します！
1.　この時点ではまだLOGINは作らないように！
2.　.env と MySQLのDB準備はしておきましょう。
<img width="800" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/59cabead-808f-2837-f25a-1d25b907fd1e.png">




##【 LaravelDB.comへ ログイン 】
Googleアカウントのみログイン可能です。（画面右上 OR ページ下部の中央）
[ LaravelDB.com ](https://laraveldb.com/)
<img width="600" alt="en.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/44a89fe7-10e9-785c-19c7-1fc6c691db0a.jpeg">



##＜＜使う上での重要３ポイント！！＞＞
**１．主キーのAutoIncrementは どのテーブルも『 id 』 と固定すること！！**

**２．テーブル名には複数形の『 s 』を末尾に追加する！「Items」とか「Books」とかですね！！**

**３．これが一番大事！上記でも書いてますが「ER図やLaravel」が作成できる基礎知識が無いとそもそも、使いこなせない！！**

<img width="800" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/f21527f4-a43d-26af-3580-c614f8a17d05.png">

LaravelのEloquentModel を便利に使うためには、どのテーブルも 『 id 』 と固定するのが吉です。
理由は**「 モデル名::find($id); 」**と便利に使う場合は 主キーのAutoIncrement 『 id 』 名にしておかないと動作しないからです（ Laravelを勉強してる人はなんとなく知ってることでしょうか ）。
※ laravelDB.comのCRUDでも生成されるファイルは**「 ○○○::find($id); 」**を使ってるためだ！
※ laravelに最初から入っているテーブル「user」「password_resets」は作成しないこと（migrate時に上書きしてしまいます）
※慣れれば簡単ですが、少しだけ慣れる時間は必要ですね。

---


###【 CRUD(ベータ版)を生成してみる！  】
1. まずは、ER図を簡単に作ってみましょう！！
その後、右メニュー**「 [Data]セーブ/ロード 」**クリックすると以下画面が表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/81abee9e-f7c8-74f7-2dd6-759fb7319135.png" width="1000">

2.  **BUILD [CRUD CODE]** をクリック！！CRUD ファイル一式が生成されます！！

######【ポイント】

 - [x] **Relation(Beta)**にチェックを入れておくとリレーションします。


 - **BUILD [MIGRATION]** でもリレーション(QueryBuilder)がコメントで生成されますよ。



##【 ダウンロードファイルを確認しましょう 】
1. Zip圧縮ファイルがダウンロードされるので、Zipを展開（解凍）して中を見てみましょう！。CRUDに必要なファイルが一式入っています。
2. 下図：左側（CRUDファイル）、右図laravelのフォルダ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/4e7a903f-a17e-5427-6fc7-f8111241120f.png" width="1000">

**【移行方法】**
**Macの場合：** 「Optionキー + ドラッグ＆ドロップ」 → 「結合」でフォルダの上書きではなく、結合になります。
**Winの場合：**「ドラッグ＆ドロップ」で結合できます。

ダウンロードした各フォルダを上記の方法で移動しましょう！

##【 LaravelのHOMEページを表示しましょう 】
私の環境では「http://localhost/ 」
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/9986d24f-35bd-381d-355a-1a2357d80766.png" width="1000">

##【 「 コマンド 」 を３つ順番に打ちましょう！ 】
**＜＜重要＞＞
　DBや.env設定など最低限の設定を完了しておくこと！！**

```
//1.テーブル作成
php artisan migrate

//2.テストデータいらない場合は打たなくてもOK(faker準備)
composer update

//3.テストデータいらない場合は打たなくてもOK(faker実行)
php artisan db:seed

```

３つ目のコマンドはテストデータ登録の実行コマンド


##Faker注意点有り！

テストデータ登録**「 database/seeds/以下 」**Fakerファイルの中はこんな感じです。
<img width="1000" alt="TUsersTableSeeder_php_—_test3.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/2e38ef2e-baf3-49b4-29de-e24b719c6ed3.jpeg">
自動で文字が入ってるので、精度はまあこんなもんですかね。※文字列、数値、日付は自動で判定して入れてくれてるようです。
※ **[Fakerで使えるタイプ一覧](https://github.com/fzaninotto/Faker)**、 自身で変更して使いたい場合はこちらを参考にすることをオススメします。



「address」や「url」を使う場合はカラムサイズに気をつけましょう！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/5048c606-6235-51db-f7b3-79d5ce5dbfd6.png" width="1000">





##【 完成： ブラウザで確認しましょう！ 】
http://localhost/ (URLは開発環境によって異なります) で確認しましょう！
あなたが作ったテーブルのCRUD画面へ遷移できますよ！！

welcome.blade.php 
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/91ed88bd-7b78-796e-950c-1e187f24608a.png" width="1000">

作成されたindex/show/editの画面
基本的な処理が最初から出来てます！捗りそうですね！
<img width="1200" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/4250a77f-6b08-ec9e-6344-78e27e433b5c.png">


##Validationがスゴイ！ → テーブル設計に合わせて生成
例でざっくりテーブルをER図で書いてみました。
以下"t_gsusers"テーブルを中心に見ていきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/526c187f-fb1e-02b7-85a3-e081c0c77e50.png" width="1000">

生成されたコントローラーのcreate(),edit()にはこういったvalidationが挿入されます。

```php:TGsusersController
            $this->validate($request, [
				"name" => "required|max:128", //string('name',128)
				"lid" => "required|max:128", //string('lid',128)
				"lpw" => "required|max:128", //string('lpw',128)
				"m_department_id" => "required|integer", //integer('m_department_id')
				"m_position_id" => "required|integer", //integer('m_position_id')
				"m_prefectures_id" => "required|integer", //integer('m_prefectures_id')
				"m_kanri_id" => "required|integer", //integer('m_kanri_id')
				"m_lifeflg_id" => "required|integer", //integer('m_lifeflg_id')
				"m_test_id" => "required|integer", //integer('m_test_id')

            ]);
```

## {{old('name')}} → 入力項目を補完
validationで未入力等ではじかれた場合、入力した文字を消さずに表示します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/d61dbd53-0e46-7dff-5028-ff07b22e71e8.png" width="1000">

## date,datetime型 → 入力フォー厶type="date"
- 画面表示側もtype='date'
- validation側もdateチェックが入ります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/de8c3a0d-6e5d-84f6-bb9f-4dc74949838a.png" width="1000">

## ER図外部キー設定→JOIN自動生成 QueryBuilderをController側にコメントで用意
イチからQueryBuilderを使用して、JOINを書くのは大変です。ベースになる部分は生成してくれます。使用する場合はコメントになってるのでコメントを外し、上記に書かれてるコードのEloquentModelの1行をコメントして使います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104530/bdf57b40-9fe6-7370-e02e-dfed740e1a1a.png" width="1000">
※機械的に作成してるため、より良い記述に変更は必要になります。

## 2月8日追加Tableのカラム・コメントを確認できるHTMLファイルを生成
https://qiita.com/daisu_yamazaki/items/c447e3bca2740140bdcd
こちらのリンクに新しい記事を追加しておきました！！見やすい！！


## 動作した後はコードを見ましょう！
最低限のコードは出来上がってます！あとは、仕様に合わせて修正・追加していきましょう！！！
- Routing
- Controller
- Views
- Model
後は、自分で変更をいれていくだけですね。


##Laravel専用ツール！！
日本から世界へ！世界で使われるプロダクトになることを願っております。
是非、応援の程よろしくお願いいたしますm(_ _)m


**Twitter： [LaravelDB.com](https://twitter.com/ErdLaravel)**

---

##LaravelDB.com解説ページ一覧＆対応カラム一覧
#####LaravelDB.com 最新アップデート情報！！
[https://qiita.com/daisu_yamazaki/items/9f0dd73553367f8077f0](https://qiita.com/daisu_yamazaki/items/9f0dd73553367f8077f0)


# Youtubeチャンネル
[「遅咲きエンジニア」MicrosoftMVP 山崎](https://www.youtube.com/channel/UCmMFmjhf1BXB1tlLcbkVRrg)
https://www.youtube.com/channel/UCmMFmjhf1BXB1tlLcbkVRrg

以上