LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@hidonmurain駆け出しむらぽん

講義第２回

Last updated at Posted at 2024-01-09

Javascriptを利用したコーディングを知ろう

初めに

今回の目的

Javascriptを利用して非同期処理を動かしてみる
APIを利用してみる

1. 非同期処理

非同期処理とは？

一言でいうと...
「一つの処理を実行中であっても他の処理を実行できる実行方式」

逆に同期処理とは？
「１つずつ前から順番に処理を実行できる実行方式」

1-1. ペペロンチーノの作り方

ペペロンチーノを作る料理工程に例えて
ハンズオン形式で非同期処理の理解を深めよう！
food_spaghetti_pepperoncino.png
ペペロンチーノ料理工程

  1. パスタを茹でる（5分）
  2. ニンニクを切る（1分）
  3. ソースを作る（4分）
  4. 皿に盛り付ける

1-2. ペペロンチーノの作り方（同期処理編）

実行用ファイルを作成
まずは料理工程ごとにfunctionを作成してみる　:desktop:（ハンズオン5分）

$ vim peperon_sync.js
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分）

$ vim peperon_sync.js
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分）

$ node peperon_sync.js
パスタを茹でます...
パスタが茹で上がりました!
ニンニクを切ります...
ニンニクを切りました！
ソースを作ります...
ソースができました!
パスタとソースを盛り付けます... 

料理時間:10分

同期処理の場合、前の料理工程が終了してから次の工程にすすむ
順序よく処理をすすめられるが非効率
スクリーンショット 2024-01-08 160952.jpg

1-3. ペペロンチーノの作り方（非同期処理編）

実行用ファイルをコピー

$ cp peperon_sync.js peperon_async.js

差分箇所のみ修正する :desktop:（ハンズオン3分）

$ vim peperon_async.js
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分）

$ node peperon_async.js 
パスタを茹でます...
ニンニクを切ります...
ニンニクを切りました！
ソースを作ります...
パスタが茹で上がりました!
ソースができました!
パスタとソースを盛り付けます... 

料理時間:5分

非同期処理の場合前の料理工程の終了をまたずに次の工程にすすむことができる
結果待機時間をなくし効率よく短時間で料理を完成させることができる
スクリーンショット 2024-01-08 161016.jpg

料理に例えると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を使うことでどんないいことがあるのか？

例えば...

ショッピングサイトでどーーしても欲しい商品があるが人気商品のためいつも在庫が品薄
仕事の合間にちょこちょこサイトをチェックし在庫確認してるが入荷されるタイミングですぐ売り切れになる
　

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

在庫が補充されたタイミングでさらにAPIを利用し商品購入も自動でできることだって可能！

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

2-1. 居酒屋おすすめ情報取得

ホットペッパーグルメが提供しているAPIを利用して
居酒屋情報を取得してみる

ホットペッパー | APIリファレンス

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

$ 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 検索エリア
Y045: 赤坂・六本木
range 検索範囲
1: 300m
2: 500m
3: 1000m
4: 2000m
5: 3000m
order 並び替え　
1:店名かな順
2:ジャンルコード順
3:小エリアコード順
4:おススメ順
format 出力フォーマット指定

2-1. 居酒屋の調べ方

特定条件にマッチする居酒屋情報をハンズオン形式で取得してみよう！
ライブラリをインストール

$ npm install axios

実行用ファイルを作成 :desktop:（ハンズオン5分）

$ vim izakaya.js
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 出力フォーマット指定

赤坂の居酒屋検索！
あのお店の情報が表示される

$ node izakaya.js 
住所： ＜住所情報＞
URL： ＜お店URL＞
店名： ＜お店名称＞

実行用ファイルを修正 :desktop:（ハンズオン3分）

$ vim izakaya.js
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 出力フォーマット指定

江坂駅近辺の居酒屋の詳細情報を取得！

$ node izakaya.js 
住所： ＜住所情報＞
URL： ＜お店URL＞
店名： ＜お店名称＞
お店キャッチ： ＜お店キャッチ情報＞
交通アクセス： ＜アクセス情報＞　　　　
飲み放題： ＜飲み放題コースのありなし＞

APIを実行することで様々なデータを取得することができる。
システム化することで膨大なデータの集計を一瞬で行うことができたり、
異なるアプリケーション同士の処理をAPI経由で実装することが可能！

次回予告

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?