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授業 1日目

Last updated at Posted at 2017-05-30

よろしくお願いいたします！
アウトラインがこんな感じで、随時記事やコード見せたり、書いてもらったりして進めます。

自己紹介など

  • 名前: のびすけ
  • 書籍や記事執筆
  • Node.jsやIoTが好き
  • だいたいNode.jsで作る

今日の内容

まとめが今日の内容

前半座学、後半手を動かしてみる

JavaScriptの歴史

JSのプラットフォーム拡張話

  • LIG記事など

トランスパイル時代

ESとは

  • ECMASCRIPTは仕様
  • ES5
  • ES2015(ES6)
  • ES2016(ES7)

情報キャッチアップ

実行環境

  • Safari
  • Chrome
  • Chrome Canary
  • Firefox
  • Firefox Nightry
  • Node.js

試しにChromeでJS実行してみましょう

  • color.jsを作成
color.js
document.body.style.backgroundColor = "red";
  • index.htmlを作成しcolor.jsを読み込ませる

赤くなりました？

学ぶ意義

以下を少し実行してみよう。

  • var
  • 変数巻き上げ
let var1;
let var2 = undefined;
console.log(var1); // undefined
console.log(var2); // undefined
console.log(undef); // ReferenceError: undef is not defined (エラー)

console.log(x); // undefined
var x = 3;
console.log(x); // 3

x; // ReferenceError: x is not defined (エラー)
let x = 3;
  • thisの挙動
const o = {
    name: 'Julie',
    greetBackwards: function() {

        function getReverseName() {
            let nameBackwards = '';

            for(let i=this.name.length-1; i>=0; i--) {
                nameBackwards += this.name[i];
            }
            return nameBackwards;
        } // getReverseName の定義終わり

        return `${getReverseName()} si eman ym ,olleH`;
    },
};
console.log(o.greetBackwards());

基本構文

  • let/const ブロックスコープ
  • アロー関数
    • アロー関数の省略形
  • テンプレートリテラル
  • イテレータとfor/ofループ

非同期処理

  • コールバック
    • コールバック地獄
  • Promise
  • ジェネレータ
  • Async/Await
  • Stream(Node.js)

-> 会長資料参照

コールバック

$.ajax({
  url: 'http://www.ekidata.jp/api/l/11302.json',
  type: "GET",
  success: function(res) {
    console.log(res);
  }
});

Promise

'use strict';
const fs = require('fs');

function readFile(fileName) {
    return new Promise((onFulfilled, onRejected) => {
        fs.readFile(fileName, "utf-8", (err, data)=>{
            // console.log(data);
            if (err) {
                // console.error("readFile error:" + fileName + err);
                onRejected(err);
            }
            onFulfilled(data);
        });
    });
}

function writeFile(fileName, data) {
    return new Promise((onFulfilled, onRejected)=> {
        fs.writeFile(fileName, data, err=>{
            if (err) {
                // console.error("writeFile error:" + fileName + err);
                onRejected(err);
            }
            onFulfilled("OK");
        });
    });
}

let allData = "";
readFile("a.txt")
.then(function(fileData) {
    allData += fileData;
    return readFile("b.txt"); /* プロミスを返してチェイニング可能にする */
})
.then(function(fileData) {
    allData += fileData;
    return readFile("c.txt");
})
.then(function(fileData) {
    allData += fileData;
    return writeFile("d.txt", allData);
})
.then(function(mes) {
    console.log(" ファイルの合体に成功しました。");
})
.catch(err => {
    console.error("エラーが起こりました:" + err);
});

URLの中のURL

'use strict';

const axios = require(`axios`);
const URL = `http://weather.livedoor.com/forecast/webservice/json/v1?city=400040`;
axios.get(URL)
.then((response) => {
    const area = response.data.pinpointLocations.filter((x) => x.name == '久留米市');
    const url2 = area[0].link;
    return axios.get(url2);
})
.then((response) => {
    console.log(response.data);
});

Async/Await

まとめ

  • JS歴史を学んだ
  • JSを取り巻く環境や話題を学んだ
  • ESの立ち位置
  • 基礎的な構文
  • 非同期処理

宿題

ジェネレータを使った非同期処理を試してみよう

2日目へ

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