講義第２回

# Javascriptを利用したコーディングを知ろう
# 初めに
## 今回の目的
Javascriptを利用して非同期処理を動かしてみる
APIを利用してみる

# 1. 非同期処理
## 非同期処理とは？
一言でいうと...
「一つの処理を実行中であっても他の処理を実行できる実行方式」

逆に同期処理とは？
「１つずつ前から順番に処理を実行できる実行方式」
## 1-1. ペペロンチーノの作り方
ペペロンチーノを作る料理工程に例えて
ハンズオン形式で非同期処理の理解を深めよう！
![food_spaghetti_pepperoncino.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655585/ee2d1865-d283-78fd-ce50-132ad3681c4d.png)
ペペロンチーノ料理工程
1. パスタを茹でる（5分）
1. ニンニクを切る（1分）
1. ソースを作る（4分）
1. 皿に盛り付ける

## 1-2. ペペロンチーノの作り方（同期処理編）
実行用ファイルを作成
まずは料理工程ごとにfunctionを作成してみる　:desktop:（ハンズオン5分）
```diff_shell
$ vim peperon_sync.js
```

```diff_javascript:peperon_sync.js
//         
// 同期処理
//

// 料理時間計算用
async function sleep(ms) {
    return new Promise(r => setTimeout(r, ms*1000));
}

// パスタゆでる
async function boil_pasta() {
    console.log("パスタを茹でます...")
    await sleep(5)
    console.log("パスタが茹で上がりました!")
    return "パスタ"
}

// ニンニク切る
async function slice_garlic() {
    console.log("ニンニクを切ります...")
    await sleep(1)
    console.log("ニンニクを切りました！")
    return "ニンニク"
}

// ソースを作る
async function make_sauce() {
    await slice_garlic() 
    console.log("ソースを作ります...")
    await sleep(4)
    console.log("ソースができました!")
    return "ソース"
}
```
料理実行用functionを追加できたら
実際に料理を作成する実行用処理を追記 :desktop:（ハンズオン5分）
```diff_shell
$ vim peperon_sync.js
```
```diff_javascript:peperon_sync.js
// ソースを作る
async function make_sauce() {
    await slice_garlic() 
    console.log("ソースを作ります...")
    await sleep(4)
    console.log("ソースができました!")
    return "ソース"
}
+ // 料理開始用
+ async function serve_dish(){
+     // 開始時間
+     start_time = Date.now();
+     // パスタ茹でる
+     pasta = await boil_pasta()
+     // ソース作る
+     sauce = await make_sauce()
+     // 盛り付ける
+     console.log(`${pasta}と${sauce}を盛り付けます... \n`)
+     // 終了時間
+     end_time = Date.now();
+     diff = end_time - start_time
+     console.log(`料理時間:` + Math.floor(diff/1000)%60 + `分`);
+ }
+ 
+ try {
+     serve_dish()
+ }catch(err){
+     console.log(err)
+ }
+ 
```

料理開始！
工程通りに料理をすすめ10分ほどの所用時間で料理が完成 :desktop:（ハンズオン1分）
```diff_shell
$ node peperon_sync.js
パスタを茹でます...
パスタが茹で上がりました!
ニンニクを切ります...
ニンニクを切りました！
ソースを作ります...
ソースができました!
パスタとソースを盛り付けます... 

料理時間:10分
```
同期処理の場合、前の料理工程が終了してから次の工程にすすむ
順序よく処理をすすめられるが非効率
![スクリーンショット 2024-01-08 160952.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655585/356108a2-6fa5-7066-9226-9c10ed3eba06.jpeg)

## 1-3. ペペロンチーノの作り方（非同期処理編）
実行用ファイルをコピー
```diff_shell
$ cp peperon_sync.js peperon_async.js
```
差分箇所のみ修正する :desktop:（ハンズオン3分）
```diff_shell
$ vim peperon_async.js
```
```diff_javascript:peperon_async.js
 // 料理開始用
 async function serve_dish(){
     start_time = Date.now();
     // パスタ茹でる
-    pasta = await boil_pasta()
+    pasta = boil_pasta()
     // ソース作る
-    sauce = await make_sauce()
+    sauce = make_sauce()
+    result = await Promise.all([pasta, sauce]);
     // 盛り付ける
-    console.log(`${pasta}と${sauce}を盛り付けます... \n`)
+    console.log(`${result[0]}と${result[1]}を盛り付けます... \n`)
     // 終了時間
     end_time = Date.now();
     diff = end_time - start_time
}
```

料理開始！
パスタを茹ではじめるタイミングでソースも作る :desktop:（ハンズオン1分）
```diff_shell
$ node peperon_async.js 
パスタを茹でます...
ニンニクを切ります...
ニンニクを切りました！
ソースを作ります...
パスタが茹で上がりました!
ソースができました!
パスタとソースを盛り付けます... 

料理時間:5分
```

非同期処理の場合前の料理工程の終了をまたずに次の工程にすすむことができる
結果待機時間をなくし効率よく短時間で料理を完成させることができる
![スクリーンショット 2024-01-08 161016.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655585/7a1a3063-9dc2-d7bc-2a78-7c3219464cc7.jpeg)

料理に例えると5分程度の短縮だけど
これが大規模システムになるど膨大な時間の短縮に繋げることだってできる！！

# 2.API
## APIとは？
「アプリケーション・プログラミング・インターフェース(Application Programing Interface)」の略称
一言でいうと...
「異なるアプリケーション間で情報を共有する機能」

ここでいう「アプリケーション」とは？

* コーディングしたpeperon_async.js
* Amazonや楽天などのWebサイト
* スマホのアプリ

## 2. API例
企業によって様々なAPIが提供されている
### 例1 LINE Messaging API
LINEのメッセージ機能を利用できるAPIです。
メッセージを自動送信したりスタンプを送信したりすることができます。
### 例2 Twitter API
ツイートを予約・投稿ができたりツイートの検索ができる。
### 例3 Yahoo!ショッピングWeb API
商品情報の取得や在庫確認ができる。

## APIを使うことでどんないいことがあるのか？
例えば...

ショッピングサイトでどーーしても欲しい商品があるが人気商品のためいつも在庫が品薄
仕事の合間にちょこちょこサイトをチェックし在庫確認してるが入荷されるタイミングですぐ売り切れになる
<img width="40%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655585/e158d93c-1c60-35c0-a78e-8e905b39ac97.png">　<img width="35%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655585/d56f02ea-1d74-cc63-2cad-08450436c9da.png">

そんな時にショッピングサイトがAPIを提供していれば
自分でアプリケーションをコーディングし毎日5分ごとにシステムからAPIを利用し商品在庫をチェック！

在庫が補充されたタイミングでさらにAPIを利用し商品購入も自動でできることだって可能！
<img width="40%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655585/cefcbec7-60e4-c0db-7ebc-ef1a8f9fee7f.png">

さらに商品購入ができたら自分のLINEに自動メッセージを送ることだって可能！

## 2-1. 居酒屋おすすめ情報取得
ホットペッパーグルメが提供しているAPIを利用して
居酒屋情報を取得してみる
<img width="40%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655585/b76b0f46-a68f-5681-7b26-ee724953664e.png">
[ホットペッパー | APIリファレンス](https://webservice.recruit.co.jp/doc/hotpepper/reference.html)

APIはコーディングしなくてもサーバ上から`curl`コマンドを利用して実行することが可能 :desktop:（ハンズオン　1分）

```diff_shell
$ APIKEY=＜講義中にチャットで情報共有＞
$ curl -s "http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=$APIKEY&middle_area=Y045&range=5&order=4"
```
情報を取得するために利用するAPIはGet APIと呼ばれている

ただ情報取得しても情報量が多くなかなか知りたい情報に辿り着くのは難しい
GoogleやYahooで検索する際、情報を絞り込むためにキーワード検索を活用するようにGet APIではGetパラメータを活用する。
| Get パラメータ | 説明 | 
|:-----------|:------------|
| key         | APIを実行するための鍵          | 
| middle_area | 検索エリア<br>Y045: 赤坂・六本木      | 
| range       | 検索範囲<br> 1: 300m <br>2: 500m<br>3: 1000m<br>4: 2000m<br>5: 3000m<br>     | 
| order       | 並び替え　<br> 1:店名かな順 <br>2:ジャンルコード順<br>3:小エリアコード順<br>4:おススメ順        | 
| format       | 出力フォーマット指定        | 
## 2-1. 居酒屋の調べ方
特定条件にマッチする居酒屋情報をハンズオン形式で取得してみよう！
ライブラリをインストール
```diff_shell
$ npm install axios
```

実行用ファイルを作成 :desktop:（ハンズオン5分）
```diff_shell
$ vim izakaya.js
```

```diff_javascript:izakaya.js

const axios = require('axios');

async function getApi(){
  await axios.get('http://webservice.recruit.co.jp/hotpepper/shop/v1/', {
    // Getパラメータ指定
    params: {
      key: '＜講義中にチャットで情報共有＞',
      keyword: '東京都港区赤坂３－２０－６パシフィックマークス',
      genre: '居酒屋',
      format: 'json',
    }
  })
  .then(function (response) {
    // 居酒屋情報を表示
    console.log(`住所： ${response.data.results.shop[0].address}`)
    console.log(`URL： ${response.data.results.shop[0].urls.pc}`)
    console.log(`店名： ${response.data.results.shop[0].name}`)
  });
}

// API実行
getApi()
```

| Get パラメータ | 説明 | 
|:-----------|:------------|
| key         | APIを実行するための鍵          | 
| keyword | キーワード検索（住所入力可能）      | 
| genre       | ジャンル     | 
| format       | 出力フォーマット指定        | 

赤坂の居酒屋検索！
あのお店の情報が表示される
```diff_shell
$ node izakaya.js 
住所： ＜住所情報＞
URL： ＜お店URL＞
店名： ＜お店名称＞
```

実行用ファイルを修正 :desktop:（ハンズオン3分）
```diff_shell
$ vim izakaya.js
```

```diff_javascript:izakaya.js

const axios = require('axios');

async function getApi(){
-  await axios.get('http://webservice.recruit.co.jp/hotpepper/shop/v1/', {
+  await axios.get('http://webservice.recruit.co.jp/hotpepper/gourmet/v1/', {
    // Getパラメータ指定
    params: {
      key: '＜講義中にチャットで情報共有＞',
-      keyword: '東京都港区赤坂３－２０－６パシフィックマークス',
-      genre: '居酒屋',
+      name: 'くいもの屋 わん 江坂駅前店',
      format: 'json',
    }
  })
  .then(function (response) {
    // 居酒屋情報を表示
    console.log(`住所： ${response.data.results.shop[0].address}`)
    console.log(`URL： ${response.data.results.shop[0].urls.pc}`)
    console.log(`店名： ${response.data.results.shop[0].name}`)
+   console.log(`お店キャッチ： ${response.data.results.shop[0].catch}`)
+   console.log(`交通アクセス： ${response.data.results.shop[0].access}`)
+   console.log(`飲み放題： ${response.data.results.shop[0].free_drink}`)
  });
}

// API実行
getApi()
```
| Get パラメータ | 説明 | 
|:-----------|:------------|
| key         | APIを実行するための鍵          | 
| keyword | キーワード検索（店名入力可）      | 
| genre       | ジャンル     | 
| format       | 出力フォーマット指定        | 

江坂駅近辺の居酒屋の詳細情報を取得！
```diff_shell
$ node izakaya.js 
住所： ＜住所情報＞
URL： ＜お店URL＞
店名： ＜お店名称＞
お店キャッチ： ＜お店キャッチ情報＞
交通アクセス： ＜アクセス情報＞　　　　
飲み放題： ＜飲み放題コースのありなし＞
```
APIを実行することで様々なデータを取得することができる。
システム化することで膨大なデータの集計を一瞬で行うことができたり、
異なるアプリケーション同士の処理をAPI経由で実装することが可能！

# 次回予告
Javascript + Reactで天気予報アプリを作ろう ～アプリケーション作成～