回答編集履歴

誤字の修正

2018/04/22 13:37

投稿

miyabi-sun

スコア21554

answer CHANGED Viewed

@@ -20,7 +20,7 @@
 変数巻き上げって同じスコープの下の行で宣言した変数が、
 上の行でもundefined扱いで取れてしまう意図どおりにならない変な挙動ですよね？
-別に特になるケースも殆ど無いですし、
+別に得になるケースも殆ど無いですし、
 無くてもJavaScriptはチューリング完全ですので使わなくて構いません。
 > 高階関数のコンテキスト

ちゃんと質問タイトル通りに修正

2018/04/22 13:36

投稿

miyabi-sun

スコア21554

answer CHANGED Viewed

@@ -1,229 +1,42 @@
-関数型プログラミング的な事をやりたいのですか？
-もしそうなら、まずは関数にconsole.logを使う事をやめてください。
+> 再帰関数を引数に取りそれを実行する高階関数のコンテキストを変数巻き上げを使わずに変える方法
-値を返さない関数は、函数ではなくサブルーチンです。
-関数型プログラミングは関数を使って引数から入った値を戻り値として受け取る形で値を加工します。
-この関数をパーツ片として、レゴを組み立てるように構築するから関数型なのです。
+タイトルどおりに回答していきます。
-console.logは典型的なサブルーチンであり、
+質問文のコードはあくまで参考資料であり、
+例えば記述してある関数は関数としての要件を満たしていませんので、
-値を返さず標準出力へ文字列を出力するので計算途中に組み込む事は出来ません。
+一旦ノイズということでわきに追いやって、タイトルのみに集中して考えていきます。
-基本的には最後の最後で使う設計にしましょう。
----
+> 再帰関数を引数に取り
+再帰関数はそれ自体が関数なので、引数に取った高階関数は用意すること自体は可能です。
-次に再帰関数やループの戦略を考えていきます。
+再帰関数はそれ自体がループのような性質であり、
+間に処理を挟みたいという利用用途やケースがちょっと分かりづらいです。
-再帰関数は間に処理が挟めません。
-for文をラッピングした関数を用意して、
+むしろ再帰関数自体が公開関数であるべきで、
-「いやー、このfor文の毎回の処理に自作の処理を差し込みたいんだよね」って言ってるようなものです。
+値を加工する関数を引数にとり受け付けるのが一般的なプログラミングです。
-こうなってしまっては間に何もやりたい事を挟めないので、
-「ループさせない」ようにしてください。
+> 変数巻き上げを使わずに
-再帰関数も同様で、やりたい事が完成するまでループさせないで下さい。
-そしてこれが細分化された理想的な関数の形です。
+変数巻き上げって同じスコープの下の行で宣言した変数が、
-入力値があり、戻り値がある立派な関数です。
-（もっとアレな事を言えば副作用もなく参照透過でもある理想的な挙動をします）
+上の行でもundefined扱いで取れてしまう意図どおりにならない変な挙動ですよね？
-```JavaScript
+別に特になるケースも殆ど無いですし、
-const sharp = n => '#'.repeat(n)
-console.log(func(5)) // #####
+無くてもJavaScriptはチューリング完全ですので使わなくて構いません。
-```
-次に新しい機能として罫線とシャープの組み合わせの関数を考えていきます。
-罫線を返すhr関数です。
+> 高階関数のコンテキスト
-```JavaScript
+変えたい対象は文脈から推測するに、
-const hr = () => '-----'
-console.log(hr()) // -----
+再帰関数のコンテキストではなく、高階関数のコンテキストですよね？
-```
+高階関数は今から作るものなので、お好きなように変えて下さい。
-ではこの2つの関数を合成させましょう。
-罫線とシャープを間髪いれずに返すhrAndSharpです(ネーミングセンス皆無)
-```JavaScript
-const sharp = n => '#'.repeat(n)
-const hr = () => '-----'
-const hrAndSharp = ((sharp, hr) =>
-  num => [hr(), sharp(num)]
-)(sharp, hr)
-console.log(hrAndSharp(3)) // ["-----", "###"]
-console.log([1, 2, 3, 4, 5].map(hrAndSharp))
-// [
-//   ["-----", "#"],
-//   ["-----", "##"],
-//   ["-----", "###"],
-//   ["-----", "####"],
-//   ["-----", "#####"]
-// ]
-```
-5, 4, 3, 2, 1というのは階乗(factorial)というそうですから、
-そんな感じの関数をさくっと用意して…
-```JavaScript
-const factorial = (num, result = []) => {
-  if (num <= 0) return result
-  result.push(num)
-  return factorial(num - 1, result)
-}
-console.log(factorial(5)) // [5, 4, 3, 2, 1]
-const sharp = n => '#'.repeat(n)
-const hr = () => '-----'
-const hrAndSharp = ((sharp, hr) =>
-  num => [hr(), sharp(num)]
-)(sharp, hr)
-console.log(factorial(5).map(hrAndSharp))
-// [
-//   ["-----", "#####"],
-//   ["-----", "####"],
-//   ["-----", "###"],
-//   ["-----", "##"],
-//   ["-----", "#"]
-// ]
-```
-ここまでいけばあと一息ですね。
-- 2次元配列を1次元配列にする
-- 最後に罫線を追加
-- まとめて出力
-2次元配列を1次元配列にするのはfor文や再帰関数でもいけますが、
-reduceを使えば一撃です。
-```JavaScript
-// reduceを使って2次元配列を1次元配列に修正してみた
-const result = factorial(5).map(hrAndSharp).reduce((arr, it) => {
-  it.forEach(_ => arr.push(_))
-  return arr
-}, [])
-console.log(result)
-// ["-----", "#####", "-----", "####", "-----", "###", "-----", "##", "-----", "#"]
-// 出力用関数をおもむろに準備
-const output = it => console.log(it)
-// newFuncを作るとこうなる
-const newFunc = ((factorial, hrAndSharp) =>
-  num => {
-    const results = factorial(5).map(hrAndSharp).reduce((arr, it) => {
-      it.forEach(_ => arr.push(_))
-      return arr
-    }, [])
-    results.push(hr())
-    return results
-  }
-)(factorial, hrAndSharp)
-newFunc(5).forEach(output)
-// -----
-// #####
-// -----
-// ####
-// -----
-// ###
-// -----
-// ##
-// -----
-// #
-// -----
-// この場合、元の関数はこういう作りになる
-const func = ((factorial, sharp) =>
-  num => factorial(5).map(sharp)
-)(factorial, sharp)
-func(5).forEach(output)
-// #####
-// ####
-// ###
-// ##
-// #
-```
-まぁ、細部は色々ありますが、しっかりパーツ片単位に分解していくとこんな感じがゴールになるかと思います。
-ん？関数作りすぎじゃない？そうかもしれませんね。
-再利用するまでもないようなものは、
-どんどんアロー関数化したりしてくっつけていっても良いかと思います。
 ---
-おまけ: 配列操作を使う
-まぁ高階関数とかご大層な用意がなくても、
-JSの標準で用意されている高階関数的なメソッドチェーンで実現できます。
-```JavaScript
-const result = Array(5)
-  .fill(0)
-  .map((_, i) => ['-----', '#'.repeat(5 - i)])
-  .reduce((arr, it) => {
-    it.forEach(_ => arr.push(_))
-    return arr
-  }, [])
-result.push('-----')
-console.log(result)
-// ["-----", "#####", "-----", "####", "-----", "###", "-----", "##", "-----", "#", "-----"]
-result.forEach(it => console.log(it))
-// -----
-// #####
-// -----
-// ####
-// -----
-// ###
-// -----
-// ##
-// -----
-// #
-// -----
-```
-もし私ならコードの再利用云々以前にこれを関数に包めて`newFunc`完成です。
-この程度の分量なら細分化以前に必要になる度に書いてしまっても良いかなぁと思います。
-因みに`func`の作り方はこれを使えばワンライナーです。
-```JavaScript
-const result = Array(5)
-  .fill(0)
-  .map((_, i) => '#'.repeat(5 - i))
-// ["#####", "####", "###", "##", "#"]
-```
----
-おまけ: 出力する歳のイディオム
-JavaScriptではつかえませんが、
-Node.jsでは`¥n`が改行になります。
-なので配列は`arr.join('¥n')`で文字列に加工してしまって一気に吐き出すと、
-パフォーマンス的にもかなり良くなり、普通にconsole.logを書きまくるよりも速度が上がります。
-```JavaScript
-const result = ["-----", "#####", "-----", "####", "-----", "###", "-----", "##", "-----", "#", "-----"]
-console.log(result.join('¥n'))
-// -----¥n#####¥n-----¥n####¥n-----¥n###¥n-----¥n##¥n-----¥n#¥n-----
-```
----
 まとめ
-実際関数型プログラミングが綺麗らしいと言われますが、
-動けば何でもいい、コードの綺麗さなど知ったことかという人の多くはC系統の命令型プログラミングを好みますので、
+> 再帰関数を引数に取りそれを実行する高階関数のコンテキストを変数巻き上げを使わずに変える方法
-関数型プログラミングの世界に入ってこないだけの話です。
-命令型でやってた人間が、ソースの可読性をこだわりぬいた結果、
+「再帰関数を引数に取り」 → 誰でも作れるので可能
-関数型プログラミングに活路を見出し門戸を叩くケースも結構多いと聞きます。
+「それを実行する高階関数のコンテキストを変える」 → JavaScriptはチューリング完全なので可能
+「変数巻き上げを使わず」 → むしろJavaScriptのダメな挙動なので使わない方が良い、もちろん可能
-例え関数型プログラミングを軸にしたとしても、汚い設計やコードは簡単につくれます。
-関数型プログラミングが綺麗というのは、キレイなコードを書くために試行錯誤した前人達の努力の結晶なんですね。
-今回の回答文では質問文からやりたい事を満たす為のパーツ片の紹介という感じで書きました。
-おまけまで含めてもまだまだ考える余地は沢山あるかと思いますので、
-色々と試行錯誤してキレイな形というのを模索してみて下さい。
+全ての条件を論理積で考えた場合、全て可能なので可能です。

考え方のフローを記述するよう変更

2018/04/22 13:36

投稿

miyabi-sun

スコア21554

answer CHANGED Viewed

@@ -2,111 +2,123 @@
 もしそうなら、まずは関数にconsole.logを使う事をやめてください。
 値を返さない関数は、函数ではなくサブルーチンです。
-サブルーチンは当然ながら値を返さないので更なる工夫が出来ません。
-関数型プログラミングは細かい関数のパーツ片同士をレゴのように組み合わせて機能を完成させる手法です。
+関数型プログラミングは関数を使って引数から入った値を戻り値として受け取る形で値を加工します。
-従って値を返さず、他のパーツと組み合わせ辛いサブルーチンは締め以外では使えません。
+この関数をパーツ片として、レゴを組み立てるように構築するから関数型なのです。
-console.logは値を出力する処理、つまりサブルーチンです。
+console.logは典型的なサブルーチンであり、
-なので何かとセットで使う事は難しいのです。
+値を返さず標準出力へ文字列を出力するので計算途中に組み込む事は出来ません。
-基本的には最後の最後で使う設計にしてください。
+基本的には最後の最後で使う設計にしましょう。
 ---
-次に再帰関数は間に処理が挟めません。
+次に再帰関数やループの戦略を考えていきます。
+再帰関数は間に処理が挟めません。
 for文をラッピングした関数を用意して、
-「いやー、このfor文の毎回の処理に自作の処理を差し込みたいんだよねぇ」って言ってるようなものです。
+「いやー、このfor文の毎回の処理に自作の処理を差し込みたいんだよね」って言ってるようなものです。
-間に処理を挟む事は出来ませんが代替案はあります。
+こうなってしまっては間に何もやりたい事を挟めないので、
-分かりやすいように一つ手段を挙げるなら、
+「ループさせない」ようにしてください。
-予め`###`の詰まった配列を返させた後に、その配列を加工していくという手段でしょう。
+再帰関数も同様で、やりたい事が完成するまでループさせないで下さい。
-見てくれだけ高階関数に出来なくもありませんが、
-それは高階関数と呼べるものかは怪しいものです。
+そしてこれが細分化された理想的な関数の形です。
-(詳しくはおまけを参照してください)
+入力値があり、戻り値がある立派な関数です。
+（もっとアレな事を言えば副作用もなく参照透過でもある理想的な挙動をします）
+```JavaScript
+const sharp = n => '#'.repeat(n)
+console.log(func(5)) // #####
----
+```
-さて、実際にコードを書いていきます。
+次に新しい機能として罫線とシャープの組み合わせの関数を考えていきます。
+罫線を返すhr関数です。
-JavaScriptは配列の加工がわりと得意です。
+```JavaScript
+const hr = () => '-----'
-ですので配列を返す関数を作るようにしてください。
+console.log(hr()) // -----
-これがスタートラインです。
+```
+ではこの2つの関数を合成させましょう。
-※面倒なのでES6で書きますが、アロー関数と変数宣言以外はES5のものを利用していますので移植は楽だと思います。
+罫線とシャープを間髪いれずに返すhrAndSharpです(ネーミングセンス皆無)
-※JSの`array.push`は破壊的なメソッドなので関数としては欠陥品なのですが、JSで毎回新しく配列を作るとパフォーマンス的な影響がデカイ為、再帰関数の最初の発火時には初期値として`[]`を新しく作る思想で書いて妥協しています。
 ```JavaScript
+const sharp = n => '#'.repeat(n)
-const output = it => console.log(it)
+const hr = () => '-----'
-const func = (n, arr = []) => {
+const hrAndSharp = ((sharp, hr) =>
-  if (n <= 0) return arr
+  num => [hr(), sharp(num)]
-  arr.push('#'.repeat(n))
-  return func(n - 1, arr)
+)(sharp, hr)
-}
+console.log(hrAndSharp(3)) // ["-----", "###"]
-console.log(func(5))
+console.log([1, 2, 3, 4, 5].map(hrAndSharp))
-// ["#####", "####", "###", "##", "#"]
-func(5).forEach(output)
-// #####
-// ####
-// ###
-// ##
-// #
+// [
+//   ["-----", "#"],
+//   ["-----", "##"],
+//   ["-----", "###"],
+//   ["-----", "####"],
+//   ["-----", "#####"]
+// ]
 ```
+5, 4, 3, 2, 1というのは階乗(factorial)というそうですから、
-次、配列を取る関数として作りましょう。
+そんな感じの関数をさくっと用意して…
 ```JavaScript
-const output = it => console.log(it)
-const func = (n, arr = []) => {
+const factorial = (num, result = []) => {
-  if (n <= 0) return arr
+  if (num <= 0) return result
-  arr.push('#'.repeat(n))
+  result.push(num)
-  return func(n - 1, arr)
+  return factorial(num - 1, result)
 }
-const newFunc = (hr, arr, result = []) => {
+console.log(factorial(5)) // [5, 4, 3, 2, 1]
-  result.push(hr)
-  if (arr.length === 0) return result
-  result.push(arr[0])
-  return newFunc(hr, arr.slice(1), result)
-}
+const sharp = n => '#'.repeat(n)
-console.log(newFunc('-----', func(5)))
+const hr = () => '-----'
-// ["-----", "#####", "-----", "####", "-----", "###", "-----", "##", "-----", "#", "-----"]
+const hrAndSharp = ((sharp, hr) =>
+  num => [hr(), sharp(num)]
+)(sharp, hr)
-newFunc('-----', func(5)).forEach(output)
+console.log(factorial(5).map(hrAndSharp))
-// -----
-// #####
-// -----
-// ####
-// -----
-// ###
-// -----
-// ##
-// -----
-// #
+// [
+//   ["-----", "#####"],
+//   ["-----", "####"],
+//   ["-----", "###"],
+//   ["-----", "##"],
+//   ["-----", "#"]
-// -----
+// ]
 ```
----
+ここまでいけばあと一息ですね。
+- 2次元配列を1次元配列にする
-おまけ： 高階関数を使う
+- 最後に罫線を追加
+- まとめて出力
-初期のfunc関数を配列を返すようなものではなく、単機能にしぼりましょう。
+2次元配列を1次元配列にするのはfor文や再帰関数でもいけますが、
-ちょっとスマートさに欠ける気がしますが、色々と改良できそうではあります。
+reduceを使えば一撃です。
 ```JavaScript
+// reduceを使って2次元配列を1次元配列に修正してみた
+const result = factorial(5).map(hrAndSharp).reduce((arr, it) => {
+  it.forEach(_ => arr.push(_))
+  return arr
+}, [])
+console.log(result)
+// ["-----", "#####", "-----", "####", "-----", "###", "-----", "##", "-----", "#"]
+// 出力用関数をおもむろに準備
 const output = it => console.log(it)
-const hr = () => '-----'
-const func = n => '#'.repeat(n)
-const newFunc = (hr, fn, n, arr = []) => {
-  arr.push(hr())
-  if (n <= 0) return arr
-  arr.push(fn(n))
-  return newFunc(hr, fn, n - 1, arr)
-}
+// newFuncを作るとこうなる
+const newFunc = ((factorial, hrAndSharp) =>
+  num => {
+    const results = factorial(5).map(hrAndSharp).reduce((arr, it) => {
-console.log(newFunc(hr, func, 5))
+      it.forEach(_ => arr.push(_))
+      return arr
+    }, [])
+    results.push(hr())
+    return results
+  }
-// ["-----", "#####", "-----", "####", "-----", "###", "-----", "##", "-----", "#", "-----"]
+)(factorial, hrAndSharp)
-newFunc(hr, func, 5).forEach(output)
+newFunc(5).forEach(output)
 // -----
 // #####
 // -----
@@ -118,22 +130,36 @@
 // -----
 // #
 // -----
+// この場合、元の関数はこういう作りになる
+const func = ((factorial, sharp) =>
+  num => factorial(5).map(sharp)
+)(factorial, sharp)
+func(5).forEach(output)
+// #####
+// ####
+// ###
+// ##
+// #
 ```
+まぁ、細部は色々ありますが、しっかりパーツ片単位に分解していくとこんな感じがゴールになるかと思います。
+ん？関数作りすぎじゃない？そうかもしれませんね。
+再利用するまでもないようなものは、
+どんどんアロー関数化したりしてくっつけていっても良いかと思います。
 ---
 おまけ: 配列操作を使う
+まぁ高階関数とかご大層な用意がなくても、
-まぁ高階関数とかご大層な事しなくても、JSの標準で用意されている高階関数的なメソッドチェーンで実現できます。
+JSの標準で用意されている高階関数的なメソッドチェーンで実現できます。
 ```JavaScript
-const output = it => console.log(it)
-const sharp = n => '#'.repeat(n)
-const n = 5
-const result = Array(n)
+const result = Array(5)
   .fill(0)
-  .map((_, i) => ['-----', sharp(n - i)])
+  .map((_, i) => ['-----', '#'.repeat(5 - i)])
   .reduce((arr, it) => {
     it.forEach(_ => arr.push(_))
     return arr
@@ -142,7 +168,8 @@
 console.log(result)
 // ["-----", "#####", "-----", "####", "-----", "###", "-----", "##", "-----", "#", "-----"]
-result.forEach(output)
+result.forEach(it => console.log(it))
 // -----
 // #####
 // -----
@@ -156,9 +183,18 @@
 // -----
 ```
-このメソッドチェーンを適度な粒度で切り取れば、
-そこそこ綺麗に質問文の要望通りのものが作れそうです。
+もし私ならコードの再利用云々以前にこれを関数に包めて`newFunc`完成です。
+この程度の分量なら細分化以前に必要になる度に書いてしまっても良いかなぁと思います。
+因みに`func`の作り方はこれを使えばワンライナーです。
+```JavaScript
+const result = Array(5)
+  .fill(0)
+  .map((_, i) => '#'.repeat(5 - i))
+// ["#####", "####", "###", "##", "#"]
+```
 ---
 おまけ: 出力する歳のイディオム
@@ -179,15 +215,15 @@
 まとめ
 実際関数型プログラミングが綺麗らしいと言われますが、
-動けば何でもいい、コードの綺麗さなど知ったことかという人間はC系統の命令型プログラミングを好みますので、
+動けば何でもいい、コードの綺麗さなど知ったことかという人の多くはC系統の命令型プログラミングを好みますので、
 関数型プログラミングの世界に入ってこないだけの話です。
 命令型でやってた人間が、ソースの可読性をこだわりぬいた結果、
 関数型プログラミングに活路を見出し門戸を叩くケースも結構多いと聞きます。
-なので例え関数型プログラミングを軸にしたとしても、汚い設計やコードは簡単につくれます。
+例え関数型プログラミングを軸にしたとしても、汚い設計やコードは簡単につくれます。
-関数型プログラミングが綺麗というのは、キレイなコードを書くために試行錯誤した前人達の努力の証だと考えています。
+関数型プログラミングが綺麗というのは、キレイなコードを書くために試行錯誤した前人達の努力の結晶なんですね。
 今回の回答文では質問文からやりたい事を満たす為のパーツ片の紹介という感じで書きました。
-おまけまで含めても綺麗に収まる形には収まっていないと思いますので、
+おまけまで含めてもまだまだ考える余地は沢山あるかと思いますので、
 色々と試行錯誤してキレイな形というのを模索してみて下さい。

締めの文章追加

2018/04/22 12:54

投稿

miyabi-sun

スコア21554

answer CHANGED Viewed

@@ -179,10 +179,15 @@
 まとめ
 実際関数型プログラミングが綺麗らしいと言われますが、
+動けば何でもいい、コードの綺麗さなど知ったことかという人間はC系統の命令型プログラミングを好みますので、
-バカな人間は関数型プログラミングの世界に入ってこないだけの話であり、
+関数型プログラミングの世界に入ってこないだけの話です。
-関数型プログラミングを軸にしたとしても、汚い設計やコードは簡単につくれます。
+命令型でやってた人間が、ソースの可読性をこだわりぬいた結果、
+関数型プログラミングに活路を見出し門戸を叩くケースも結構多いと聞きます。
+なので例え関数型プログラミングを軸にしたとしても、汚い設計やコードは簡単につくれます。
+関数型プログラミングが綺麗というのは、キレイなコードを書くために試行錯誤した前人達の努力の証だと考えています。
 今回の回答文では質問文からやりたい事を満たす為のパーツ片の紹介という感じで書きました。
 おまけまで含めても綺麗に収まる形には収まっていないと思いますので、
 色々と試行錯誤してキレイな形というのを模索してみて下さい。