高階関数

// ここでは集合がどのような実装になっているかは触れません

// ソート処理実装側
// comparatorは比較関数
const sort = comparator => {
  // すべての要素の順序が確定するまで、繰り返す

  // 集合から何らかのルールに沿って二つの要素を取り出す
  const elmA, elmB = ...

  // 外部から受け取った比較関数を使って大小関係を決める
  //（例えば、elmAが大きい場合は正の値、大小関係が同じなら0、elmAが小さい場合は負の値）
  const order = comparator(elmA, elmB)

  // 決まった大小関係order従って、集合内の要素elmAとelmBを入れ替える
}

// 大小関係を決める比較関数
const myComparator = (lho, rho) => {
  // 本来なら引数に対して大小関係を決めて値を返す
  return 0 // 0 固定なので並び変わらない！
}

// ソート処理を呼び出す
myCollection.sort(myComparator)

// アカウントの集合に対して年齢でソートする
accounts.sort((a1, a2) => a1.age - a2.age)

// 分かりやすく、酷い実装です
let state = 0
const countup = () => ++state

console.log(countup()) // 1
console.log(countup()) // 2
console.log(countup()) // 3

// このようなこともできてしまう！
state = 100 // 100

// createCounterが関数を返す関数（高階関数）
const createCounter = () => {
  let state = 0
  return () => ++state
}

const countup = createCounter() // 0

// countupは関数のため()を付けて実行できます。
console.log(countup()) // 1
console.log(countup()) // 2
console.log(countup()) // 3

// countup()内のstateは外部から操作できない
// state = 100

const createCounter = () => {
  let state = 0
  return { countup: () => ++state }
}

const counter = createCounter() // 0

counter.countup() // 1
counter.countup() // 2
counter.countup() // 3

// こちらのメリットは複数の操作関数を定義できることです
// createCounter()呼び出しのたびにオブジェクト内に関数が作られることが
// 問題になるような場合はクラス化も検討

const createCounter = (initialValue = 0) => {
  let state = initialValue
  return (steps = 1) => state += steps
}

const countup = createCounter(5) // 5

console.log(countup())  // 6
console.log(countup(2)) // 8
console.log(countup(3)) // 11

// 次のように実行もできますが、結果は異なります。なぜでしょうか？
createCounter(5)()
createCounter(5)(2)
createCounter(5)(3)
// 高階関数の実装方法と実行方法次第で結果が変わることもあるので、注意が必要です

const tagCounter = url => {
  // urlで指定されたサイトをダウンロードする処理
  const html = getContents(url)

  // html内に指定されたタグが何回出現するか数える関数を返す
  return tagName => countTag(html, tagName)
}

const yNews = 'https://どこかのニュースサイト'
// 1回だけhtml取得が行われ、yNews専用のカウンター関数になる
const yNewsTagCounter = tagCounter(yNews)

yNewsTagCounter('div')  // キャッシュしたhtmlをつかう
yNewsTagCounter('span') // キャッシュしたhtmlをつかう
yNewsTagCounter('li')   // キャッシュしたhtmlをつかう

const tagCounter = url => {
  let html

  // html内に指定されたタグが何回出現するか数える関数を返す
  return tagName => {
      // ダウンロードができていない場合、一回だけダウンロードする
      if (!html) html = getContents(url)
      return countTag(html, tagName)
  }
}

const yNews = 'https://どこかのニュースサイト'
// yNews専用のカウンター関数になる。この時点ではhtmlはダウンロードが行われない
const yNewsTagCounter = tagCounter(yNews)

yNewsTagCounter('div')  // ここで初めてhtmlのダウンロードが行われる
yNewsTagCounter('span') // キャッシュしたhtmlをつかう
yNewsTagCounter('li')   // キャッシュしたhtmlをつかう

const myDecorator = func => (...args) => {
  console.log('開始');
  const result = func.apply(this, args);
  console.log('終了');
  return result
}

// yNewsTagCounter は前に出てきた関数
const decoratedYNewsTagCounter = myDecorator(yNewsTagCounter)
decoratedYNewsTagCounter('div')  // コンソールに'開始''終了'が出力される
decoratedYNewsTagCounter('span') // コンソールに'開始''終了'が出力される
decoratedYNewsTagCounter('li')   // コンソールに'開始''終了'が出力される

// せっかくなので、今まで出てきた内容も盛り込んでいます

// あまりECMASript詳しくないので間違ってるかも
// とりあえずNode.jsで動作する比較関数に関するユーティリティクラス
// あまりきちんとクラス設計はしていません
const ComparatorUtils = class {
  constructor(comparator) {
    this.comparators = [comparator]
  }

  // 一番初めに使用する比較関数を登録する
  static comparing (keyExtractor, comparator = ComparatorUtils.#defaultComparator) {
    return new ComparatorUtils(ComparatorUtils.keyExtractorComparator(keyExtractor, comparator))
  }

  // 要素から値を取得する方法をコールバック関数で渡すと比較関数を作ってくれる関数
  // 関数を返す関数（高階関数）を使う目的の一つ
  static keyExtractorComparator =  (keyExtractor, comparator = ComparatorUtils.#defaultComparator) =>
    (e1, e2) => comparator(keyExtractor(e1), keyExtractor(e2))

  // 雑なデフォルト比較関数
  static #defaultComparator = (v1, v2) => {
    if (v1 > v2) return 1
    if (v1 < v2) return -1
    return 0
  }

  // 比較関数の判定結果を逆転させるデコレーター
  static #reversedDecorator = comparator => (e1, e2) => -1 * comparator(e1, e2)

  // ひとつ前の比較関数で大小関係が確定しなかった場合に実行する比較関数を登録する
  thenComparing (keyExtractor, comparator = ComparatorUtils.#defaultComparator) {
    this.comparators.push(ComparatorUtils.keyExtractorComparator(keyExtractor, comparator))
    return this
  }

  // スタック最後の比較関数の判定結果を逆転させる
  reversed () {
    this.comparators.push(ComparatorUtils.#reversedDecorator(this.comparators.pop()))
    return this
  }

  // これも関数を返す関数（高階関数）の例です
  // 複数条件を組み合わせるような比較関数も高階関数で作成することができます

  // 最初の比較関数で大小関係が決定できなかった場合、次の比較関数を呼び出す比較関数を作成
  // reduce便利！
  comparator = () =>
    this.comparators.reduce((first, next) => (e1, e2) => first(e1, e2) || next(e1, e2))
}

// personComparatorはクロージャーとなっており、thenComparing関数で登録された比較関数を保持している
// このサンプルの場合、姓（昇順） -> 名（昇順） -> 年齢（降順）の順にソートできる
const personComparator = ComparatorUtils.comparing(person => person.lastname)
                           .thenComparing(person => person.firstname)
                           .thenComparing(person => person.age).reversed() // 年齢比較結果を逆転させる
                           .comparator()

// 後の使い方は今まで通り
const persons = [
  { lastname: 'bbb', firstname: 'ttt', age: 10},
  { lastname: 'bbb', firstname: 'ttt', age: 20},
  { lastname: 'ccc', firstname: 'sss', age: 30},
  { lastname: 'bbb', firstname: 'sss', age: 40},
  { lastname: 'aaa', firstname: 'uuu', age: 50},
]
persons.sort(personComparator)

// ソート結果
// [
//   { lastname: 'aaa', firstname: 'uuu', age: 50 }, // 姓の昇順
//   { lastname: 'bbb', firstname: 'sss', age: 40 }, // 同姓の場合、名の昇順
//   { lastname: 'bbb', firstname: 'ttt', age: 20 }, // 同姓同名の場合、年齢の降順
//   { lastname: 'bbb', firstname: 'ttt', age: 10 },
//   { lastname: 'ccc', firstname: 'sss', age: 30 } 
// ]

const tagCounter = (url, tagNmae) => { /* ダウンロードとタグのカウント処理 */ }

const yNews = 'https://どこかのニュースサイト'
tagCounter(yNews, 'div')
tagCounter(yNews, 'span')
tagCounter(yNews, 'li')

const curriedTagCounter = url => tagName => { /* ダウンロードとタグのカウント処理 */ }
// 分かり易くするため、少しだけ変形
//const curriedTagCounter = url => {
//  return tagName => { /* ダウンロードとタグのカウント処理 */ }
//}

// curriedTagCounter(yNews)が関数を返すので、それに引数を与えて実行している
const yNews = 'https://どこかのニュースサイト'
curriedTagCounter(yNews)('div')
curriedTagCounter(yNews)('span')
curriedTagCounter(yNews)('li')

const tags = ['div', 'span', 'li']

// カリー化したタグをカウントする関数（map関数が使える）
// curriedTagCounterの戻り値となる関数自体は、単一の文字列引数を受け取り、単一の数値を返すだけでよい
const result1 = tags.map(curriedTagCounter(yNews))

// curriedTagCounter(yNews)に関しては次のようにすることもできる
// 高階関数の実装次第では、result1と結果は異なる
const yNewsCurriedTagCounter = curriedTagCounter(yNews)
const result2 = tags.map(yNewsCurriedTagCounter)

// 参考

// タグの配列を引数に受け取ってタグをカウントする関数
// arrayTagCounter関数内で引数の配列に対する繰り返し処理や、結果を配列にpushするなどの処理が必要になる
const result3 = arrayTagCounter(yNews, tags)

// カリー化しなくてもmap関数は使えるが……部分適用した関数を作る必要がある
// いわゆる部分適用を行う
const yNewsTagCounter = tagName => {
  const yNews = 'https://どこかのニュースサイト'
  return tagCounter(yNews, tagName)
}
const result4 = tags.map(yNewsTagCounter)