Laravel5.5 + vue の環境構築

# はじめに
今回の環境構築は、へっぽこな筆者が個人的に良いと思うLaravel + vueの構築を(主に自分用に)まとめてみたものです。
もっといい構築方法があるよ！という方は是非教えていただきたいです:bow:

フレームワークの環境構築に主眼を置いているので、`homestead`や`laradock`などの話はしません。あしからず。

# TL;DR
* Laravel インストール　`composer create-project --prefer-dist laravel/laravel projectName "5.5.*"`
* Modelsディレクトリの作成と修正
* Laravel ライブラリ導入　`composer require --dev barryvdh/laravel-debugbar codedungeon/phpunit-result-printer barryvdh/laravel-ide-helper`
* vue環境構築　`yarn install`

# Laravelの環境構築
## Laravelのインストールと動作確認

* インストール

```shell
composer create-project --prefer-dist laravel/laravel projectName "5.5.*"
```

* 動作確認

```shell
$ cd projectName 
$ php artisan serve
```
以下のようになればOK
![動作確認.PNG](https://qiita-image-store.s3.amazonaws.com/0/288730/86aec369-f7ce-4755-5734-09b2315917ea.png)

## Modelsディレクトリの作成
デフォルトでは`/app`直下にModelが配置されるようになっているが、`Model`が増えていくとあまりにも見づらいため予め`app/Models`ディレクトリを作成する。
新しく`Model`を作成するときは

```shell
php artisan make:model Models/Hoge
```
のようにすると、`app/Models`以下に配置できる。
(デフォルト生成ディレクトリを設定できそうなものだが見つけられていない…)

注意点として、もともと配置されている`User.php`関連で以下の修正が必要。

* `User.php`の移動とnamespace変更

```php:User.php
// 「Models\」を追加
namespace Models\App;
```

* `User.php`使用箇所の修正

```php:/app/Http/Controllers/Auth/RegisterController.php
// 「Models\」を追加
use App\Models\User;
```

```php:/config/auth.php
'providers' => [
    'users' => [
        'driver' => 'eloquent',
        // 「Models\」を追加
        'model' => App\Models\User::class,
    ],
```

```php:/config/services.php
    'stripe' => [
        // 「Models\」を追加
        'model' => App\Models\User::class,
        'key' => env('STRIPE_KEY'),
        'secret' => env('STRIPE_SECRET'),
    ],
```

## 便利ライブラリのインストール
いつでも使える汎用的な便利ライブラリをインストールする。

### barryvdh/laravel-debugbar
**超必須**
これがないとやってられないレベルで便利です。
詳しい使い方は割愛しますが、

* 変数が見れたり
* クエリが見れたり
* 実行時間が見れたり

本当にいろんなことが出来ます。

### codedungeon/phpunit-result-printer
PHPUnitでテストするならないと辛い。
PHPUnitデフォルトではテスト結果の出力が貧弱だが、これを入れると以下のように見やすく表示してくれる。
![sample](https://raw.githubusercontent.com/mikeerickson/phpunit-pretty-result-printer/master/sample.png)

### barryvdh/laravel-ide-helper
PHPStromを使用しているのなら**100%インストール**
補完が効かないところも効くようにしてくれる。

### インストール
```shell
$ composer require --dev barryvdh/laravel-debugbar codedungeon/phpunit-result-printer barryvdh/laravel-ide-helper
```

# Vueの環境構築
## Laravel-mix環境の構築
```shell
$ yarn install
```
これで終了！
これだけでvueやsassのトランスパイルなどが行えるようになる。便利！
laravel-mixのカスタマイズは一例だけ挙げておく。結局[ドキュメント](https://readouble.com/laravel/5.5/ja/mix.html)参照が一番早い。

```js:webpack.mix.js
let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

//本番環境だけキャッシュ回避。
//その場合は<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
//のようにmix関数で読み込むようにする。
if (mix.inProduction()) {
    mix.version();
}
```

## vue-cliでの環境構築
`Laravel5.5`のmixはバージョンが古く、最新バージョンを使おうとするとloaderあたりでめちゃくちゃ大変なことになったことがあるので、個人的にはvueだけ別プロジェクトにしてしまうのをよくやっている。(ベストプラクティスだとは到底思えないが…)

### vueプロジェクトの作成
普通にcliで作成してもいいが、折角なので`vue ui`で作成してみる。

まずは`vue-cli`をグローバルインストール

```sh
$ npm install -g @vue/cli
```

そのあとに`vue ui`を起動する

```shell
$ vue ui
```
すると以下のような画面が表示される。(デフォルトは白です。設定で変更可能)
![vue ui top](https://qiita-image-store.s3.amazonaws.com/0/288730/c86cade0-9da5-6d83-367c-7d797f9708ab.png)

その後、作成タブからプロジェクトのディレクトリ設置場所を選択する。あとは指示に従っていけば作成できると思う。
プリセット選択で手動を選択した場合は、以下のように必要なものを選択する。

![preset](https://qiita-image-store.s3.amazonaws.com/0/288730/ed213659-cfb9-275d-5031-63fa5aa1852f.png)

最後に設定をして作成完了。
![setting](https://qiita-image-store.s3.amazonaws.com/0/288730/38b42913-73a9-a2c1-d9ae-d7ed3eb4feaf.png)

### 動作確認など
プロジェクト作成後、左のメニューのタスクからserveを選択する。
**タスクの実行**ボタンを押すと実際に`npm scripts`が走る。

![serve](https://qiita-image-store.s3.amazonaws.com/0/288730/3bbed7a5-b257-1233-7ffa-5654978354b4.png)

完了後**アプリを開く**ボタンを押して以下のように表示されていればOK

![vue](https://qiita-image-store.s3.amazonaws.com/0/288730/bb6b7c0d-fffe-6954-721e-01aa6f62cf83.png)


個人的に`vue ui`を使いたいと思う理由が、バンドル後の情報を事細かに表示してくれるから。

標準的な回線での読み込み速度やアセットのファイルサイズの表示
![analyze 1](https://qiita-image-store.s3.amazonaws.com/0/288730/fc690aa8-3425-b61c-f92d-0ba82b193892.png)

ライブラリ毎のファイルサイズの表示
![analyze 2](https://qiita-image-store.s3.amazonaws.com/0/288730/5c874033-06a8-5121-c3f5-588965cfb3d2.png)

### Laravelとの併用
これもベストプラクティスだとは到底思えないが、vue側でバンドルしたものをpublicにコピーしている。

まずはコピー用のライブラリをインストール

```sh
$ yarn add --dev cpx
```

その後、`npm scripts`の編集

```js:package.json
  "scripts": {
    "build": "vue-cli-service build",
    "laravel": "yarn build && yarn copy", //追加
    "copy": "cpx dist/js/* ../ProjectName/public/js/ &cpx dist/css/* ../ProjectName/public/css/"  //追加
  }
```

あとは`blade`側で読み込むようにすればOK


# 改善したいこと
* まだvagrantやdockerの知見がないので、プロジェクト作成時にこれらを自動でやってくれるように設定したい。
* LaravelにRepositryパターンを導入したい。
* Laravel5.5のvueの扱いをどうするか…
    * `laravel-mix`を使いたいけれど、少し古かったり`vue-cli`に比べて不便だったり(テストとか)する。
    * ただ`vue-cli`だと連携が面倒…(キャッシュ対策がめんどくさいとか)

# 最後に
冒頭にも書きましたが、もっといい方法があるよ！という方は教えていただけると幸いです:bow: