Vue.js + LaravelでシンプルなSPA構築チュートリアルについて

完全honaki用悪しからず
php7.4
Laravel6.x
node.js20



## PHP7.4の導入
### homebrewのインストール
https://aiacademy.jp/media/?p=2817

### PHPの導入
https://c-limber.co.jp/blog/1691

## Composerの導入
ターミナルで以下を実行
```
curl -sS https://getcomposer.org/installer | php
```

ターミナルで以下を実行でComposerインストール　確認
```
composer -v
```
以下画像の通りならOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/05f9eb54-b60e-7f1e-ee7e-40f35fc9ab1a.png)

## NPMの導入(mac)
### Node.jsのインストール
https://nodejs.org/en/download
上記URLで「node-v20.11.1.pkg」ダウンロード
![スクリーンショット 2024-02-28 19.15.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/6f40dd76-d5e1-3abe-9c6e-cab644c73bd4.png)

ダウンロード後インストーラーが起動
進めていきインストール

### インストール確認
```
node -v
```
```
npm -v
```
![S__9846792.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/e83ecd49-89eb-24e1-eda0-a5e0d6425126.jpeg)


## 環境構築
https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89
僕はバージョン指定した
```
composer create-project "laravel/laravel=6.x" Laravel_Vue --prefer-dist
```

## Laravelプロジェクト作成
https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#laravel%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90

## laravel/uiインストール
https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#laravelui%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

## laravel/ui vueインストール
https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#laravelui-vue%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

## フロントエンドパッケージインストール
https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB
```
npm install
```
ターミナルで上記を実行するとエラー出る
![スクリーンショット 2024-02-28 19.35.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/0d551006-42f8-ebc4-4f35-5b389871ebf4.png)

だからnpm installの後に以下をターミナルで実行する
```
npm audit fix --force
```
![スクリーンショット 2024-02-28 19.36.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/176a9323-b6cb-5bf7-ab70-eb0b01bd23b7.png)

## Vue Routerインストール
https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#vue-router%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB
ターミナルで以下を実行するとエラーになる
```
npm install --save vue-router
```
![スクリーンショット 2024-02-28 19.40.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/3b9290f3-64be-9e73-e01c-d86c3e8eb110.png)
↓
エラーの後に以下を実行
```
npm install -S vue-router@3
```
![スクリーンショット 2024-02-28 19.42.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/8f5fe633-7149-597a-54f1-13bd27d89194.png)

参考
https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#comment-95dfd7de728884095aae

## フロントエンドビルド実行
https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%93%E3%83%AB%E3%83%89%E5%AE%9F%E8%A1%8C
ターミナルで以下を実行するとエラーになる
```
npm run dev
```
![スクリーンショット 2024-02-28 19.45.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/c1350246-1726-fb84-6cc8-a5a03197da6d.png)
↓
エラーの後にここを追記
```webpack.mix.js
const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js').vue() // ⭐️ 追記
    .sass('resources/sass/app.scss', 'public/css');
```
参考：https://zakkuri.life/laravel-mix-npm-upgrade/
参考2：https://qiita.com/motti_engineer/items/e412103a7f6998fddc6c

### Docker / コンテナ内にて
上記エラー解消後
再度ターミナルで以下を実行するとエラーになる
```
npm run dev
```
![スクリーンショット 2024-03-08 2.04.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/90702867-1d63-20fa-46df-a99e1ab147b8.png)
↓
エラーの後に
①「./node_modules/vue-loader」を削除
②ターミナルで以下を実行
```
npm i vue-loader@15.10.0
```
③以下の警告は無視
![スクリーンショット 2024-03-08 2.08.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/ac1dadcb-54a1-09f6-7cbf-08a528f92fd4.png)
↓
理由は、ここで以下を実行すると
```
npm audit fix --force
```
「./node_modules/vue-loader/node_modules/package.json」の
"version": "15.10.0"から17あたりまでupdateされてしまうから
④再度ターミナルで以下を実行
```
npm run dev
```
![スクリーンショット 2024-03-08 2.11.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/857c4691-de2f-7fde-55e5-47fa2d0a65ef.png)
↓
いつもの成功画面が出てくる

参考：https://github.com/vuejs/vue-loader/issues/1972
参考2：https://github.com/laravel-mix/laravel-mix/issues/3303
参考3：https://github.com/vuejs/vue-loader/issues/1859
参考4：https://qiita.com/KKKKKTTTTT/questions/3ad8537738edbfc04ae5
→最初の回答箇所（その後は読まなくてよし）


----

ここからはこれ
https://qiita.com/minato-naka/items/9241d9c7a7433985056d

## ベースbladeとベースルーティングを追加
https://qiita.com/minato-naka/items/9241d9c7a7433985056d#%E3%83%99%E3%83%BC%E3%82%B9blade%E3%81%A8%E3%83%99%E3%83%BC%E3%82%B9%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%92%E8%BF%BD%E5%8A%A0
上記のみだとExampleComponentは表示されなかった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/509e4044-41bf-7d04-5778-704e1150b485.png)
以下を追記することでできた
```app.js
import Vue from 'vue'; // ⭐️ 追記

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
});
```
→初心者すぎてここ10時間かかった。鬱になりかけた。

## ヘッダーコンポーネント実装
https://qiita.com/minato-naka/items/9241d9c7a7433985056d#%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E5%AE%9F%E8%A3%85

## タスク一覧コンポーネント実装
https://qiita.com/minato-naka/items/9241d9c7a7433985056d#%E3%82%BF%E3%82%B9%E3%82%AF%E4%B8%80%E8%A6%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E5%AE%9F%E8%A3%85

## タスク詳細コンポーネント実装
https://qiita.com/minato-naka/items/9241d9c7a7433985056d#%E3%82%BF%E3%82%B9%E3%82%AF%E8%A9%B3%E7%B4%B0%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E5%AE%9F%E8%A3%85

## タスク登録コンポーネント実装
https://qiita.com/minato-naka/items/9241d9c7a7433985056d#%E3%82%BF%E3%82%B9%E3%82%AF%E7%99%BB%E9%8C%B2%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E5%AE%9F%E8%A3%85

## タスク編集コンポーネント実装
https://qiita.com/minato-naka/items/9241d9c7a7433985056d#%E3%82%BF%E3%82%B9%E3%82%AF%E7%B7%A8%E9%9B%86%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E5%AE%9F%E8%A3%85

----

ここからはこれ
https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5

## SQLiteのセットアップ
https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5#sqlite%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97

## migration作成
https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5#migration%E4%BD%9C%E6%88%90

## モデル作成
https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5#%E3%83%A2%E3%83%87%E3%83%AB%E4%BD%9C%E6%88%90

## seeder作成
https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5#seeder%E4%BD%9C%E6%88%90

## テーブル、テストデータ生成
https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5#%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%83%86%E3%82%B9%E3%83%88%E3%83%87%E3%83%BC%E3%82%BF%E7%94%9F%E6%88%90

## タスク一覧取得API実装
https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5#%E3%82%BF%E3%82%B9%E3%82%AF%E4%B8%80%E8%A6%A7%E5%8F%96%E5%BE%97api%E5%AE%9F%E8%A3%85

## タスク詳細取得API実装
https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5#%E3%82%BF%E3%82%B9%E3%82%AF%E8%A9%B3%E7%B4%B0%E5%8F%96%E5%BE%97api%E5%AE%9F%E8%A3%85

## タスク登録API実装
https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5#%E3%82%BF%E3%82%B9%E3%82%AF%E7%99%BB%E9%8C%B2api%E5%AE%9F%E8%A3%85

## タスク更新API実装
https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5#%E3%82%BF%E3%82%B9%E3%82%AF%E6%9B%B4%E6%96%B0api%E5%AE%9F%E8%A3%85

## タスク削除API実装
https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5#%E3%82%BF%E3%82%B9%E3%82%AF%E5%89%8A%E9%99%A4api%E5%AE%9F%E8%A3%85

## axios
https://qiita.com/minato-naka/items/9362ea5af5f823c95b0b#axios

Ajax/APIの関係がわかりやすい図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/f15837de-9d24-6cba-aaff-a38e678158a6.png)

## タスク一覧取得API繋ぎ込み
https://qiita.com/minato-naka/items/9362ea5af5f823c95b0b#%E3%82%BF%E3%82%B9%E3%82%AF%E4%B8%80%E8%A6%A7%E5%8F%96%E5%BE%97api%E7%B9%8B%E3%81%8E%E8%BE%BC%E3%81%BF

### 画面に一覧表示できない場合は
sqliteではなくmysqlに接続しに行っている可能性がある。
.envが保存されていないから反映されていないかも。
①.envを保存
②ターミナルでnpm run devを再度
```
npm run dev
```
③ターミナルでphp artisan serveを再度
```
php artisan serve
```
参考：https://terakoya.sejuku.net/question/detail/11552

### mountedについて
mountedがどのタイミングかというと、DOMが読み込まれた直後のタイミングを意味する。
例↓
```例
mounted() {
      // イベントが発火するたびに
      window.addEventListener("イベント名", 関数名) 

      // DOMが呼び込まれたときに一回だけ
      this.関数名()
  },
```
参考：https://pg-log.com/vue-mounted/

## タスク詳細取得API繋ぎ込み
https://qiita.com/minato-naka/items/9362ea5af5f823c95b0b#%E3%82%BF%E3%82%B9%E3%82%AF%E8%A9%B3%E7%B4%B0%E5%8F%96%E5%BE%97api%E7%B9%8B%E3%81%8E%E8%BE%BC%E3%81%BF

## タスク登録API繋ぎ込み
https://qiita.com/minato-naka/items/9362ea5af5f823c95b0b#%E3%82%BF%E3%82%B9%E3%82%AF%E7%99%BB%E9%8C%B2api%E7%B9%8B%E3%81%8E%E8%BE%BC%E3%81%BF

## タスク更新API繋ぎ込み
https://qiita.com/minato-naka/items/9362ea5af5f823c95b0b#%E3%82%BF%E3%82%B9%E3%82%AF%E6%9B%B4%E6%96%B0api%E7%B9%8B%E3%81%8E%E8%BE%BC%E3%81%BF

```resources/js/components/TaskEditComponent.vue
<script>
    export default {
        props: {
            taskId: String
        },
+        data: function () {
+            return {
+                task: {}
+            }
+        },
+        methods: {
+            getTask() {
+                axios.get('/api/tasks/' + this.taskId)
+                    .then((res) => {
+                        this.task = res.data;
+                    });
+            },
+            submit() {
+                axios.put('/api/tasks/' + this.taskId, this.task) //⭐️ ここについて
+                    .then((res) => {
+                        this.$router.push({name: 'task.list'})
+                    });
+            }
+        },
+        mounted() {
+            this.getTask();
+        }
    }

</script>
```
put関数
axios.put(url, data, config)
→第二引数は「PUT送信するデータ」

参考：https://rakuraku-engineer.com/posts/axios/#PUT
参考2：https://qiita.com/reflet/items/d5658d5d69e8e1ccd489#put-%E6%9B%B4%E6%96%B0

-----

ここからはこれでやる
https://qiita.com/minato-naka/items/9362ea5af5f823c95b0b#%E3%82%BF%E3%82%B9%E3%82%AF%E5%89%8A%E9%99%A4api%E7%B9%8B%E3%81%8E%E8%BE%BC%E3%81%BF