
## 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>
```

JavaScript 三目並べ解答例

これまでの内容を利用して、クイズゲームを作ってみます。


```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>
        #question {
            background-color:whitesmoke;
            width: 200px;
            height: 100px;
            margin: 20px;
            padding: 5px;
            border: 1px solid black;
        }
        #answer {
            margin: 20px;
        }
        #answer div{
            background-color:whitesmoke;
            width: 200px;
            margin: 5px;
            padding: 5px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="question">
        <p>日本で２番目に高い山は？</p>
    </div>
    <div id="answer">
        <div id="A">槍ヶ岳</div>
        <div id="B">富士山</div>
        <div id="C">北岳</div>
        <div id="D">剱岳</div>
    </div>
</body>
<script>
    document.getElementById("C").addEventListener("click", function () {
        console.log("正解！")
        this.style.backgroundColor = "blue"
        this.style.color = "white"
        this.textContent = "正解!"
    })
</script>
</html>
```



JavaScriptで簡単なクイズゲームを作ります

【独習JavaScript】JavaScript 入門 その2


## JavaScriptを初めてみよう

JavaScriptはHTMLとCSSの操作を行えるプログラミング言語です。

最初の取っ掛かりとして、なるべくシンプルな文法を使ってHTMLとCSSをJavaScriptで動かしてみたいと思います。

### JavaScriptでマウスやキーボードの入力に反応させる
JavaScriptでは、**マウスのクリックや移動、キーボードの入力などに反応してコードを実行する** 仕組みがあります。

このような仕組みを **<red>イベント</red>** と呼びます。

最初に<red>addEventListenr</red>というものを利用し、クリックに反応して"Hello World"を出力するサンプルを確認します。

```javascript
document.body.addEventListener("click",function(){
    console.log("Hello World!");
}
```

上記の例では、前から「場所→イベントの種類→やりたいこと」の順番に並んでいると考えてください。
- 場所：*document.body* (bodyなのでwebページ全体)
- イベントの種類: *addEventListener("click", )*　（クリックに反応する）
- やりたいこと: *function(){console.log("Hello World")}*　（コンソールに出力）

ここで、
```javascript
function(){
    console.log("Hello World!");
}
```
のような、**function**でまとめた部分を<red>**関数**</red>（厳密には **コールバック関数** ）と言います。

関数の仔細については後回しします。今はこんな形の使い方を真似するだけで良いです。

**イベント** には先述の通り、クリックやマウスの移動などさまざまな入力に対応したものが用意されています。
詳細は教科書（独習JavaScript）のP482を確認してください。

### JavaScriptでHTML要素を指定する (P417)

画面全体をクリックするだけでは複雑なことができないので、htmlの特定の場所を指定できた方が便利です。

その仕組みの代表的なのが<red> **getElementById(id名)** </red> です。

htmlの **id属性** を利用して、操作したいhtmlの要素( **Element** )を指定することができます。

書き方は **document** から初めて、

```javascript
document.getElementById()
```

と書きます。最初に出た **addEventListener** と組み合わせて、

```javascript
document.getElementById("id名").addEventListenr("click",function(){
    console.log("Hello World")
})
```

と書くことで、htmlの指定したid属性の要素をクリックすると、hello worldをコンソールに出すことができます。

### JavaScriptでCSSを操作する。（P443~)

次はCSSを操作する方法です。

今回は先に作例を先に載せます.
```html
<body>
    <div id="sikaku" style="background-color:red; width:200px; hight:200px; ">
        これは四角形です
    </div>
    <script>
        document.getElementById("sikaku").addEventListener("click",function(){
            this.style.backgroundColor = "green"
        })
    </script>
</body>
```

<code>this.style.backgroundColor</code> では、指定したid属性の要素のCSSの背景の色を赤から緑に変更することができます。

 **this** というキーワードが出てきました。これは **document.getElementById("sikaku")** のことを指しています。

 JavaScriptのthisは定義が少しややこしいので、今回はこの流れで使うと言う点だけを知っておいてください。

ほとんどのCSSのプロパティは、**style.プロパティ名**で指定することができます。

ただし、通常のCSSは間に **-(ハイフン)** を使う **ケバブケース(Kebab・串焼き)** で書かれます。

JavaScriptで指定するときは、<red>b</red>ackground<red>C</red>olorのように、**小文字と大文字** で繋げる **キャメルケース(Camel・ラクダ)** で書く必要があります。

キャメルケースはJavaScriptで最もよく利用される形ですので、覚えておいてください。

 ### JavaScriptでHTMLのテキストを操作する。（P425)

JavaScriptではHTMLのテキストも操作できます。

**textContent** は指定した要素の文字列を設定できます。

下記の例では、クリックしたときに文字列も一緒に変更されます。

```html
<body>
    <div id="sikaku" style="background-color:red; width:200px; hight:200px; ">
        これは四角形です
    </div>
    <script>
        document.getElementById("sikaku").addEventListener("click",function(){
            this.style.backgroundColor = "green";
            this.textContent = "緑色の四角形です"
        })
    </script>
</body>
```

**innerHTML** は指定した要素の文字列と一緒にHTMLタグも設定できます。


```html
<body>
    <div id="sikaku" style="background-color:red; width:200px; hight:200px; ">
        これは四角形です
    </div>
    <script>
        document.getElementById("sikaku").addEventListener("click",function(){
            this.style.backgroundColor = "green";
            this.innerHTML = "<h2>緑色の四角形です</h2>"
        })
    </script>
</body>
```



【独習JavaScript】JavaScript　入門 その１


これが年内で最後の記事かな？ 1年で６０記事も書いたらしい。

このブログは記事の表示機能しか実装していないので、そろそろ機能を色々追加したいなー


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

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

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

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


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

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

#### api.php
```php
Route::apiResource('/books',BookController::class);
```
```
+--------+-----------+---------------------+---------------+------------------------------------------------------------+------------------------------------------+
| Domain | Method    | URI                 | Name          | Action                                                     | Middleware                               |
+--------+-----------+---------------------+---------------+------------------------------------------------------------+------------------------------------------+
|        | GET|HEAD  | /                   |               | Closure                                                    | web                                      |
|        | GET|HEAD  | api/books           | books.index   | App\Http\Controllers\BookController@index                  | api                                      |
|        | POST      | api/books           | books.store   | App\Http\Controllers\BookController@store                  | api                                      |
|        | GET|HEAD  | api/books/{book}    | books.show    | App\Http\Controllers\BookController@show                   | api                                      |
|        | PUT|PATCH | api/books/{book}    | books.update  | App\Http\Controllers\BookController@update                 | api                                      |
|        | DELETE    | api/books/{book}    | books.destroy | App\Http\Controllers\BookController@destroy                | api                                      |
|        | GET|HEAD  | api/user            |               | Closure                                                    | api                                      |
|        |           |                     |               |                                                            | App\Http\Middleware\Authenticate:sanctum |
|        | GET|HEAD  | sanctum/csrf-cookie |               | Laravel\Sanctum\Http\Controllers\CsrfCookieController@show | web                                      |
+--------+-----------+---------------------+---------------+------------------------------------------------------------+------------------------------------------+
```
### コントローラの設定
上記のルーティングテーブルを見ると、<code>api/books</code>に<bold>POST</bold>でアクセスした場合、bookControllerの<bold>storeアクション</bold>が呼び出されるとされています。

ですので、このアクションを下記のようにし、受け取ったデータをデータベースに渡して保存できるようにしました。（バリデーション等は省いた最小限の内容です）

#### BookController
```php
    public function store(Request $request)
    {
        $book = new Book();
   
        $book->fill($request->all())->save();
    }
```

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

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


データはPOSTリクエストで送るので、<code>axios.post(url,データ)</code>の形で送ります。


#### BookAdd.vue

```javascript
import { reactive, onMounted } from "vue";
import axios from "axios";


export default {
  name: "BookAdd",
  setup() {

    const postBook = async () => {

        const url = "サーバーのURL/api/books";

        // postリクエストでデータを送る
        await axios.post(url,{
                title: "それから",
                price: "600",
            }
        )
    }

    // 動作確認のためにcreatedのタイミングで動かす
    postBook()

    return {
      postBook,
    };
  },
};
```

以上が基本的な形になると思います。


参考
[Making Asynchronous HTTP Requests in JavaScript with Axios](https://stackabuse.com/making-asynchronous-http-requests-in-javascript-with-axios/)

【Laravel8×Vue3】Restful APIとPOSTリクエスト

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

Vue.jsで複数ページを作る際にはvue-routerの利用が鉄板です。

vue3 + laravel8でのアプリケーションでvue-routerを導入していきます。

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

これを追加することで、開発用のパッケージであることを宣言できます。

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

vue3に対応したvue-routerはver4以降なので、<bold>vue-router@next</bold>でインストールします。

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

### router.jsの作成


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

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

export default router
```

### app.jsの編集
VueRouterの利用することをapp.jsに記載します。

#### resources/js/app.js
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

createApp(App)
    .use(router)
    .mount('#app')
```

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

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

#### resourve/js/App.vue
```html
<template>
  <div>
    {{ data.message }}
    <hr>
    <router-view></router-view>
  </div>
</template>


```

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

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

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

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

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

【Laravel8×Vue3】Vue Routerによるルーティングの設定


## axios + Restful API によって連携させる

Laravel側で本のタイトル、価格を配信するAPIを作成し、それをVue側でaxiosで受け取ります。

## バックエンド（Laravel）からAPIを用意する
まずは、バックエンド側から配信するAPIを用意します。


### モデルの作成

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

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

Laravel8 では、作成したモデルは<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 $fillable = [
        'title',
        'price',
    ];
}
```

#### 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->id();
            $table->string('title');
            $table->string('price');
            $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\Seeder;
use Illuminate\Support\Facades\DB;

class BooksTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $param = [
            'title' => '坊ちゃん',
            'price' => '500'
        ];
        DB::table('books')->insert($param);
    
        $param = [
            'title' => 'こころ',
            'price' => '600'
        ];
        DB::table('books')->insert($param);

        $param = [
           'title' => '三四郎',
            'price' => '450'
        ];
        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
```

### コントローラーの作成
<bold>-api</bold>を付けて、コントローラーファイルを作成します。

```terminal
php artisan make:controller BookController --api
```

作成されたapiのコントローラを、api専用のルーティングに登録します。

#### 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
```

```
+--------+-----------+---------------------+---------------+------------------------------------------------------------+------------------------------------------+
| Domain | Method    | URI                 | Name          | Action                                                     | Middleware                               |
+--------+-----------+---------------------+---------------+------------------------------------------------------------+------------------------------------------+
|        | GET|HEAD  | /                   |               | Closure                                                    | web                                      |
|        | GET|HEAD  | api/books           | books.index   | App\Http\Controllers\BookController@index                  | api                                      |
|        | POST      | api/books           | books.store   | App\Http\Controllers\BookController@store                  | api                                      |
|        | GET|HEAD  | api/books/{book}    | books.show    | App\Http\Controllers\BookController@show                   | api                                      |
|        | PUT|PATCH | api/books/{book}    | books.update  | App\Http\Controllers\BookController@update                 | api                                      |
|        | DELETE    | api/books/{book}    | books.destroy | App\Http\Controllers\BookController@destroy                | api                                      |
|        | GET|HEAD  | api/user            |               | Closure                                                    | api                                      |
|        |           |                     |               |                                                            | App\Http\Middleware\Authenticate:sanctum |
|        | GET|HEAD  | sanctum/csrf-cookie |               | Laravel\Sanctum\Http\Controllers\CsrfCookieController@show | web                                      |
+--------+-----------+---------------------+---------------+------------------------------------------------------------+------------------------------------------+
```

### コントローラの設定

APIの発信を行うために、<bold>getでapi/booksにアクセス</bold>した時に表示されるindexアクションを設定します。

indexアクションではテーブルの本のリストを全て表示します。


#### 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;
    }
```

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


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

vueのファイルを変更するときは、常にwatchを動かしてコンパイルしてください。

```terminal
npm run watch
```

<code>axios</code>を利用してこのAPIのデータを取得します。

composition APIを使ってコンソールに表示します。

#### App.vue
```javascript
import { reactive } from "vue";
import HelloWorld from "./components/HelloWorld";

import axios from "axios";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  setup() {
    const data = reactive({
      message: "Hello Vue!!!!!!!!",
    });
    const url = "サーバーのURL/api/books";
    const getAPI = async () => {
      const result = await axios.get(url);
      console.log(result);
    };

    getAPI();

    return {
      data,
      getAPI,
    };
  },
};
```

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

![axiosの結果](/images/2021年/12月/axiosResult.png)


【Laravel8×Vue3】Restful APIとGETリクエスト


## FireBase Hostingでアプリをデプロイしよう


### FireBaseのプロジェクトを作る

Firebaseのトップから任意のプロジェクトを作ります。


### マイアプリからWebアプリケーションを登録する

プロジェクトの概要の設定（歯車）マーク→アプリの追加からWebアプリを選ぶ。

<bold>このアプリのFirebase Hostingも設定します。</bold>をクリックする。

再びトップの設定（歯車）マークから、ロケーションの選択画面は東京の<bold>asia-northeast1</bold>または大阪の<bold>asia-northeast2</bold>を選択


### Webアプリケーション側で設定をしていく

#### firebase-toolsをダウンロード
```terminal
npm install -g firebase-tools
```

#### firebaseにログイン
```terminal
firebase login
```

この画面で Yes を入力すると、ブラウザが立ち上がって認証の画面に飛びます
```
i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? Yes
```
戻ったら、firebaseを初期化します。

#### firebaseを初期化
```terminal
firebase init
```

こんな感じのアスキーアートが出ます

![firebaseAA](/images/2021年/12月/firebase.png)


### Realtime Database と　Hosting を利用する

利用するサービスに<bold>スペースキーで選択</bold>できます。

今回は、<red><bold>Realtime Database</bold></red> と <red><bold>Hosting</bold></red>を選択してください。

#### Realtime Databaseの設定

省略


#### Hostingの設定

最初はどのフォルダをデプロイするのかを聞かれています。<bold>dist</bold>としてください。

```
? What do you want to use as your public directory?  dist
```

そのほかはYesとし、最後のGitHubの連携については今回はNoとしておきます。

```
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
```

###　 ビルドする

Vueで作ったアプリケーションを<bold>ビルド</bold>します。

ビルドでは、開発していたアプリケーションを本番のサーバーで運用するために、VueをJavaScriptに変換したり、コメントや空白などの実行に必要ではないコードを削除する作業などを行います。

ビルドを行った結果は、Vueでは <bold>dist</bold>フォルダに出力されるので、上記のHostingの設定の中で、このフォルダを指定しました。


```terminal
npm run build
```

### デプロイする

buildが完了したらデプロイしてください。

```terminal
firebase deploy --only hosting
```


【Vue3】アプリをFireBase Hosting にデプロイする


## フィーチャーテストの準備

フィーチャーテストではHTTPリクエストが問題なく動作しているかを確認します。

今回はサンプルのAPIを作ってみます。APIは<code>routes/api.php</code>にURIを設定します。


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

use Illuminate\Http\Request;


Route::get('/ping',function(){
    return response()->json(['message' => 'pong']);
});
```

サーバーを起動し、上記のAPIが取得できるかを<code>curlコマンド</code>で確認します。

なお、<red>api.php</red>に書かれたAPIのURIは、自動的に<red><bold>api/〇〇</bold></red>となります。

```terminal
curl -v http://localhost/api/ping -w "\n"
```
```
> GET /api/ping HTTP/1.1
> Host:localhost
> User-Agent: curl/7.74.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Host: localhost
< Date: Thu, 09 Dec 2021 02:54:46 GMT
< Connection: close
< X-Powered-By: PHP/8.0.12
< Cache-Control: no-cache, private
< Date: Thu, 09 Dec 2021 02:54:46 GMT
< Content-Type: application/json
< X-RateLimit-Limit: 60
< X-RateLimit-Remaining: 59
< 
* Closing connection 0
{"message":"pong"}
```


### テストを作成する

下記のコマンドで、Featureフォルダの中にAPIフォルダとPingTest.phpを作ります。

今回は,<code>--unit</code>オプションは付けないでください。

```terminal
php artisan make:test API/PingTest
```

#### tests/Feature/API/PingTest
```php
<?php

namespace Tests\Feature\API;

use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Foundation\Testing\WithFaker;
use Tests\TestCase;

class PingTest extends TestCase
{
    /**
     * A basic feature test example.
     *
     * @return void
     */
    public function testExample()
    {
        $response = $this->get('/');

        $response->assertStatus(200);
    }
}

```
テストを実行するファイルでは、<bold>TestCaseクラス</bold>を継承して作成していきます。

また、クラス名とファイル名はTestで終わる必要があります。

作成されたコードでは、<code>assertTrue()</code>というメソッドがあります。

これは、<red>引数がtrueであるか</red>を判定します。


#### SapleTest.php
```php
<?php

namespace Tests\Unit;

use PHPUnit\Framework\TestCase;

class SampleTest extends TestCase
{
    /**
     * A basic unit test example.
     *
     * @return void
     */
    public function testExample()
    {
        $this->assertTrue(true);
    }
}
```


### PHP Unitを実行する

このSampleTest.phpを下記のコマンドで実行してみます。

```terminal
./vendor/bin/phpunit tests/Unit/SampleTest.php
```

#### 実行結果
```
PHPUnit 9.5.10 by Sebastian Bergmann and contributors.

.                                                                   1 / 1 (100%)

Time: 00:00.020, Memory: 6.00 MB

OK (1 test, 1 assertion)
```

<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;zoom: 1;overflow: hidden;"><div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_202112091159180478?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F6089b4c29d9a70a50463165514d05e0d%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F6089b4c29d9a70a50463165514d05e0d%2F" target="_blank" ><img src="https://thumbnail.image.rakuten.co.jp/ran/img/2001/0009/784/802/613/002/20010009784802613002_1.jpg?_ex=320x320" style="border: none;" /></a></div><div class="kaerebalink-info" style="line-height:120%;zoom: 1;overflow: hidden;"><div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_202112091159180478?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F6089b4c29d9a70a50463165514d05e0d%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F6089b4c29d9a70a50463165514d05e0d%2F" target="_blank" >ＰＨＰフレームワークＬａｒａｖｅｌ　Ｗｅｂアプリケーション開発 バージョン８．ｘ対応  /ソシム/竹澤有貴</a><div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail" style="margin-bottom:5px;"></div><div class="kaerebalink-link1" style="margin-top:10px;"></div></div><div class="booklink-footer" style="clear: left"></div></div>

フィーチャーテストを行う方法

【Laravel6】フィーチャーテスト


## 環境構築
LaravelとVueを組み合わせてアプリケーションを作るための環境構築を行っていきます。

参考:[Laravel8でVue 3を使う](https://reffect.co.jp/laravel/laravel8-vue3)


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

Vue3を使いたいので今まで使ってきたLaravel6ではなく最新Laravel8を使います。古いバージョンを使うと<red><bold>不具合が起こる気がする</bold></red>からです。

参考：[Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録](https://oki2a24.com/2021/04/22/laravel-6-with-vue-js-3/)

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

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

#### 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はこんな感じですが、そのままinstallしてしまうとvue２が入ってしまうので変更します。

また、他にも不要であると思うものは削除してください。


```json
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",<-6.0以上であることを確認
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue": "^2.6.12",<-必ず削除
        "vue-template-compiler": "^2.6.12"<-必ず削除
    }
```

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

```terminal
npm install
```
### Vue3をインストールする。
インストールが完了したら、Vue3をインストールします。

```terminal
npm install -save-dev vue@next
```

#### package.json
```json
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue": "^3.2.26",<-追加された
    }
```

このファイルの設定後installとdevを行います。

```terminal
npm install && npm run dev 
```

そうすると<bold>一度エラーになります</bold>が、package.jsonに'vue-loader'が追加されます。

#### package.json
```json
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1",
        "vue": "^3.2.26",
        "vue-loader": "^16.8.3"<-追加された
    }
```
この後にさらにinstallとdevを行います。

```terminal
npm install && npm run dev
```

![mix完了](/images/2021年/10月/LaravelVue1.png)


### Laravelの実行

Laravelを実行して、動作を確認します。

```terminal
php artisan serve
```
### BladeにVueコンポーネントを追加するポイントを作る

welcome.blade.phpにVueコンポーネントを追加できるように、<bold>appのid属性</bold>と、<bold>js/app.js</bold>の読み込みを追加します。

#### resources/views/welcome.blade.php
```php
<!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>
    <div id="app"></div>
    <script src="js/app.js"></script>
</body>
</html>
```

### Vue3に設定を変更する

デフォルトではVue2のままなので、Vue3に書き換えていきます。

#### resources/js/app.js
```javascript
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
```

### Vueコンポーネントの追加

app.jsで呼び出しているApp.vueとそこから呼び出すHelloWorld.vueをサンプルとして作ります。

#### resources/js/App.vue
```javascript
<template>
  <div>
    {{ data.message }}
    <HelloWorld />
  </div>
</template>

<script>
import { reactive } from "vue";
import HelloWorld from './components/HelloWorld'

export default {
    name: 'App',
    components:{
        HelloWorld
    },
    setup(){
        const data = reactive({
            message :'Hello Vue!'
        })
        return {
            data
        }
    }
};
</script>
```

#### resources/js/components/HelloWorld.vue
```javascript
<template>
  <div>
    {{ data.message }}
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
    name:'HelloWorld',
    setup(){
        const data = reactive({
            message :'Hello Laravel!'
        })
        return {
            data
        }
    }
};
</script>
```
### npm run watchの実行

ここまで書けたら、<bold>2つ目のターミナル</bold>を立ち上げ、vueをコンパイルを行います。

```terminal
npm run watch
```

以上でlaravelのサーバーでVueのコンポーネントに書いた内容が表示できていれば、Laravel8とVue3が連携したことが確認できます!

### おまけ：手っ取り早く作るなら

このリポジトリをクローンしてください。[https://github.com/tukki0210/vue3_laravel8_start](https://github.com/tukki0210/vue3_laravel8_start)

そのあと、Laravel関係のライブラリのインストールを

```terminal
composer install
```

Vue関係のライブラリのインストールを
```terminal
npm install && npm run dev
```
で行えると思います。


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


## テスト

全てのアプリケーションは、コードを書いて完成したらそれで終わりではありません。

テストを行って検証する必要があります。

いくらコードを書いた人が大丈夫だと言っても想定外のバグは必ず発生します。

テストを書いて実行して検証することで、想定外のバグを少しでも減らす必要があります。

Laravelでのテストは主に下記の２種類に分けることができます。

- ユニットテスト・・・・クラスやメソッドなどモジュール単位の動作、データベースの動作を検証するためのテスト
- フィーチャ-テスト・・・WebページやAPI機能を検証するためのテスト。（feature:特徴）


## ユニットテスト

まずはユニットテストを実行してみます。ユニットテストには、<red><bold>PHP Unit</bold></red>というライブラリを利用します。

PHP Unit はコマンド１つでユニットテストを実行してくれる、<red>自動テストツール</red>です。Laravelでは最初からインストールされています。

### テストを作成する

下記のコマンドで、SampleTest.phpという名前のテストを実行するphpファイルを作成します。

```terminal
php artisan make:test SampleTest --unit
```

テストを実行するファイルでは、<bold>TestCaseクラス</bold>を継承して作成していきます。

また、クラス名とファイル名はTestで終わる必要があります。

作成されたコードでは、<code>assertTrue()</code>というメソッドがあります。

これは、<red>引数がtrueであるか</red>を判定します。


#### SapleTest.php
```php
<?php

namespace Tests\Unit;

use PHPUnit\Framework\TestCase;

class SampleTest extends TestCase
{
    /**
     * A basic unit test example.
     *
     * @return void
     */
    public function testExample()
    {
        $this->assertTrue(true);
    }
}
```


### PHP Unitを実行する

このSampleTest.phpを下記のコマンドで実行してみます。

```terminal
./vendor/bin/phpunit tests/Unit/SampleTest.php
```

#### 実行結果
```
PHPUnit 9.5.10 by Sebastian Bergmann and contributors.

.                                                                   1 / 1 (100%)

Time: 00:00.020, Memory: 6.00 MB

OK (1 test, 1 assertion)
```

<code>$this->assertTrue(true);</code> のテストが成功した（引数がtureであることが確認できた）ので、このテストは成功しました！


## テストメソッドの実装
<bold>そりゃそうだろ</bold>となってしまうので、このSampleTest.phpにテストを書いていきます。

テストの実行内容はメソッドの形で書いていくので、これを<red><bold>テストメソッド</bold></red>といいます。

assertTrueのように、調べたい内容によって利用できるメソッドが一通り用意されています。
参考：[PHP Unit 1.アサーション](https://phpunit.readthedocs.io/ja/latest/assertions.html)


#### SampleTest.php
```php
<?php

namespace Tests\Unit;

use PHPUnit\Framework\TestCase;

class SampleTest extends TestCase
{
    /**
     * A basic unit test example.
     *
     * @return void
     */
    public function testExample()
    {
        // trueであるか
        $this->assertTrue(true);

        // falseであるか
        $this->assertFalse(false);

        // 空であるか
        $arr = [];
        $this->assertEmpty($arr);

        // 指定した文字と一致するか
        $msg = 'Hello';
        $this->assertEquals('Hello',$msg);

        // 指定した値以下であるか
        $n = random_int(0,100);
        $this->assertLessThan(100,$n);
    }
}
```

#### 実行結果
1つのテストの５個のassertionが成功したと出ました。

```
PHPUnit 9.5.10 by Sebastian Bergmann and contributors.

.                                                                   1 / 1 (100%)

Time: 00:00.028, Memory: 6.00 MB

OK (1 test, 5 assertions)
```

## テスト対象クラスに対してテストを実行する
Appフォルダの直下に下記のファイルを作ってください。

このSampleクラスに対してテストを実行してみます。

#### Sample.php
```php
<?php

namespace App;

class Sample
{
    public function add($num1, $num2)
    {
        return $num1 + $num2;
    }

    public function sub($num1, $num2)
    {
        return $num1 - $num2;
    }
}
```

SampleTest.phpでは、このSample.phpを利用してテストメソッドを編集します。

#### SampleTest.php
```php
<?php

namespace Tests\Unit;

use PHPUnit\Framework\TestCase;
use App\Sample;

class SampleTest extends TestCase
{
    /**
     * A basic unit test example.
     *
     * @return void
     */
    public function test_add()
    {
        $sample = new Sample;
        $sum = $sample->add(5, 3);
        $this->assertEquals(8, $sum);
    }

    /**
     * @test
     */
    public function 引き算()
    {
        $sample = new Sample;
        $sum = $sample->sub(5, 3);
        // あえて失敗させてみる
        $this->assertEquals(1, $sum);
    }
}
```

テストメソッドはなんと日本語でも大丈夫です。

その場合は、上記のように<red>@testアサーション</red>を追加する必要があります。

日本語で記述すると、テストが失敗時にテストメソッド名が表示されるので読みやすくなります。


#### 実行結果(失敗した場合)
```
PHPUnit 9.5.10 by Sebastian Bergmann and contributors.

.F                                                                  2 / 2 (100%)

Time: 00:00.057, Memory: 6.00 MB

There was 1 failure:

1) Tests\Unit\SampleTest::引き算
Failed asserting that 2 matches expected 1.

/work/backend/tests/Unit/SampleTest.php:29

FAILURES!
Tests: 2, Assertions: 2, Failures: 1.
```

## 例題　

ECサイトで商品を購入した際に獲得できるポイントを計算するクラス（Calculate.php）を作成しました。

購入金額が1000円以上の場合に100円に付き、1ポイント

購入金額が10000円以上の場合に100円に付き、２ポイント

獲得できます。

このクラスを検証するテストメソッドを実装してください。

### Calculate.php
```php
<?php

namespace App;

class CalculatePoint
{
    public function CalculatePoint(int $amount): int
    {
        if ($amount < 1000){
            return 0;
        }

        if ($amount < 10000){
            $basePoint = 1;
        } else {
            $basePoint = 2;
        }

        return intval($amount/100) * $basePoint;
    }
}
```

参考：[Laravel PHPUnitでテスト入門](https://noumenon-th.net/programming/2020/03/04/laravel-phpunit/)

<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;zoom: 1;overflow: hidden;"><div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_202112091159180478?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F6089b4c29d9a70a50463165514d05e0d%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F6089b4c29d9a70a50463165514d05e0d%2F" target="_blank" ><img src="https://thumbnail.image.rakuten.co.jp/ran/img/2001/0009/784/802/613/002/20010009784802613002_1.jpg?_ex=320x320" style="border: none;" /></a></div><div class="kaerebalink-info" style="line-height:120%;zoom: 1;overflow: hidden;"><div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_202112091159180478?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F6089b4c29d9a70a50463165514d05e0d%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F6089b4c29d9a70a50463165514d05e0d%2F" target="_blank" >ＰＨＰフレームワークＬａｒａｖｅｌ　Ｗｅｂアプリケーション開発 バージョン８．ｘ対応  /ソシム/竹澤有貴</a><div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail" style="margin-bottom:5px;"></div><div class="kaerebalink-link1" style="margin-top:10px;"></div></div><div class="booklink-footer" style="clear: left"></div></div>

PHPUnitを利用してユニットテストを行う方法

【Laravel6】ユニットテスト

## 多対多について

予約（Reservation）と部屋（Room）はお互いが相手に対して多の関係が成立する、<bold>多対多</bold>の関係になります。
- ・一つの予約には、たとえば団体客の場合などは複数の部屋を予約する。
- ・一つの部屋には、時間を変えて複数の予約が行われる。

この多対多という関係はデータベース上に直接表現することは推奨されません。表現できなくはないのですが、効率が悪いデータベースになってしまいます。

興味ある人はこれ読んでください。
<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;zoom: 1;overflow: hidden;"><div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_20211014000743716?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F155d07bf69f979c71f1b91bcb99d241a%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F155d07bf69f979c71f1b91bcb99d241a%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/ran/img/2001/0009/784/873/115/894/20010009784873115894_1.jpg?_ex=320x320" style="border: none;" /></a></div><div class="kaerebalink-info" style="line-height:120%;zoom: 1;overflow: hidden;"><div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_20211014000743716?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F155d07bf69f979c71f1b91bcb99d241a%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F155d07bf69f979c71f1b91bcb99d241a%2F" target="_blank" rel="nofollow" >ＳＱＬアンチパタ-ン   /オライリ-・ジャパン/ビル・カ-ウィン</a><div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail" style="margin-bottom:5px;"></div><div class="kaerebalink-link1" style="margin-top:10px;opacity: .50;filter: alpha(opacity=50);-ms-filter: "alpha(opacity=50)";-khtml-opacity: .50;-moz-opacity: .50;"><div class="shoplinkrakuten" style="display:inline;margin-right:5px;background: url('//img.yomereba.com/kl.gif') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000019.bsg2d228.g0000019.bsg2eb1d/kaereba_main_20211014000743716?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F155d07bf69f979c71f1b91bcb99d241a%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F155d07bf69f979c71f1b91bcb99d241a%2F" target="_blank" rel="nofollow" >楽天市場でチェック</a></div><div class="shoplinkamazon" style="display:inline;margin-right:5px;background: url('//img.yomereba.com/kl.gif') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;"><a href="https://www.amazon.co.jp/gp/search?keywords=sql%E3%82%A2%E3%83%B3%E3%83%81%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=blogtukki-22" target="_blank" rel="nofollow" >Amazonでチェック</a></div></div></div><div class="booklink-footer" style="clear: left"></div></div>


そういったデータベースの無駄を防ぐために、<red><bold>中間テーブル</bold></red>という特殊なテーブルを追加してそこに表現します。
（ちなみに、中間テーブルというのはLaravel特有の呼び方で、<bold>連関エンティティ</bold>と呼んだりします。）


参考：[Laravel6.x Eloquent: リレーション　多対多](https://readouble.com/laravel/6.x/ja/eloquent-relationships.html#many-to-many)


## 多対多の実装

今回は、予約と部屋の間にできるリレーションになるので、Reserveモデルに実装していきます。

<red><bold>belongsToMany</bold></red>は多対多を実装するために使用するメソッドです。

引数として、前から順番に下記の内容を書きます。

- 1.相手のモデル
- 2.中間テーブルの名前、
- 3.中間テーブル上の相手のモデルの外部キー
- 4.中間テーブル上の自分のモデルの外部キー

なお、これを実装するまでに、<bold>Roomモデルの作成や中間テーブルreserve_roomをmigrateし、それぞれにデータを挿入しているもの</bold>とします。


#### Reserve.php
```php

class Reserve extends Model
{
    protected $primaryKey = 'reserve_id';

    // 前回のguestとの１対多のリレーション
    public function guest()
    {
        return $this->belongsTo('App\Guest','guest_id','guest_id');
    }

    // 今回のroomとの多対多のリレーション
    public function rooms()
    {
        // belongsToMany(相手のモデル、中間テーブルの名前、中間テーブル上の自分のモデルの外部キー、中間テーブル上の相手のモデルの外部キー)
        return $this->belongsToMany('App\Room','reserve_room','reserve_id','room_id')
    }
```

Viewでこのroom()メソッドを利用してみましょう。

#### Reserve/index.blade.php
```php
@extends('layouts.hotel')

@section('body')
    <table>
        <th>予約ID</th><th>お名前</th><th>ご住所</th><th>電話番号</th><th>人数</th><th>チェックイン日</th><th>チェックアウト日</th>
        <th>料金</th>
        @foreach($items as $item)
        <tr>
            

            
            <td>{{$item->rooms}}</td>
        </tr>
        @endforeach
    </table>
@endsection

```
#### $item->roomで表示される内容の例
```php
// 中間テーブルの１つ目のデータと対応するRoomsテーブル
[{"room_id":1,"room_type_id":1,"room_number":"101","created_at":null,"updated_at":null,
    "pivot":{"reserve_id":1,"room_id":1}},
// 中間テーブルの２つ目のデータと対応するRoomsテーブル
{"room_id":1,"room_type_id":1,"room_number":"101","created_at":null,"updated_at":null,
    "pivot":{"reserve_id":1,"room_id":1}}]
```

roomメソッドによるリレーションにより、データベースからRoomsテーブルの情報を取得できたことが分かります。

ここで利用したメソッドはbelongsTo<bold>Many</bold>なので、<code>item->rooms</code>で取得できるデータは<bold>複数</bold>になります。

なので、配列を表す<code>[　]</code>が使われています。

とりあえず<red>first()メソッド</red>を使って、一番前のデータを表示させます。

```html
<td>{{$item->rooms->first()}}</td>
```
#### $item->rooms->first()で表示される内容の例
```php
// 中間テーブルの１つ目のデータと対応するRoomsテーブルのレコード
{"room_id":1,"room_type_id":1,"room_number":"101","created_at":null,"updated_at":null,
    "pivot":{"reserve_id":1,"room_id":1}}
```

これからさらに対応するRoomsテーブルのレコードを取得するには、

```html
<td>{{$item->rooms->first()->room_number}}</td>
```

としましょう。

### 中間テーブルのデータを取得する。
<red>pivot</red>を日本語にすると、<bold>中間</bold>という意味になります。

中間テーブルのデータはこのpivotプロパティを介して取得できます。

```html
<td>{{$item->rooms->first()->pivot}}</td>
```
#### $item->rooms->first()->pivot で表示される内容の例
```php
// 中間テーブルの１つ目のデータと対応するRoomsテーブルのレコード
{"reserve_id":1,"room_id":1}
```

ただし、このままでは対応する外部キーの値しか表示されません。

中間テーブルのそれ以外のカラムも表示するには、モデルの<code>belongsToMany</code>のあとに、<code>withPivot()</code>を追加します。

#### Reserve.php
```php
public function rooms()
{
    return $this->belongsToMany('App\Room','reserve_room','room_id','reserve_id')
                ->withPivot('days','price');
}
```
#### 修正後の$item->rooms->first()->pivot で表示される内容の例
```php
// 中間テーブルの１つ目のデータと対応するRoomsテーブルのレコード
{"reserve_id":1,"room_id":1,"days":"2021-10-23","price":8000}}
```

【Laravel6】多対多のリレーションと実装（ホテル予約システム5）


## Fakerを利用する

<bold>Faker</bold>はLaravelに標準で準備されている、現実に近いデータを用意してくれるライブライです。

これをSeederで使ってみて、より現実に近いテストデータを準備してみます。


#### GuestsTableSeeder
```php

class GuestsTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $faker = \Faker\Factory::create('ja_JP');
        for ($i = 0; $i < 10; $i++){
        $param = [
            'name' => $faker->name(),
            'address' => $faker->address(),
            'tel' => $faker->phoneNumber(),
            'created_at' => now(),
            'updated_at' => now(),
        ];
        DB::table('guests')->insert($param);
        }
    }
}
```

参考：[[Laravel5.1]Fakerチートシート](https://qiita.com/tosite0345/items/1d47961947a6770053af)



最後にターミナルでSeederを実行します。

```terminal
php artisan db:seed
```

## Factory関数としてまとめる

以上の工程で<red>ダミーデータを作成することができましたが、これをFactory関数としてまとめておくことができます。</red>

まずはターミナルで、factoryを生成するコマンドを実行します。

Guestモデルを作成するfactoryなので、GuestFactoryとします。

```terminal
php artisan make:factory GuestFactory
```

作成したGuestFactoryを編集します。

さきほどGuestTableSeederに記載した内容とほぼ同じです。

このFactoryと対応するModelを<code>define->(App\Guest::class, ・・・)</code>で指定します。

(このコードはLaravel6のコードです。最新版のLaravel8では変更があります。)

#### GuestFactory.php

```php
<?php

/** @var \Illuminate\Database\Eloquent\Factory $factory */

use App\Model;
use Faker\Generator as Faker;

$factory->define(App\Guest::class, function (Faker $faker) {

    return [
        'name' => $faker->name(),
        'address' => substr($faker->address(),7),
        'tel' => $faker->phoneNumber(),
    ];
});

```

Seederでこれを実行するように書き換えます。


#### GuestsTableSeeder.php
```php
<?php

use Illuminate\Database\Seeder;

class GuestsTableSeeder extends Seeder
{
    public function run()
    {
        factory(App\Guest::class,20)->create();
    }
}
```

これを実行します。
```terminal
php artisan migrate:fresh --seed
```

英語のダミーデータが作成されてしまったと思います。configフォルダのapp.phpから、fakerの設定を日本語に変更します。

#### config/app.php
```php
//略

    'faker_locale' => 'ja_JP',

```

【Laravel6】FakerとFactoryを利用したダミーデータの作成（ホテル予約システム４）


## 予約一覧画面を作成する

前回までで利用者に関する一覧表示(Read)と登録(Create)の機能が作成できました。

これと同じことをして、予約(Reserve)に関する一覧表示機能を作成しましょう。詳細は省略しますがこのような流れになります。

・マイグレーションを作成
```terminal
php make:migrate CreateReservesTable
```

・シードでダミーデータを作成
```terminal
php make:seeder ReservesTableSeeder
```

・Reserveモデルを作成
```terminal
php make:model Reserve
```

・Reserveコントローラを作成
```terminal
php make:Controller ReserveController
```

・予約一覧画面を（views/reserve/index.blade.php）に作成

![予約一覧](/images/2021年/11月/hotel2.png)

## 利用者と予約の間のリレーションを設定する

ここからが本題です。予約一覧画面には予約した利用者のIDが表示されています。

利用者テーブルと予約テーブルの間にリレーションを定義して、この予約一覧画面で利用者テーブルに格納されている名前や住所などを表示してみます。

まず利用者と予約の間に成立する関係ですが、<blue>一人の利用者は複数回の予約をすることがある</blue>ので、<red><bold>一対多</bold></red>になります。

この関係のとき、利用者テーブルは<bold>主テーブル</bold>、予約テーブルは<red><bold>外部キー</bold></red>である<bold>利用者ID</bold>を持っているので、<bold>従テーブル</bold>となります。

今回は従テーブルである予約テーブルとアクセスしており、追加で主テーブルの利用者テーブルの情報が欲しいので、予約テーブルのモデルである<bold>Reserveモデル</bold>に<code>belongsTo</code>を設定します。

#### Reserve.php
```php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Reserve extends Model
{
    public function guest()
    {
        return $this->belongsTo('App\Guest');
    }

}
```
上記のコードは動作しない場合があります。

主キーとして、<bold>id</bold>以外を使っている場合や、外部キーの名前が<bold>主テーブルのモデル名_id</bold>になっていない場合などです。

<red>Laravelが推奨するモデルや各キーの名前の付け方</red>があり、その場合はLaravelが色々とサポートしてくれるのですが、そうでない場合は自身で主キーや外部キーを書いてあげる必要があります。

#### Reserve.php　（主キーを指定する場合、belongsToの外部キー名や主テーブルの主キー名を指定する場合）
```php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Reserve extends Model
{
    // 主キーにid以外の名前を付けているなら指定する
    protected $primaryKey = 'reserve_id';

    public function guest()
    {
        //belongsTo(主テーブルの指定、従テーブルの外部キー、対応する主テーブルの主キー)
        return $this->belongsTo('App\Guest','guest_id','guest_id');
    }

}
```

完全にLaravelの指定した名前の付け方に従う方が楽だと思いますが、個人的には主キー名もidではなくモデル名_idの方が理解しやすいと思うし、belongsToの指定も第３引数まで書いた方がわかりやすいと思うので、Laravelに任せずにしっかり全部書くのがオススメです。

## リレーションを行うguest()メソッドを利用する

この<code>guestメソッド</code>は、Reserveモデルから呼び出すことでGuestモデルを取得できます。

そのため、下記のように書くことで、Guestモデルのデータを取得することができます。


```php
@extends('layouts.hotel')

@section('body')
    <table>
        <th>予約ID</th>
        <th>利用者ID</th>
        <th>お名前</th><th>ご住所</th><th>電話番号</th>
        <th>人数</th><th>チェックイン日</th><th>チェックアウト日</th>

        @foreach($items as $item)
        <tr>
            <th>{{$item->reserve_id}}</th>
            <th>{{$item->guest_id}}</th>
            <td>{{$item->guest->name}} 様</td>
            <td>{{$item->guest->address}}</td>
            <td>{{$item->guest->tel}}</td>
            <td>{{$item->number_of_reservations}}名</td>
            <td>{{$item->check_in_day}}</td>
            <td>{{$item->check_out_day}}</td>
        @endforeach
    </table>
@endsection

```

![予約一覧](/images/2021年/11月/hotel3.png)


【Laravel6】テーブルのリレーションと１対多の実装（ホテル予約システム３）


## Composition API

Vue3 から新しく導入された <red><bold>Composition API</bold></red>は、ごちゃごちゃしがちなVueのコンポーネントを整理する新しい書き方です。

独特な書き方のルールが多いVueですが、このComposition APIを使うことで生のJavaScriptに近い理解しやすい書き方を利用することができます。

#### 従来の書き方(Options API)の場合

```javascript
export default {
  data() {
    msg: 'Hello World';
  },
  methods: {
    sayHello() {
      console.log(this.msg);
    },
  },
};
```

#### Composition API の場合

```javascript
import { ref } from 'vue';

export default {
  setup() {
    // data()に書いていた内容
    const data = ref({
      msg: 'Hello World',
    });

    // methodsに書いていた内容
    const sayHello = () => {
      console.log(data.value.msg);
    };

    // 定義したものをreturnする
    return {
      data,
      sayHello,
    };
  },
};
```

従来の書き方は,<blue>Options API</blue>と呼ぶそうです。このOptions APIでは<code>data()</code>と<code>methods:{}</code>に書いてた内容を、新しいComposition APIでは<code>setup()</code>にまとめて書くことができます。

<code>setup()</code>にまとめることで、data()とmethods:{}に書いていた内容は同じスコープになるため、書く機会の多かった<red>this.○○</red>を一掃することができます。

なお、setup()で必要な内容を書いたら、最後にそれらを<red>return</red>する必要があります。

ここで<code>ref</code>というメソッドは、<red>対象のオブジェクトの参照を作る</red>働きをしており、それを<red>変数名.value</red>という形でできるようになっています。

オブジェクトの参照ではなく、オブジェクトのコピーを作りたいときは、refの代わりに<code>reactive</code>を使います。

このときは、上記のvalueを使う必要がなくなります。


#### CompositionAPI の reactive

```javascript
import { reactive } from 'vue';

export default {
  setup() {
    // reactiveで定義
    const data = reactive({
      msg: 'Hello World',
    });

    const sayHello = () => {
      // valueが不要になった。
      console.log(data.msg);
    };
    return {
      data,
      sayHello,
    };
  },
};
```

## CompositionAPIとpropsとemit
Vueを学ぶ過程で最初の難関になったのはコンポーネント間のデータのやり取り、いわゆる<red><bold>「props down, event up」</bold></red>でした。

このpropsとevent($this.emit())も、Composition APIの中で利用することができます。

<red>thisが一掃されている</red>ことで、何がどのデータなのかが分かりやすくなりました。

<code>context</code>は、コンポーネントに関する重要な情報をひとまとめにしたオブジェクトであり、そのcontextが持っている<code>emitメソッド</code>を使うことで、
従来方式のthis.$emitの代替として利用できます。


#### 従来の書き方(Options API)
```javascript
export default {
  props:{
    title:String
  }
  data() {
    msg: 'Hello World';
  },
  methods: {
    sayHello() {
      // propsで受け取ったtitleを表示
      console.log(this.title);
      // this.$emitでmsgを送る
      this.$emit('hello-event',this.msg)
    },
  },
};
```

#### Composition API
```javascript
import { reactive, context } from 'vue';

export default {
  props: {
    title: String
  },
  setup(props,cotext) {

    const data = reactive({
      msg: 'Hello World',
    });

    const sayHello = () => {
      // propsでデータを受け取る
      console.log(props.title);
      // emitでmsgを送る
      context.emit('hello-event',data.msg);
    };

    return {
      data,
      sayHello,
    };
  },
};
```


## CompositionAPIとライフサイクルフック(created,mountedなど)

Composition APIでは、<code>created</code>や<code>mounted</code>などのライフサイクルメソッドも表現できます。

というより、デフォルトでComposition APIは<red><bold>createdのタイミングで動作する</bold></red>仕様になっています。

<code>created</code>以外の<code>mounted</code>や<code>update</code>などは、<code>onMounted</code>や<code>onUpdate</code>のように、
on〇〇という形で記載します。


#### 従来の書き方(Options API)
```javascript
export default {
  created(){
    console.log('Hello!');
  },
  mounted(){
    console.log('World');
  }
};
```

#### Composition API
```javascript
import { onMounted } from 'vue'

export default {

  setup() {
    // createdはsetup()に直書き
    console.log('Hello');

    // mountedはonMounted()として呼び出され、コールバックを持たせる
    onMounted(() => {
      console.log('World')
    })
};
```

【Vue3】CompositionAPIについて

## 利用者の登録機能を作る
一覧の表示ができたので、次は利用者の登録機能を作っていきます。

やる内容は下記の通り
- ・データ入力フォームを作成する(add.blade.php)。
- ・コントローラにaddとcreateのアクションを追加する。
- ・web.phpにルーティングを設定する。

その前に、楽にデザインを良くしたいので、BootStrapを利用できるようにしておきましょう。

### laravel/ui をインストールし、BootStrapを利用可能にする。
BootStrapを使うために、composerを使ってlaravel/uiという追加パッケージをインストールします。

laravel/uiはLaravelでVueやReactなどのモダンなフロントエンドの技術を利用するために必要なライブラリで、BootStrapもこれを使って利用します。

なお、これらの作業には<red>node.js</red>が必要です。

#### ターミナルで下記コマンドを実行
現時点の最新版のlaravel/uiのバージョンは3系なのですが、この環境で使用しているLaravel6系に対応するのは1系です。

公式のGitHub:：[laravel/ui](https://github.com/laravel/ui)

ですので、バージョンを指定してダウンロードします。

```terminal
composer require laravel/ui:^1.0 --dev
```

このlaravel/ui を利用して、bootstrapをインストールします。

```terminal
php artisan ui bootstrap
```

#### layouts/hotel.blade.php
<head>内に下記の一文を追加することで、BootStrapが利用可能になります。

```html
<head>
    
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    
</head>
```

これでBootStrapが利用可能になりました。

### 入力フォームの作成
では、最初に戻って入力フォームを作成していきます。


```php
@extends('layouts.hotel')

@section('body')
    <form action="/guest/add" method="POST" class="form-group" >
        @csrf
        <label for="name">お名前</label>
        <input type="text" name="name" placeholder="お名前" class="form-control" required autofocus>
        <br>
        <label for="address">ご住所</label>
        <input type="text" name="address" placeholder="ご住所" class="form-control" required>
        <br>
        <label for="tel">お電話番号</label>
        <input type="tel" name="tel" placeholder="お電話番号" class="form-control" required>
        <br>
        <input type="submit" value="登録" class="form-control-sm">
    </form>
@endsection

<style>
form {
    width: 50%;
}
input:required{
    /* background: #ffcdd2; */
}
input:valid{
    background: transparent;
}
input:focus{
    background: #DCEDC8;
}

</style>
```
### Guestモデル

#### Guest.php
```php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Guest extends Model
{
    protected $fillable = ['name','address','tel'];


}

```

### GuestController.php

```php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Guest;

class GuestController extends Controller
{
    public function index()
    {
        $guests = Guest::all();

        return view('guest.index',['guests' => $guests]);
    }
    public function add()
    {
        return view('guest.add');
    }
    public function create(Request $request)
    {
        $user = new Guest();
        $user->fill($request->all())->save();
        return redirect('guest');
    }
}

```

#### web.php

```php
<?php

Route::get('guest','GuestController@index');

Route::get('guest/add','GuestController@add');
Route::post('guest/add','GuestController@create');

```

BootStrapの導入と利用者登録の機能の実装

【Laravel6】BootStrapの導入と登録（Create)機能の実装（ホテル予約システム２）



### ホテルの予約システムを作ろう！

応用情報技術者令和２年秋のデータベースの問題を題材にして、Laravelでホテル予約システムを作っていきます。

<bold>バージョン：Laravel:6.20</bold>

過去問道場の該当箇所はこちら

[応用情報技術者試験ドットコム　令和２年度秋期　午後問６　データベース](https://www.ap-siken.com/kakomon/02_aki/pm06.html)

まずは要件定義とE-R図については、こんな感じになります。一部簡易にしています。

#### 予約システムの主な要件

・予約システムを最初に利用する際には、氏名、住所、郵便番号を入力し、利用者登録を行う。

・利用者は空き部屋照会のための条件入力の画面上で、チェックインとチェックアウトの日付、予約したい部屋の種別と部屋数を指定して空き状況を照会する。

・予約は部屋の種別ごとに行う。


#### 予約システムのE-R図
![ホテル予約システムのE-R図](/images/2021年/10月/hotel_mini.svg)

## Laravelの開発の基本的な進め方
要件定義によって作成されたE-R図に従い作成していきます。１つのテーブル（表）に対して、

テーブル → モデル（Model） → コントローラー（Controller） → （ルーティング） → ビュー（View） の順に作成していくと良いでしょう。

以下では、一番簡単な利用者テーブルの作成から全利用者の表示を行ってみます。

### 1.E-R図に従ってテーブルをマイグレーションファイル（create_guests_table.php）で作成する。


```terminal
php artisan make:migration create_guests_table
```
ファイル名を<red>create_◯◯◯◯_table</red>という形（〇〇〇〇はテーブル名で複数形の単語）で指定してください。

こうすることで、Laravelは必要な事項をある程度埋めたマイグレーションファイルのテンプレートを作成してくれます。

基本的にLaravelで開発を行う際は、Laravelの推奨するルールに従っておくとLaravelが色々忖度してくれて開発がスムーズに進むことが多いです。

ここで<red>テーブル名の◯◯◯◯を複数形にする</red>のもLaravelの推奨するルールです。複数形ではない名前をつけることは可能ですが、その場合は１つ追加で設定する必要が生じます。<bold>楽をしたいならLaravelを信じてルールに従いましょう。</bold>

上記のコマンドで作成したマイグレーションファイルに、下記のように追記を行います。

#### create_guests_table.php
```php
<?php

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

class CreateGuestsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('guests', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('address');
            $table->string('tel');
            $table->timestamps();
        });
    }

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

入力が完了すれば、マイグレーションを実行します。

```terminal
php artisan migrate
```

### 1.1 ダミーデータをSeeder（GuestsTableSeeder.php）で作成する。
Seederはテーブルに対してダミーデータを追加することができます。

利用方法はまず下記のコマンドで生成して、
```terminal
php artisan make:seeder GuestsTableSeeder
```

run()メソッド内に、テーブルに追加したい内容を記載し、

#### GuestsTableSeeder.php
```php
<?php

use Illuminate\Database\Seeder;

class GuestsTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $param = [
            'name' => '大阪たろう',
            'address' => '大阪府大阪市',
            'tel' => '12-3456-7890'
        ];
        DB::table('guests')->insert($param);

        $param = [
            'name' => '京都はなこ',
            'address' => '京都府京都市',
            'tel' => '12-3456-7890'
        ];
        DB::table('guests')->insert($param);
    }
}
```

DatabaseSeeder.phpに今書いたファイル名を登録します。

#### DatabaseSeeder.php
```php
<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        $this->call(GuestsTableSeeder::class);
    }
}

```

最後にターミナルでSeederを実行します。

```terminal
php artisan db:seed
```

### 2.モデル（GuestModel.php）を作成する。
どんどん行きましょう。次はモデルを追加します。

Guestsテーブルに対して、その<red>単数形のGuestモデル</red>とします。
（
```terminal
php artisan make:model Guest
```

モデルはテーブルから取り出したデータに対しての操作を記述できますが、とりあえずデフォルトで良いです。

#### Guest.php
```php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Guest extends Model
{
    //
}

```

### 3.コントローラー（GuestController.php）を作成する。
コントローラーを作成します。Guestモデルと繋がるので、<red>GuestController</red>です。

```terminal
php artisan make:controller GuestController
```

#### GuestController.php
```php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Guest;

class GuestController extends Controller
{
    public function index()
    {
        $guests = Guest::all();

        return view('guest.index',['guests' => $guests]);
    }
}

```

### 3.1 コントローラーにルーティング（web.php）を指定する。

#### web.php
```php
Route::get('/guest','GuestController@index');
```

### 4.ビュー（guest/index.blade.php）を作成する。
めちゃくちゃシンプルですが、全ページで利用できるレイアウトを作ります。
（あとで変更するかも）

#### layouts/hotel.blade.php

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

    <title>APホテル</title>
    <style>
        body {
            color: #333333;
            background-color: #FFFFFF;
            font-size: 100%;
            line-height: 1.7;
            margin: 10px auto;
            width: 90%;
            -webkit-text-size-adjust: 100%;
        }
        a {
            text-decoration: none;
        }
        .main-nav {
            display: flex;
            font-size: 1.25rem;
            text-transform: uppercase;
            list-style: none;
        }
        .main-nav li {
            margin-left: 36px;
        }
    </style>
</head>
<body>
    <header>
        <h1>APホテル</h1>
        <nav>
            <ul class="main-nav">
                <li><a href="/guest">利用者一覧</a></li>
                <li><a href="/reserve">予約一覧</a></li>
            </ul>
            <ul class="main-nav">
                <li><a href="/guest/add">利用者一覧</a></li>
                <li><a href="/reserve/add">予約一覧</a></li>
            </ul>
        </nav>
    </header>
    <body>
        @yield('body')
    </body>
</body>
</html>
```

これを継承して利用者一覧画面を表示します。

#### guest/index.blade.php

```php
@extends('layouts.hotel')

@section('body')
    <table>
    <th>お名前</th><th>ご住所</th><th>電話番号</th>
    @foreach($guests as $guest)
    <tr>
        <td>{{$guest->name}}</th>
        <td>{{$guest->address}}</td>
        <td>{{$guest->tel}}</th>
    </tr>
    @endforeach
    </table>
@endsection

<style>
    table{
        width: 80%;
        border-collapse: collapse;
        border-spacing: 0;
    }
    table th, table td{
        padding: 10px 0;
        text-align: center;
    }
    table tr:nth-child(odd){
        background-color: #eee;
    }

</style>
```
![ホテル利用者一覧](/images/2021年/10月/hotel1.png)

これで利用者一覧を表示することができました。


ホテル予約システムを題材にE-R図の確認と利用者の表示機能の実装を行います。

【Laravel6】要件の確認とLaravelの開発の基本的な進め方（ホテル予約システム１）



### 楽天APIを叩く
[楽天API一覧](https://webservice.rakuten.co.jp/document/)

楽天APIには初期設定が必要ですが、それは割愛。


### JavaScriptで楽天APIから本のデータを取得する

JavaScriptでAPIからデータを取得するには、一般的に非同期関数を利用します。

[楽天ブックス総合検索API](https://webservice.rakuten.co.jp/explorer/api/BooksTotal/Search/)から、
キーワードに「JavaScript」を指定したAPIを呼び出してみます。

[【ハンズオンJavaScript】非同期処理で気象庁のAPIから天気予報データを取得する](https://blog-tukki.com/posts/210616)で書いたように、
難しいことは考えず、非同期処理の<code>fetch</code>に<code>await</code>キーワードをつけて、それを包む関数に<code>async</code>キーワードを追加します。

```javascript
const rakuten_book_api = "楽天ブックスの本からJavaScriptが名前に含まれている本を検索するAPIのurl"

const getData = async (url) => {
  const response = await fetch(url);
  const data = await response.json()
  return data
}

const book_data = getData(rakuten_book_api)

console.log(book_data)

```
楽天ブックスAPIから取得できるデータの中身はこんな感じで、
<blue>Items配列</blue>の中に<blue>Itemオブジェクト</blue>が並んでおり、
その中に本のタイトルや著者、ISBN番号などの情報かオブジェクトの形で入っています。

![楽天ブックスAPI結果](/images/2021年/10月/books1.png)


### Vue.jsから楽天APIで本のデータを取得する

上記のことをvue.jsで応用します。

サンプルとしてBooksコンポーネントを作り、その中で楽天ブックスAPIを叩いてみました。

vue.jsの<code>created</code>または、<code>mounted</code>にfetchメソッドを含ませることで
APIからデータを取得できます。

違いについてはこちらが参考になりますが、少し難しいので悩むならmountedにしとけば良いんじゃないかな（雑）。

[Vuejs APIアクセスはcreatedとmountedのどちらで行う？](https://www.kimullaa.com/entry/2019/12/01/132724)

APIからの取得データには本の画像が入っているので、<red>imgタグのsrc属性</red>に<code>v-bind</code>で、画像のurlを設定しています。

#### Book.vue
```html
<template>
  <div>
    <h2>{{ book_title }}</h2>
    <img v-bind:src="book_image" alt="">
  </div>
</template>
<script>
export default {
  name: "Book",
  data: () => ({
    book_title: "",
    book_image: ""
  }),
  async mounted() {
    const url = '楽天ブックスAPIのアドレス'
    const response = await fetch(url);
    const data = await response.json()
    console.log(data.Items[0])
    const first_item = data.Items[0].Item
    this.book_title = first_item.title
    this.book_image = first_item.largeImageUrl
  }
};
</script>
```

![楽天ブックスAPIの本のタイトルと画像](/images/2021年/10月/books2.png)

### APIから取得したデータ全てをv-forを利用して表示する

APIから取得して<red>Items</red>は配列なので、<code>v-for</code>で分解して利用することを考えます。

こういったAPIから取得したデータは<code>オブジェクトを複数持った配列</code>という形で流れてくることが頻繁にあります。

そのため、データが格納された配列を分解し各コンポーネントにオブジェクトを渡す処理が、アプリケーションを作成する際には頻出します。この処理の流れはぜひマスターしてください。

まず、APIにアクセスする処理を親のApp.vueコンポーネントに移し、<code>v-for</code>で分解し、子のBookコンポーネントでは<code>props</code>として受け取ります。


#### App.vue
```html
<template>
  <div class="container">
    <Book
      v-for="book_data in book_list"
      v-bind:book_data="book_data"
      v-bind:key="book_data"
    />
  </div>
</template>

<script>
import Book from "./components/Book.vue";

export default {
  name: "App",
  components: {
    Book,
  },
  data: () => ({
    book_list: "",
  }),
  async created() {
    const url = "楽天ブックスAPIのアドレス";
    const response = await fetch(url);
    const data = await response.json();
    this.book_list = data.Items;
  },
};
</script>

<style >
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 450px;
}
</style>
```

### Book.vue
```html
<template>
  <div style="display: flex">
    <div style="width:300px; margin:10px;">
      <h3>{{ book_title }}</h3>
    </div>
    <img v-bind:src="book_image" alt="" style="margin:10px"/>
  </div>
</template>
<script>
export default {
  name: "Books",
  props: {
    book_data: Object,
  },
  data: () => ({
    book_title: "",
    book_image: "",
  }),
  mounted() {
    this.book_title = this.book_data.Item.title;
    this.book_image = this.book_data.Item.largeImageUrl;
  },
};
</script>
```


![本のタイトルと画像たち](/images/2021年/10月/books3.png)


ツイートをローカルストレージに保存する

Vue3で非同期処理を利用して楽天APIから本のデータを取得する



### ローカルストレージを操作するのに便利な更新ボタンと削除ボタンを設置する

将来的にデータベースへツイートを保存することを見越して、ローカルストレージにデータを保存していきます。

まず最初に、利便性を考えて画面の更新とローカルストレージの削除をボタンで行えるようにしました。
（後から考えてこうした方が楽だったので、解説では最初に追加してみました。）

<code>localStorage.clear()</code>は、ローカルストレージのデータを全て削除し初期化します。

<code>location.reload()</code>は、現在のページを再読み込みします。

#### Tweets.vue

```html
<template>
  <div class="form form-group">
    <textarea
      name="form"
      id=""
      class="form-control"
      cols="60"
      rows="5"
      placeholder="いまなにしてる？"
      v-model="TweetObj.tweet_body"
    ></textarea>
    <br />
    <button class="text-white bg-success p-2 m-2 rounded" v-on:click="doTweet">
      ツイートする
    </button>
		<button class="text-white bg-secondary p-2 m-2 rounded" v-on:click="doReload">
      画面を更新する
    </button>
		<button class="text-white bg-danger p-2 m-2 rounded" v-on:click="removeAllTweet">
      全ツイートを削除する
    </button>
  </div>
</template>

<script>
export default {
  name: "Form",
  data() {
    return {
      TweetObj: {
        tweet_id: 0,
        tweet_user: {
          user_id: "TestId",
          user_name: "ユーザー",
        },
        tweet_body: "",
      },
    };
  },
	props:{
		user:Object,
	},
  methods: {
    doTweet() {
			this.TweetObj.tweet_user = this.user;
      // 値渡しするために、新しいオブジェクトを定義する
      const tweet = Object.assign({}, this.TweetObj);
      this.$emit("tweet-event", tweet);
    },
		doReload(){
			location.reload();
		},
		removeAllTweet(){
      localStorage.clear();
			location.reload();
    }
  },
};
</script>


```

![twittervue6](/images/2021年/10月/twittervue6.png)

### ローカルストレージにツイートを保存する

ではローカルストレージにツイートを保存していきます。

１つのキーに対してツイートのオブジェクトを１個入れる形にしたいので、<blue>tweet_id</blue>をキーにします。

これは割とシンプル。

#### App.vue
```javascript

  // 略

  methods: {
    // フォームコンポーネントからツイートを受け取った時に動くメソッド
    tweetAction(TweetObj) {
      // ツイートを表示用のコンポーネントに渡す配列に追加
      this.AllTweet.push(TweetObj);
      // ツイートをローカルストレージに保存
      localStorage.setItem(
        // キーを指定（ツイートのidを入れる）
        JSON.stringify(TweetObj.tweet_id),
        // 値を指定（ツイート丸ごと入れる）
        JSON.stringify(TweetObj)
      );
    },
  // 略
  },

```

### 画面の更新時にローカルストレージからツイートを取り出す。

App.vueで保存されているデータを画面のロード時に呼び出して、AllTweet配列に追加します。

画面のロード時に呼び出したいので、App.vueの<code>created</code>または<code>mounted</code>の中で呼び出します。

この２つは実行されるタイミングが違いcreatedの方が先に行われます。そのため、アクセスできるデータに違いがあります。

- created・・・propsやcomputedにアクセスできるがDOMにアクセスできない。
- mounted・・・created＋DOMにアクセスできる。
  
今回は、DOMに関係したデータではないので、createdで定義してみました。


#### App.vue

```javascript
  // 略
  created() {
    for (let i = 1; i < localStorage.length; i++) {
      this.AllTweet.push(JSON.parse(localStorage.getItem(i)));
    }
  },

  // 略
```

これでロード時にローカルストレージの情報を読み取れるようになったのですが、バグがあります。

その解消は次回に行っていきます。

Vue3でTwitterクローンを作る　その３

### ツイートの部分のデザインを整えて、いいねボタンを追加する
それぞれのツイートに、ユーザー名＠ユーザーIDの表示を追加し、さらにいいねボタンを追加します。

ハートマークは[Bootstrap Icons](https://icons.getbootstrap.com/)から引っ張ってきています。

ハートマークのsvgタグに<code>v-on:click</code>でクリックイベントを追加しました。

ハートマークをクリックすると、likeCountが増えていきます。


#### Tweets.vue

```html
<template>
  <div class="card">
    <div class="card-header bg-white">
      {{ Tweet.tweet_user.user_name }}@{{ TweetObj.tweet_user.user_id }}
    </div>
    <div class="card-body">
      <div class="card-text">{{ Tweet.tweet_body }}</div>
    </div>
    <div class="card-footer bg-white">
      <div>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          fill="currentColor"
          class="bi bi-heart m-2"
          viewBox="0 0 16 16"
          v-on:click="doCount"
        >
          <path
            d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"
          />
        </svg>
        {{ like }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Tweet",
  props: {
    TweetObj: Object,
  },
  data() {
    return {
      likeCount: 0,
    };
  },
  methods: {
    doCount() {
      this.likeCount++;
    },
  },
};
</script>

```

![twittervue4](/images/2021年/10月/twittervue4.png)

### ユーザーを切り替える

ユーザーを切り替えてつぶやきを投稿できるようにします。

App.vueに追加していくとごちゃごちゃするので、新しく<blue>selectUserコンポーネント</blue>を作り、そこにセレクトボックスでユーザーを選択できるようにします。

（もちろん、実際はログインフォームのコンポーネントを作り、そこからユーザー情報を渡していきます。）

セレクトボックスの実装には、<blue>tweet_users</blue>というリストを<code>data()</code>に持たせて、それを<code>v-for</code>を使って分解して、optionタグにデータを渡します。

調べたら良い実装があったので参考にしました：[Vue.js入門その７〜セレクトボックスを動的に変更してみる〜](https://re-engines.com/2017/09/25/vue-js%E5%85%A5%E9%96%80%E3%81%9D%E3%81%AE%EF%BC%97%E3%80%9C%E3%82%BB%E3%83%AC%E3%82%AF%E3%83%88%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%82%92%E5%8B%95%E7%9A%84%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%97/)


セレクトボックスでユーザを選択してボタンをクリックすると、そのイベントによって親のApp.vueに<blue>tweet_userオブジェクト</blue>を送信します。


#### selectUser.vue
```html
<template>
  <div class="menu">
    <h5 class="text-success">ユーザーの切り替え</h5>
    <select class="form-select" v-model="selectedUser">
      <option
        v-for="tweet_user in tweet_users"
        v-bind:value="tweet_user"
        v-bind:key="tweet_user.user_id"
      >
        {{ tweet_user.user_name }}
      </option>
    </select>
    <button class="text-white bg-primary p-2 m-2 rounded" v-on:click="changeUser">切り替え</button>
  </div>
</template>

<script>
export default {
  name: "SelectUser",
  data() {
    return {
      tweet_users: [
        { user_id: "test_a", user_name: "Aさん" },
        { user_id: "test_b", user_name: "Bさん" },
        { user_id: "test_c", user_name: "Cさん" },
      ],
      selectedUser: { user_id: "test_a", user_name: "Aさん" },
    };
  },
  methods: {
    changeUser(){
      this.$emit('selectUser-event',this.selectedUser)
    }
  },
};
</script>
<style>
.menu {
margin: 5px;
font-size:large;
width: 20%;
margin: 30px;
}
</style>

```

親のAppコンポーネントでは、受け取った<blue>tweet_userオブジェクト</blue>を入力フォームに渡します。

#### App.vue
```html
<template>
  <div>
    <div class="wrapper">
      
      <SelectUser v-on:selectUser-event="selectUser" />
      <div class="tweet-contents">
        <h2 class="text-success">Twitter-Vue3</h2>
        <div class="content">
          
          <Form v-on:tweet-event="tweetAction" v-bind:user="tweet_user" />
          <div style="margin-top:20px">
            <Tweet
              v-for="Tweet in AllTweet"
              v-bind:TweetObj="Tweet"
              v-bind:key="Tweet.tweet_id"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Form from "./components/Form.vue";
import Tweet from "./components/Tweet.vue";
import SelectUser from "./components/SelectUser.vue";

export default {
  name: "App",
  components: {
    Form,
    Tweet,
    SelectUser,
  },
  data() {
    return {
      AllTweet: Array.of(
        // 初回表示用のダミーデータ
        {
        tweet_id: 0,
        tweet_user: {
          user_id: "TestId",
          user_name: "ユーザー",
        },
        tweet_body: "はじめてのツイート",
      }
      ),

      // 初回ロード時にForm.vueにpropsとして渡し、selectUser()で上書きするためのデータ
      tweet_user: {
        user_id: "TestId",
        user_name: "ユーザー",
      },
    };
  },

  methods: {
    tweetAction(TweetObj) {
      this.AllTweet.push(TweetObj);
    },
    selectUser(user) {
      console.log(user);
      this.tweet_user = user;
    },
  },
};
</script>

```
Formコンポーネンでは、<blue>tweet_userオブジェクト</blue>をpropsで受け取り、<code>data()</code>内の<blue>TweetObj.tweet_user</blue>を上書きします。


#### Form.vue
```html
<template>
  <div class="form form-group">
    <textarea
      name="form"
      id=""
      class="form-control"
      cols="60"
      rows="5"
      placeholder="いまなにしてる？"
      v-model="TweetObj.tweet_body"
    ></textarea>
    <br />
    <button class="text-white bg-success p-2 m-2 rounded" v-on:click="doTweet">
      ツイートする
    </button>
  </div>
</template>

<script>
export default {
  name: "Form",
  data() {
    return {
      TweetObj: {
        tweet_id: 0,
        tweet_user: {
          user_id: "TestId",
          user_name: "ユーザー",
        },
        tweet_body: "",
      },
    };
  },
	props:{
		user:Object,
	},
  methods: {
    doTweet() {
      // propsで受け取ったuser情報でTweetObj.tweet_userを上書き
			this.TweetObj.tweet_user = this.user;
      // 値渡しするために、新しいオブジェクトを定義する
      const tweet = Object.assign({}, this.TweetObj);
      this.$emit("tweet-event", tweet);
    },
  },
};
</script>

```

![twittervue5](/images/2021年/10月/twittervue5.png)


続きます

いいねをつける。ユーザー切り替え機能を実装する。