Vue.js + LaravelでシンプルなSPA構築チュートリアル：概要編

# はじめに
Vue.jsとLaravelによるSPA実装のチュートリアル記事です。

本記事は、４本の連載記事の１本目です。

[Vue.js + LaravelでシンプルなSPA構築チュートリアル：概要編](https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2)
↑↑今ここ↑↑
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：Vueフロントエンド編](https://qiita.com/minato-naka/items/9241d9c7a7433985056d)
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：LaravelAPI編](https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5)
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：VueとAPI結合編](https://qiita.com/minato-naka/items/9362ea5af5f823c95b0b)



Vue.js 2.5
Laravel 6.7
を利用していますが、
別のバージョンでも大枠は同じだと思うので、
チュートリアルとしては参考にしていただけると思います。



# アプリ構成
タスクを
・一覧表示
・詳細表示
・登録
・更新
・削除
する機能がある
シンプルなアプリケーションです。

一番シンプルな状態でCRUDの実装を
一通り実践することができます。

![Untitled Diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297693/f9afa6ff-7bad-a81d-83b6-a234c185ec3b.png)





Vue.jsでフロントエンドを実装し、
LaravelでAPIを実装します。

各コンポーネントでは、
ajaxでLaravelのAPIにリクエストし、
データを取得、更新します。

SPAになっているので、
フロントの各コンポーネントは
ページリロードせずにVue.jsによって表示切替されます。


# 構築の流れ

まずこの記事で
環境構築と必要なパッケージのインストール、セットアップまで行います。

そして、
１、Vue.jsで静的なSPA実装
２、LaravelでAPI実装
３、フロントエンドとAPIの結合
という順番で実装を進めます。

上の構成図で言うと、
まず青色のVue.jsフロントエンド部分のみ実装し、
そのあと緑色のLaravelAPIを実装し、
最後に赤色のフロントエンドのAjax通信部分を実装してAPIと結合する
という流れです。


少し長くなるので、
上記の３ステップはそれぞれ別のQiita記事とします。


完成品のソースコードはGitHubに公開しています。
https://github.com/MinatoNaka/VueLaravelSpa

また、構築手順の通り１ステップごとにコミットしていますので、
コミット一覧を順に追っていくと
実装の流れが理解しやすいと思います。
https://github.com/MinatoNaka/VueLaravelSpa/commits/master


# 環境構築
それでは、この記事では
環境構築と必要なパッケージのインストール、セットアップを済ませます。

PHP、Composer、NPMが利用可能な環境での構築を前提としています。
（筆者はWindowsのPCにて構築しています）


## Laravelプロジェクト作成
まずは、
新品のLaravelプロジェクトを作成します。
任意のディレクトリで、下記コマンドを実行。

```shell
composer create-project --prefer-dist laravel/laravel vue-laravel-spa
```

commit：[Laravelプロジェクト作成](https://github.com/MinatoNaka/VueLaravelSpa/commit/f6eb291e5fcfd1d515f6118b5f41c8b60276f335)


新品プロジェクトの状態で
一度表示確認してみます。

まずはサーバ起動

```shell
cd vue-laravel-spa

php artisan serve
```

このURLでアクセスします。
http://localhost:8000/

Laravelのウェルカムページが表示されれば
正常に動作しています。

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297693/68eda932-03ac-f10f-47ef-40aba843d196.png)



## laravel/uiインストール
次に、laravel/uiというパッケージをcomposerでインストールします。

これは、
Laravelでフロントエンド開発をするための
ベースを簡単に提供してくれるツールです。
下記コマンドを実行。


```shell
composer require laravel/ui
```

※もしこのコマンドでエラーが発生した場合は、[こちら](https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#comment-7fbebe53b7327e8fbc8a)のコメントを参考にしてみてください

commit：[laravel/uiインストール](https://github.com/MinatoNaka/VueLaravelSpa/commit/b83d56d0931125ca1323a491be7abf09073b94a4)


## laravel/ui vueインストール
先ほどインストールしたlaravel/uiを使うと、
bootstrapやvue、reactなどさまざまな
フロントエンドのベースコードを生成できます。
[Laravel 6.x JavaScriptとCSSスカフォールド](https://readouble.com/laravel/6.x/ja/frontend.html)


今回はvueのベースを作ります。

```shell
php artisan ui vue
```

このコマンドを実行すると、
package.jsonに様々なフロントエンドパッケージが追加されたり、
ベースとなるjsファイルやサンプルのVueコンポーネント、
Laravel Mixの設定ファイルなどが自動で配置されます。
commit：[laravel/ui vueインストール](https://github.com/MinatoNaka/VueLaravelSpa/commit/f4ff21007d7a11d5c568f57f931e788bec57f702)

## フロントエンドパッケージインストール
laravel/uiのvueベースをインストールした際に、
必要なフロントエンドパッケージがpackage.jsonに追記されました。
bootstrap、jquery、vueなどが追記されています。

これらのパッケージをインストールします。

```shell
npm install
```

このコマンドを実行したら、
`/node_modules/` ディレクトリが作成され、
その配下に様々なパッケージのディレクトリ、ファイルが追加されます。

commit：[フロントエンドパッケージインストール](https://github.com/MinatoNaka/VueLaravelSpa/commit/f180068618acc1235b236494b4f914e80273f4b6)
※ `/node_modules/` ディレクトリはgitignoreされているためコミットに含まれません


## Vue Routerインストール
今回はVue.jsでSPAを作るので、
Vue Routerというパッケージを追加でインストールしておきます。

Vue Routerとは、
Vue.jsでSPAを構築するためのルーティング処理を行う
Vue公式のツールです。

```shell
npm install --save vue-router
```

commit：[Vue Routerインストール](https://github.com/MinatoNaka/VueLaravelSpa/commit/b0ac5baccd0d27c584abf5649604367806c460c9)

## フロントエンドビルド実行
必要なパッケージは全てインストール完了したので、
最後にフロントエンドソースコードをビルドしてみます。

```shell
npm run dev
```

※
特定のバージョンや環境だと、このコマンドでエラーが発生するという報告がいくつかあります。
エラーが発生した場合は[こちら](https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#comment-46dccc6e3a1cb1ebcea1)や[こちら](https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#comment-49447781ca9314f799e8)のコメントを参考にしてみてください。

このコマンドを実行することで、
Laravel Mixのビルド処理が実行され、
コンパイルされたjs、cssが
`/public/js` `public/css`に出力されます。
※Laravel Mixについては詳しく言及しません。わからない方は、こちらの記事を参照ください
[Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。](https://qiita.com/minato-naka/items/bfc3bbd9a388084e6f17)

この後実装するHTMLファイルでは、
このコンパイルされたjs、cssを読み込むことになります。

コンパイル済みファイルはgit管理する必要がないので
gitignoreに追記しておきます。

```diff:.gitignore
+ /public/js
+ /public/css
```

[フロントエンドビルド実行](https://github.com/MinatoNaka/VueLaravelSpa/commit/e0a5d1a073496179a370727df86c14e5a5292244)
 
 
今後jsファイルやcssファイル、vueコンポーネントを更新した際は、
毎回 `npm run dev` でソースをビルドしないと画面に反映されないので注意してください。

毎回ビルドを実行するのが面倒な場合は
`npm run watch` を実行するとウォッチモードになり
ビルド対象ファイルを更新、保存すると自動でビルドが実行されるようになるので便利です。

# おわりに
これで、環境構築と必要なパッケージ類のインストールは完了です。
次は「Vue.jsで静的なSPA実装」に進みましょう。
（次に進む前に、LGTMしてもらえるとうれしいです）
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：Vueフロントエンド編](https://qiita.com/minato-naka/items/9241d9c7a7433985056d)