Web Design Leaves

const checkParams = (func) => {
  // アロー関数を使用
  return (...args) => {
    if(args.length !== func.length) {
      throw new Error(`${func.name} の引数の数が正しくありません`);
    }
    //受け取った関数をそのまま呼び出す
    return func(...args);
  }
}

const rectangleArea = (length, width) => {
  return length * width ;
}
const rectangleAreaCP = checkParams(rectangleArea);
console.log(rectangleAreaCP(4, 8));  //32
console.log(rectangleAreaCP(5, 7, 8));  //引数の数が正しくないのでエラーになる

const foo = {
  ver: '0.1',
  //プロパティを参照する（this を使う）オブジェクトのメソッド
  rectangleArea (length, width) {
    console.log('version: ' + this.ver);
    return length * width ;
  }
}

const checkParams = (func) => {
  // アロー関数を使用
  return (...args) => {
    //console.log(this);  //this は Window オブジェクト
    if(args.length !== func.length) {
      throw new Error(`${func.name} の引数の数が正しくありません`);
    }
    //受け取った関数をそのまま呼び出す
    return func(...args);
  }
}

// foo のメソッド rectangleArea をデコレータで拡張（ラッパーを作成）
foo.rectangleArea = checkParams(foo.rectangleArea);
// foo のメソッドとしてラッパーを実行
console.log(foo.rectangleArea(5,10));  // version: undefined （改行）50

"use strict";

const foo = {
  ver: '0.1',
  //プロパティを参照する（this を使う）オブジェクトのメソッド
  rectangleArea (length, width) {
    // this を出力
    console.log('method this: ', this); // this は foo
    console.log('version: ' + this.ver);
    return length * width ;
  }
}

const checkParams = (func) => {
  return  function (...args) {
    // this を出力
    console.log('Decorator this: ', this); // this は foo
    if(args.length !== func.length) {
      throw new Error(`${func.name} の引数の数が正しくありません`);
    }
    return func.apply(this, args);
  }
}

foo.rectangleArea = checkParams(foo.rectangleArea);
console.log(foo.rectangleArea(5,10)); //version: 0.1 （改行）50

//遅延デコレータ（関数と遅延時間を受け取る）
const delay = (fn, ms) => {
  return function(...args) {
    setTimeout(() => {
      // ms で指定された時間後に関数を返す
      fn.apply(this, args);
    }, ms);
  };
}

// 指定された数値を乗算した結果を返す関数
const logMultiply = (...args) => {
  console.log(args.reduce((a, b) => a * b)) ;
}

// 関数 logMultiply のラッパーを作成
const dLM1000 = delay(logMultiply, 1000);
// 実行
dLM1000(3,4,5);  //60 （1秒後）

// メソッドを持つオブジェクト
const bar = {
  ver: '0.12',
  logMultiply (...args) {
    console.log('version: ' + this.ver);
    console.log(args.reduce((a, b) => a * b));
  }
}

// オブジェクトのメソッド bar.logMultipl のラッパーを作成
bar.dLM1000 = delay(bar.logMultiply, 2000);
// 実行
bar.dLM1000(5,5,5,5);  //version: 0.12（改行）625 （2秒後）

//引数が整数かをチェックするデコレータ
const validateArgs = (fn) => {
  return function (...args) {
    //every() で引数の各要素が整数であるかを検証
    const validArgs = args.every(arg => Number.isInteger(arg));
    if (!validArgs) {
      //引数に指定された値が整数でなければエラーをスロー
      throw new TypeError('引数には整数を指定します');
    }
    //全て整数であれば関数を返す
    return fn.apply(this, args);
  }
}

// 遅延デコレータ
const delay = (fn, ms) => {
  return function(...args) {
    setTimeout(() => {
      fn.apply(this, args);
    }, ms);
  };
}

// 指定された数値を乗算した結果を返す関数
const logMultiply = (...args) => {
  console.log(args.reduce((a, b) => a * b)) ;
}

// 引数が整数かをチェックするデコレータで拡張したラッパー
const logMultiplyValidArgs = validateArgs(logMultiply);
// 上記を更に遅延デコレータで拡張拡張したラッパー
const dLogMultiplyValidArgs = delay(logMultiplyValidArgs, 1000)
// 実行
dLogMultiplyValidArgs(1,2,3);  //6 （1秒後）
// 実行（引数が整数ではないのでエラー）
dLogMultiplyValidArgs(1,2,3.5) //Uncaught TypeError: 引数には整数を指定します （1秒後）

const debounce = (func, timeout = 200) => {
  // タイマーID
  let timer;
  // 受け取った関数をラップして返す（ラッパーを返す）
  return function (...args) {
    // タイマーを解除
    clearTimeout(timer);
    // タイマーをセット（func をスケジュール）
    timer = setTimeout(() => {
      //timeout で指定された時間が経過したら func を呼び出す
      func.apply(this, args);
    }, timeout);
  }
}

<p id="width-value"></p>

//ブラウザの幅を出力する要素（出力先）
const widthValue = document.getElementById('width-value');
//現在のブラウザの幅を初期値として出力
widthValue.textContent = window.innerWidth;

//幅の値を出力するコールバック関数
const callback = (e) => {
  widthValue.textContent = e.currentTarget.innerWidth;
}

//リサイズイベントのリスナーに debounce デコレータを適用したコールバックを指定
window.addEventListener('resize',debounce(callback, 300));

window.addEventListener('resize',debounce( (e) => {
  widthValue.textContent = e.currentTarget.innerWidth;
}, 300));

const debounce = (func, timeout = 200) => {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      // this の確認用の出力
      console.log('Decorator this: ', this);  // Window
      func.apply(this, args);
    }, timeout);
  }
}
// オブジェクト
const bar = {
  ver: '0.2',
  // コールバック関数
  callback(e) {
    // this の確認用の出力
    console.log('method this: ', this);  // Window
    console.log('width: ', e.currentTarget.innerWidth);
    console.log('ver: ', this.ver);
  }
}
// オブジェクト bar のメソッドに debounce を適用して指定
window.addEventListener('resize',debounce(bar.callback, 300));

window.addEventListener('resize',debounce(bar.callback.bind(bar), 300));

// fetch() を使って Json データを取得する関数
let requestJsonData = async (url) => {
  try {
    // レスポンスを取得（await で fetch() が完了するまで待つ）
    const response = await fetch(url);
    // Json データを取得（await で json() が完了するまで待つ）
    const data = await response.json();
    return data;
  } catch(err) {
    // エラーの場合はコンソールにエラーの内容を出力
    console.error(err);
  }
}

// 非同期関数のデータの取得時間を出力するデコレータ
const logResponseTime = (fn) => {
  // 非同期関数として返す
  return async (url) => {
    // data の取得開始時のタイムスタンプ
    const start = performance.now();
    // 指定された関数を呼び出してデータを取得
    const data = await fn(url);
    // data の取得にかかった時間を出力
    console.log(`Elapsed: ${performance.now() - start} ms`)
    // この場合は、関数ではなく結果を返す
    return data;
  }
}

//取得したデータとその取得時間を出力する非同期関数
const logRequestData = async (url) => {
  // 関数 requestJsonData をデコレータでラップ
  requestJsonData = logResponseTime(requestJsonData);
  // ラッパーを呼び出す
  const data = await requestJsonData(url);
  // 取得したデータをコンソールに出力
  console.log(data);
}
// 上記を実行
logRequestData('https://jsonplaceholder.typicode.com/users');

const logResponseTime = (fn) => {
  return async (url) => {
    // タイマーを開始
    console.time('Elapsed: ');
    // 指定された関数を呼び出してデータを取得
    const data = await fn(url);
    // タイマーを終了して data の取得にかかった時間を出力
    console.timeEnd('Elapsed: ');
    // 関数ではなく結果を返す
    return data;
  }
}