JavaScript

2021.05.02

実行順を守りたいが互いに依存しない非同期関数にはPromise.all()を使うべきである

async-await だと1つずつ完了を待ってしまうが、
Promise.all()は一斉に(疑似的に並列に)処理する。

'use strict';

const sleepXXms = (ms) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`${ms}ms待ちました`);
    }, ms);
  });
};
const sleep10ms = () => sleepXXms(10);
const sleep20ms = () => sleepXXms(20);
const sleep30ms = () => sleepXXms(30);

const calcRunTimeMs = async (targetFunc) => {
  const start = new Date();
  const result = await targetFunc();
  const lapseMs = new Date() - start;
  return { lapseMs, result };
};

const targetFuncA = async () => {
  return [await sleep20ms(), await sleep10ms(), await sleep30ms()];
};
const targetFuncB = async () => {
  return await Promise.all([sleep20ms(), sleep10ms(), sleep30ms()]);
};

(async () => {
  console.log(await calcRunTimeMs(targetFuncA));
  console.log(await calcRunTimeMs(targetFuncB));
})();

'use strict';

const sleepXXms = (ms) => {

return new Promise((resolve) => {

setTimeout(() => {

resolve(`${ms}ms待ちました`);

}, ms);

});

};

const sleep10ms = () => sleepXXms(10);

const sleep20ms = () => sleepXXms(20);

const sleep30ms = () => sleepXXms(30);

const calcRunTimeMs = async (targetFunc) => {

const start = new Date();

const result = await targetFunc();

const lapseMs = new Date() - start;

return { lapseMs, result };

};

const targetFuncA = async () => {

return [await sleep20ms(), await sleep10ms(), await sleep30ms()];

};

const targetFuncB = async () => {

return await Promise.all([sleep20ms(), sleep10ms(), sleep30ms()]);

};

(async () => {

console.log(await calcRunTimeMs(targetFuncA));

console.log(await calcRunTimeMs(targetFuncB));

})();

{ lapseMs: 61, result: [ '20ms待ちました', '10ms待ちました', '30ms待ちました' ] }
{ lapseMs: 31, result: [ '20ms待ちました', '10ms待ちました', '30ms待ちました' ] }

1 2	{ lapseMs: 61, result: [ '20ms待ちました', '10ms待ちました', '30ms待ちました' ] } { lapseMs: 31, result: [ '20ms待ちました', '10ms待ちました', '30ms待ちました' ] }

2021.04.03

GASで特定の行をグレーに塗る

/**
 * myFunction を実行すると sheetName 内の keywords を含む行をグレーに塗る
 */
const id = 'xxxxxx-xxxxxxxxx_11111-XXXXXXXXXXXXXXXXXXXXX';
const sheetName = 'シート1';
const keywords = ['ホゲギンコウ', 'フガカンパニー'];

const 指定した行を返す関数 = ({ dataRangeValues, row }) => dataRangeValues[row - 1];

const 指定した行のカラム数を返す関数 = ({ dataRangeValues, row }) => 指定した行を返す関数({ dataRangeValues, row }).length;

const 指定した行を色付けする関数 = ({ sheet, dataRangeValues, row, color = '#C0C0C0' }) => {
  const カラム数 = 指定した行のカラム数を返す関数({ dataRangeValues, row });
  /* getRange(row, column, numRows, numColumns) */
  sheet.getRange(row, 1, 1, カラム数).setBackground(color);
};

const 文字列1が文字列2を含んでいたら真となる関数 = (文字列1, 文字列2) => 文字列1.indexOf(文字列2) !== -1;

const 行がキーワードを含んでいたら真となる関数 = ({ dataRangeValues, row, keywords }) => {
  const columns = 指定した行を返す関数({ dataRangeValues, row });
  for (const column of columns) {
    for (const keyword of keywords) {
      if (文字列1が文字列2を含んでいたら真となる関数(String(column), keyword)) {
        return true;
      }
    }
  }
  return false;
};

const キーワードをカラムに持つ行に色を塗る関数 = ({ sheet, keywords }) => {
  const dataRangeValues = sheet.getDataRange().getValues();
  for (let i = 0; i < dataRangeValues.length; i++) {
    const row = i + 1;
    if (行がキーワードを含んでいたら真となる関数({ dataRangeValues, row, keywords })) {
      指定した行を色付けする関数({ sheet, dataRangeValues, row });
    }
  }
};

const myFunction = () => {
  const sheet = SpreadsheetApp.openById(id).getSheetByName(sheetName);
  キーワードをカラムに持つ行に色を塗る関数({ sheet, keywords });
};

// 参考
// https://qiita.com/cazimayaa/items/224daebe536799e5a8a2

/**

* myFunction を実行すると sheetName 内の keywords を含む行をグレーに塗る

const id = 'xxxxxx-xxxxxxxxx_11111-XXXXXXXXXXXXXXXXXXXXX';

const sheetName = 'シート1';

const keywords = ['ホゲギンコウ', 'フガカンパニー'];

const 指定した行を返す関数 = ({ dataRangeValues, row }) => dataRangeValues[row - 1];

const 指定した行のカラム数を返す関数 = ({ dataRangeValues, row }) => 指定した行を返す関数({ dataRangeValues, row }).length;

const 指定した行を色付けする関数 = ({ sheet, dataRangeValues, row, color = '#C0C0C0' }) => {

const カラム数 = 指定した行のカラム数を返す関数({ dataRangeValues, row });

/* getRange(row, column, numRows, numColumns) */

sheet.getRange(row, 1, 1, カラム数).setBackground(color);

};

const 文字列1が文字列2を含んでいたら真となる関数 = (文字列1, 文字列2) => 文字列1.indexOf(文字列2) !== -1;

const 行がキーワードを含んでいたら真となる関数 = ({ dataRangeValues, row, keywords }) => {

const columns = 指定した行を返す関数({ dataRangeValues, row });

for (const column of columns) {

for (const keyword of keywords) {

if (文字列1が文字列2を含んでいたら真となる関数(String(column), keyword)) {

return true;

}

return false;

};

const キーワードをカラムに持つ行に色を塗る関数 = ({ sheet, keywords }) => {

const dataRangeValues = sheet.getDataRange().getValues();

for (let i = 0; i < dataRangeValues.length; i++) {

const row = i + 1;

if (行がキーワードを含んでいたら真となる関数({ dataRangeValues, row, keywords })) {

指定した行を色付けする関数({ sheet, dataRangeValues, row });

}

};

const myFunction = () => {

const sheet = SpreadsheetApp.openById(id).getSheetByName(sheetName);

キーワードをカラムに持つ行に色を塗る関数({ sheet, keywords });

};

// 参考

// https://qiita.com/cazimayaa/items/224daebe536799e5a8a2

2021.03.08

JSのfetchのresponse.json()はPromiseを返す！その対処法

'use strict';

const callApi = (url) => {
  fetch(url)
    .then(async (res) => ({
      status: res.status,
      json: await res.json(),
    }))
    .then(console.log);
};

callApi('https://www.jma.go.jp/bosai/forecast/data/overview_week/130000.json');
/**
{status: 200, json: {…}}
json:
headTitle: "関東甲信地方週間天気予報"
publishingOffice: "気象庁"
reportDatetime: "2021-03-08T10:35:00+09:00"
text: "予報期間　３月９日から３月１５日まで↵　向こう一週間は、期間のはじめと終わりに晴れる日もありますが、期間の中頃は気圧の谷や湿った空気の影響で雲が広がりやすく、雨の降る日があるでしょう。↵　最高気温は、平年より高い日が多く、期間のはじめと終わりは平年よりかなり高い日もある見込みです。最低気温は、平年より高い日が多く、期間の後半は平年よりかなり高い日もあるでしょう。↵　降水量は、平年並か平年より多い見込みです。"
__proto__: Object
status: 200
__proto__: Object
 */

'use strict';

const callApi = (url) => {

fetch(url)

.then(async (res) => ({

status: res.status,

json: await res.json(),

}))

.then(console.log);

};

callApi('https://www.jma.go.jp/bosai/forecast/data/overview_week/130000.json');

/**

{status: 200, json: {…}}

json:

headTitle: "関東甲信地方週間天気予報"

publishingOffice: "気象庁"

reportDatetime: "2021-03-08T10:35:00+09:00"

text: "予報期間　３月９日から３月１５日まで↵　向こう一週間は、期間のはじめと終わりに晴れる日もありますが、期間の中頃は気圧の谷や湿った空気の影響で雲が広がりやすく、雨の降る日があるでしょう。↵　最高気温は、平年より高い日が多く、期間のはじめと終わりは平年よりかなり高い日もある見込みです。最低気温は、平年より高い日が多く、期間の後半は平年よりかなり高い日もあるでしょう。↵　降水量は、平年並か平年より多い見込みです。"

__proto__: Object

status: 200

__proto__: Object

2021.03.05

generator関数をラムダに閉じ込める意味はあるのか不明

'use strict';

const myGenerator = () => (function* () {
  yield '私の';
  yield '名前';
  yield 'は';
  yield '太郎デス';
})();

for (const v of myGenerator()) {
  console.log(v);
}

'use strict';

const myGenerator = () => (function* () {

yield '私の';

yield '名前';

yield 'は';

yield '太郎デス';

})();

for (const v of myGenerator()) {

console.log(v);

}

私の
名前
は
太郎デス

私の

名前

は

太郎デス

2021.03.05

JSのジェネレータ関数はイテレータオブジェクトを返す

'use strict';

const p = console.log;

const iterable1 = {
  [Symbol.iterator]: () => {
    let cnt = 0;
    const iterator = {
      next: () => {
        const value = cnt++;
        const done = (5 < cnt);
        return { value, done }; // iterator result
      }
    };
    return iterator;
  },
};

const iterable2 = {
  [Symbol.iterator]: function* () {
    for (let i = 0; i < 5; i++) {
      yield i;
    }
  }
};

for (const v of iterable1) {
  p(v);
}

for (const v of iterable2) {
  p(v);
}

'use strict';

const p = console.log;

const iterable1 = {

[Symbol.iterator]: () => {

let cnt = 0;

const iterator = {

next: () => {

const value = cnt++;

const done = (5 < cnt);

return { value, done }; // iterator result

}

};

return iterator;

};

const iterable2 = {

[Symbol.iterator]: function* () {

for (let i = 0; i < 5; i++) {

yield i;

}

};

for (const v of iterable1) {

p(v);

}

for (const v of iterable2) {

p(v);

}

2021.03.04

JavaScriptのイテレータの練習

'use strict';

const getIterableObject = (argMax = 10) => {
  const iterableObject = {
    [Symbol.iterator]: () => {
      let cnt = 0;
      const iterator = {
        next: () => {
          const value = cnt++;
          const done = (argMax <= value);
          const iteratorResult = { value, done };
          return iteratorResult;
        },
      };
      return iterator;
    },
  };
  return iterableObject;
};

for (const v of getIterableObject(3)) {
  console.log(v);
}

for (const v of getIterableObject(7)) {
  console.log(v);
}

'use strict';

const getIterableObject = (argMax = 10) => {

const iterableObject = {

[Symbol.iterator]: () => {

let cnt = 0;

const iterator = {

next: () => {

const value = cnt++;

const done = (argMax <= value);

const iteratorResult = { value, done };

return iteratorResult;

};

return iterator;

};

return iterableObject;

};

for (const v of getIterableObject(3)) {

console.log(v);

}

for (const v of getIterableObject(7)) {

console.log(v);

}

2021.01.22

Promiseと分割代入の練習

'use strict';

const p = console.log;

const timeoutPromise = ({ms, callback, errMsg = null}) => {
  return new Promise((resolve, reject) => {
    if (errMsg) {
      reject(errMsg);
    }
    setTimeout(() => {
      const result = callback();
      resolve(result);
    }, ms);
  });
};

const argsTimeoutPromise = (ms, errMsg = null) => {
  const callback = () => `${ms}ミリ秒待ちました`;
  return {ms, callback, errMsg};
};

timeoutPromise(argsTimeoutPromise(20)).then(p).catch(p);
timeoutPromise(argsTimeoutPromise(15, '15ミリ秒はエラーです')).then(p).catch(p);
timeoutPromise(argsTimeoutPromise(10)).then(p).catch(p);

'use strict';

const p = console.log;

const timeoutPromise = ({ms, callback, errMsg = null}) => {

return new Promise((resolve, reject) => {

if (errMsg) {

reject(errMsg);

}

setTimeout(() => {

const result = callback();

resolve(result);

}, ms);

});

};

const argsTimeoutPromise = (ms, errMsg = null) => {

const callback = () => `${ms}ミリ秒待ちました`;

return {ms, callback, errMsg};

};

timeoutPromise(argsTimeoutPromise(20)).then(p).catch(p);

timeoutPromise(argsTimeoutPromise(15, '15ミリ秒はエラーです')).then(p).catch(p);

timeoutPromise(argsTimeoutPromise(10)).then(p).catch(p);

15ミリ秒はエラーです
10ミリ秒待ちました
20ミリ秒待ちました

15ミリ秒はエラーです

10ミリ秒待ちました

20ミリ秒待ちました

123 4 5 6

JavaScript

JavaScriptでコールバックの練習

JavaScriptでquicksort(ひさびさ)

高階関数に高階関数を渡す

実行順を守りたいが互いに依存しない非同期関数にはPromise.all()を使うべきである

GASで特定の行をグレーに塗る

JSのfetchのresponse.json()はPromiseを返す！その対処法

generator関数をラムダに閉じ込める意味はあるのか不明

JSのジェネレータ関数はイテレータオブジェクトを返す

JavaScriptのイテレータの練習

Promiseと分割代入の練習

最近の投稿

サイトマップ

カテゴリー

アーカイブ

人気の投稿とページ

Twitter