
## Laravel Sanctum でログイン機能を実装する

Laravel Sacntum を利用してログイン機能を実装していきます。

Sanctum は、<red>API トークンの発行</red>と<red>SPA 認証</red>という２つの機能を持ったパッケージです。

<bold>API トークンの発行の機能</bold>は、外部に公開するための API を作成した場合に、その API を利用したいユーザーに対して、API トークンを発行することができる機能です。

<bold>SPA 認証の機能</bold>は、Vue や React などの<red>SPA（Single Page Application）</red>を作成する場合に、Laravel の組み込みのクッキーベースのセッション認証サービスを利用するための機能です。

今回は Sanctum の<bold>SPA 認証の機能</bold>を利用してログイン機能を実装していきます。これによって、<red>CSRF 対策、XSS 対策、セッション管理</red>などを行うことができます。

[公式：Laravel Sanctum SPA 認証](https://readouble.com/laravel/9.x/ja/sanctum.html#spa-authentication)

### Laravel Sanctum のインストール

Laravel Sanctum は Laravel8.6 から標準でインストールされているので、インストールする必要はありません。

念のため、composer.json に`"laravel/sanctum"`が記載されているか確認してください。

#### composer.json の例

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

### Cookie の設定

Laravel Sanctum は、CSRF 対策、XSS 対策、セッション管理などを行うために、<bold>Cookie</bold>を利用します。

Cookie を利用するためには、`config/session.php`の`driver`を`cookie`に設定します。

#### config/session.php

```php
    'driver' => env('SESSION_DRIVER', 'cookie'),
```

### ミドルウェアの設定

<red>全てのリクエストに対してログインの有無を判定する</red>ために、Sanctum が提供するミドルウェアを利用します。

Laravel でどのミドルウェアを利用するかの設定は、`app/Http/Kernel.php`に記載されています。

`app/Http/Kernel.php`を開き、デフォルトではコメントアウトされている`api`のミドルウェアの`EnsureFrontendRequestsAreStateful`を利用できるようにします。

#### app/Http/Kernel.php

```php
        'api' => [
            // コメントアウトを外す
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
```

### ログイン機能の実装

それでは、ログイン機能を実装していきます。

フロントエンド側でログインフォームを作成し、ログインボタンを押すと、ログイン処理を行うようにします。

ログイン処理を行うコントローラとして、LoginController を作成します。
(慣例として、認証処理を行うコントローラーを Auth ディレクトリに作成します。)

```bash
$ php artisan make:controller Auth/LoginController
```

#### app/Http/Controllers/Auth/LoginController.php

```php
<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Auth;

class LoginController extends Controller
{
    public function login(Request $request)
    {
        $credentials = $request->validate([
            'email' => 'required|email',
            'password' => 'required',
        ]);

        if (Auth::attempt($credentials)) {
            $request->session()->regenerate();

            return response()->json([
                'message' => 'ログインしました',
            ]);
        }

        return response()->json([
            'message' => 'メールアドレスまたはパスワードが間違っています',
        ], 401);
    }
}
```

<red>login メソッド</red>では、email と password をリクエストから取得し、Auth::attempt メソッドで認証を行います。

<red>Auth::attempt メソッド</red>は、認証に成功した場合は true を返し、失敗した場合は false を返します。

認証に成功した場合は、`session()->regenerate`メソッドでセッション ID を再生成し、`response()->json`メソッドでログイン成功のメッセージを返します。

認証に失敗した場合は、`response()->json`メソッドでログイン失敗のメッセージを返します。

### ログアウト機能の実装

ログアウト機能を実装していきます。

ログアウト処理を行うコントローラとして、LogoutController を作成します。

```bash
$ php artisan make:controller Auth/LogoutController
```

#### app/Http/Controllers/Auth/LogoutController.php

```php
<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Auth;

class LogoutController extends Controller
{
    public function logout(Request $request)
    {
        Auth::logout();

        $request->session()->invalidate();

        $request->session()->regenerateToken();

        return response()->json([
            'message' => 'ログアウトしました',
        ]);
    }
}
```

<red>logout メソッド</red>では、`Auth::logout()`メソッドでログアウトを行います。

ログアウト後は、`session()->invalidate`メソッドでセッションを破棄し、`session()->regenerateToken`メソッドでセッショントークンを再生成します。

### ルーティングの設定

それでは、ログイン機能とログアウト機能を実装したコントローラをルーティングに設定していきます。

#### routes/api.php

```php
<?php

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

Route::post('/login', [App\Http\Controllers\Auth\LoginController::class, 'login']);
Route::post('/logout', [App\Http\Controllers\Auth\LogoutController::class, 'logout']);
```

### sanctum 認証ガードの設定

ログインした後にしかアクセスできないように、Sanctum が提供する認証ガードを利用します。

認証ガードとは、認証を行うための仕組みのことです。

認証ガードは、`config/auth.php`に記載されています。

#### config/auth.php

```php
    'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],

        'api' => [
            'driver' => 'sanctum',
            'provider' => 'users',
        ],
    ],
```

<red>api</red>の部分が、Sanctum が提供する認証ガードです。

<red>driver</red>の部分が、認証ガードのドライバーです。

<red>sanctum</red>の部分が、Sanctum が提供する認証ガードのドライバーです。

### ログイン後のみ有効なルーティングの設定

それでは、ログイン後のみ有効なルーティングを設定していきます。

考え方として、ログイン後のみ有効なルーティングは、ログイン前のみ有効なルーティングとは別に設定します。

ログイン後のみ有効なルーティングは、`middleware`メソッドを利用して、`auth:sanctum`ミドルウェアを設定します。

このとき、`auth:sanctum`ミドルウェアは、`config/auth.php`に記載されている`guards`の`api`の`driver`の値を参照します。

ログイン後のみ有効なルーティングを設定するには、単品のみの場合と`group()`を使用し複数まとめる場合の 2 通りの方法があります。

#### routes/api.php

```php
// 略


// ログイン後のみ有効

// 単品のみの場合
Route::middleware('auth:sanctum')->apiResource('/users', UserController::class);

// 複数まとめる場合
Route::group(["middleware" => ["auth:sanctum"]], function () {

    Route::get('/books/getRakutenAPI', [BookController::class, 'getRakutenAPI']);
    Route::post('/books/search', [BookController::class, 'search']);
    Route::apiResource('/books', BookController::class);
});

// 単品の場合
Route::middleware('auth:sanctum')->apiResource('/loans', LoanController::class);

```

### フロントエンド側の実装

それでは、フロントエンド側でログイン機能とログアウト機能を実装していきます。

#### ログイン機能の実装

まずは、ログインフォームを作成します。

SPA を認証ログインする前には、最初に`/sanctum/csrf-cookie`に GET リクエストを送信し、CSRF 保護を初期化する必要があります。

そのため、`/login`にアクセスした際に、`/sanctum/csrf-cookie`に GET リクエストを送信するようにします。

Login.vue を作成し、以下のように記述します。

ログインボタンから呼び出される send メソッドでは、axios を利用して、`/api/login`に`email`と`password`を送信します。

#### resources/js/components/Login.vue

```html
<template>
  <div class="container">
    <div>
      <label for="email" class="form-label">メールアドレス</label>
      <input type="email" id="email" class="form-control" v-model="email" />
    </div>
    <div>
      <label for="password" class="form-label">パスワード</label>
      <input type="password" id="password" class="form-control" v-model="password" />
    </div>
    <button type="button" class="btn btn-info" v-on:click="send">ログイン</button>
  </div>
</template>
<script>
  import axios from 'axios';

  export default {
    name: 'Login',
    data() {
      return {
        email: '',
        password: '',
      };
    },
    methods: {
      async send() {
        const url = '/api/login';

        // CSRF保護を初期化
        const csrfCookie = await axios.get('/sanctum/csrf-cookie');

        // axios.post('送信先のurl','データ')
        const response = await axios.post(url, {
          email: this.email,
          password: this.password,
        });
        console.log(response);


        // ログインに成功したら、トップページに遷移する
        this.$router.push('/');
      },
    },
  };
</script>
```

#### ログアウト機能の実装

同様にログアウト機能も実装します。

これはボタンを押せばログアウトできるだけの簡単なものです。

#### resources/js/components/Logout.vue

```html
<template>
  <div class="container">
    <button type="button" class="btn btn-info" v-on:click="send">ログアウト</button>
  </div>
</template>
<script>
  import axios from 'axios';

  export default {
    name: 'Logout',
    methods: {
      async send() {
        const url = '/api/logout';
        // axios.post('送信先のurl','データ')
        const response = await axios.post(url);
        console.log(response);

        // ログアウトに成功したら、X-CSRFクッキーを削除する
        document.cookie = 'XSRF-TOKEN=; expires=0;';

        // ログアウトに成功したら、ログインページに遷移する
        this.$router.push('/login');
      },
    },
  };
</script>
```

#### ルーティングの設定

vue-router にこれらのルーティングを設定します。

ただし、ログアウトはログインしていないと使えないので、ログインしているかどうかをチェックする処理を`beforeEnter`に記述します。

beforeEnter は<red>ナビゲーションガード</red>という機能の一つで、ルーティングにアクセスする前に実行される処理です。

ログインしているかは、Cookie に保存されている`XSRF-TOKEN`を持っているかでチェックすることにします。


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

```javascript

import Login from '../components/Login.vue'
import Logout from '../components/Logout.vue'

// 中略

        {
            path: '/login',
            name: 'login',
            component: Login,
        },
        {
            path: '/logout',
            name: 'logout',
            component: Logout,
            beforeEnter: (to, from, next) => {
                if (document.cookie.includes('XSRF-TOKEN')) {
                    next();
                } else {
                    next('/login');
                }
            }
        },
```

Cookie に保存されている`XSRF-TOKEN`は、ログイン時に`/sanctum/csrf-cookie`に GET リクエストを送信した際に、Laravel が自動的にセットしてくれたものです。

<red>Cookieの値はユーザーが簡単に編集することができる</red>ので、これを用いてログイン状態を判定するには注意が必要ですが、今回は簡単のためにこの方法を採用します。

cookieの値を編集して、「書籍一覧」ページなどを無理やり表示することはできますが、本のデータや貸出情報などの重要な情報を配信するバックエンドAPIからデータを取得するにはsanctumによる認証を通す必要があるので、今回はこの方法でも問題ないと思います。

ついでに、ナビゲーションにリンクを追加しておきます。

#### App.vue

```html
    <div class="container">
        <h1>Hello World</h1>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <router-link to="/" class="navbar-brand">書籍一覧</router-link>
            <router-link to="/add" class="navbar-brand">書籍の追加</router-link>
            <router-link to="/search" class="navbar-brand">書籍の検索</router-link>
            <router-link to="/user" class="navbar-brand">ユーザ一覧</router-link>
            <router-link to="/login" class="navbar-brand" >ログイン</router-link>
            <router-link to="/logout" class="navbar-brand">ログアウト</router-link>
        </nav>

        <router-view></router-view>
    </div>
```

【Laravel9×Vue3】本の貸し出しシステム10（ログイン機能）


## 認証・認可について

ログインやセッションなどの<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を利用する①


## 概要

## ◯良かったところ

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

モノリスからマイクロサービスへ　感想

aws amplify studioではじめるフロントエンド+バックエンド統合開発　感想


## Web API について

<red>API(Application Programable Interface)</red> とは、プログラムを使って、外部のOSやソフトウェアを利用できるようにした仕組みのことを指します。

例えば、「Windows API」というものを利用することで、プログラムから簡単にWindowsのファイルシステムを操作することができます。

このうち、<red><bold>Web API</bold></red>というものは、このAPIのやりとりをHTTP/HTTPSベースで実現することを指します。

HTTPの<yellow>Getメソッド</yellow>や<yellow>Postメソッド</yellow>などを決められた規則に従って利用することで、相手の<yellow>API サーバー</yellow>から、データを取得したり登録することができます。


JavaScriptでは、このようなWeb APIを利用するときには、 <red>非同期処理</red>というものが利用されます。

歴史的な経緯から非同期処理を実現する方法がいくつか存在しますが、最新の<red>async/awiat(エィシンク/アウェイト)</red> を使用してみます。

## とりあえず fetch と async と await を使ってみる。

Web APIの分かりやすい例として、気象庁のWeb APIから今日の天気予報のデータを取得してみます。

(実際は公式のAPIサービスというわけではなく、リクエストしたら JSON データが取得できる状態だそうです。)

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


JavaScriptで外部からデータを取得するには、非同期処理と一緒に、<code>fetch()</code>メソッドというものを利用します。


```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>
  <script>
    // API配信のURL
    // 130000は東京のエリアコード

    const url_Tokyo = "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json"

    const getWeather = async (url) => {
        // 指定したurlのAPIからjsonデータを取得
        const response = await fetch(url)
        // jsonデータをオブジェクトに変換する
        return response.json()
    }

    const getData = async () => {
        const data = await getWeather(url_Tokyo);
        console.log(data);
        console.log(data.publishingOffice);
        console.log(data.reportDatetime);
        console.log(data.targetArea);
        console.log(data.text);
        
    }

    getData()
  </script>
</html>
```

下記のような天気予報の概要が取得できます。現在は梅雨です。

![天気予報サンプル](/images/2021年/6月/tenkiyoho.png)

## 非同期処理について

JavaScrip は **シングルスレッド** でのみ実行される言語です。<br/>
スレッドとは１つの処理の流れのブロックみたいなものです。<br/>
Java では **マルチスレッド** といって、複数のコードを並列して実行する機能がサポートされています。<br/>
マルチスレッドの機能が利用できると、メインの処理を１つのスレッドで動かす裏で、サーバーから画像や動画などのデータをダウンロードするという時間のかかる処理を別のスレッドで行うことができます。<br/>
しかし JavaScript はマルチスレッドが利用できません。そのため、同時に１つの処理しかできないため **データをダウンロードする** ような時間のかかる処理が始まると、別の処理がストップしてしまいます。<br/>

この問題に対処する仕組みが **非同期処理** です。<br/>

ちなみに _addEventListener("click",function(){})_ で定義されるイベント処理は非同期処理の一種になります。<br/>

### Promise(ES2015~)

JavaScript の非同期処理は、その実行結果が **Promise オブジェクト** に含まれているという形で表現します。<br/>
ここで、データをダウンロードする非同期処理を考えます。データのダウンロードという処理は、問題なく成功する場合と通信エラーなどで失敗する場合があります。<br/>

Promise オブジェクトはこの成功したときの処理を **resolveメソッド** 、失敗したときの処理を **rejectメソッド** で定義し、こんな感じで Promise インスタンスを作成します。

```javascript
const promise = new Promise((resolve, reject) => {
  
  resolve(
      // 非同期処理として実行したい内容
  );

  reject(
      // 失敗したときに実行したい内容（エラーを表示など)
  );
  
});

// 簡略化した書き方
const promiseResolve = Promise.resolve()
const promiseReject = Promise.reject()

```

サンプルで利用した<code>fetch()</code>メソッドは、データのダウンロードという処理をこの Promise オブジェクトを利用して表現しています。<br/>
fetch() メソッドは戻り値として指定した url からダウンロードするという処理を<code>resolve()</code>の中に持った Promise オブジェクトを返してくれます。<br/>

Promise が実装されて以降、データのダウンロードなどの処理を行うライブラリはほとんどが戻り値は Promise オブジェクトの形になっています。<br/>
ですので、最初の頃は _new Promise()_ といった処理を書く機会は少ないと思います。<br/>

### async/await(ES2017~)

<code>async/await</code> は基本的にはセットで使います。<br/>

**async** は関数定義を行うときに使用するキーワードです。_async_ をつけて定義した関数は戻り値として Promise インスタンスを返すようになります。

```javascript
async function doAsync() {
  return "値";
}

// アロー関数で書く
const doAsync = async () => {
  return "値";
}

// 同じ意味
function doAsync() {
  return Promise.resolve("値");
}

//これも同じ
function doAsync() {
  return new Promise((resolve, reject) => {
    resolve("値");
  });
}


```

**await** は _async_ で定義された関数内で利用できる式です。<br/>
右辺に Promise インスタンスを置きます。そのPromise インスタンスが成功または失敗するまで待機し、完了し次第式の処理を再開します。

```javascript
async function doAsync() => {
    // 非同期処理
}

async function asyncMain() => {
    // doAsync完了まで待つ
    // doAsyncが成功すれば、その結果をnumに代入
    // doAsyncが失敗すれば、エラーを発生させる
    const num = await doAsync();
    // 次の行はdoAsyncの非同期処理が完了されるまで実行されない
    console.log("この行は非同期処理の完了後に実行される");
}

```

非同期処理は少し難解な箇所ですが、サーバからデータを取得するという頻繁に行う動作で必須ですのでぜひ理解してください。<br/>

参考

[気象庁の天気予報 JSON ファイルを WebAPI 的に利用したサンプルアプリ](https://anko.education/apps/weather_api)<br/>
[新しい気象庁サイトから JSON データが取得できる件](https://mindtech.jp/?p=1754)<br/>
[JavaScript Promise の本](https://azu.github.io/promises-book/)<br/>


Web APIについて説明し、天気予報APIから今日のデータを取得してみます

WebAPIとJavaScriptの非同期処理について


## １枚の画像からトランプ52枚の画像を作る。

ネットで見つけたこの画像を使って、バラバラのトランプ52枚の写真を作ってみます。

![トランプの画像](/images/2022年/6月/tramp.png)

ロジックに関しては、トランプは1〜13までの数字を持つので、各トランプに0~51までの番号をつけた場合、<yellow>13で割ったときの余り</yellow>が便利に使えそうです。

見た目に関しては、トランプ１枚のサイズを縦150px 横100pxと決めて、その枠に合うように<red>backgroundPosition</red>を調整してみました。

その過程で変数を文字にすると便利なので、<blue>テンプレートリテラル</blue>を使っています。

<red>``（バッククォート）</red>で文字を囲み、その中で<red>${}</red>を使うと、この中では変数を表示することができます。


```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .board {
      display: grid;
      grid-template-columns: repeat(13, 1fr);
      gap: 1px;
      width: 100vw;
      background-color: rgba(36, 186, 36, 0.541);
    }

    .board div {
      width: 100px;
      height: 150px;
      border-radius: 10px;
      border: 1px solid black;
      background-color: white;
      margin: 10px auto;
    }
  </style>

  <body>
    <div class="board"></div>
  </body>
  <script>
    const board = document.querySelector('.board');

    const makeTrump = (n) => {
      const div = document.createElement('div');
      div.style.backgroundImage = 'url(tramp.png)';
      // 色々微調整した結果
      div.style.backgroundSize = '1400%';
      // 何列目か
      const col = n % 13;
      // 何段目か
      const row = (n - col) / 13;

      // 背景画像をズラす大きさ（px)
      const x = -(8 + 107 * col);
      const y = -(8 + 156 * row);
      // テンプレートリテラルを使って、変数から文字列を作る
      div.style.backgroundPosition = `${x}px ${y}px`;

      // このdiv要素を挿入する
      board.append(div);
    };

    // とりあえず上から順に・・・・
    for (let i = 0; i < 52; i++) {
      makeTrump(i);
    }
  </script>
</html>
```

今回作った<bold>makeTrump(n)</bold>は0~51までの数字を渡すと、それに対応したトランプの背景画像を持ったdiv要素を作ってくれます。


(以降、0~51まで並べた数字をシャッフルして、makeTrump()に渡す内容の解説を後日書きます。)

トランプの神経衰弱を作っていきます。

JavaScript 神経衰弱を作ろう【前編】


## ビンゴ成立のロジック

本当はランダムで数字を出して抽選させる機能を付けたいところですが、出た数字をクリックしていく仕様とします。

まず<blue>bingo</blue>という変数を作り、<yellow>ビンゴが成立したらこれを<bold>true</bold>にすることにします。</yellow>

ゲームを進めていくにつれて、前回作ったビンゴの数字が入った配列<blue>array</blue>の該当数字を'◯'に変えていきます。

そうすると、ビンゴというのは縦横斜めの5+5+2の12パターンのどれかが'◯'で揃うことになるので、それをチェックする<blue>checkArray()関数</blue>を作りました。

この関数は、配列を入れてその要素が全て'◯'だったら、bingo変数をtrueに変えます。

```javascript
let bingo = false;

const checkArray = (array) => {
    if(array.every(value => value === "◯")){
        bingo = true;
        console.log("ビンゴ！");
    };
}
```

### チェックすべき12組の配列を作る

次にチェックすべき縦横斜めの12組の配列を作る方法を考えます。


#### 横方向をチェックする
例えば横方向をチェックするには、

```javascript
const yoko1array = [array[0],array[1],array[2],array[3],array[4]];
const yoko2array = [array[5],array[6],array[7],array[8],array[9]];

// 略
```

としたいところですが、<bold>あまりスマートではない</bold>ので別の方法を考えましょう。

よっぽどマイナーなプログラミング言語でない限り、こういう<yellow>よく使いそうな処理は専用のメソッドが用意されている</yellow>ものです。

<red>slice()</red>メソッドは、配列から指定した部分をコピーしてくれる配列のメソッドです。

これを利用すると、

```javascript
// array.slice(0,5)なら、array[0]~array[4]までの５個の要素が入った配列を返す
const yoko1array = array.slice(0,5);
const yoko2array = array.slice(5,10);
const yoko3array = array.slice(10,15);
// 略
```

さらにこれらで作った<blue>yokoarray</blue>たちは、そのまま上で作った<blue>checkArray()</blue>に突っ込むだけなので、for文を使って纏めて放り込んでみます。

これで横方向を纏めてチェックすることができます。
```javascript
for (let i=0; i<5; i++){
        checkArray(array.slice(i*5,(i+1)*5));
    }
```

#### 縦方向をチェックする
縦方向をチェックする方法も考えてみます。

まずは素直に書いてみます。

```javascript
const tate1array = [array[0],array[5],array[10],array[15],array[20]];
const tate2array = [array[1],array[6],array[11],array[16],array[21]];

// 略
```

こっちはslice()では対応できませんので別のメソッドを探してみます。

少し難しいのですが、<red>filter</red>メソッドを利用することで実現することができます。

```javascript
const tate1array = array.filter((_,index) => index %5 === 0);
const tate2array = array.filter((_,index) => index %5 === 1);
const tate3array = array.filter((_,index) => index %5 === 2);
// 略
```
<red>filter()</red>は配列から指定した条件に合致する配列を取り出すメソッドです。

filter()に2つの引数を渡したとき、

```javascript
// value:配列の要素 index:その要素のインデックス（順番）
array.filter((value,index) => ...)
```
となります。

そのため、上記のコードで、
```javascript
array.filter((_,index) => index %5 === 0);
```
としているのは、arrayの要素のインデックスが5の倍数の要素だけを集めろという意味になります。

これもfor文を使ってcheckArray()に突っ込むので、

```javascript
for (let i=0; i<5; i++){
  // 縦方向
  checkArray(array.slice(i*5,(i+1)*5));
  // 横方向
  checkArray(array.filter((_,index) => index %5 === i));
  }
```

となります。

#### 斜め方向
これは２パターンしかないので、直接書くだけでも良いかなと思います。

```javascript
checkArray([array[0],array[6],array[12],array[18],array[24]]);
checkArray([array[4],array[8],array[12],array[16],array[20]]);
```


### ゲームが進む（出た数字をclickする）たびに盤面をチェックする

これらを纏めて<blue>checkBingo()</blue>関数を作りました。

```javascript
const checkBingo = () => {

  for (let i=0; i<5; i++) {
    // 縦方向
    checkArray(array.slice(i*5,(i+1)*5));
    // 横方向
    checkArray(array.filter((_,index) => index %5 === i));
  }

  // 斜め列のチェック
  checkArray([array[0],array[6],array[12],array[18],array[24]]);
  checkArray([array[4],array[8],array[12],array[16],array[20]]);
}
```

この関数をクリックイベントの中に仕込んでおけば完成です！

```javascript
for (let i=0; i<25; i++){
  const divEl = document.createElement('div');

  if(i === 12){
    divEl.textContent = "FREE";
  } else {
    divEl.textContent = array[i];
  }

  divEl.addEventListener('click',()=>{
    divEl.textContent = "◯";
    array[i] = "◯";
    checkBingo();
  })

  board.append(divEl);
}
```

ビンゴカードのビンゴロジックの実装。

JavaScript ビンゴゲームの作成【後編】


## 乱数を使ってビンゴゲームのカードを作ろう

<red>Math.random()</red>を使って、ビンゴカードに表示する数字を書いていきます。

やり方はいろいろありますが、

1.ビンゴカードの仕様に則った数字の配列を作る。

2.配列を使ってビンゴのマスを作る

の順番で作ります。

### ランダムな数字を５個持った配列を作る。

まずは一番基本的な、ランダムな数字を5個持った配列を作ります。

```javascript
const array = [];

for (let i = 0; i<5; i++){
  const rand = Math.floor(Math.random()*15)
  array.push(rand);
}
```

上記のコードで、0~15までのうちランダムで５個の数字が入った配列が作られます。

### 1.ビンゴカードの仕様に則った数字の配列を作る。

<yellow>（これちょっと難しいです。）</yellow>

しかし、上記コードでは重複が発生してしまうので、厳密なビンゴの仕様には合いません。

作られた乱数が既に作られたものと一致する場合は再生成してもらいます。

#### A.for文を使う場合
文字通り、作った乱数が既に含まれていた場合は再度乱数を作りましょう。

重複する確率はかなり下がります。

```javascript
const array = [];

for (let i = 0; i<5; i++){

  const rand = Math.floor(Math.random()*15);
  // 乱数が被っていなければ
  if(!array.includes(rand)){
    array.push(rand);
  } else {
    // 被っていれば、新しい乱数を作る
    const newRand = Math.floor(Math.random()*5);
    array.push(newRand);
  }
}
```

もちろん確率が下がっているだけで、たまーーに重複するときは起こります。

これを解決するのが、もう一回乱数を作るようにする・・・・ではなく、<blue><bold>再帰</bold></blue>という仕組みを使いましょう。

<blue>再帰</blue>とは、こうやって<yellow>何回もif文を繋げる代わりに関数が自分自身を呼び出すことで繰り返しを表現する手法</yellow>です。

```javascript
const array = [];

const makeRand = () => {
  const rand = Math.floor(Math.random()*15);
  // 乱数が被っていなければ
  if(!array.includes(rand)){
    array.push(rand);
  } else {
    // 被っていれば、もう一度この関数を実行する
    makeRand();
  }
}

for (let i = 0; i<5; i++){
  makeRand();
}
```

こうすることで、ビンゴゲームに必要な乱数が入った配列を手に入れることができます。


#### B.while文を使う場合

実はwhile文を使うともっと簡単に書けます。<yellow>まずはforで考えて、上手くいかない時はwhileを使うと良いです。</yellow>

```javascript
const array = [];
// この配列の長さが5になるまで、whileループを回す
while(array.length<5){
    const rand = Math.floor(Math.random()*15);
    if(!array.includes(rand)){
        array.push(rand)
    }
}
```

### 2.配列を使ってビンゴのマスを作る

(上記Bのwhileの方を使ってコードを書いていきます。)

ビンゴにあった２５個の数字が入った配列を作ります。

５個作ったら、次の５個を作るようにしました。

```javascript
const array = [];

const makeArray = (i) => {
  while(array.length<5+5*i){
      const rand = 15*i + Math.floor(Math.random()*15);
      if(!array.includes(rand)){
          array.push(rand)
      }
  }
}

for (let i=0; i<5; i++){
  makeArray(i);
}

console.log(array);
```

この25個の数字を持った配列から25個の数字を書いたdiv要素を作ります。

要素の数が多くなってくると、HTMLに要素を書いて取得するよりJavaScriptで直接書く方が良いでしょう。

```javascript
// 中略
const board = document.querySelector('.board');

for (let i=0; i<25; i++){
  const divEl = document.createElement('div');

  if(i === 12){
    divEl.textContent = "FREE";
  } else {
    divEl.textContent = array[i];
  }

  board.append(divEl);
}
```

これに対応するHTML・CSSはこんな感じです。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .board {
            margin: 0px auto 0 auto;
            width: 600px;
            display: grid;
            grid-template-rows: repeat(5,1fr);
            grid-auto-flow: column;
        }

        .board div {
            border: solid 2px  black;
            width: 150px;
            height: 150px;
            font-size: 50px;
            font-style: bold;
            text-align: center;
            line-height: 3;
        }
    </style>
</head>
<body>
    <div class="board"></div>
</body>
```


ポイントはここです。

```css
.board{
  display: grid;
  grid-template-rows: repeat(5,1fr);
  grid-auto-flow: column;
}
```

gridレイアウトによって縦横に並べたあと、<red>grid-auto-flow: column</red>で要素を縦方向に並べることができます。



![ビンゴイメージ](/images/2022年/6月/bingo1.png)

ビンゴカードを作っていきます。

JavaScript ビンゴゲームの作成【前編】


## Math組み込みオブジェクト

JavaScriptには標準で用意されているオブジェクトがあり、自由に利用することができます。

そういったオブジェクトを組み込みオブジェクトといいます。

今回はその一つの数学に関するメソッドを持った<bold>Mathオブジェクト</bold>を見てみます。

[参考：JavaScript Primer Math](https://jsprimer.net/basic/math/)


## Math.random()

<red>Math.random()</red> は0~1までの値をランダムで返すメソッドです。

これを100倍することで、0~100までの値をランダムで作ることができます。

```javascript
const a = Math.random();
console.log(a);
// 0.7888336529560935

const b = Math.random()*100;
console.log(b);
// 63.574330537340806
```

## Math.floor()

<red>Math.floor()</red>は小数点以下を切り捨てることができるメソッドです。
上記のMath.random()と組み合わせて、整数をランダムに作ることができます。


```javascript
// 小数点以下を切り捨てる
console.log(Math.floor(2.3));
// 2

const c = Math.random()*100;
console.log(c);
// 89.8097312321443
console.log(Math.floor(c));
// 89

// 一度に実行する
const d = Math.floor(Math.random()*100);
console.log(d);
// 46
```

## 課題　ビンゴカードを作る
上記のMath.random()を使ってビンゴカードを作ってみましょう。


[ビンゴゲーム:wikipedia](https://ja.wikipedia.org/wiki/%E3%83%93%E3%83%B3%E3%82%B4#:~:text=%E5%8F%82%E5%8A%A0%E8%80%85%E3%81%AE%E6%89%8B%E6%8C%81%E3%81%A1%E3%81%AE,%E3%81%9D%E3%81%AE%E6%97%A8%E3%82%92%E5%AE%A3%E8%A8%80%E3%81%99%E3%82%8B%E3%80%82)

ビンゴゲームのカードは各列が0~15,16~30,31~45,46~60,61~75範囲でランダムに配置されていますので、

これまで学んだ内容を利用して、ビンゴカードを作ってみてください。

参考イメージ

![ビンゴイメージ](/images/2021年/7月/bingoTitle.jpg)

JavaScript 乱数の扱いとビンゴゲーム【課題】


## 解答例１　最もシンプルなパターン

・特殊なメソッドを使わずに書いたパターン。動けば良いんや・・・

・ゲームが終了してもそのまま続行したり、同じ箇所をクリックできてしまう状態。

・<blue>count変数</blue>はゲームの先手後手を確認するために利用。

・<blue>gameArray配列</blue>はゲームの現在の状況を管理するための配列。

・この<blue>gameArray配列</blue>を利用して、<yellow>ゲームの勝者が決まる縦横斜めの８パターンの並びをチェック</yellow>する。

```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .board {
            margin: 100px auto 0 auto;
            width: 600px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }

        .board div {
            border: solid 1px black;
            width: 200px;
            height: 200px;
            font-size: 100px;
            text-align: center;
            line-height: 2;
        }
    </style>
</head>

<body>
    <div class="board">
        <div id="0"></div>
        <div id="1"></div>
        <div id="2"></div>
        <div id="3"></div>
        <div id="4"></div>
        <div id="5"></div>
        <div id="6"></div>
        <div id="7"></div>
        <div id="8"></div>
    </div>
</body>
<script>
    // 現在の手番をチェックする
    let count = 0;

    // 現在のゲームの進行状況を保存する配列
    const gameArray = [0, 1, 2, 3, 4, 5, 6, 7, 8];

    // ゲームの勝ち負けをチェックする関数
    const checkWinner = function (player) {

        // 横のチェック
        if (gameArray[0] === gameArray[1] && gameArray[0] === gameArray[2]) {
            console.log(player + "の勝ち!");
        }
        if (gameArray[3] === gameArray[4] && gameArray[3] === gameArray[5]) {
            console.log(player + "の勝ち!");
        }
        if (gameArray[6] === gameArray[7] && gameArray[6] === gameArray[8]) {
            console.log(player + "の勝ち!");
        }

        // 縦のチェック
        if (gameArray[0] === gameArray[3] && gameArray[0] === gameArray[6]) {
            console.log(player + "の勝ち!");
        }
        if (gameArray[1] === gameArray[4] && gameArray[1] === gameArray[7]) {
            console.log(player + "の勝ち!");
        }
        if (gameArray[2] === gameArray[5] && gameArray[2] === gameArray[8]) {
            console.log(player + "の勝ち!");
        }

        // ナナメのチェック
        if (gameArray[0] === gameArray[4] && gameArray[0] === gameArray[8]) {
            console.log(player + "の勝ち!");
        }
        if (gameArray[2] === gameArray[4] && gameArray[2] === gameArray[6]) {
            console.log(player + "の勝ち!");
        }
    }


    for (let i = 0; i < 9; i++){
        document.getElementById(i).addEventListener('click', function () {

            if (count % 2 === 0) {
                this.textContent = "◯";
                gameArray[i] = "◯";
                checkWinner("◯")
            } else {
                this.textContent = "×";
                gameArray[i] = "×";
                checkWinner("×")
            }
            count++;
        })
    }
</script>

</html>
```

## 解答例２　配列のメソッドを多く利用したパターン。

・htmlにdivタグを9個作る代わりに、<red>createElement('div')</red>でdiv要素を作成して配置する。

・配列のメソッド<red>map()</red>、<red>every()</red>、<red>includes()</red>を利用。

・クリックのたびに<blue>gameArray配列</blue>を見て、<yellow>そのマスをクリック済みかを確認</yellow>する。

・<blue>flag変数</blue>を作成し、<yellow>ゲームが終了したかを管理</yellow>させる。

・<blue>checkArray配列</blue>はチェックするべきパターンの配列を８個持った二次元配列。ここから<red>map()</red>を使うと、内部の配列を一つずつ取り出せる。

```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .board {
            margin: 100px auto 0 auto;
            width: 600px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }

        .board div {
            border: solid 1px black;
            width: 200px;
            height: 200px;
            font-size: 100px;
            text-align: center;
            line-height: 2;
        }
    </style>
</head>

<body>
    <div class="board">
    </div>
</body>
<script>
    // 現在の手番をチェックする
    let count = 0;

    // ゲームが終了したかを表すフラグ
    let flag = false;

    // 現在のゲームの進行状況を保存する配列
    const gameArray = new Array(9).fill(0);

    // 三つの値が一致しているかをチェックする関数 booleanを返す
    // 引数として要素が３つの配列を受け取る
    const checkSame = (array) => {
        const a = gameArray[array[0]];
        const b = gameArray[array[1]];
        const c = gameArray[array[2]];

        if ([a, b, c].every(value => value !== 0)) {
            return a === b && a === c;
        }
    }

    // チェックするべき縦横斜めの組み合わせを記録した配列
    const checkArray = [
        [0, 1, 2], [3, 4, 5], [6, 7, 8],
        [0, 3, 6], [1, 4, 7], [2, 5, 8],
        [0, 4, 8], [2, 4, 6]
    ];

    const checkWinner = (player) => {
        // 各パターンで検証して、一つでも成立していればtrueを返す
        const checkBoard = checkArray.map(array => checkSame(array)).includes(true)

        if (checkBoard) {
            // ゲームが終了したので、flagをtrueにする
            flag = true;
            console.log(player + "の勝ち!");
        }
    }

    const board = document.querySelector('.board')

    // board要素の中にdivを9個作る
    for (let i = 0; i < 9; i++) {
        const masu = document.createElement('div');
        // 作ったdiv要素にイベントを追加
        masu.addEventListener('click', () => {

            // すでにクリックしていないマスであるかつゲームが続いていることを確認
            if (gameArray[i] === 0 && flag === false ) {

                if (count % 2 === 0) {
                    masu.textContent = "◯";
                    gameArray[i] = "◯";
                    checkWinner("◯")
                } else {
                    masu.textContent = "×";
                    gameArray[i] = "×";
                    checkWinner("×")
                }
                count++;

            }
        })
        board.append(masu)
    }
</script>

</html>
```