
## Reactとルーティング

標準のReactはSPA(シングルページアプリケーション)なので、単一のページしか対応しません。
React-Routerというライブラリを追加して、ルーティングに対応させます。

*このReact-Routerはバージョンアップの際に破壊的変更が何度か行われています。ネットで記事を探すときやChatGPTに出力させる際は気を付けてください。

以下は最新のv6のサンプルです。


### React-Router

まず最初にreact-routerライブラリをインストールします。

v6からは下記のように一つライブラリだけインストールすればOKになりました。

```bash
npm install react-router-dom
```

インストールしたreact-router-domから利用するcomponentをインポートします。



#### App.jsx
```javascript
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Home } from './components/Home';
import { About } from './components/About';


const App = () => {

  return (
    <>
      <h1>ルータ外の共通レイアウト</h1>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </BrowserRouter>
    </>
  )
```

このように実装することで、ドキュメントルートではHomeコンポーネントが表示され、
/aboutでAboutコンポーネントが表示されます。

重要な仕様として、<red>Routeコンポーネント</red>で定義したpathに対してのみ、後述するLinkコンポーネントの遷移先として使用できます。</red>

またURLとして扱うことになる<yellow>pathは小文字</yellow>にしましょう。

各ページで共通のレイアウトは<BrowserRouter>の外に定義してください。

次にリンク先となるHomeコンポーネント、Aboutコンポーネントを作ってみます。

<code>Linkコンポーネント</code>はReactの中で<a>タグの代わりを果たすcomponentです。


#### components/Home.jsx
```javascript
import { Link } from 'react-router-dom'

export const Home = () => {
    return (
        <div>
            <h2>Homeコンポーネント</h2>
            <Link to="/about">Aboutに移動する</Link>
        </div>
    )
}
```

#### components/About.jsx
```javascript
import { Link } from "react-router-dom";

export const About = () => {
    return (
        <div>
            <h2>Aboutコンポーネント</h2>
            <Link to="/">Homeに移動する</Link>
        </div>
    )
}
```



【React+Laravel10】3.ReactRouterによるルーティング


## ReactとLaravelの接続について

まずはReactでのフォームのシンプルな実装例を紹介します。

<red>useState()</red>を使い、入力フォームの値を保存する変数と設定するsetter関数（setTitle,setAuthor)を作製します。

それぞれのsetterを入力フォームの値が変化した際のイベントであるChangeイベントの発火時に呼び出される<red>onChange()</red>メソッドの中で呼び出すことで、フォームに入力された値を取得できます。

取得した値は、submitボタンを押した際のイベントであるSubmitイベントの発火時に呼び出される<red>onSubmit()</red>メソッドによって動作するhandleSubmit()関数の中で処理しています。



#### BookForm.jsx
```javascript
import { useState } from "react";

 export const BookForm = () => {

    const [title, setTitle] = useState('');
    const [author, setAuthor] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(title, author)
    }

    return (
        <form onSubmit = {handleSubmit}>
            <label htmlFor="title">title:</label>
            <input id="title" type="text" value={title} onChange={(e) => setTitle(e.target.value)} / >
            <br />
            <label htmlFor="author">author:</label>
            <input id="author" type="text" value={author} onChange={(e) => setAuthor(e.target.value)} />
            <br />
            <button type="submit">送信</button>
        </form>
    )
}
```

### handleSubmit()について

このhandleSubmit()関数の中でまず最初に動作する<code>e.preventDefault();</code>は、入力フォームの標準の動作（action=""で指定されたURLに移動する）をキャンセルしています。

ここでconsoleで目的のデータを取得できていることが確認できたら、
axiosを使ってデータをLaravelのapiに送信します。

次の実装では、このhandleSubmit()関数の中でpost通信を行う<code>postData()</code>関数を呼び出しています。

```javascript
import { useState } from "react";
import axios from 'axios'

 export const BookForm = () => {

    const [title, setTitle] = useState('');
    const [author, setAuthor] = useState('');

    const postData = async () => {
        try {
            const url = 'http://127.0.0.1:8000/api/books'; // リクエストを送るURL
            const data = {
                title: title,
                author: author
            };

            const response = await axios.post(url, data, {
                headers: {
                    'Content-Type': 'application/json'
                }
            });

            console.log('Response:', response.data); // レスポンスがあれば
        } catch (error) {
            console.error('Error',error)
        }
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(title, author)
        postData()  //apiの実行
    }

    return (
      // 略
    )
 }
```
## Laravel側でpostを受け取る


api.phpで、POSTを受け取ることができるようにルーティングを追加します。

#### routes/api.php

```php
<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

use App\Http\Controllers\BookController;


Route::get('/books',[BookController::class,'index']);
/* 追加 */
Route::post('/books',[BookController::class,'store']);
```

これに連動するようにBookControllerにstoreアクションを追加します。

#### BookController
```php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class BookController extends Controller
{
    public function index(){
      // 略
    }

    public function store(Request $request){
          // データベースに追加する処理
          // 省略

          return ['message'=>'OK'];
  }
}

```

受け取ったデータをデータベースに追加する処理は省略します。
return として'OK'というメッセージを返しているので、
その内容がReact側のconsoleで確認できれば完了です。



### おまけ:Material UIを使う場合
React側の入力フォームをMaterial UIで実装した場合は次の通りです。

必要なライブラリをインストールしてから、
```bash
npm install @mui/material @emotion/react @emotion/styled
```

return が次のようになります。

```javascript

import { useState } from 'react';
import axios from 'axios';
import { TextField, Button, Box, Typography } from '@mui/material';

export const BookForm = () => {

  // 略

  return (
    <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxWidth: 400 }}>
      <Typography variant="h6" component="div" gutterBottom>
        Book Information
      </Typography>
      <TextField
        id="title"
        label="Title"
        variant="outlined"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        fullWidth
      />
      <TextField
        id="author"
        label="Author"
        variant="outlined"
        value={author}
        onChange={(e) => setAuthor(e.target.value)}
        fullWidth
      />
      <Button type="submit" variant="contained" color="primary">
        送信
      </Button>
    </Box>
  );
};
```

（基本的なロジックを素のReactで実装して動作確認が完了したら、
ChatGPTに「このコードをMaterial UIを使ったコードに変換して」が楽でおすすめです。。）



【React+Laravel10】2.ReactのフォームのPostリクエストによるデータの送信


## TailwindCSSの導入

#### Tailwind CSSを使用するために必要なライブラリをインストールする
```bash
npm install -D tailwindcss postcss autoprefixer
```

#### tailwind.config.jsを作成する
```bash
npx tailwindcss init -p
```


#### tailwind.config.js

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content:[
    "./src/**/*.jsx",
],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

#### ./src/index.css
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

【React】Tailwind css

## ポートフォリオを作ろう
これまで学んだことをすべて使い、ReactとLaravelを使ったポートフォリオを作製していきます。
ここでは（例年同じなのですが）本の貸し出しシステムというサンプルアプリを作る過程で、必要な技術を紹介していきます。


## ReactとLaravelの接続について
ReactとLaravelはそれぞれ別のリポジトリで作成し、それらの通信はWebAPIによって行います。
このようは構成をフロントエンド・バックエンド分離とよび、近年広く利用されるアーキテクチャ（構造）です。

一方でこれまで学んだLaravelだけで完結するような構成はモノリス（１枚の岩）アーキテクチャの呼ばれます。
モノリスの場合は１つのリポジトリだけで構成されるので当初の開発が簡単ですが、規模が大きくなると変更や追加に不便が生じるようになります。

フロントエンド・バックエンドを別のリポジトリにおいて分離することでサイズが小さくなるので、管理が容易になります。

それでもバックエンドが大きくなった場合は、バックエンドの一部の機能（ユーザー認証や支払いなど）を分離していくマイクロサービスというアーキテクチャが利用されるようになります。



# Laravel準備

まずはサンプルを動かすだけなので、いつものようにLaravelのプロジェクトを作ります。

プロジェクト名はBookManage_Laravelとしました。

```bash
 composer create-project laravel/laravel BookManage_laravel  --prefer-dist "10.*"
```

BookControllerを作ります。
```bash
php artisan make:controller BookController
```


本当はモデルとDBの設定が必要ですが、簡易化のためにダミーデータをコントローラ内に設定します。

#### BookController
```php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class BookController extends Controller
{
    public function index(){
        $books = [
            [
                "title" => "吾輩は猫である",
                "author" => "夏目漱石",
                "publisher" => "岩波書店",
                "year" => 1905,
                "genre" => "小説"
            ],
            [
                "title" => "雪国",
                "author" => "川端康成",
                "publisher" => "新潮社",
                "year" => 1947,
                "genre" => "小説"
            ],
            [
                "title" => "ノルウェイの森",
                "author" => "村上春樹",
                "publisher" => "講談社",
                "year" => 1987,
                "genre" => "小説"
            ],
            [
                "title" => "こころ",
                "author" => "夏目漱石",
                "publisher" => "岩波書店",
                "year" => 1914,
                "genre" => "小説"
            ],
            [
                "title" => "人間失格",
                "author" => "太宰治",
                "publisher" => "新潮社",
                "year" => 1948,
                "genre" => "小説"
            ]
        ];
    
    return $books;
  }
}

```

Web APIを利用するときは、web.phpの代わりにapi.phpにルーティングを書きます。

#### routes/api.php

```php
<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

use App\Http\Controllers\BookController;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "api" middleware group. Make something great!
|
*/


Route::get('/books',[BookController::class,'index']);
```

サーバーを起動したら api/books にアクセスしてくて動作を確認しましょう。


### Reactの準備

Reactでもこれまでのようにプロジェクトを作ります。

プロジェクト名はBookManage_Reactとしましょう。



```js
import { useEffect, useState } from 'react'
import axios from 'axios';


export const App = () => {
  const url = 'http://127.0.0.1:8000/api/books'

  const [books, setBooks] = useState([])

  useEffect(() => {
    getBooks();
  }, [])

  const getBooks = async () => {
    const response = await axios.get(url)
    const result = response.data
    console.log(result)

    setBooks(result)
    return result
  }

  return (
    <>
      {books.map(book => (
        <div>
          <h3>{book.title}</h3>
          <div>{book.author}</div>
          <div>{book.publisher}</div>
          <div>{book.year}</div>
          <div>{book.genre}</div>
        </div>
      )
      )}
    </>
  )

}

```

【React+Laravel10】1.WebAPIとGetリクエストによるデータの受け渡し

## node.jsでWebスクレイピング
Webスクレイピングをしてみます。

### 1.puppeteerをインストールする
まず、適当なフォルダを作りその直下でpuppeteerをインストールします。

```bash
npm install puppeteer
```

ESModuleでコードを書くので、package.jsonに「"type":"module"」を追加します

```json
{
  "type": "module",
  "dependencies": {
    "puppeteer": "^23.7.1"
  }
}
```


### 2. getリクエストを送りデータを取得する

適当なWebページにアクセスし、そのページのtitle,h1とスクリーンショットを取得します。

サンプルではexample.comにアクセスしてみます。

```js
import puppeteer from 'puppeteer'


const sleep = milliseconds =>
  new Promise(resolve =>
    setTimeout(resolve, milliseconds)
  );


const getWebPage = async () => {
    // ブラウザを起動
    const browser = await puppeteer.launch({ headless: 'new' });
    const page = await browser.newPage();

    // 指定したURLに移動
    await page.goto('https://example.com');

    // 少し待つ
    await sleep(2000);
    
    // ページのタイトルを取得
    const title = await page.title();
    console.log('Page Title:', title);

    // 任意のセレクタからテキストを取得（例: h1タグ）
    const heading = await page.evaluate(() => {
        const element = document.querySelector('h1');

        return element.textContent
    })

    console.log(heading)
    // スクリーンショットを撮る（任意）
    await page.screenshot({ path: 'example.png' });

    // ブラウザを閉じる
    await browser.close();
};

await getWebPage();
```

動作が完了すると、同じフォルダにスクリーンショットが表示されるはずです。


### 3.Reactで指定したページの情報を画面に表示する

このままでもOKですが、せっかくなので取得したデータをReactで画面に表示しましょう。


------- 以下は後ほど追加します。


JavaScriptでWebスクレイピング

## Reactで本格的な開発を行う

### 1. Viteでプロジェクトを作成する
まず、Viteを使ってReactプロジェクトを作成します。ターミナルで以下のコマンドを実行してください。

```bash
npm create vite@latest
```

そのあと、いつもの通りプロジェクト名(仮にmy-react-appとします)、React,JavaScriptと指定していきます。

### 2. プロジェクトのセットアップ

プロジェクトディレクトリに移動して、依存関係をインストールします。
```bash
cd my-react-app
npm install
```

### 3. Material UIのインストール

Material UIとその依存関係をインストールします。

```bash
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/material @mui/styled-engine-sc styled-components
```

### 4. main.jsxの変更
教科書に合わせてAppのimportを変更します。
ついでに不要なindex.cssのimportを削除します

```jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
// import './index.css'
import { App } from './App'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

```


### 5. Material UIコンポーネントの使用

src/App.jsxに移動し、Chakra UIのコンポーネントを試してみましょう。以下は、ボタンコンポーネントを追加した例です：

```jsx
import Button from '@mui/material/Button';

export const App = () => {
  return (
    <div>
      <Button variant="contained" color="primary">
        クリックしてね
      </Button>
    </div>
  );
}

```
### 6. 開発サーバーの起動
開発サーバーを起動してアプリを確認します。
```bash
npm run dev
```


## 天気予報アプリの開発

このサンプルを使い、天気予報APIから取得したデータを表示するアプリを開発します。

APIからデータを取得する際は標準のfetchでもよいですが、axiosを使う方が便利のためインストールします。

```bash
npm install axios
```
APIの仕様は下記

[気象庁の天気予報JSONファイルをWebAPI的に利用したサンプルアプリ](https://anko.education/apps/weather_api)

[気象庁のAPIと予報区のコード](https://anko.education/webapi/jma)

```jsx
import { useState, useEffect } from 'react';
import axios from 'axios';
import { Container, Typography, Button, CircularProgress, Card, CardContent } from '@mui/material';

export const App = () => {
  const [weather, setWeather] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchWeather();
  }, []);

  const fetchWeather = async () => {
    setLoading(true);
    setError(null);
    try {
      // 130000は東京のエリアコード
      const url = "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json"

      const response = await axios.get(url);
      // dataの収納 weatherにデータが入る
      console.log(response.data)
      setWeather(response.data);
      console.log(weather)
    } catch (err) {
      setError('データの取得に失敗しました。');
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = () => {
    fetchWeather();
  };

  return (
    <Container maxWidth="sm" style={{ marginTop: '2rem' }}>
      <Typography variant="h4" gutterBottom>天気予報アプリ</Typography>
      <Button variant="contained" color="primary" onClick={handleSearch}>
        検索
      </Button>

      {loading && <CircularProgress style={{ marginTop: '1rem' }} />}
      {error && <Typography color="error" style={{ marginTop: '1rem' }}>{error}</Typography>}

      {weather && (
        <Card style={{ marginTop: '2rem' }}>
          <CardContent>
            <Typography variant="h5">{weather.targetArea}</Typography>
            <Typography variant="body1">今日の天気: {weather.text}</Typography>
          </CardContent>
        </Card>
      )}
    </Container>
  );
}

```



React事始め


## ホテル予約システムとSQL


ホテル予約システムの基本が出来てきたら、アプリに様々な機能を追加したくなります。（なりますよね？）

すべての部屋の中から予約可能な部屋を検索する機能を作成していきます。
主に考えるべきはどのようなSQL文を作るかです。


### 指定した日付の範囲で予約可能な部屋を検索する機能

この機能を考えるとき、検索結果として欲しいのは「部屋」になります。
ですので、<red>主テーブルを部屋（rooms）</red>とし、「予約可能な」という条件を
予約（reservations）と予約明細（reservation_details）を使ってフィルタリングします。

SQLでは次のように書けます。
```sql
SELECT r.room_id, r.room_type, r.price
FROM rooms AS r
LEFT JOIN reservation_details AS rd ON r.room_id = rd.room_id
LEFT JOIN reservations AS res ON rd.reservation_id = res.reservation_id
WHERE (
    res.reservation_id IS NULL OR 
    (res.start_date > ? OR res.end_date < ?)
)

```


このSQLをクエリビルダを使って書き換え、コントローラに実装する場合は次の通りです。
元のSQL文に近い書き方で実装することができます。

```php
use Illuminate\Support\Facades\DB;

public function availableRoomsBetweenDates($startDate, $endDate) {
    $rooms = DB::table('rooms')
        ->leftJoin('reservation_details', 'rooms.id', '=', 'reservation_details.room_id')
        ->leftJoin('reservations', 'reservation_details.reservation_id', '=', 'reservations.id')
        ->whereRaw('reservations.id IS NULL OR (reservations.start_date > ? OR reservations.end_date < ?)', [$endDate, $startDate])
        ->select('rooms.id', 'rooms.room_type', 'rooms.price')
        ->get();

    return $rooms;
}

```


こちらでもOKですが、Eloquentを使ったものに再度置き換えることもできます。

Eloquentのほうが前から素直に文を読めるような気がします。

以下はEloquentに置き換えて、そのままRoomControllerに実装した場合のサンプルです。

#### RoomController.php

```php

public function availableRoomsBetweenDates($startDate, $endDate) {
   $rooms = Room::leftJoin('reservation_details', 'rooms.id', '=', 'reservation_details.room_id')
        ->leftJoin('reservations', 'reservation_details.reservation_id', '=', 'reservations.id')
        ->where(function($query) use ($startDate, $endDate) {
            $query->whereNull('reservations.id')
                  ->orWhere('reservations.start_date', '>', $endDate)
                  ->orWhere('reservations.end_date', '<', $startDate);
        })
        ->select('rooms.id', 'rooms.room_type', 'rooms.price')
        ->get();

  return $rooms;
}


public function searchByDate(Request $request) {
  $rooms = availableRoomsBetweenDates(
    // 入力フォームから受け取った日付
    $request->startDate,
    $request->$endDate
  );

  return view('表示したいページ',compact('rooms'));
}

```






ホテル予約システムとSQL


## 認証・認可について

ログインやセッションなどの<bold>認証</bold>やユーザーに権限を与える<bold>認可</bold>はアプリケーションのセキュリティを担う重要な機能です。

認証機能に必要な機能は、<bold>ログイン、新規登録、メール検証、２段階認証、セッション管理、APIトークン管理</bold>などがあります。

これらは自力で実装することも可能ですが、<red>それらを実装するのは大変な作業</red>です。

そのため、Laravelでは認証機能を実装するためのライブラリを提供しています。


主な認証系の主なライブラリは以下の通りです。

- Laravel auth
- Laravel ui
- Laravel JetStream
- Laravel Breeze
- Laravel Fortify
- Laravel Sanctum
- Laravel Socialite


（<bold>多いな</bold>）

参考
[Laravel公式ドキュメント](https://readouble.com/laravel/9.x/ja/authentication.html)

[Qiita:Laravel の認証・認可パッケージが多すぎてわけわからんので図にまとめた](https://qiita.com/mpyw/items/c944d4fcbb45c1a3924c)

### Laravel auth

 Laravel本体の<red>laravel/framework/illuminate/auth</red>には、認証・認可の機能が集約されています。

 Socialite以外のすべてのパッケージはこのauthを利用しています。

 このauthは以前は単独で利用することがありましたが、現状は他のパッケージを介して利用することが多いです。

 authが提供する主な機能は以下のとおりです
 
 - ・Basic認証（ユーザー名とパスワードを利用した認証）
 - ・Cookieによるセッション管理
 - ・メールアドレス検証機能（登録時にメールアドレスに確認メールを送信）
 - ・パスワードリセット機能
 - ・シンプルな認可機能（ユーザーの権限を管理）


#### Laravel ui 
Laravel ui は、Laravel が提供する認証機能を実装するための最も簡単なライブラリです。

authを用いたバックエンドの仕組みだけでなく、<red>ログイン画面や会員登録画面などのフロントエンドの実装も提供</red>しています。

これらのフロントエンドの実装は以下の３つから選ぶことができます。

- ・Bootstrap
- ・Vue
- ・React
  
以前まではこのuiを利用していたのですが、<red>Laravel8からuiは非推奨</red>となりました。


#### Laravel JetStream
Laravel JetStream は、Laravel8からの標準の認証機能のライブラリです。

JetStreamはログイン、新規登録、メール検証、２段階認証、セッション管理、APIトークン管理などの様々な機能を提供しています。

また、CSSフレームワークとしてTailwindを利用しています。

<red>かなり多くの機能を提供している一方で、利用する難易度が高い</red>のが特徴です。

#### Laravel Breeze
Laravel Breeze は、複雑であったJetStreamをシンプルにしたライブラリで現在最も新しいものです。

シンプルになった分利用する難易度は低いため、公式からもまずはBreezeを利用してみることを推奨しています。

（個人的には覚えること多すぎてこれでシンプルなのか？という感じですが）

Breezeは以下の４種類のテンプレートから実装を選ぶことができます。
(CSSフレームワークはTailwindを使用しています)

- ・Blade
- ・Vue
- ・React
- ・API

このうちBreezeのテンプレートとしてのVueとReactは<bold>Inertia.js</bold>を内部で利用しています。「イナーシャ」と読みます。

Inertia.jsは、VueやReactを利用してフロントエンドを実装する際に、サーバーサイドとフロントエンドの間でデータをやり取りするためのライブラリです。また、Vue-Routerのようなルーティングライブラリをサーバーサイドで実装することができます。

これはデータの受け渡しをサーバーサイドで行うことで、フロントエンドの実装をシンプルにすることができますが、一方でフロントエンドとサーバーサイドを分離させるという昨今のトレンドとは反するものです。

このテンプレートを使うと、フロントエンドの実装をサーバーサイドで行うことができるため、フロントエンドの実装を行う人材を必要としないようなシステムの開発に向いています。


#### Laravel Fortify
Laravel Fortify は、JetStreamのように多くの機能を提供するライブラリではなく、フロントエンドの実装は行わず、<red>バックエンド側の認証機能のみを提供する</red>という点が特徴のライブラリです。

JetStreamは内部的にはこのFortifyを利用しています。

フロントエンドの実装は自前で行う必要があるので導入当初は手間がかかりますが、自由にフロントエンドを実装することができます。

Fority（とそれを内部で利用しているJetStream）は、MFA認証が利用できます。

<bold>MFA認証</bold>とは、ユーザーがログインする際に、パスワードだけでなく、認証アプリなどの二段階認証を利用して認証することを指します。


#### Laravel Sanctum
Laravel Sanctum は、APIトークン管理機能を提供するライブラリです。

Laravel8.6からは、Laravelに標準でインストールされています。

<bold>APIトークン管理機能</bold>とは、楽天APIなどのように、APIを利用する際にどのユーザーからのAPIアクセスかを判別するための認証情報としてトークンを利用するための機能です。

外部からAPIを利用する際に、ユーザー名とパスワードを利用して認証するのではなく、トークンを利用して認証することで、セキュリティを高めることができます。

sanctumはLaravelとSPA（Single Page Application）を利用してフロントエンドを実装する際に利用することが多いです。


#### Laravel Socialite
Laravel Socialite は、OAuth認証を実装するためのライブラリです。

<bold>OAuth認証</bold>とは、外部サービスに認証を委託し、アプリケーション側ではユーザー情報だけを管理する仕組みです。

いわゆるソーシャルログインと呼ばれる機能で、GoogleやTwitterなどの外部サービスのアカウントを利用してログインする機能を実装する際に利用します。

OAuth認証の動作についての解説はこれがわかりやすかったです。
[Qiita:一番分かりやすい OAuth の説明](https://qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be)


### どのライブラリを利用するか

Laravelの認証機能を実装する際には、<red>どのライブラリを利用するか</red>を考える必要があります。

<red>どのライブラリを利用するか</red>は、<red>どのようなシステムを開発するか</red>によって異なります。

システムの開発には、<red>フロントエンドの実装をサーバーサイドで行うか</red>という点が大きく影響します。

フロントエンドの実装をサーバーサイドで行う場合は、Inertia.jsを利用することが多いです。

Inertia.jsを利用する場合は、BreezeのVueやReactのテンプレートを利用することが多いです。

Inertia.jsを利用しない場合は、BreezeのBladeテンプレートを利用することが多いです。

また、フロントエンドの実装をサーバーサイドで行わない場合は、<red>SPA（Single Page Application）を利用するか</red>という点も大きく影響します。

SPAを利用する場合は、Laravel Sanctumを利用することが多いです。

SPAを利用しない場合は、Laravel Sanctumを利用する必要はありません。

また、<red>OAuth認証を利用するか</red>という点も大きく影響します。

OAuth認証を利用する場合は、Laravel Socialiteを利用することが多いです。

OAuth認証を利用しない場合は、Laravel Socialiteを利用する必要はありません。

以上のように、<red>どのライブラリを利用するか</red>は、<red>どのようなシステムを開発するか</red>によって異なります。



【Laravel9】Laravelの認証ライブラリまとめ


## アプリを充実させる

「書籍管理サービス」としてだいぶ機能が揃ってきました。（たぶん）

ここからは、今まで作った機能を充実させていきたいと思います。

### 楽天BooksAPIとの連携

管理する書籍を追加する機能をBookAdd.vueで実装しました。

これを運用することを考えると、書籍のタイトルや著者名、ISBN番号をユーザーに手入力させるのはかなりの手間になります。

<red>楽天API</red>から書籍のデータを一式で取得し、これをデータベースに保存する機能を追加したいと思います。

まず基本となる楽天APIからデータを取得する方法は下記を参照してください。

[Vue3で非同期処理を利用して楽天APIから本のデータを取得する](https://blog-tukki.com/posts/211020)


### 楽天BooksAPIのオブジェクトの形と、既存のBookモデルの形を比較する

データを取り込むためには、APIの形と既存のBookモデルの形を比較する必要があります。

#### 楽天ブックス書籍検索APIに title="Java"のクエリを追加した場合の最初の１件

```json
{
  "GenreInformation": [],
  "Items": [
    {
      "Item": {
        "affiliateUrl": "",
        "author": "中山清喬/国本大悟",
        "authorKana": "ナカヤマ,キヨタカ/クニモト,ダイゴ",
        "availability": "1",
        "booksGenreId": "001005003007/001005005001/001005005009/001005017",
        "chirayomiUrl": "",
        "contents": "",
        "discountPrice": 0,
        "discountRate": 0,
        "isbn": "9784295007807",
        "itemCaption": "圧倒的人気Ｎｏ．１入門書の増補改訂版！コレクションを追加！基本文法やオブジェクト指向の「なぜ？」が必ずわかる！",
        "itemPrice": 2860,
        "itemUrl": "https://books.rakuten.co.jp/rb/16099007/",
        "largeImageUrl": "https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/7807/9784295007807.jpg?_ex=200x200",
        "limitedFlag": 0,
        "listPrice": 0,
        "mediumImageUrl": "https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/7807/9784295007807.jpg?_ex=120x120",
        "postageFlag": 2,
        "publisherName": "インプレス",
        "reviewAverage": "4.5",
        "reviewCount": 20,
        "salesDate": "2019年11月",
        "seriesName": "",
        "seriesNameKana": "",
        "size": "単行本",
        "smallImageUrl": "https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/7807/9784295007807.jpg?_ex=64x64",
        "subTitle": "",
        "subTitleKana": "",
        "title": "スッキリわかるJava入門第3版",
        "titleKana": "スッキリ ワカル ジャバ ニュウモン"
      }
    },

     // 略
```

#### BooksTableSeederの最初の1件
```php
        $param = [
            'title' => 'スッキリわかるJava入門 第3版',
            'author' => '中山 清喬',
            'publisher' => 'インプレス',
            'ISBN' => '978-4295007807',
            'summary' => '発売から8年であっという間に総計40万部到達した大人気シリーズの原点。
            「どうして? 」「なぜそうなる? 」が必ずわかるJava入門書史上最強の定番書!
            読みやすさ、使いやすさをさらに磨いた増補改訂版登場!',
            'gunre' => 'Java',
            'available' => true,
        ];
        DB::table('books')->insert($param);
```

楽天APIのかたちに合わせて、Bookモデルを修正します。

ついでに画像も表示したいので、画像のURLが入っている<red>largeImageUrl</red>を追加します。

#### Bookモデルの修正
```php
    protected $fillable = [
        'title',
        'author',
        // 'publisher',
        'publisherName',
        // 'ISBN',
        'isbn',
        // 'summary',
        'itemCaption',
        'gunre',
        'largeImageUrl',
        'available',
    ];
```

### データを取り込む処理を実装する
楽天APIからデータを取得する処理を実装します。方法としては、フロントエンド側から<red>axios</red>を使ってAPIを叩く方法と、バックエンド側から<red>guzzle</red>というPHPのHTTPクライアントを使ってAPIを叩く方法があります。

今回はバックエンド側からAPIを叩く方法を採用します。

### Guzzleについて

GuzzleはPHPのHTTPクライアントです。HTTPリクエストを送信することができます。

PHPでAPIを叩く場合、PHPの標準ライブラリである<red>curl</red>を使ってHTTPリクエストを送信することができます。しかし、curlは複雑なHTTPリクエストを送信するのに向いていません。Guzzleは、curlをラップして、より簡単にHTTPリクエストを送信することができます。

PHP環境の場合はcomposerを使ってインストールする必要がありますか、Laravelの今回の環境ではデフォルトでインストールされています。

<red>composer.json</red>を確認してください。

#### composer.json
```json
    "require": {
        "php": "^8.0.2",
        "guzzlehttp/guzzle": "^7.2",
        "laravel/framework": "^9.19",
        "laravel/sanctum": "^3.0",
        "laravel/tinker": "^2.7",
        "laravel/ui": "^4.2"
    },
    // 略
```

このguzzleを利用して、楽天APIを叩いてみましょう。

#### BookControllerに楽天APIを叩く処理を追加する


#### BookController.php
```php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Book;
use LDAP\Result;

// 追加
use GuzzleHttp\Client;

class BookController extends Controller
{
    // 略

    public function getRakutenAPI(Request $request)
    {
        $title = $request->title;
        $client = new Client();
        $res = $client->request('GET', 'https://app.rakuten.co.jp/services/api/BooksBook/Search/20170404', [
            'query' => [
                'format' => 'json',
                'applicationId' => env('RAKUTEN_APP_ID'),
                'title' => $title,
            ]
        ]);
        $body = $res->getBody();
        $json = json_decode($body, true);
        return $json;
    }
}
```

アプリケーションIDは、githubなどで外部に公開することは望ましくないので環境変数に設定します。

#### .envファイルに楽天APIのアプリIDを追加する
```env
RAKUTEN_APP_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```

最後にapi.phpにルーティングを追加します。

#### api.php
```php
// 上に書く
Route::get('/books/getRakutenAPI', [BookController::class, 'getRakutenAPI']);

Route::apiResource('/books',BookController::class);
```

最初に作ったapiResourceが作るルーティングには、ワイルドカードを表すbooks/{book}というルーティングが入っています。

今回の楽天APIを叩くルーティングは、books/{book}よりも上に書かないと、books/{book}のルーティングに引っかかってしまいます。

### フロントエンド側で楽天APIを叩く処理を実装する

#### BookAdd.vue
```html
<template>
    // 略
    <div class="form-group">
        <label for="title">タイトル</label>
        <input type="text" class="form-control" id="title" v-model="title">
        <button class="btn btn-primary" v-on:click="getRakutenAPI">検索</button>
    </div>

    <div v-for="book in books">
        <div class="card" style="width: 18rem;">
            <img v-bind:src="book.Item.largeImageUrl" alt="">
            <p>{{ book.Item.title }}</p>
        </div>
    </div>
</template>
<script>
    data() {
        return {
            // 略
            title: '',
            books: [],
        }
    },
    methods: {
        // 略
        async getRakutenAPI() {
            const res = await axios.get('/api/books/getRakutenAPI', {
                params: {
                    title: this.title
                }
            });
            this.books = res.data.Items;
        },
    },
</script>
```

これで楽天APIを叩いて、データを取得することができました。

次に登録したいデータを選んで、登録する処理を実装していきます。

### データを登録する処理を実装する
v-onclickでaddBookメソッドを呼び出すようにします。

このときにaddBookメソッドに引数を渡して、その引数を使ってデータを登録します。


#### BookAdd.vue
```html
<template>
    // 略
    <div v-for="book in books">
        <div class="card" style="width: 18rem;">
            <img v-bind:src="book.Item.largeImageUrl" alt="">
            <p>{{ book.Item.title }}</p>
            <button class="btn btn-primary" v-on:click="addBook(book)">登録</button>
        </div>
    </div>
</template>
<script>
    data() {
        return {
            // 略
            books: [],
        }
    },
    methods: {
        // 略
        async addBook(book) {
            const url = '/api/books';

            const Book = {
                title: book.Item.title,
                author: book.Item.author,
                publisherName: book.Item.publisherName,
                isbn: book.Item.isbn,
                itemCaption: book.Item.itemCaption,
                gunre: 'Java',  // 仮でJavaを入れています
                largeImageUrl: book.Item.largeImageUrl,
            }
            const res = await axios.post(url, Book);
        }
    }
</script>
```


【Laravel9×Vue3】本の貸し出しシステム9（楽天APIとの連携）


## 日付の処理

アプリケーションを開発する際に日付の処理が必要なときは多々あります。

まずは、JavaScript で日付を扱うときに必須になる Date オブジェクトについて解説します。

### JavaScript の Date オブジェクトとは

JavaScript の Date オブジェクトは、単一の瞬間の時刻を表すオブジェクトです 1。Date オブジェクトは、協定世界時 (UTC) の 1970 年 1 月 1 日からの経過ミリ秒数を表す Number の値を含んでいます。

### Date オブジェクトの生成方法

Date オブジェクトを生成するには、new 演算子を使ってインスタンスを作成します。引数によって、現在時刻や指定した日付や時刻などを表す Date オブジェクトが作られます。

```javascript
/// 現在時刻を表すDateオブジェクト
const now = new Date();

// 指定した日付や時刻を表すDateオブジェクト
const date1 = new Date(2023, 1, 21); // 2023年2月21日
const date2 = new Date('2023-02-21T01:04:48Z'); // ISO形式の文字列
const date3 = new Date(1645400688000); // ミリ秒数
```

### Date オブジェクトの操作方法

Date オブジェクトから日付や時刻を取得したり、設定するときは以下のメソッドを使います。

日は 1~31 がそのまま使えるのに、月の場合は 1 月~12 月に 0~11 の数字に当てられている点に注意が必要です。

```javascript
const date = new Date(); // 現在時刻

// 日付や時刻の取得
console.log(date.getFullYear()); // 年 (4桁)
console.log(date.getMonth()); // 月 (0～11)
console.log(date.getDate()); // 日 (1～31)
console.log(date.getHours()); // 時 (0～23)
console.log(date.getMinutes()); // 分 (0～59)
console.log(date.getSeconds()); // 秒 (0～59)
console.log(date.getMilliseconds()); // ミリ秒 (0～999)

// 日付や時刻の設定
date.setFullYear(2024); // 年を2024年に設定
date.setMonth(11); // 月を12月に設定
date.setDate(25); // 日を25日に設定
date.setHours(12); // 時間を12時に設定
date.setMinutes(30); // 分数を30分に設定
date.setSeconds(15); // 秒数を15秒に設定
date.setMilliseconds(500); // ミリ秒数を500ミリ秒に設定
```

### 日時の計算方法

経過時間や差分時間など、日時の計算方法もあります。

たとえば、下記のように書くことでプログラムの処理に要した時間を計測することができます。

```javascript
const start = new Date(); // 開始時間

// 処理内容（省略）

const end = new Date(); // 終了時間

// 経過時間（ミリ秒）= 終了時間 - 開始時間
const elapsed = end - start;
```

この Date オブジェクトを使って、BookDetail 内で日付に関する操作を行なってみます。

本を借りる日を本日とし、返却日を２週間後する場合は下記のようになります。

#### BookDetail.vue

<bold>&lt;script&gt;</bold>内に追記

```javascript
// 略
methods: {
        async rentBook() {
            // loansテーブルのapiに、book_id,user_id,loan_date,return_dateを送信する処理
            const url = "/api/loans";

            const now = new Date();
            const loanDate = now.toLocaleDateString();
            // 返却日は２週間後とする
            // P279を参照
            const twoWeekLater = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 14);
            const returnDate = twoWeekLater.toLocaleDateString();

             // この本を借りることをAPIに送る
            const response =
                await axios.post(
                    url,
                    {
                        book_id: this.$route.params.id,
                        user_id: 2,
                        loan_date: loanDate,
                        return_date: returnDate
                    }
                );
        }
    }
```
### Dateオブジェクトを扱うライブラリを利用する

このDateオブジェクトは仕様が少々煩雑で、扱うのに苦労する点があります。

たとえば、上記で書いた「今日から２週間後」を表すコードをもっと楽に書きたいところです。

Dateオブジェクトを扱うライブラリとして、下記のようなものがあります。

```
・moment.js
・Day.js
・Luxon
・date-fns
```

この中で今回は、<bold>date-fns</bold>を利用していきます。

### インストールとインポート
ターミナルでは前回と同じようにnpmを使い、-Dのオプションを利用します。

```terminal
npm install -D date-fns
```

このdate-fnsが持っているaddWeeks()というメソッドを利用して、２週間後を簡単に表現することができます。


#### BookDetail.vue

```javascript
import axios from 'axios';
import { addWeeks } from 'date-fns'; // 追加

export default {
    name: 'BookDetail',

    // 中略

    methods: {
        async rentBook() {
            // loansテーブルのapiに、book_id,user_id,loan_date,return_dateを送信する処理
            const url = "/api/loans";

            const now = new Date();
            const loanDate = now.toLocaleDateString();
            // 返却日は２週間後とする
            

            // const twoWeekLater = new Date(now.getFullYear(),now.getMonth(),now.getDate()+14);
            const twoWeekLater = addWeek(now,2);

            const returnDate = twoWeekLater.toLocaleDateString();

            // 略
        }
    }

}
```



【Laravel9×Vue3】本の貸し出しシステム８（日付の処理）

## 個別ページから本を借りる機能を呼び出す

個別ページで本の詳細を確認した後、気に入った場合は本を借りることができると良いと思います。

BookDetail のコンポーネントに本を借りる機能を追加します。

## 要件の整理

必要な要件としては、次のようなものが考えられます。

```
・本を借りることができるかを表示する機能
・本を借りることが出来る場合、いつまで借りることが出来るかを表示する機能
・本を借りることができない場合、いつから借りることが出来るかを表示する機能
・実際に本を借りることを決定する機能
```

### モーダルの追加

BookDetail 本来の本の情報を表示する機能と、本を借りるための機能を同じ画面に収めるのは窮屈に感じるので、ボタンを押したら<bold>モーダル</bold>が表示されるようにし、モーダルのなかで本を借りるための機能を動作させることにしました。

モーダルは BootStrap からそのまま引っ張ってみます。

[BootStrap5 modal](https://getbootstrap.jp/docs/5.0/components/modal/#live-demo)

#### BookDetail.vue
<bold>&lt;template&gt;</bold>のみ抜粋

````html
<template>
    <h2>書籍の詳細</h2>
    <div>
        
        
        {{ bookData }}
    </div>


    
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        この本を借りる
    </button>

    
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">この本を借りる</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    （２週間後の日付）まで借りる or （レンタル中のため）借りることが出来ないことを表示
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button>
                    <button type="button" class="btn btn-primary" v-on:click="rentBook">決定</button>
                </div>
            </div>
        </div>
    </div>
</template>

````

![モーダルのサンプル画像](/images/2023年/1月/ModalSample.png)

### モーダルからバックエンドのAPIにリクエストを送る

上記は、BootStrapのサンプルからテキストを変更した上で、モーダル内のボタンのクリックイベントでメソッドを呼び出せるように、<bold>v-on:click="rentBook"</bold>を追加しています。

このイベントで動作させる<bold>rentBook()</bold>を下記のようにmethodsディレクティブに追加します。

#### BookDetail.vue
<bold>&lt;script&gt;</bold>内に追記

```javascript
// 略
    methods: {
        async rentBook() {
            // APIに対して、借りる処理を送る
            // loansテーブルのapiに、book_id,user_id,loan_date,return_dateを送信する処理
            const url = "/api/loans";
            const response = await axios.get(url);
            console.log(response.data);
        }
    }

```

### リクエストを受け取るAPIの作成
フロントエンド側の準備は完了したので、バックエンド側を整備していきます。

要件定義より、本を借りたという情報は<bold>Loansテーブル</bold>に記録することになっているので、このテーブルとモデル、コントローラーを作成します。

作成の流れとしては、最初に作ったbooksテーブルと同じです。

#### マイグレーションの作成

```terminal
php artisan make:migration create_loans_table
```

このloansテーブルは、booksテーブルとusersテーブルの中間テーブルとして存在するため、この二つのテーブルの主キーを外部キーとして持っています。


#### migrations/create_loans_table

```php
    public function up()
    {
        Schema::create('loans', function (Blueprint $table) {
            $table->increments('loan_id');
            // 通常のキーとして追加 
            $table->unsignedInteger('book_id');
            $table->unsignedBigInteger('user_id');
            // 外部キー制約を追加
            $table->foreign('book_id')->references('book_id')->on('books');
            $table->foreign('user_id')->references('id')->on('users');

            $table->date('loan_date');
            $table->date('return_date');
            $table->timestamps();
        });
    }
```

#### モデルの作成

```terminal
php artisan make:model Loan
```

#### app/Models/Loan.php

```php
class Loan extends Model
{
    // 主キーの列名を指定
    protected $primaryKey = 'loan_id';

    // 入力可能な列名を指定（これら以外はDBで自動入力）
    protected $fillable = [
        'book_id',
        'user_id',
        'loan_date',
        'return_date'
      ];
}
```

#### コントローラーの作成

```terminal
php artisan make:controller LoanController
```

#### LoanController.php

```php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
// 追加
use App\Models\Loan;

class LoanController extends Controller
{
    // 現在の貸出状況を表示
    public function index()
    {
        $loans = Loan::all();
        // eloquantをそのままreturnすると、jsonに変換してくれる。
        return $loans;
    }

    // 新しい貸出状況を追加
    public function store(Request $request)
    {
        // モデルの空のインスタンスを生成
        $loan = new Loan();
        // 受け取ったリクエストのデータを全て取得
        $form = $request->all();
        // 受け取ったデータをインスタンスに挿入し、DBに保存
        $loan->fill($form)->save();
    }
}
```

ここまで書いたら詳細ページのモーダルからgetリクエストを送り、動作に問題ないか確認してください。

#### BookDetailからAPIにデータをpostする

詳細ページのモーダルからはgetリクエストではなく,この本を借りるというpostリクエストを送りたいです。

<red>axios.post</red>を利用してLoanテーブルに合うデータの形のオブジェクトを送信します。

ここで<red>this.$route.params.id</red>は、この詳細ページの番号（ルーティングパラメータ）です。

日付については仮の値を入力し、次のページで解説します。

#### components/BookDetail.vue

```javascript
// 略
    methods: {
        async rentBook() { 
            // loansテーブルのapiに、book_id,user_id,loan_date,return_dateを送信する処理
            const url = "/api/loans";
             
             // この本を借りることをAPIに送る
            const response =
                await axios.post(
                    url,
                    {
                        book_id: this.$route.params.id,
                        user_id: 2,
                        loan_date: '2023/02/01',
                        return_date: '2023/02/14'
                    }
                );
        }
    }

```

【Laravel9×Vue3】本の貸し出しシステム7（本の個別ページ続き）

## VueRouter の動的ルーティングを利用して、本の個別ページを作る

本を選ぶときに、タイトルだけでなくその本の情報をじっくり確認できる方が好ましいです。

この本を借りることを個別ページで選択できるといいなと思います。

BookList のコンポーネントで表示される本のタイトルからリンクを作り、本の個別ページに移動できるようにします。

### 動的ルーティングについて

本の各ページを個別で作るとキリがありません。同じレイアウトが書かれたコンポーネントを作成し、そこに本のデータを投入するものとします。

そのために vuerouter の<red>動的ルーティング</red>を利用します。

動的ルーティングを利用すると、各本の個別ページのパスを

```javascript
path: '/book/:id';
```

と書くことで、/book/1 や /book/2 のようなパスを作ることができます。

とりあえず個別ページをこんな感じに書いてみます。

#### components/BookDetail.vue

```html
<template>
  <h2>書籍の詳細</h2>
  <div>
    
  </div>
</template>
<script>
  export default {
    name: 'BookDetail',
  };
</script>
```

これを vuerouter で呼び出します。

#### router/index.js

```javascript
{
  path: '/book/:id',
  name: 'book',
  component: BookDetail,
},
```

このページに対して、BookList.vue から移動できるように設定します。

#### BookList.vue

<bold>template 部分のみ</bold>

```html
<template>
  
  <ul v-for="Book in Books" class="list-group">
    <router-link v-bind:to="{ name: 'book', params: { id: Book.book_id }}">
      <li class="list-group-item">{{ Book.title }}</li>
    </router-link>
  </ul>
</template>
```

これで BookList.vue からアクセスできること確認したら、BookDetail.vue から、API に対してリクエストを投げます。

この API の当て先について、<bold>/api/books/{book}</bold>というルーティングが既に作成されているので、それを対象にします。

#### 参考：Laravel 側のルーティングの確認

```teminal
php artisan route:list
```

```

  GET|HEAD        api/books/{book} ......................................... books.show › BookController@show
  PUT|PATCH       api/books/{book} ..................................... books.update › BookController@update
  DELETE          api/books/{book} ................................... books.destroy › BookController@destroy
```

この/api/books/{book}は、/api/books/1 や /api/books/3 のように book_id をパスの中で指定すると、book_id の値が入った変数をコントローラのアクション内で利用できる仕組みです。

まずは、vue 側でルーターオブジェクト<bold>$route</bold>から、自身に渡された id を取得して、そこから api のパスを作成します。

#### BookDetail.vue

```html
<template>
  <h2>書籍の詳細</h2>
  <div>{{ bookData }}</div>
</template>
<script>
  import axios from 'axios';

  export default {
    name: 'BookDetail',
    data() {
      return {
        bookData: {},
      };
    },
    async mounted() {
      const url = `api/books/${this.$route.params.id}`;
      const response = await axios.get(url);
      this.bookData = response.data;
    },
  };
</script>
```

その後で、BookController側ではモデルが持つfind()メソッドを利用して、データベースから本１冊の情報を取得します。

#### BookController.php

```php
    public function show($id)
    {
        $book = Book::find($id);

        return $book;
    }
```

これによって、本の詳細ページのデータを取得することができました。

【Laravel9×Vue3】本の貸し出しシステム６（本の個別ページ）


## 登録されている本の中から指定した本を検索する

本を借りたいなと思ったときに、検索窓から探したい本のキーワードを入力することで、検索結果を表示する機能を作っていきます。

## 検索について

この機能の実装の仕方として、２通りの方法が考えられます。

### フロントエンド側で検索を行う方法

まずはフロントエンド側のみの処理で実装を行う方法を考えます。

<bold>mounted</bold>のタイミングで取得するデータを<bold>APIdata</bold>という変数名に変更し、指定したキーワードによる検索結果を保存する変数を<bold>Books</bold>とします。

また、データを処理するために<red>filter()</red>と<red>includes()</red>という JavaScript のメソッドを利用します。

下記のようにこの２つを組み合わせることで、配列から検索した文字を含む要素だけを抜き出した配列を作成できます。

```javascript
Array.filter((value) => value.includes('検索したい文字'));
```

また、検索フォームは本を追加するための入力フォームで作成したものと同じ方法で作成します。

#### BookList.vue

```html
<template>
  <h2>本</h2>
  <div class="my-3">
    <label for="search" class="form-label">本の検索</label>
    <input type="text" id="search" class="form-control" v-model="keyword" />
    <button class="btn btn-primary" v-on:click="search">検索</button>
  </div>
  <ul v-for="Book in Books" class="list-group">
    <li class="list-group-item">{{ Book.title }}</li>
  </ul>
</template>

<script>
  import axios from 'axios';
  export default {
    name: 'BookList',
    data() {
      return {
        // data: '',
        APIdata: '',
        Books: '',
        keyword: '',
      };
    },
    // mounted:このBookListコンポーネントが作られたあとに１度動作する
    async mounted() {
      const url = '/api/books';
      const response = await axios.get(url);
      console.log(response.data);
      // このresponse.dataは３つのオブジェクトが入った配列
      // APIから取得した全データを保存
      this.APIdata = response.data;
      // 検索機能で上書きするためにコピーを作る
      this.Books = response.data;
    },
    methods: {
      search() {
        console.log(this.keyword);
        // 指定した文字を含む場合を作りたい
        const result = this.APIdata.filter((book) => book.title.includes(this.keyword));
        console.log(result);
        // this.Booksを上書き
        this.Books = result;
      },
    },
  };
</script>
```

### バックエンド側で検索を行う方法

もう一つの方法として、検索窓に入力したキーワードを axios を利用してバックエンド API に渡す方法があります。

データの量が少ない場合はとりあえず全てを受け取ってフロントエンドで表示するものを選択する上の方法で良いですが、DBを利用する場合はそのデータの量が大量にある場合がほとんどですので、基本はこちらの方法で検索を行います。


まず、分かりやすくするために、バックエンドAPIに検索キーワードを投げるコンポーネントとして、BookSearch.vueを作ります。

基本はBookList.vueのコピーですが、

- 画面を開いたタイミングで本の一覧を見る必要はないので、mounted()は削除
- その代わり、axios.post()を使い、バックエンドの<bold>/api/books/search</bold>というルーティングにキーワードを送信する。

という仕様に変更しています。

#### BookSearch.vue
```html
<template>
    <h2>検索</h2>
    <div class="my-3">
        <label for="search" class="form-label">本の検索</label>
        <input type="text" id="search" class="form-control" v-model="keyword">
        <button class="btn btn-primary" v-on:click="search">検索</button>
    </div>
    <ul v-for="Book in Books" class="list-group">
        <li class="list-group-item">{{ Book.title }}</li>
    </ul>
</template>

<script>
import axios from "axios";
export default {
    name: 'BookSearch',
    data() {
        return {
            APIdata: '',
            Books: '',
            keyword: ''
        }
    },
    methods: {
        async search() {
            console.log(this.keyword);
            const url = "/api/books/search";
            // axios.post('送信先のurl','データ')
            const response =
                await axios.post(
                    url,
                    { keyword: this.keyword }
                );
            console.log(response);
        }
    }
}
</script>
```

ついでに、このコンポーネントを表示するために,vue-router周りの設定も追記しておいてください。


次に、LaravelのAPIのルーティングとコントローラーの設定を行います。

#### routes/api.php
```php
// これを追記

Route::post('/books/search', [BookController::class, 'search']);

```

#### BookController.php
```php
public function search(Request $request)
    {
        // キーワードを受け取れているか確認
        // dd($request->keyword);
        // 教科書P246参照
        $books = Book::where('title', 'like','%'.$request->keyword.'%')->get();
        
        return $books;
    }
```


【Laravel9×Vue3】本の貸し出しシステム５（本の検索）


## Vue Router をLaravel + Vueアプリに導入する

コンポーネントが増えて、１枚のページではごちゃごちゃしてきました。

ページを切り替えて表示するために、Vue側でルーティングができる<red>vue-router</red>を利用します。


### インストール

npm によるインストールを行う時には、<bold>-D</bold>のオプションを追加してください。

これによって開発用でのみ利用するパッケージであることを宣言できます。

本番サーバにデプロイする際には、vueに関するファイルはjavascriptにビルドされる（変換される）ので不要になります。

vue3に対応したvue-routerを指定するために、<bold>vue-router@4</bold>としてバージョン４をインストールします。

```terminal 
npm install -D vue-router@4
```

### app.jsの編集

vue-routerを利用することをapp.jsに指定します。

この後に作るrouterフォルダを参照元として記載します。

#### resources/js/app.js
```javascript
// bootstrapの有効化
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

import { createApp } from "vue";
import { router } from './router'; //追加
import App from "./App.vue";

const app = createApp(App);

// app.mount("#app");           // 追加前
app.use(router).mount("#app");

```

### routerファイルの設定


#### resources/js/router/index.js

```javascript
import {createRouter, createWebHistory} from 'vue-router'
// 必要なコンポーネントをインポート
import BookList from '../components/BookList.vue'
import BookAdd from '../components/BookAdd.vue'

export const router = createRouter({
    history: createWebHistory(),
    routes: [
        // 必要な数だけ書く
        {
            path: '/',
            name: 'index',
            component: BookList,
        },
        {
            path: '/add',
            // nameには一意な名前をつける
            name: 'add', 
            component: BookAdd,
        }
    ]
})

export default router
```


### App.vueの編集
VueRouterに記載したい内容を追加したい場所に<code>router-view</code>タブで指定します。

こうすることで、全ての画面で共通の内容とURIによって表示を変更したい内容を区別することができます。

#### resourve/js/App.vue
```html
<template>
    <h1>Hello World</h1>
    <router-view></router-view>
</template>

<script>
export default {
    name: 'App',
}
</script>
```


ここまでは、Vueのみの時の使い方とほとんど同じでした。

### Laravelのルーティングの編集
最後にLaravelのweb.phpに書き内容を追加します。

#### web.php
```php
Route::get('/{any}', function () {
    return view('welcome');
})->where('any','.*');
```

これはどのURIにアクセスしても（any）、LaravelからVueへの橋渡しになるwelcome.blade.phpファイルを指定するものになります。

<red>URIによるルーティングはVueRouter側で行いたい</red>ので、Laravel側ではこのような設定を基本的には利用します。

<bold>これがないと、vue-routerによるルーティングが正常に動作しません.</bold>

【Laravel9×Vue3】本の貸し出しシステム４（ルーティング）


##  LaravelのAPIにpostメソッドでデータを送信する

<red><bold>Restful API</bold></red>は、同じURIに異なる<red><bold>HTTP メソッド</bold></red> でアクセスすることで、

そのHTTPメソッドに対応した動作をサーバー側に行わさせる仕組みです。

データをサーバー側に送信したい場合は、<bold>POST</bold>メソッドによってアクセスを行います。

## バックエンド側（Laravel）の設定
ルーティングの設定(api.web)は設定が終わっていますが再掲します。

この１行で、Restful API に対応したコントローラが呼び出すことができます。

#### ルーティングの確認

```teminal
php artisan route:list
```

```GET|HEAD        / ......................................................................................... 
  POST            _ignition/execute-solution ignition.executeSolution › Spatie\LaravelIgnition › ExecuteSolu…
  GET|HEAD        _ignition/health-check ignition.healthCheck › Spatie\LaravelIgnition › HealthCheckControll…
  POST            _ignition/update-config ignition.updateConfig › Spatie\LaravelIgnition › UpdateConfigContr…
  GET|HEAD        api/books .............................................. books.index › BookController@index
  POST            api/books .............................................. books.store › BookController@store
  GET|HEAD        api/books/{book} ......................................... books.show › BookController@show
  PUT|PATCH       api/books/{book} ..................................... books.update › BookController@update
  DELETE          api/books/{book} ................................... books.destroy › BookController@destroy
  GET|HEAD        api/user .................................................................................. 
  GET|HEAD        sanctum/csrf-cookie ..... sanctum.csrf-cookie › Laravel\Sanctum › CsrfCookieController@show
```
## コントローラに追加する

上記のルーティングテーブルを見ると、<red>api/books</red>に<bold>POST</bold>でアクセスした場合、bookControllerの<bold>storeアクション</bold>が呼び出されるとされています。

このstoreアクションに、受け取ったデータをデータベースに渡して保存できるようにしました。（本来はセキュリティ対策や入力されるデータの確認のためにバリデーション等が必要です。）


#### BookController
```php
// 中略

    public function store(Request $request)
    {
        // モデルの空のインスタンスを生成
        $book = new Book();

        // 受け取ったデータをインスタンスに挿入し、DBに保存
        $book->fill($request->all())->save();
    }
```


これでデータを受け取る側の設定は完了です。

## フロントエンド側(Vue)の設定

データを送るためのコンポーネントとして<bold>BookAdd.vue</bold>を作成します。

フロントエンドからバックエンドを経由してDBにデータを送る場合、<red>DBのテーブル定義の形と送るデータの形は一致させる必要があります。</red>

今回は練習として、<bold>title</bold>と<bold>author</bold>についてはフォームから入力し、他の列名については最初からダミーデータを入れておきます。

Vueで入力フォームの内容を変数に保存するためには、<red>v-model</red>を使用します。

フォームへの入力が終わった際にはボタンをクリックすることで、イベントが発生し<red>axios.post()</red>を実行させます。


#### BookAdd.vue
```javascript
<template>
    <input type="text" name="title" id="" v-model="book.title">
    <br>
    <label for="author">著者</label>
    <input type="text" id="author" v-model="book.author">
    <br>
    <button v-on:click="send">送信</button>
    <h5>v-modelの確認</h5>
    <div>{{ book.title }}</div>
</template>

<script>

import axios from "axios";
export default {
    name: 'BookAdd',
    data(){
      return {
        // 入力フォームのデータを保存するオブジェクト
        // bookモデルで入力する内容と一致させる
        book:{
            title:'',
            author:'',
            publisher:'test',
            ISBN:'1111',
            summary:'test',
            gunre:'test',
            available:true
        }
      }
    },
    methods: {
        // clickイベントの発火時に動作するメソッド
        async send(){
            const url = "/api/books";
            // axios.post('送信先のurl','データ')
            const response = await axios.post(url,this.book);
            console.log(response);
        }
    }
}
</script>
```

注意点として、フォームを作るために定番の<form>タグは仕様しません。

<form>タグを使用すると、その内側でボタンを押した時にvueが実行する前にこのタグの仕様でページが遷移してしまい、axios.post()の部分が動作させることが出来ません。






【Laravel9×Vue3】本の貸し出しシステム３（書籍の追加機能）

## DBにある書籍データをフロントエンドで表示する機能を作成する

まず初めに今ある書籍の情報を表示するという、基本的な機能を作成していきます。

流れとしては

1.DBとモデル、ダミーデータを作る

2.コントローラーを作る

3.APIのルーティングを指定する

4.フロントエンドからAPIに対してリクエストを投げる

という流れになります。

### bookモデルの作成とデータベースの設定

モデルを作成するコマンドに、<bold>--migration</bold>オプションを付けることで、モデルとマイグレーションファイルを同時に作成できます。（便利）

```terminal
php artisan make:model Book --migration
```

Laravel9 では、作成したモデルは<bold>app/Models</bold>フォルダに追加されます。


まずはモデルを作成し
#### app/Models/Book.php

```php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    // 主キー名を変更するので明記する
    protected $primaryKey = 'book_id';

    // 入力可能な列名の指定
    protected $fillable = [
        'title',
        'author',
        'publisher',
        'ISBN',
        'summary',
        'genre',
        'available'
    ];
}

```

#### create_books_table.php
```php
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateBooksTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('books', function (Blueprint $table) {
            $table->increments('book_id');
            $table->string('title');
            $table->string('author');
            $table->string('publisher');
            $table->string('ISBN');
            $table->string('summary');
            $table->string('gunre');
            $table->boolean('available');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('books');
    }
}
```

### シードファイルの作成

シードを作成します。
```terminal
php artisan make:seeder BooksTableSeeder
```


シードファイルを編集

#### database/seeders/BooksTableSeeder
```php
<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;

class BooksTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $param = [
            'title' => 'スッキリわかるJava入門 第3版',
            'author' => '中山 清喬',
            'publisher' => 'インプレス',
            'ISBN' => '978-4295007807',
            'summary' => '発売から8年であっという間に総計40万部到達した大人気シリーズの原点。
            「どうして? 」「なぜそうなる? 」が必ずわかるJava入門書史上最強の定番書!
            読みやすさ、使いやすさをさらに磨いた増補改訂版登場!',
            'gunre' => 'Java',
            'available' => true,
        ];
        DB::table('books')->insert($param);

        $param = [
            'title' => '独習JavaScript 新版',
            'author' => 'CodeMafia 外村 将大',
            'publisher' => '翔泳社',
            'ISBN' => '978-4798160276',
            'summary' => 'JavaScript“標準教科書"が人気講師の書き下ろしで新登場!
            初心者から経験者まで。上達するために
            「押さえておきたい基礎知識」総ざらい',
            'gunre' => 'JavaScript',
            'available' => true,
        ];
        DB::table('books')->insert($param);

        $param = [
            'title' => 'キタミ式イラストIT塾 基本情報技術者 令和04年',
            'author' => 'きたみ りゅうじ',
            'publisher' => '技術評論社',
            'ISBN' => '978-4297124519',
            'summary' => '絵解きでわかるキタミ式',
            'gunre' => '基本情報',
            'available' => true,
        ];
        DB::table('books')->insert($param);
    }
}

```

このBooksTablseSeederを登録します。

#### seeds/DatabaseSeeder.php
```php
<?php
namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    public function run()
    {
        $this->call(BooksTableSeeder::class);
    }
}
```

最後に<bold>データベースの設定</bold>を忘れず行ってください。(.envファイル)

完了したら、マイグレーションを実行します。

#### マイグレーションの実行
```terminal
php artisan migrate --seed
```

データベースにダミーデータが投入されていることを確認しましょう。

## コントローラの設定

次にコントローラを作成します。

このBookControllerは、indexアクションでテーブルの本のリストを全て表示するという簡単な実装とします。

#### BookControllerの作成
```terminal
php artisan make:controller BookController
```

#### app/Http/Controllers/BookController.php
```php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
// 追加
use App\Models\Book;

class BookController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $books = Book::all();
        // eloquantをそのままreturnすると、jsonに変換してくれる。
        return $books;
    }
}
```

## ルーティングを設定する
フロントエンドからは非同期処理を利用したAPI通信を利用して、データベースのデータを受け渡しします。

Laravel側では、コントローラでAPIのエンドポイント(データを送るためのルーティング)を作成します。

routesフォルダにあるapi.phpという、デフォルトで作成されているファイルに記述します。


#### routes/api.php
```php
<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

// Laravel8から使うコントローラのuseが必要
use App\Http\Controllers\BookController;

// Laravel8から書き方が変更された
// apiに対応したrestfulにしておく
Route::apiResource('/books',BookController::class);
```
ルーティングが完了しているか確認します

```teminal
php artisan route:list
```

```GET|HEAD        / ......................................................................................... 
  POST            _ignition/execute-solution ignition.executeSolution › Spatie\LaravelIgnition › ExecuteSolu…
  GET|HEAD        _ignition/health-check ignition.healthCheck › Spatie\LaravelIgnition › HealthCheckControll…
  POST            _ignition/update-config ignition.updateConfig › Spatie\LaravelIgnition › UpdateConfigContr…
  GET|HEAD        api/books .............................................. books.index › BookController@index
  POST            api/books .............................................. books.store › BookController@store
  GET|HEAD        api/books/{book} ......................................... books.show › BookController@show
  PUT|PATCH       api/books/{book} ..................................... books.update › BookController@update
  DELETE          api/books/{book} ................................... books.destroy › BookController@destroy
  GET|HEAD        api/user .................................................................................. 
  GET|HEAD        sanctum/csrf-cookie ..... sanctum.csrf-cookie › Laravel\Sanctum › CsrfCookieController@show
```


<bold>api/book</bold>にアクセスして、APIを表示できるか確認してください。


## フロントエンド（Vue）からaxiosでAPIを取得する
ここからはVue（フロントエンド）側の設定になります。

<red>axios</red>をという外部ライブラリを利用してこのAPIのデータを取得します。

axiosはこの環境ではデフォルトでインストールされています。

(package.jsonを確認)

App.vueに記述しても良いですが、<bold>今後のことも考えて</bold>別のコンポーネントに分けておきます。

別のコンポーネントをBookList.vueとします。

#### App.vue
```html
<template>
    <div>
        <h1>Hello World</h1>
        <BookList />
    </div>
</template>

<script>
import BookList from './components/BookList.vue';

export default {
    name: 'App',
    components:{
        BookList
    }
}
</script>
```

#### BookList.vue
```html
<template>
    <ul v-for="Book in Books" class="list-group">
        <li class="list-group-item">{{ Book.title }}</li>
    </ul>
</template>
<script>
import axios from "axios";

export default {
    name: 'BookList',
    data(){
      return {
        Books:''
      }
    },
    async mounted() {
        const url = "/api/books";
        const response = await axios.get(url);
        console.log(response.data);
        this.Books= response.data;
    }
}
</script>
```

トップページにアクセスして、Vue側で取得できているか確認してください。




【Laravel9×Vue3】本の貸し出しシステム２（書籍の表示機能）


## 「書籍貸し出し管理システム」を作ろう
LaravelとVueを組み合わせてポートフォリオを作って行きましょう。

テーマとして、「<bold>書籍貸し出し管理システム</bold>」を作成します。

現状は紙で管理している書籍貸し出しの管理簿をオンラインで提供したいというニーズを満たすものを作ってみましょう。

## 設計１：要件定義について

最初の設計として<red>要件定義</red>を行います。以下のようなものが考えられます。

本来はプロジェクトの設計者が頭を悩ませて考えるところですが、いま流行りの<bold>ChatGPT</bold>に聞いてみました。


![ChatGPT:Youken](/images/2023年/1月/Youken.jpg)

```
1.書籍の登録：書籍のタイトル、著者、出版社、ISBNなどの情報を登録することができます。

2.書籍の検索：書籍の情報を元に検索をすることができます。

3.書籍の貸し出し：貸し出し可能な書籍を借りることができます。

4.書籍の返却：借りた書籍を返却することができます。

5.ユーザー管理：利用者の情報を管理することができます。

6.利用履歴の管理：利用者が借りた書籍の履歴を管理することができます。

7.アクセス制限：特定のグループのユーザーに対してアクセス制限をかけることができます。

8.レポートの作成：利用状況に関するレポートを作成することができます。
```

・・・これで十分に感じるので、これでいきましょう。


## 設計２：データベース定義について

要件定義で何を作るのかが決まったので、データの形を決めるために<red>データベースのテーブル定義</red>を行います。

これも・・・聞いてみます。

![ChatGPT:TableTeigi](/images/2023年/1月/TableTeigi.jpg)

```
書籍の貸し出し管理システムのデータベースには、以下のようなテーブルが含まれることが考えられます。

1.books：書籍の情報を格納するテーブル。
カラムには、book_id, title, author, publisher, ISBN, summary, genre, availableなどがあります。

2.users：利用者の情報を格納するテーブル。
カラムには、user_id, first_name, last_name, email, password, roleなどがあります。

3.loans：書籍の貸し出し情報を格納するテーブル。
カラムには、loan_id, book_id, user_id, loan_date, return_dateなどがあります。

4.histories：利用者の利用履歴を格納するテーブル。
カラムには、history_id, user_id, book_id, loan_date, return_dateなどがあります。

5.roles：利用者のロールを格納するテーブル。
カラムには、role_id, role_nameなどがあります。

6.access_control：アクセス制限を格納するテーブル。
カラムには、access_control_id, role_id, resource, actionなどがあります。

それに加えて、書籍と利用者、利用者とロールなどの関係を表すために、外部キー制約を使用することが望ましいです。
```

・・・これあれば何でも作れそうな気がする。

## その他の設計について

これでポートフォリオは作れる気がしますが、他に何が必要でしょうか。

![ChatGPT:SekkeiOther](/images/2023年/1月/Other.jpg)

```
設計を行う上で必要なことは以下のようなものがあります。

1.システムのアーキテクチャ: 書籍の貸し出し管理システムは、データベース、バックエンド、フロントエンドなどの要素から構成されます。
それぞれの要素の関係性や連携について設計を行う必要があります。

2.セキュリティ: 書籍の貸し出し管理システムには、利用者のパスワードや個人情報などの機密データが含まれます。
そのため、データベースや通信においてセキュリティ対策を講じる必要があります。

3.パフォーマンス: 書籍の貸し出し管理システムは、多数の利用者が同時にアクセスすることを想定しているため、データベースやアプリケーションのパフォーマンスについて設計を行う必要があります。

4.スケーラビリティ: 書籍の貸し出し管理システムは、将来的に利用者数やデータ量が増加することが予想されます。
そのため、システムのスケーラビリティについて設計を行う必要があります。

5.ユーザービリティ: 書籍の貸し出し管理システムは、多様な利用者に利用されるため、利用性について設計を行う必要があります。
```

今回、システムのアーキテクチャは前回作ったLaravel9上でVue3を実行するモノリスアーキテクチャで作成します。

セキュリティ対策はもちろん必要なので検討します。ポートフォリオなので、後半の3,4,5はそこまで優先順位は高くないでしょう。


## まずは最低限の機能を持つ動くものを作ろう。

大まかな設計が決まったのでさっそく開発をしていきますが、その際知っておくべき概念として<red>MVP(実用最小限の製品：Minimum Viable Product)</red>というものがあります。

MVPとは、想定するユーザーに対して「コアとなる価値」を提供でき、有効なフィードバックが得られるだけの最小限の機能を持つ製品のことを指します。

この「書籍貸し出し管理システム」において、最小限の機能といえば何に当たるでしょうか。

（画像はもうしつこいので省略）

```
MVP(Minimum Viable Product)とは、最小限の機能を持った製品のことを指します。

つまり、最低限の要件を満たした製品を最短の時間で市場に出すことで、顧客からのフィードバックを受け取り、製品の開発を進めていくことを目的とします。

この設計において、MVPに当たるのは、以下のような部分だと考えられます。

1.書籍の登録：書籍のタイトル、著者、出版社、ISBNなどの情報を登録することができる機能。

2.書籍の検索：書籍の情報を元に検索をすることができる機能。

3.書籍の貸し出し：貸し出し可能な書籍を借りることができる機能。

4.書籍の返却：借りた書籍を返却することができる機能。

5.ユーザー管理：利用者の情報を管理するこ利用者の情報を管理することができる機能。

これらの機能を最低限実装した状態で、利用者が書籍を借りることができるようになっていれば、MVPと言えます。

MVPにおいては、書籍のジャンルやカテゴリー分類、貸し出し履歴の管理、アクセス制限などの機能は、後に実装することが望ましいです。

また、MVPでは、システムのセキュリティやパフォーマンスは基本的なものに留めることが望ましいです。
```

ということで、この５つの機能をまずは開発した上でデプロイを行うことを目標にします。

この中でも一番簡単な「書籍の登録」について、次の記事から記載していきます。


【Laravel9×Vue3】本の貸し出しシステム１（要件定義）


## 環境構築
LaravelとVueを組み合わせてポートフォリオを作るための環境構築を行っていきます。

参考:[Laravel9のVite環境でVue.js 3を利用する方法](https://reffect.co.jp/laravel/laravel9_vite)

## 組み合わせる方法について

主にLaravelの現行バージョンでは、主に２つのパターンが存在します。


#### １.Laravelの上にVueをインストールし、 View層のBladeテンプレート上でVueを実行する方法

モノリスアーキテクチャと呼ばれるシンプルな構造です。

同じサーバで動作しており、Vueとの連携にはLaravelのサポートが入るので複雑さは低減されます。

シンプルなので新しいアプリケーションを作るときに推奨される形ですが、事業が成長してアプリの規模が大きくなるとコード量が増加し依存が複雑になるため開発難易度が上がります。


#### ２.VueとLaravelを別の環境（サーバー）にインストールし、LaravelをバックエンドのAPIサーバとして利用する方法

フロントエンド・バックエンド分離という構造です。

完全に別のサーバとして動作するので、VueとLaravel間の連携は全て自力で解決する必要があります。

事業が成長してアプリケーションの大きくなったとき、まずフロントエンドとバックエンドを分けることで複雑さを低減するために取り入れられます。

参考：[Vue on Laravelというモノリスを解体してNuxtへ移行しました！](https://techblog.roxx.co.jp/entry/2018/12/12/120000)


今回は１番の、Laravelの上にVueをインストールする方法を紹介します。


### 利用するバージョンについて
記事の記述にあたって利用した環境のバージョンは下記の通りでした。

php:8.2
Laravel:9.19
Node:18.13
vue:3.2

Laravelのサポート状況が下の図のようになっていたので、教科書で利用した６系から3世代進んで９系を利用します。


![Laravelサポート状況](/images/2023年/1月/Laravel対応表.png)

### 最新のLaravel9をインストール

バージョン指定をする必要がないので下記のコマンドでダウンロードしました。11月22日現在の最新バージョンはLaravel8.6.4 でした。

```terminal
composer create-project laravel/laravel --prefer-dist laravel_vue_app
```

インストールが完了したら、アプリケーションのディレクトリに移動しましょう

```terminal
cd laravel_vue_app
```

#### laravel/ui及びVueをインストール
続いて、Laravel上でフロントエンドを開発する環境をサクッと作ってくれる<red>laravel/ui</red>をインストールします。

これもバージョンを指定なしで、サクッと下記のコマンドでダウンロードします。

```terminal
composer require laravel/ui
```

このlaravel/uiを使ってvueをインストールする準備をします。

```terminal
php artisan ui vue
```

#### package.jsonを変更してインストールする。

laravel/uiによって作られるpackage.jsonは、2023年1月24日ではこんな感じでした。

vueのバージョンは3になっており、viteで動いていることが分かります。

```json
{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "@vitejs/plugin-vue": "^4.0.0",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.3",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "sass": "^1.56.1",
        "vite": "^4.0.0",
        "vue": "^3.2.37"
    }
}
```

変更が完了したらインストールします。

```terminal
npm install
```

### viteを実行
インストールが完了したらviteを実行して下さい。

```terminal
npm run dev
```

### Laravelの実行

さらにLaravelも実行して、動作を確認します。

```terminal
php artisan serve
```

![Laravel9](/images/2023年/1月/Laravel9.png)


### BladeにVueコンポーネントを追加するポイントを作る

welcome.blade.phpからVueを呼び出せるように、<bold>appのid属性</bold>と、<bold>js/app.js</bold>の読み込みを追加します。

ここで<red>@viteディレクトブ</red>を利用することで、app.jsファイルやapp.cssファイルを読み込むことができます。

#### resources/views/welcome.blade.php
```php
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel Vite Vue</title>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>
```

### App.vueを追加する

必須では無いのですが、分かりやすさ重視のためにApp.vueを作ります。


#### resources/js/App.vue
```html
<template>
    <h1>Hello World</h1>
</template>
<script>
export default {
    name: 'App'
}
</script>
```

このファイルをapp.jsから呼び出せるように修正します。

#### resources/js/app.js

```javascript
import './bootstrap';
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.mount("#app");
```


![HelloWorld](/images/2023年/1月/HelloWorld.png)

注意点として、<red>php artisan serve</red>コマンドでLaravel側のサーバーを動かす際には、別のターミナルの窓を用いて、<red>npm run serve</red>コマンドでVueも起動して下さい。

Vueを起動しない場合、下のような画面になります。

![Vueを起動していないとき](/images/2023年/1月/VueError.png)

【Laravel９×Vue3】開発環境の構築について


## データベースの基礎から分散データの扱いまで

めちゃくちゃ面白い。Twitterで紹介されてるのを見て即買ったけど当たりだった。

ただあまりにも長すぎるので、半分読んだ時点で振り返り。

<bold>オライリー三大鈍器</bold>の一つとして登録したい。

（他は、「JavaScript 第7版」と今度出る「詳解　システム・パフォーマンス　第２版」ですかね・・）

DBスペシャリスト落ちた時に分散システム周りの単語が全然理解できなかったけど、これ読んでるとめちゃ理解が進む気がするなあ。

やっぱり原理原則に一度触れておくのは大事。

### 第１部 信頼性、スケーラビリティ、メンテナンス性に優れたアプリケーション
・アプリケーションは演算指向ではなく<red><bold>データ指向</bold></red>である。CPUの処理能力が原因で問題が起こることは少なく、<red>データの量が多いことや複雑であること、素早く変化すること</red>が問題となる。

・データシステム（DBやキャッシュ、キューなど）を設計する上で課題となるのは、信頼性、スケーラビリティ、メンテナンス性の３つ

```
信頼性・・・何か問題が生じたとしても正しく動作し続けること。
スケーラビリティ・・・負荷の増大に対してシステムが対応できる能力のこと。
メンテナンス性・・・メンテナンスがしやすいこと（運用性、単純性、進化性を持つこと）。
```

### 第２部 データモデルとクエリ言語
・代表的なデータモデルとして<bold>リレーショナルモデル</bold>があり、それ以外に非リレーショナルの<bold>NoSQL</bold>がある。

・NoSQLのうち代表的なものは<bold>ドキュメントモデル</bold>、<bold>グラフモデル</bold>があり、それぞれ使い分けることが大事。

```
リレーショナルモデル・・・非常に汎用性があるモデル。
ドキュメントモデル・・・フォルダ構成のように、ほとんどが１対多で構成されたり、ノード間の関係が薄い場合。
グラフモデル・・・ドキュメントとは逆で、ほとんどが多対多で構成されており、ノード間の関係が強い場合。
```

### 第3部 ストレージと抽出
・ストレージエンジンは<bold>トランザクション処理（OLTP）</bold>に最適化したものと<bold>分析（OLAP）</bold>に最適化したものがある。

```
トランザクション処理・・・一般ユーザーからの大量のリクエストを受けるが、１つのリクエストに必要なレコードは少量。
分析処理・・・・主にアナリストが使用するもので、リクエストの数は少ないが、１つのリクエストに大量のレコードが必要。
```

・トランザクション処理には<bold>log-structuredの考え方</bold>と<bold>インプレースで更新を行う考え方</bold>がある。

```
log-structuredの考え方・・・ファイルに対して追記と古いものの削除だけを行い、更新は決して行わない。
インプレースで更新を行う考え方・・・ディスクを更新可能な固定サイズの集合とする。
```

・分析処理には<bold>列指向のストレージ</bold>が利用されている。
```
列指向のストレージ・・・行ごとではなく列ごとにデータをまとめる方法。分析は列ごとに行うことが多いため。
```

### 第4部 エンコーディングと進化

（追記します）



データ指向アプリケーションデザイン　感想（前半）

前回：[Vue3でVuetifyを利用する　①](https://blog-tukki.com/posts/221221)


## 作成したプロジェクトにダッシュボードのサンプルを作る

新しく作成されたプロジェクトのフォルダは、従来のVue CLIを使った場合と同じ構成です。

srcフォルダのApp.vueを開き、下記のように編集してください。

```html
<template>
  <v-app>
    <v-navigation-drawer color="primary">
      <div class="pa-5">
        <h2>ナビゲーションバー</h2>
        <div class="pt-2">
          <p>
            この部分は画面サイズが1280pxより大きい時のみ表示される設定です。
          </p>
        </div>
      </div>
    </v-navigation-drawer>

    <v-app-bar color="accent" absolute="true">
      <div class="pa-5">
        <h2>ヘッダー</h2>
        <p>この部分は「headerタグ」に変換されます。</p>
      </div>
    </v-app-bar>

    
    <v-main style="height: 200vh">
      <v-container fluid>
        <v-card class="mx-auto my-10">
          <p>
            「v-app-bar」と「v-footer」はデフォルトでは画面上下に固定されます(CSSのpositon="fixed"の状態)。
          </p>
          <p>「absolute="true"」属性を付けると、スクロールに従い移動します。</p>
        </v-card>

        <v-card class="mx-auto my-10">
          <p>
            「v-app-bar」と「v-footer」はデフォルトでは画面上下に固定されます(CSSのpositon="fixed"の状態)。
          </p>
          <p>「absolute="true"」属性を付けると、スクロールに従い移動します。</p>
        </v-card>

        <h3>公式から完コピのカルーセルパネルの例</h3>
        <v-carousel>
          <v-carousel-item
            src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
            cover
          ></v-carousel-item>

          <v-carousel-item
            src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg"
            cover
          ></v-carousel-item>

          <v-carousel-item
            src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
            cover
          ></v-carousel-item>
        </v-carousel>
      </v-container>
    </v-main>

    <v-footer app absolute="true" class="bg-teal">
      <div class="pa-5">
        <h2>フッター</h2>
        <p>この部分は「footerタグ」に変換されます。</p>
      </div>
    </v-footer>
  </v-app>
</template>
<script>
export default {
  name: "App",
};
</script>
```
## レイアウトに関するコンポーネント

#### v-app
Vuetifyを利用する際に必ず必要なタグ（コンポーネント）です。

<red>全てのVuetifyタグは必ずこのv-appタグの中に含まれる必要があります。</red>

注意したい点として、これは全てのコンポーネントにv-appタグが必要というわけではありません。

全てのコンポーネントの親（つまりApp.vueにあるAppコンポーネント）にさえ配置すれば、その子のコンポーネント達はv-appタグの中に含まれることになります。


#### v-app-bar
サイトの上部に配置するヘッダーやナビゲーションのコンポーネントを作成してくれるタグです。

<red>htmlのheaderタグ</red>に変換されます。

ナビゲーションとして利用することが念頭にあるので、デフォルトでは画面上部に固定されます(CSSのpositon="fixed"の状態)。


#### v-navigation-drawer
サイトの左部に配置するナビゲーションのコンポーネントを作成してくれるタグです。

<red>htmlのnavタグ</red>に変換されます。

location="right"属性を追加することで、サイトの右側に固定することができます。

Vuetify公式での使い方を見ると、このタグを２つ利用し左右二つのサイドバーを作成していることがわかります。


#### v-footer
サイトの下部に配置するフッターのコンポーネントを作成してくれるタグです。

<red>htmlのfooterタグ</red>に変換されます。

v-app-barと同様に、デフォルトでは画面下に固定されています。

Vue3でVuetifyを利用する　②


## 概要
・Dockerやコンテナ技術についての説明から始まり、EC2・Fargateの使い分けと・ECS・EKSの使い分け、およびその組み合わせはAWS Well-Architectedフレームワークの観点からどれが最適かをそれぞれ論じている。

そのあとECS × Fargate の組み合わせが現時点では最善として、実際にこの構成を作ってみる演習を後半で行なっている。


## ◯良かったところ

・演習が単にECS on Fargeteを触ってみようで終わらず、Well-Architectedフレームワークに対応した構成を実際に作ることができた（下の構成図を作る）。さらにCodeシリーズを使ったCI/CDの作り方などまでかなり幅広くカバーされていた。

![演習サンプル](/images/2022年/12月/AppSamplePic.png)

・演習で利用するサンプルアプリケーションがReact(Blitz.js+Prisma) + Go(echo)のマイクロサービス構成でレベルが高く、この部分だけでも参考になり面白かった。

・この後に受験したAWS認定のSAAの勉強にかなり役に立った。

・書籍が全てフルカラーで図も大量に載っており、クラウドの基本は分かっている必要があるがかなり分かりやすかった。

## ×よくなかったところ
・Cloud9を動かすEC2のELB容量を拡張すると、毎回Cloud9から接続ができなくなり作り直す羽目になった。

→謎現象。Cloud9のバグっぽいけど対処方法が分からなくて10回くらい作り直した。。

・演習をチマチマ進めていたら、AWSに100ドル課金する羽目になった（白目）
![100ドル超えたorz](/images/2022年/12月/2212awspay.png)

→VPCエンドポイント（インターフェイス型）が維持するだけで課金が必要で（だいたい１ヶ月で１箇所10ドル弱）、演習の序盤で３箇所くらい作って以降は、さっさと終わらせないと課金がどんどん増えていく。この辺注意書きでもあれば良かったなーとは思う。（のんびり進めてたら気付けば40ドルくらいになっていた。）

AWSコンテナ設計・構築[本格]入門　感想


## Vuetifyについて

<bold>Vuetify</bold> はGoogleが提唱した<blue>マテリアルデザイン</blue>という方法論に則って作られたVue.js用のUIライブラリです。デザインの知識がなくても、簡単に使いやすいユーザーインターフェイスを持ったコンポーネントを実装できます。


[マテリアルデザイン:wikipedia](https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3)

[Material Design:google](https://m3.material.io/)


なお、Vuetifyのようなデザインをサポートしてくれるフレームワークとしては、他にも以下のような選択肢があります。状況によって使い分けることができると便利なので、一通り触ってみると良いと思います。


[BootstrapVue](https://bootstrap-vue.org/)

[BootStrap5](https://getbootstrap.jp/docs/5.0/getting-started/introduction/)

[Bluma](https://bulma.io/)

[Tailwind CSS](https://tailwindcss.com/)

[とほほのCSSフレームワーク入門](https://www.tohoho-web.com/ex/css-framework.html)

## Vuetifyのインストールしたプロジェクトを新規に作成する

既存のVueプロジェクトに追加する方法と、設定が完了したものを新規に作る方法がありますが、この新規に作る方法がめちゃくちゃ簡単なのでこちらを紹介します。


### Vite（ヴィート）について

今回インストールするVuetifyは、Vue3に対応したバージョン3.0になります。Vuetify3.0の公式サイトには、Vueプロジェクトの作成にはVue CLIではなく<bold>Vite</bold>を利用することを推奨する表示があります。

Viteとは、フランス語で「早い」という意味を持つ言葉で、Vue.jsと同じ作者が作成した「次世代フロントエンドツール」だそうです。

[Vite](https://ja.vitejs.dev/)

大層な名前や説明が付いてるなぁと感じますが、本当にめちゃくちゃ早いし、VueだけでなくReactなど他のフロントエンドフレームワークの開発にも利用することができるプログラムです。

Vuetifyを新規プロジェクトとして作成するとき、内部でこのViteを利用する方法が公式から提供されています。

### yarnについて

Vuetifyをインストールする際に<bold>yarn</bold>を使用することが指定されているので、この説明も行います。

yarnとは、npmと互換性のあるJavaScriptのパッケージマネージャーで、Facebookが開発したものです。

基本的な機能はほぼ違いがないので、指定されていない場合は好みで好きな方を使えば良いと思います。（今回は指定があるのでyarnを使います。）

インストールにはnpmを利用します。

```terminal
npm install -g yarn
```

[npmから乗り換えてわかったYarnの4つのメリット](https://ics.media/entry/19384/)

[npm互換のJavaScriptパッケージマネージャーYarn入門](https://ics.media/entry/13838/)

### Vuetifyの入ったVue3プロジェクトを作成

早速yarnを使ってVuetifyの入ったVue3プロジェクトを作成していきましょう。

```terminal
yarn create vuetify
```

#### プロジェクト名の決定

上記コマンドを通すと、まず最初にプロジェクト名を聞かれますので、適当に入力します。

```terminal
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vuetify@1.0.5" with binaries:
      - create-vuetify
[##############] 14/14
Vuetify.js - Material Component Framework for Vue

? Project name: › vuetify-project
```
#### 追加ライブラリの決定

次にVuetify以外に追加しておきたいライブラリを指定します。

Defaultで良いですが、折角なので名前が上がっている２つのライブラリを紹介します。

<bold>VueRouter</bold>・・・フロントエンド側でURLに対応したページを構成するための、<red>ルーティングを行うためのライブラリ</red>です。

[はじめてのVue Router(基本編):アールエフェクト](https://reffect.co.jp/vue/first-time-vue-router)

<bold>Pinia</bold>・・・Vue上でコンポーネント間でPropsやEmitを使った状態(state)の伝達を<red>グローバルに行なって管理をすることができるライブラリ</red>です。

[Vue.js Piniaを使って状態管理(データの共有)を行ってみよう:アールエフェクト](https://reffect.co.jp/vue/vue-pinia)

なお従来のVue2では<bold>Vuex</bold>というライブラリが使われていましたが、Vue3からはこのPiniaが推奨されているそうです。（知らんかった）

```terminal
? Which preset would you like to install? › - Use arrow-keys. Return to submit.
❯   Default (Vuetify)
    Base (Vuetify, VueRouter)
    Essentials (Vuetify, VueRouter, Pinia)
    Custom (Choose your features)
```

#### TypeScriptの利用の決定

<bold>TypeScript</bold>は、Microsoftが開発した代替JavaScript(AltJS)と呼ばれる種類の言語の一つで、JavaScriptに型定義などの機能を追加したものです。型のチェックを逐一行うことで、プログラムの品質を高めることが期待できます。

2022年の時点では、フロントエンドの開発にはTypeScriptを使うことがほぼ必須となってきているようですが、今回はJavaScriptで書きたいのでNoを選びます。


```terminal
? Use TypeScript? › No / Yes
```

#### パッケージ管理ツールの指定

どのパッケージ管理ツールを利用するかを聞かれていますが、当初と同じyarnで良いでしょう。

```terminal
? Would you like to install dependencies with yarn, npm, or pnpm? › - Use arrow-keys. Return to submit.
❯   yarn
    npm
    pnpm
    none
```

ここまで進むと、指定したライブラリとVuetifyを含んだVue3プロジェクトが作成されたと思います。

プロジェクトのフォルダに移動したあと、下記コマンドでサーバーを起動してください。

今回はnpmではなくyarnでプロジェクトを作成したので、yarnを使って起動します。


```terminal
yarn dev
```
下記のような画面が出ればOKです。

![vuetify開始画面](/images/2022年/12月/vuetify_start.png)

次：[Vue3でVuetifyを利用する②](https://blog-tukki.com/posts/230112)


Vue3でVuetifyを利用する①


## 概要

## ◯良かったところ

## ×よくなかったところ