回答編集履歴

誤字の修正

2018/04/22 13:37

投稿

miyabi-sun

スコア21158

test CHANGED Viewed

@@ -42,7 +42,7 @@
-別に特になるケースも殆ど無いですし、
+別に得になるケースも殆ど無いですし、
 無くてもJavaScriptはチューリング完全ですので使わなくて構いません。

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

2018/04/22 13:36

投稿

miyabi-sun

スコア21158

test CHANGED Viewed

@@ -1,424 +1,62 @@
-関数型プログラミング的な事をやりたいのですか？
-もしそうなら、まずは関数に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-----
-```
@@ -430,28 +68,16 @@
-実際関数型プログラミングが綺麗らしいと言われますが、
-動けば何でもいい、コードの綺麗さなど知ったことかという人の多くはC系統の命令型プログラミングを好みますので、
+> 再帰関数を引数に取りそれを実行する高階関数のコンテキストを変数巻き上げを使わずに変える方法
-関数型プログラミングの世界に入ってこないだけの話です。
-命令型でやってた人間が、ソースの可読性をこだわりぬいた結果、
+「再帰関数を引数に取り」 → 誰でも作れるので可能
-関数型プログラミングに活路を見出し門戸を叩くケースも結構多いと聞きます。
+「それを実行する高階関数のコンテキストを変える」 → JavaScriptはチューリング完全なので可能
+「変数巻き上げを使わず」 → むしろJavaScriptのダメな挙動なので使わない方が良い、もちろん可能
-例え関数型プログラミングを軸にしたとしても、汚い設計やコードは簡単につくれます。
-関数型プログラミングが綺麗というのは、キレイなコードを書くために試行錯誤した前人達の努力の結晶なんですね。
-今回の回答文では質問文からやりたい事を満たす為のパーツ片の紹介という感じで書きました。
-おまけまで含めてもまだまだ考える余地は沢山あるかと思いますので、
-色々と試行錯誤してキレイな形というのを模索してみて下さい。
+全ての条件を論理積で考えた場合、全て可能なので可能です。

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

2018/04/22 13:36

投稿

miyabi-sun

スコア21158

test CHANGED Viewed

@@ -6,19 +6,17 @@
-サブルーチンは当然ながら値を返さないので更なる工夫が出来ません。
-関数型プログラミングは細かい関数のパーツ片同士をレゴのように組み合わせて機能を完成させる手法です。
+関数型プログラミングは関数を使って引数から入った値を戻り値として受け取る形で値を加工します。
-従って値を返さず、他のパーツと組み合わせ辛いサブルーチンは締め以外では使えません。
+この関数をパーツ片として、レゴを組み立てるように構築するから関数型なのです。
-console.logは値を出力する処理、つまりサブルーチンです。
+console.logは典型的なサブルーチンであり、
-なので何かとセットで使う事は難しいのです。
+値を返さず標準出力へ文字列を出力するので計算途中に組み込む事は出来ません。
-基本的には最後の最後で使う設計にしてください。
+基本的には最後の最後で使う設計にしましょう。
@@ -26,29 +24,279 @@
+次に再帰関数やループの戦略を考えていきます。
-次に再帰関数は間に処理が挟めません。
+再帰関数は間に処理が挟めません。
 for文をラッピングした関数を用意して、
-「いやー、このfor文の毎回の処理に自作の処理を差し込みたいんだよねぇ」って言ってるようなものです。
-間に処理を挟む事は出来ませんが代替案はあります。
-分かりやすいように一つ手段を挙げるなら、
-予め`###`の詰まった配列を返させた後に、その配列を加工していくという手段でしょう。
-見てくれだけ高階関数に出来なくもありませんが、
-それは高階関数と呼べるものかは怪しいものです。
-(詳しくはおまけを参照してください)
+「いやー、このfor文の毎回の処理に自作の処理を差し込みたいんだよね」って言ってるようなものです。
+こうなってしまっては間に何もやりたい事を挟めないので、
+「ループさせない」ようにしてください。
+再帰関数も同様で、やりたい事が完成するまでループさせないで下さい。
+そしてこれが細分化された理想的な関数の形です。
+入力値があり、戻り値がある立派な関数です。
+（もっとアレな事を言えば副作用もなく参照透過でもある理想的な挙動をします）
+```JavaScript
+const sharp = n => '#'.repeat(n)
+console.log(func(5)) // #####
+```
+次に新しい機能として罫線とシャープの組み合わせの関数を考えていきます。
+罫線を返す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)
+// #####
+// ####
+// ###
+// ##
+// #
+```
+まぁ、細部は色々ありますが、しっかりパーツ片単位に分解していくとこんな感じがゴールになるかと思います。
+ん？関数作りすぎじゃない？そうかもしれませんね。
+再利用するまでもないようなものは、
+どんどんアロー関数化したりしてくっつけていっても良いかと思います。
@@ -56,120 +304,90 @@
-さて、実際にコードを書いていきます。
-JavaScriptは配列の加工がわりと得意です。
-ですので配列を返す関数を作るようにしてください。
-これがスタートラインです。
-※面倒なのでES6で書きますが、アロー関数と変数宣言以外はES5のものを利用していますので移植は楽だと思います。
-※JSの`array.push`は破壊的なメソッドなので関数としては欠陥品なのですが、JSで毎回新しく配列を作るとパフォーマンス的な影響がデカイ為、再帰関数の最初の発火時には初期値として`[]`を新しく作る思想で書いて妥協しています。
-```JavaScript
-const output = it => console.log(it)
-const func = (n, arr = []) => {
-  if (n <= 0) return arr
-  arr.push('#'.repeat(n))
-  return func(n - 1, arr)
-}
-console.log(func(5))
+おまけ: 配列操作を使う
+まぁ高階関数とかご大層な用意がなくても、
+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))
 // ["#####", "####", "###", "##", "#"]
-func(5).forEach(output)
-// #####
-// ####
-// ###
-// ##
-// #
-```
-次、配列を取る関数として作りましょう。
-```JavaScript
-const output = it => console.log(it)
-const func = (n, arr = []) => {
-  if (n <= 0) return arr
-  arr.push('#'.repeat(n))
-  return func(n - 1, arr)
-}
-const newFunc = (hr, arr, result = []) => {
-  result.push(hr)
-  if (arr.length === 0) return result
-  result.push(arr[0])
-  return newFunc(hr, arr.slice(1), result)
-}
-console.log(newFunc('-----', func(5)))
-// ["-----", "#####", "-----", "####", "-----", "###", "-----", "##", "-----", "#", "-----"]
-newFunc('-----', func(5)).forEach(output)
-// -----
-// #####
-// -----
-// ####
-// -----
-// ###
-// -----
-// ##
-// -----
-// #
-// -----
 ```
@@ -178,65 +396,27 @@
-おまけ： 高階関数を使う
+おまけ: 出力する歳のイディオム
+JavaScriptではつかえませんが、
-初期のfunc関数を配列を返すようなものではなく、単機能にしぼりましょう。
+Node.jsでは`¥n`が改行になります。
+なので配列は`arr.join('¥n')`で文字列に加工してしまって一気に吐き出すと、
-ちょっとスマートさに欠ける気がしますが、色々と改良できそうではあります。
+パフォーマンス的にもかなり良くなり、普通にconsole.logを書きまくるよりも速度が上がります。
-```JavaScript
+```JavaScript
-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)
-}
-console.log(newFunc(hr, func, 5))
-// ["-----", "#####", "-----", "####", "-----", "###", "-----", "##", "-----", "#", "-----"]
+const result = ["-----", "#####", "-----", "####", "-----", "###", "-----", "##", "-----", "#", "-----"]
-newFunc(hr, func, 5).forEach(output)
+console.log(result.join('¥n'))
-// -----
+// -----¥n#####¥n-----¥n####¥n-----¥n###¥n-----¥n##¥n-----¥n#¥n-----
-// #####
-// -----
-// ####
-// -----
-// ###
-// -----
-// ##
-// -----
-// #
-// -----
 ```
@@ -246,121 +426,13 @@
-おまけ: 配列操作を使う
-まぁ高階関数とかご大層な事しなくても、JSの標準で用意されている高階関数的なメソッドチェーンで実現できます。
-```JavaScript
-const output = it => console.log(it)
-const sharp = n => '#'.repeat(n)
-const n = 5
-const result = Array(n)
-  .fill(0)
-  .map((_, i) => ['-----', sharp(n - i)])
-  .reduce((arr, it) => {
-    it.forEach(_ => arr.push(_))
-    return arr
-  }, [])
-result.push('-----')
-console.log(result)
-// ["-----", "#####", "-----", "####", "-----", "###", "-----", "##", "-----", "#", "-----"]
-result.forEach(output)
-// -----
-// #####
-// -----
-// ####
-// -----
-// ###
-// -----
-// ##
-// -----
-// #
-// -----
-```
-このメソッドチェーンを適度な粒度で切り取れば、
-そこそこ綺麗に質問文の要望通りのものが作れそうです。
----
-おまけ: 出力する歳のイディオム
-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系統の命令型プログラミングを好みますので、
+動けば何でもいい、コードの綺麗さなど知ったことかという人の多くはC系統の命令型プログラミングを好みますので、
 関数型プログラミングの世界に入ってこないだけの話です。
@@ -372,14 +444,14 @@
-なので例え関数型プログラミングを軸にしたとしても、汚い設計やコードは簡単につくれます。
+例え関数型プログラミングを軸にしたとしても、汚い設計やコードは簡単につくれます。
-関数型プログラミングが綺麗というのは、キレイなコードを書くために試行錯誤した前人達の努力の証だと考えています。
+関数型プログラミングが綺麗というのは、キレイなコードを書くために試行錯誤した前人達の努力の結晶なんですね。
 今回の回答文では質問文からやりたい事を満たす為のパーツ片の紹介という感じで書きました。
-おまけまで含めても綺麗に収まる形には収まっていないと思いますので、
+おまけまで含めてもまだまだ考える余地は沢山あるかと思いますので、
 色々と試行錯誤してキレイな形というのを模索してみて下さい。

締めの文章追加

2018/04/22 12:54

投稿

miyabi-sun

スコア21158

test CHANGED Viewed

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