JavaScript

2024.12.07

JavaScriptで単純なfor文を配列宣言で代替するテクニック

const p = console.log;

const getRandom0to9 = () => Math.floor(Math.random() * 10);

const nums = (() => {
  const a = [];
  // 単純なfor文の代わり
  [...Array(10)].forEach((_, i) => {
    a[i] = getRandom0to9();
  });
  return a;
})();


const [numsEven, numsOdd] = (() => {
  const isEven = (n) => (0 === n % 2);
  const e = [];
  const o = [];
  nums.forEach(n => {
    // メソッドの持ち主を三項演算子で切り替える
    (isEven(n) ? e : o).push(n);
  });
  return [e, o];
})();

p({ numsEven, numsOdd });

const p = console.log;

const getRandom0to9 = () => Math.floor(Math.random() * 10);

const nums = (() => {

const a = [];

// 単純なfor文の代わり

[...Array(10)].forEach((_, i) => {

a[i] = getRandom0to9();

});

return a;

})();

const [numsEven, numsOdd] = (() => {

const isEven = (n) => (0 === n % 2);

const e = [];

const o = [];

nums.forEach(n => {

// メソッドの持ち主を三項演算子で切り替える

(isEven(n) ? e : o).push(n);

});

return [e, o];

})();

p({ numsEven, numsOdd });

{ numsEven: [ 2, 0, 2, 8, 4, 4 ], numsOdd: [ 3, 7, 5, 7 ] }

1	{ numsEven: [ 2, 0, 2, 8, 4, 4 ], numsOdd: [ 3, 7, 5, 7 ] }

2024.07.23

誕生日のパラドックスのシミュレーション

'use strict';

/**
 * 1から365までのランダムな値を1つ返す関数
 */
const randomBirthday = () => Math.floor(1 + Math.random() * 365);

/**
 * 該当する部屋であればtrueを返す関数
 */
const test1Room = ({ humanNum }) => {
  const box = [];
  for (let i = 0; i < humanNum; i++) {
    const birthDay = randomBirthday();
    if (box.includes(birthDay)) {
      // かぶった
      return true;
    }
    // かぶらなかったものを配列に追加する
    box.push(birthDay);
  }
  // 1回もかぶらなかった
  return false;
};

const main = () => {
  const humanNum = 23;
  const times = 1000000;
  const doTheTest = () => test1Room({ humanNum });
  let count = 0;
  for (let i = 0; i < times; i++) {
    if (doTheTest()) {
      count++;
    }
  }
  const resultProbabilityPercent = (count * 100) / times;
  console.log(
    '23人のうち少なくとも1組以上同じ誕生日の人がいる確率',
    resultProbabilityPercent
  );
};

main();

'use strict';

/**

* 1から365までのランダムな値を1つ返す関数

const randomBirthday = () => Math.floor(1 + Math.random() * 365);

/**

* 該当する部屋であればtrueを返す関数

const test1Room = ({ humanNum }) => {

const box = [];

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

const birthDay = randomBirthday();

if (box.includes(birthDay)) {

// かぶった

return true;

}

// かぶらなかったものを配列に追加する

box.push(birthDay);

}

// 1回もかぶらなかった

return false;

};

const main = () => {

const humanNum = 23;

const times = 1000000;

const doTheTest = () => test1Room({ humanNum });

let count = 0;

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

if (doTheTest()) {

count++;

}

const resultProbabilityPercent = (count * 100) / times;

console.log(

'23人のうち少なくとも1組以上同じ誕生日の人がいる確率',

resultProbabilityPercent

);

};

main();

23人のうち少なくとも1組以上同じ誕生日の人がいる確率 50.7593

1	23人のうち少なくとも1組以上同じ誕生日の人がいる確率 50.7593

2024.07.06

JavaScriptでPromiseとasyncの練習

const createTimeoutPromise = (callback, timeMs) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(callback());
    }, timeMs);
  });
};

const func2 = async () => {
  await createTimeoutPromise(() => {
    console.log(1);
  }, 300);
  await createTimeoutPromise(() => {
    console.log(2);
  }, 200);
  await createTimeoutPromise(() => {
    console.log(3);
  }, 100);
};

const func3 = () => {
  const promises = [];
  promises.push(
    createTimeoutPromise(() => {
      // console.log(1);
      return 1;
    }, 300)
  );
  promises.push(
    createTimeoutPromise(() => {
      // console.log(2);
      return 2;
    }, 200)
  );
  promises.push(
    createTimeoutPromise(() => {
      // console.log(3);
      return 3;
    }, 100)
  );
  return Promise.all(promises).then((results) => {
    results.forEach((result) => console.log(result));
  });
};

const measureMs = async (func) => {
  const startTime = Date.now();
  await func();
  const endTime = Date.now();
  const lapseMs = endTime - startTime;
  return lapseMs;
};

const main = async () => {
  console.log('lapseMsFunc2: ' + (await measureMs(func2)));
  console.log('lapseMsFunc3: ' + (await measureMs(func3)));
};

main();

const createTimeoutPromise = (callback, timeMs) => {

return new Promise((resolve) => {

setTimeout(() => {

resolve(callback());

}, timeMs);

});

};

const func2 = async () => {

await createTimeoutPromise(() => {

console.log(1);

}, 300);

await createTimeoutPromise(() => {

console.log(2);

}, 200);

await createTimeoutPromise(() => {

console.log(3);

}, 100);

};

const func3 = () => {

const promises = [];

promises.push(

createTimeoutPromise(() => {

// console.log(1);

return 1;

}, 300)

);

promises.push(

createTimeoutPromise(() => {

// console.log(2);

return 2;

}, 200)

);

promises.push(

createTimeoutPromise(() => {

// console.log(3);

return 3;

}, 100)

);

return Promise.all(promises).then((results) => {

results.forEach((result) => console.log(result));

});

};

const measureMs = async (func) => {

const startTime = Date.now();

await func();

const endTime = Date.now();

const lapseMs = endTime - startTime;

return lapseMs;

};

const main = async () => {

console.log('lapseMsFunc2: ' + (await measureMs(func2)));

console.log('lapseMsFunc3: ' + (await measureMs(func3)));

};

main();

1
2
3
lapseMsFunc2: 605
1
2
3
lapseMsFunc3: 300

lapseMsFunc2: 605

lapseMsFunc3: 300

2022.10.20

JavaScriptのclassとmethodとbindの練習

class Human {
  constructor() {
    this.name = '太郎';
  }
  greet() {
    console.log(`こんにちは。私は${this.name}です`);
  }
}

const h = new Human();

const greet = h.greet.bind(h);

greet();

h.name = 'john';

greet();

class Human {

constructor() {

this.name = '太郎';

}

greet() {

console.log(`こんにちは。私は${this.name}です`);

}

const h = new Human();

const greet = h.greet.bind(h);

greet();

h.name = 'john';

greet();

こんにちは。私は太郎です
こんにちは。私はjohnです

1 2	こんにちは。私は太郎ですこんにちは。私はjohnです

2022.10.19

JSのクラスはnewした後にメンバの振る舞いを差し替えられる

/**
 * クラスはすごい。ユニットテストが楽にできるぞ。
 */
const p = console.log;

class Human {
  constructor(name) {
    this.name = name;
  }
  getName() {
    return this.name;
  }
  greet() {
    (() => p(`こんにちは。${this.getName()}です。`))();
  }
}

const h = new Human('じろう');
p(h);
h.greet();

h.name = 'ささささぶろう';
h.greet();

h.getName = () => 'うんこ';
h.greet();

/**

* クラスはすごい。ユニットテストが楽にできるぞ。

const p = console.log;

class Human {

constructor(name) {

this.name = name;

}

getName() {

return this.name;

}

greet() {

(() => p(`こんにちは。${this.getName()}です。`))();

}

const h = new Human('じろう');

p(h);

h.greet();

h.name = 'ささささぶろう';

h.greet();

h.getName = () => 'うんこ';

h.greet();

Human { name: 'じろう' }
こんにちは。じろうです。
こんにちは。ささささぶろうです。
こんにちは。うんこです。

Human { name: 'じろう' }

こんにちは。じろうです。

こんにちは。ささささぶろうです。

こんにちは。うんこです。

2022.10.13

Node.jsの単体テストで関数が1回だけ呼ばれることの判定方法

// 追加のnpm installは無しでできる。
'use strict';

const assert = require('assert');

/**
 * 第1引数がtrueならば第2引数を1回実行する関数
 */
const testTargetFunc = async (flag, callback) => {
  if (flag) {
    return callback();
  }
};

const _1回呼ばれる場合 = async () => {
  // コールトラッカー
  const tracker = new assert.CallTracker();
  // このスコープで必ず1回だけ呼ばれるべき関数
  const calledOnce = tracker.calls((a) => a, 1);
  // テスト実行
  await testTargetFunc(true, calledOnce);
  // コールトラッカーの結果確認
  tracker.verify();
};

const _0回呼ばれる場合 = async () => {
  // 1回も呼んではいけない関数
  const calledNever = assert.fail;
  // テスト実行
  await testTargetFunc(false, calledNever);
};

const _2回呼ばれる場合 = async () => {
  // コールトラッカー
  const tracker = new assert.CallTracker();
  // このスコープで必ず2回呼ばれるべき関数
  const calledTwice = tracker.calls((a) => a, 2);
  // テスト実行
  await testTargetFunc([], calledTwice); // 呼ばれる
  await testTargetFunc(0, calledTwice); // 呼ばれない
  await testTargetFunc({}, calledTwice); // 呼ばれる
  // コールトラッカーの結果確認
  tracker.verify();
};

const main = async () => {
  const tests = [
    _1回呼ばれる場合, //
    _0回呼ばれる場合,
    _2回呼ばれる場合,
  ];
  for (const test of tests) {
    try {
      await test();
      console.log(`テストOK ${test.name}`);
    } catch (err) {
      console.log(`テストNG ${test.name}`, err);
    }
  }
};

main();

// 追加のnpm installは無しでできる。

'use strict';

const assert = require('assert');

/**

* 第1引数がtrueならば第2引数を1回実行する関数

const testTargetFunc = async (flag, callback) => {

if (flag) {

return callback();

}

};

const _1回呼ばれる場合 = async () => {

// コールトラッカー

const tracker = new assert.CallTracker();

// このスコープで必ず1回だけ呼ばれるべき関数

const calledOnce = tracker.calls((a) => a, 1);

// テスト実行

await testTargetFunc(true, calledOnce);

// コールトラッカーの結果確認

tracker.verify();

};

const _0回呼ばれる場合 = async () => {

// 1回も呼んではいけない関数

const calledNever = assert.fail;

// テスト実行

await testTargetFunc(false, calledNever);

};

const _2回呼ばれる場合 = async () => {

// コールトラッカー

const tracker = new assert.CallTracker();

// このスコープで必ず2回呼ばれるべき関数

const calledTwice = tracker.calls((a) => a, 2);

// テスト実行

await testTargetFunc([], calledTwice); // 呼ばれる

await testTargetFunc(0, calledTwice); // 呼ばれない

await testTargetFunc({}, calledTwice); // 呼ばれる

// コールトラッカーの結果確認

tracker.verify();

};

const main = async () => {

const tests = [

_1回呼ばれる場合, //

_0回呼ばれる場合,

_2回呼ばれる場合,

];

for (const test of tests) {

try {

await test();

console.log(`テストOK ${test.name}`);

} catch (err) {

console.log(`テストNG ${test.name}`, err);

}

};

main();

テストOK _1回呼ばれる場合
テストOK _0回呼ばれる場合
テストOK _2回呼ばれる場合

テストOK _1回呼ばれる場合

テストOK _0回呼ばれる場合

テストOK _2回呼ばれる場合

2022.06.08

代入式の左辺でスプレッド構文を使うやつ

'use strict';

const a = [1, 2, 3];

const [b, ...c] = a;

console.log(a, b, c);

'use strict';

const a = [1, 2, 3];

const [b, ...c] = a;

console.log(a, b, c);

[ 1, 2, 3 ] 1 [ 2, 3 ]

1	[ 1, 2, 3 ] 1 [ 2, 3 ]

2022.03.29

イテラブルなオブジェクトの練習

'use strict';

/*
イテラブルなオブジェクトは、イテレータを返す関数Symbol.iteratorを持つオブジェクト
イテレータは、イテレータリザルトを返却する関数nextを持つオブジェクト
イテレータリザルトは、valueとdoneを持つオブジェクト
*/

const p = console.log;

const getIterableObject = (max) => {
  let cnt = 0;
  const iterator = {
    next: () => {
      cnt++;
      const value = cnt;
      const done = max < value;
      return { value, done };
    },
  };

  const o = {};
  o[Symbol.iterator] = () => iterator;
  return o;
};

const main = () => {
  const o = getIterableObject(5);
  for (const v of o) {
    p(v);
  }
};

main();

'use strict';

イテラブルなオブジェクトは、イテレータを返す関数Symbol.iteratorを持つオブジェクト

イテレータは、イテレータリザルトを返却する関数nextを持つオブジェクト

イテレータリザルトは、valueとdoneを持つオブジェクト

const p = console.log;

const getIterableObject = (max) => {

let cnt = 0;

const iterator = {

next: () => {

cnt++;

const value = cnt;

const done = max < value;

return { value, done };

};

const o = {};

o[Symbol.iterator] = () => iterator;

return o;

};

const main = () => {

const o = getIterableObject(5);

for (const v of o) {

p(v);

}

};

main();

2021.06.12

promiseのcatchのコールバック関数の戻り値をawaitで受け取る

'use strict';

const p = console.log;

const timeoutPromise = ({ ms, func, arg }) => {
  return new Promise((resolve, reject) => {
    if (20 === ms) {
      reject(`${ms}ミリ秒はエラーです!!`);
    }
    setTimeout(() => {
      resolve(func(arg));
    }, ms);
  }).catch((a) => a);
};

const createArg = ({ ms }) => ({ ms, func: () => `${ms}ミリ秒待ちました。` });

(async () => {
  /* promiseのcatchのコールバック関数の戻り値をawaitで受け取る */
  p(await timeoutPromise(createArg({ ms: 21 })));
  p(await timeoutPromise(createArg({ ms: 20 })));
  p(await timeoutPromise(createArg({ ms: 19 })));
})();

'use strict';

const p = console.log;

const timeoutPromise = ({ ms, func, arg }) => {

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

if (20 === ms) {

reject(`${ms}ミリ秒はエラーです!!`);

}

setTimeout(() => {

resolve(func(arg));

}, ms);

}).catch((a) => a);

};

const createArg = ({ ms }) => ({ ms, func: () => `${ms}ミリ秒待ちました。` });

(async () => {

/* promiseのcatchのコールバック関数の戻り値をawaitで受け取る */

p(await timeoutPromise(createArg({ ms: 21 })));

p(await timeoutPromise(createArg({ ms: 20 })));

p(await timeoutPromise(createArg({ ms: 19 })));

})();

21ミリ秒待ちました。
20ミリ秒はエラーです!!
19ミリ秒待ちました。

21ミリ秒待ちました。

20ミリ秒はエラーです!!

19ミリ秒待ちました。

2021.05.28

JavaScriptのオブジェクトに使える自作のeach関数の練習

'use strict';

const p = console.log;

/** callback(value, key, obj) */
const each = (obj, callback) => {
  const ret = [];
  for (const key of Object.keys(obj)) {
    const value = obj[key];
    ret.push(callback(value, key, obj));
  }
  return ret;
};

const obj = {
  名前: 'taro',
  苗字: '田中',
  age: 27,
};
const ret = each(obj, (v, k) => `${k}: ${v}`);

ret.forEach((v) => p(v));

'use strict';

const p = console.log;

/** callback(value, key, obj) */

const each = (obj, callback) => {

const ret = [];

for (const key of Object.keys(obj)) {

const value = obj[key];

ret.push(callback(value, key, obj));

}

return ret;

};

const obj = {

名前: 'taro',

苗字: '田中',

age: 27,

};

const ret = each(obj, (v, k) => `${k}: ${v}`);

ret.forEach((v) => p(v));

名前: taro
苗字: 田中
age: 27

名前: taro

苗字: 田中

age: 27

12 3 4 5

JavaScript

JavaScriptで単純なfor文を配列宣言で代替するテクニック

誕生日のパラドックスのシミュレーション

JavaScriptでPromiseとasyncの練習

JavaScriptのclassとmethodとbindの練習

JSのクラスはnewした後にメンバの振る舞いを差し替えられる

Node.jsの単体テストで関数が1回だけ呼ばれることの判定方法

代入式の左辺でスプレッド構文を使うやつ

イテラブルなオブジェクトの練習

promiseのcatchのコールバック関数の戻り値をawaitで受け取る

JavaScriptのオブジェクトに使える自作のeach関数の練習

最近の投稿

サイトマップ

カテゴリー

アーカイブ

人気の投稿とページ

Twitter