LoginSignup

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 5 years have passed since last update.

@n0bisuke(Sugawara Nobisuke)

ES授業 2日目

Last updated at Posted at 2017-05-31

2日目

1日目

おさらい/あった声

とりあえずESの授業です。

Q. Node.js事例がみたい

みてみよう

Q. Node.js触れてみたい

Node.jsのインストールをしてみよう

Q. API使いたい

  • 今日少しやってみましょう

全体的に期待値が違いそう(苦笑)

非同期処理続き

ポイント:

  • Promiseの仕組みを覚えるというよりも、次世代の標準/今風な書き方を捉える。
  • これからのライブラリはPromise対応してるものが基本になる

演習: 普通の関数をPromise化

天気API http://weather.livedoor.com/weather_hacks/webservice

  • 1. httpリクエスト作ってみます
  • 2. 同期的な実行にする
    • 二つ作ってみます
  • 3. Promise化して同期的な実行にする

STEP1: 自分の地元の天気の情報を取得してみましょう

天気API: http://weather.livedoor.com/weather_hacks/webservice

ヒント: 

jQueryなら$.ajax()を使う
axiosとかもおすすめ

cross domainを超えるためのjqueryライブラリ

const http = require('http');

const AREA = `030010`; //盛岡
const AREA2= `400040`; //久留米
const BASEURL = `http://weather.livedoor.com/forecast/webservice/json/v1?city=`;
const URL1 = BASEURL+AREA;
const URL2 = BASEURL+AREA2;

//1個目のリクエスト
http.get(URL1, (res) => {
  let body = '';
  res.setEncoding('utf8');
  res.on('data', (chunk) => {
      body += chunk;
  }); 

  res.on('end', (res) => {
      res = JSON.parse(body);
      console.log(res.forecasts[0]);

  });
}).on('error', (e) => {
  console.log(e.message); //エラー時
});

STEP2: 二つのリクエストを同期的に行う

const http = require('http');

const AREA = `030010`; //盛岡
const AREA2= `400040`; //久留米
const BASEURL = `http://weather.livedoor.com/forecast/webservice/json/v1?city=`;
const URL1 = BASEURL+AREA;
const URL2 = BASEURL+AREA2;

//1個目のリクエスト
http.get(URL1, (res) => {
  let body = '';
  res.setEncoding('utf8');
  res.on('data', (chunk) => {
      body += chunk;
  }); 

  res.on('end', (res) => {
      res = JSON.parse(body);
      console.log(res.forecasts[0]);

      //二個目のリクエスト
    http.get(URL2, (res) => {
        let body = '';
        res.setEncoding('utf8');
        res.on('data', (chunk) => {
            body += chunk;
        });

        res.on('end', (res) => {
            res = JSON.parse(body);
            console.log(res.forecasts[0]); 
        });
        }).on('error', (e) => {
        console.log(e.message); //エラー時
    });

  });
}).on('error', (e) => {
  console.log(e.message); //エラー時
});

STEP3: 関数化

const getTenki = (url, callback) => {
    http.get(url, (res) => {
        let body = '';
        res.setEncoding('utf8');
        res.on('data', (chunk) => {
            body += chunk;
        }); 

        res.on('end', (res) => {
            res = JSON.parse(body);
            // console.log(res.forecasts[0]);
            callback(res.forecasts[0]);
        });
    }).on('error', (e) => {
        console.log(e.message); //エラー時
    });    
    // return `hogehgoe`;
}

getTenki(URL1,(res)=>{
    console.log(res);
    getTenki(URL2,(res2)=>{
        console.log(res2);
    });
});

STEP4: promise化

const getTenki = (url) => {
    return new Promise((resolve, reject) => {
        http.get(url, (res) => {
            let body = '';
            res.setEncoding('utf8');
            res.on('data', (chunk) => {
                body += chunk;
            }); 

            res.on('end', (res) => {
                res = JSON.parse(body);
                resolve(res.forecasts[0]);
            });
        }).on('error', (e) => {
            reject(e);
            console.log(e.message); //エラー時
        });
    });
}

getTenki(URL1)
.then((res)=>{
    console.log(res);
    return getTenki(URL2);
})
.then((res)=>{
    console.log(res);
    return getTenki(URL3);
});

Tips: jQuery+ブラウザでやる人

ChromeはCORS対策のアドオンをいれておくと開発が楽に進みそう

-> https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related

JSONを見やすくする拡張

-> https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ja

index.html
<html>
    <head></head>
    <body>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <script src="app.js"></script>
    </body>
</html>
app.js
'use strict';

const AREA = `030010`;
const URL = `http://weather.livedoor.com/forecast/webservice/json/v1?city=${AREA}`;
$.ajax({
    url: URL
}).done((res) => {
    console.log(res.forecasts[0]);
});

ジェネレータ/yeild

参考: generatorとJavaScriptの非同期処理
http://qiita.com/hitsujiwool/items/316f3e8a41fb7dc3a119

Async/Await

参考: Promiseとasync/awaitでJavaScriptの非同期処理をシンプルに記述する
https://sbfl.net/blog/2016/07/13/simplifying-async-code-with-promise-and-async-await/

色々なライブラリを眺める

  • axios
  • fetch

ここまで午前の予定

午後

classの紹介

演習: ES5のJSをES2015(2016)に直してみよう

今日のまとめ

  • 非同期処理続き
    • リクエスト
  • promise形式のライブラリになれる

取り扱わなかったもので覚えておきたいもの

map/set

  • map
  • set
  • weakmap
  • weakset
以前から JavaScript を使っている人はマップ(Map)が使える場面でもオブジェクト(Object)を 使ってしまうことがあるかもしれません。そしてオブジェクトを使う場合に注意しなければならな い点も心得ていることと思います。しかし ES2015 からは本当のマップが利用できますから、これを 利用しない手はありません。また、セット(Set)が使えるところでブール値を値としてもつオブジェ クトを使う方法にも慣れていることと思います。しかしセットが標準で使えるようになったのですか ら、これを利用しましょう。オブジェクトを使おうと考えたら、もう一度マップやセットが使えない か考えてみる癖をつけるとよいでしょう。

モジュール

import文

イテレータ/ジェネレータ

ES2015 では「イテレータ(iterator)」と「ジェネレータ(generator)」という、2 つの重要な概念が 新たに導入されました*1。ジェネレータはイテレータに依存しますので、まずイテレータから説明し ていきましょう。
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