TL;DR

コードがシンプルになる
テストが楽チン
副作用がない
モダンJSは関数型推し
map、filter、reduceさえ覚えとけば大体イケる

きっかけ

React書いてて改めて気になったので。。

体系的なコト

関数型プログラミングは宣言型プログラミングの一種らしいです。

命令型プログラミング
- 「どうやって」（how）に着目する
- 昔のC言語みたいな
宣言型プログラミング
- 「何をするか」（what）に着目する
- 最近だとScalaとか

ex) 書いてみる

命令型プログラミング

/** 単語を全てハイフンで繋ぐ */
const str = "I have a pen"
let convStr = ""

for (let i = 0; i < str.length; i++) {
    if (str[i] === " ") convStr += "-"
    else convStr += str[i] 
}
console.log(convStr) // I-have-a-pen

宣言型プログラミング

const str = "I have a pen"
const strConnectHyphen = (str) => str.replace(/ /g, "-")

const convStr = strConnectHyphen(str)
console.log(convStr) // I-have-a-pen

考察

命令型プログラミング
- コメントがないと一見して何をしているか分からない
宣言型プログラミング
- 関数名から何をしてるかすぐに分かる（きちんと命名していれば）

なるほど。。
「やること」（what）を宣言的に記述し、
「どうやって」（how）の部分を抽象化することでコードが見やすくなるわけですね。

じゃあ関数型って？

諸説あるようですが、天下のオライリー様によると、、

データは全てイミュータブル（変更不可）である
純粋関数である

むむ、、なんのこっちゃ。

ex) イミュータブルなデータ

ミュータブルな例
- 元のオブジェクトを変更してしまう（破壊的メソッド）

const theme_green = {
    title: "darkgreen",
    color: "#006400",
    opacity: 0.5
}
const changeOpacity = (color, opacity) => {
    color.opacity = opacity
    return color
}
console.log(changeOpacity(theme_green, 0.8).opacity) // 0.8
console.log(theme_green.opacity) // 0.8 <- 変わっちゃった

イミュータブルな例
- 元のオブジェクトは変わらない（非破壊的メソッド）

const theme_green = {
    title: "darkgreen",
    color: "#006400",
    opacity: 0.5
}
const changeOpacity = (color, opacity) => ({...color, opacity})

console.log(changeOpacity(theme_green, 0.8).opacity) // 0.8
console.log(theme_green.opacity) // 0.5 <- 変わらない（イミュータブル）

純粋関数

少なくとも一つの引数をとり、値もしくは関数を戻り値として返す
引数は、イミュータブルである
副作用（関数外への影響）が発生しない
引数以外の値を参照しない
同じ引数ならば、同じ値が返ってくる

ex) 純粋ではない関数

前述の例です。引数colorが変更されているので純粋関数ではない

const theme_green = {
    title: "darkgreen",
    color: "#006400",
    opacity: 0.5
}
const changeOpacity = (color, opacity) => {
    color.opacity = opacity
    return color
}

ex) 純粋な関数

同じく前述の例。新たなオブジェクトを生成し返しているので、副作用なし

const theme_green = {
    title: "darkgreen",
    color: "#006400",
    opacity: 0.5
}
const changeOpacity = (color, opacity) => ({...color, opacity})

考察

要はスコープは狭く、結合度を下げろってことですね
引数さえコントロールすればいいので、テストが簡単そう

具体的にはどうしろと？

思うと、ES6以降のJSって、関数型で書けって言っているような構文ばかりですよね。
個人的によく使うケースをいくつか。。

`map`、`filter`、`reduce`を使い倒す

/** raw data */
const theme_colors = [
    {
        title: "darkgreen",
        color: "#006400",
        opacity: 0.5
    },
    {
        title: "tomato",
        color: "#ff6347",
        opacity: 0.7
    },
    {
        title: "navy",
        color: "#000080",
        opacity: 0.5
    },    
]

配列から任意の要素を抽出する／削除する

/** opacity=0.5の要素を抽出 */
const selected = theme_colors.filter(theme => theme.opacity == 0.5)

オブジェクトの配列から任意のプロパティだけ抽出する

/** カラーコードだけを抽出 */
const selected = theme_colors.map(theme => theme.color)
/** 新しいプロパティにして抽出 */
const selected = theme_colors.map(theme => ({code: theme.color}))

配列の任意の要素を変更する

/** 特定のタイトルを変更する */
const editThemeTitle = (before, after, arr) =>
    arr.map(item => (item.title == before ? {...item, title: after} : item))
const changed = editThemeTitle("navy", "darkblue", theme_colors)

メソッドチェーンで繋ぐ

/** opacity=0.5の要素のタイトルだけ抽出 */
const selected = theme_colors
    .filter(theme => theme.opacity == 0.5)
    .map(theme => theme.title)

オブジェクト->配列に変換する

const theme_colors = {
    "darkgreen": "#006400",
    "tomato": "#ff6347",
    "navy": "#000080"
}
const arr = Object.keys(theme_colors).map(key => ({
    title: key,
    color: theme_colors[key]
}))

配列->単一の値に変換する

/** 最大値を求める */
const numbers = [21, 18, 42, 40, 64, 63, 34]
const maxNumber = numbers.reduce((max, number) => (number > max ? number: max), 0)

配列->オブジェクトに変換する

/** titleをkey, color,opacityをプロパティにもつオブジェクトにする */
const obj_colors = theme_colors.reduce((colors, {title, color, opacity}) => {
    colors[title] = {color, opacity}
    return colors
}, {})

高階関数を使う

「関数を引数に取るか、戻り値として関数を返す、もしくはその両方」を満たす関数
map、filter、reduceは全て高階関数（関数を引数に取るパターン）

戻り値として関数を返すパターン

const userLogs = userName => message => console.log(`${userName} -> ${message}`)
/** ロギングを開始する */
const log = userLogs("John Doe")
log("logIn")

/** 非同期処理の完了を通知する */
fetchData
    .then(_ => log("success to load data.")) // John Doe -> success to load data.
    .catch(_ => log("failed to load data.")) // John Doe -> failed to load data.

再帰関数を使う

関数の中から自分自身を再帰的に呼び出す関数

const countDown = (value, fn) => {
    fn(value)
    return value > 0 ? countDown(value-1, fn) : value   
}
countDown(10, value => console.log(value))

まとめ

なんかES6構文の解説みたくなっちゃいました。。
関数型だからこう書く、ということではなく、読みやすいコードを書くことが大事なので
臨機応変にやればいいかなと思います。
多分、純粋関数を制約にしてしまったら、難しい局面とか出てきそう。。
機会があれば、React実践編みたいなのもご紹介できればと思います。

参考文献

Reactハンズオンラーニング第2版 ――Webアプリケーション開発のベストプラクティス