エンジニアがビジネスチームを加速させる為に取り組んだ4つのアプローチ

<html><head></head><body>プレイドのエンジニア兼ハンターの <a href="https://github.com/algas" target="_blank" rel="noreferrer">@algas</a> です。 
<a href="https://ramdajs.com" target="_blank" rel="noreferrer">Ramda.js</a> の関数を例にして JavaScript による関数型プログラミングの考え方を紹介します。 
本記事では Ramda.js 自体を紹介するのではなく、より深い関数型プログラミングの考え方を学ぶきっかけを作れることを意図しています。
<h2 id="想定読者">想定読者</h2>
<ul>
<li>Node.js でアプリケーションを実装したことがある</li>
<li>関数型プログラミングに興味がある</li>
</ul>
<h2 id="JavaScript でなぜ関数型プログラミングが必要なのか">JavaScript でなぜ関数型プログラミングが必要なのか</h2>
JavaScript のモジュールの多くは Mutable で副作用の影響を受けやすい実装になっています。 
副作用の影響を受けやすければ、そのモジュールを複数の場所で利用するのが難しくなります。 
さらに関数などのインターフェースが適切でなかったり、意図したとおりに機能しなければ再利用するのが難しく冗長なコードが増えてしまうことになります。 
冗長なコードは可読性が低く理解するのにも時間がかかります。 
それによって不具合を混入しやすくなったり、不具合を解消するのに不要な時間がかかってしまいます。 
関数型プログラミングを導入することで、コードを短く保ち素早く実装して不具合を混入しにくくなることが期待できます。 
これはもちろん手法の一つであり、すべての問題を解決する万能の魔法ではありません。
<h2 id="Ramda.js と関数型プログラミング">Ramda.js と関数型プログラミング</h2>
Ramda.js は JavaScript の実用的な関数のライブラリです。 
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/c88bd433-7b95-48db-a621-3166bd1ad72c/ramdaFilled_200x235.png" alt="ramdaFilled_200x235"> 
以下のような特徴を持っています。
<ol>
<li>純粋関数型 
不変で副作用の影響を受けにくいような設計になっています。</li>
<li>自動カリー化 
関数の再利用がしやすくなります。</li>
<li>引数の最適化 
基本的には最後の引数にデータが来るようになっています。</li>
</ol>
Ramda.js は便利な関数を数多く揃えていて、このライブラリを使ってアプリケーションを実装するだけでも非常に有益です。
Ramda.js を使うとどのように便利なのかについては、<a href="http://randycoulman.com/blog/2016/05/24/thinking-in-ramda-getting-started/" target="_blank" rel="noreferrer">Thinking in Ramda</a> のブログに良くまとめられています。
<h2 id="map の定義">map の定義</h2>
Ramda.js の <a href="https://ramdajs.com/docs/#map" target="_blank" rel="noreferrer">map</a> 関数の定義を見てみましょう。
<pre><code class="language-haskell hljs">map :: Functor f =&gt; (a -&gt; b) -&gt; f a -&gt; f b
</code></pre>
上記は JavaScript の文法ではありません。 
特に Haskell に馴染みがない読者向けに上記の定義を詳しく説明します。 
ちなみに Haskell では Ramda.js の map が <a href="http://hackage.haskell.org/package/base-4.12.0.0/docs/Prelude.html#v:fmap" target="_blank" rel="noreferrer"><code>fmap</code></a> という関数に該当します。
'=&gt;' の左側は関数の型制約です。 
<code>Functor f</code> とは f は <code>Functor</code> であることを示しています。 
Functor 自体が何かについては後ほど詳しく説明します。
<code>-&gt;</code> は関数型コンストラクタです。 
<code>a -&gt; b</code> とは型 <code>a</code> の値を引き数に1つ取り、型 <code>b</code> の値を返す関数であることを示しています。 
例えば <code>a -&gt; b -&gt; c</code> は第一引数に型 <code>a</code> の値を、第二引数に型 <code>b</code> の値を取り、型 <code>c</code> の値を返す関数です。 
a, b のように小文字で書かれた型に特に制約がなければ任意の型であることを表しています。
小文字がスペース区切りで連続している場合には、関数を適用したことを表しています。 
つまり <code>f a</code> は関数 f を a に適用した値です。
上記を踏まえてもう一度 <code>map</code> の定義を見直してみます。 
<code>map</code> は第一引数に <code>a -&gt; b</code> という値(すなわち関数)、第二引数に <code>f a</code> という値を取り、<code>f b</code> という値を返します。
詳しくは <a href="https://github.com/fantasyland/fantasy-land" target="_blank" rel="noreferrer">Fantasy Land Specification</a> をご参照ください。
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/b3490a2b-51bb-45ed-865b-ca289e6f2314/logo.png" alt="logo">
<h2 id="Functor とは何か？">Functor とは何か？</h2>
Fantasy Land Specification に記載されている <a href="https://github.com/fantasyland/fantasy-land#functor" target="_blank" rel="noreferrer">Functor</a> の定義を見てみましょう。
<ol>
<li>Identity 
<code>map(a =&gt; a, u) == u</code> 
<code>a =&gt; a</code> という「何もしない」関数を map に適用しても、適用する前と同じです。</li>
<li>Composition 
<code>map(x =&gt; f(g(x)), u) == map(f, map(g, u))</code> 
これは <code>x =&gt; f(g(x))</code> という x に関数 g と関数 f を map で適用した値は、 
関数 g を map した値にさらに関数 f を map した値と同じです。</li>
</ol>
Functor とは上記2つの性質 (Identity, Composition) を示すような型制約のことを指します。 
上記の map は Functor の例のために仮においたもので、map 以外の Functor の性質を持つ関数も同様の性質を示すことが期待されます。 
また map 関数の定義における f には任意の Functor を適用できます。
<h2 id="Functor 制約を持つ関数の実装例">Functor 制約を持つ関数の実装例</h2>
<a href="https://github.com/ramda/ramda-fantasy" target="_blank" rel="noreferrer">Ramda Fantasy</a> では Functor として Maybe, Either など8つの実装が紹介されています。 
また Array, Object も Functor の性質を満たすことが分かっています。 
これらはすべて Functor の性質を満たしているので、Ramda.js の map 関数を適用できます。
以下で map 関数を使った実装例を紹介します。
<pre><code class="language-javascript hljs">const R = require('ramda');
const S = require('sanctuary');

const mapFunc = R.map(R.compose(S.mult(2), S.add(1)));
const a = [1,2,3];
const z = S.Just(42);
const n = S.Nothing;
const w = S.Right(99);
const e = S.Left("error");

console.log(mapFunc(a));
console.log(mapFunc(z));
console.log(mapFunc(n));
console.log(mapFunc(w));
console.log(mapFunc(e));
</code></pre>
<code>mapFunc</code> は Number を値に持つ Functor の中身に "1 を足して 2 倍する" 関数です。 
上記で mapFunc という関数を異なる Functor に適用していることに注目してください。 
ここでは List Number, Maybe Number, Either Number のそれぞれの値に全く同じ形式で mapFunc を適用しています。
出力結果は以下のとおりです。
<pre><code class="hljs">[ 4, 6, 8 ]
Just (86)
Nothing
Right (200)
Left ("error")
</code></pre>
各値に "1を足して2倍した" 結果が得られていますね。
<h2 id="そもそも Functor を使うと何がうれしいの？">そもそも Functor を使うと何がうれしいの？</h2>
Functor 自体は抽象的な存在であり、そのものが実践的な役割を持つわけではありません。 
Functor である Maybe などが実際に便利さを示します。 
したがって、ここでは Maybe を使うと何が便利になるかということを例に説明します。 
<code>Maybe a</code> は <code>Nothing</code> と <code>Just a</code> という2つの値コンストラクタを持ちます。
<pre><code class="language-Haskell hljs">Maybe a = Nothing | Just a
</code></pre>
※ <a href="https://github.com/sanctuary-js/sanctuary" target="_blank" rel="noreferrer">Sanctuary.js</a> の実装では <code>S.Nothing</code> と <code>S.Just(value)</code> という関数がコンストラクタです。 
ここで a は Non-Nullable Value になります。null は Nothing に変換されます。 
Maybe の世界には null は存在しないので、値が null であるかどうかをチェックする必要はありません。 
実装例で示したように Functor (Maybe) であることを前提とした関数を適用した場合には、Nothing か Just かを気にすることなく関数を適用することができます。 
Maybe を使う場合に null または Nothing を気にしなければならないのは、以下の2つの時だけです。
<ol>
<li>外界から Maybe の世界に値を変換する時</li>
<li>Maybe の世界から外界に値を変換する時</li>
</ol>
つまり、Maybe を使うと多くのプログラマにとって煩わしい null チェックの回数を大幅に減らすことができます。
本記事では Functor を主な例として説明しましたが、Fantasy Land に記載されているように Functor よりもさらに複雑な条件を持つ Applicative や Monad などの概念も存在します。 
これらを詳しくするには余白が足りないので他書にその役割を譲ることにします。
<img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/2c88e33e-e64f-4f54-88ee-4205b516b80a/dependencies.png" alt="dependencies">
上記は Fantasy Land Specification から引用した図です。
<h2 id="まとめ">まとめ</h2>
本記事では Ramda.js, Fantasy-Land を中心に Functor を使った JavaScript による関数型プログラミングに触れる試みをしました。 
現実的に現段階において本記事の概念に近づく実装をするためには以下を実践するほうがよいでしょう。
<ul>
<li><a href="https://www.typescriptlang.org/" target="_blank" rel="noreferrer">TypeScript</a> で <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html" target="_blank" rel="noreferrer">strictNullChecks</a> を有効にする</li>
<li><a href="http://www.purescript.org/" target="_blank" rel="noreferrer">PureScript</a> で実装する</li>
</ul>
また本記事では説明できなかった項目やさらに発展的な内容を知るには Haskell などのプログラミング言語の仕様や実装を学ぶことをオススメします。
<h2 id="参考文献">参考文献</h2>
<ul>
<li><a href="https://ramdajs.com/" target="_blank" rel="noreferrer">Ramda.js</a></li>
<li><a href="https://github.com/fantasyland/fantasy-land" target="_blank" rel="noreferrer">Fantasy Land Specification</a></li>
<li><a href="https://github.com/ramda/ramda-fantasy" target="_blank" rel="noreferrer">Ramda Fantasy</a></li>
<li><a href="https://github.com/sanctuary-js/sanctuary" target="_blank" rel="noreferrer">Sanctuary.js</a></li>
<li><a href="http://hackage.haskell.org/" target="_blank" rel="noreferrer">Hackage</a></li>
<li><a href="http://randycoulman.com/blog/categories/thinking-in-ramda/" target="_blank" rel="noreferrer">Courageous Software: Thinking In Ramda</a></li>
</ul>
<h2 id="最後に">最後に</h2>
CX（顧客体験）プラットフォーム「<a href="https://karte.io/" target="_blank" rel="noreferrer">KARTE</a>」を運営するプレイドでは、KARTEを使ってこんなアプリケーションが作りたい！ KARTE自体の開発に興味がある！というエンジニア（インターンも！）を募集しています。 
詳しくは<a href="https://plaid.co.jp/recruit/engineer.html" target="_blank" rel="noreferrer">弊社採用ページ</a>または<a href="https://www.wantedly.com/companies/plaid/projects" target="_blank" rel="noreferrer">Wantedly</a>をご覧ください。 もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください！
<div class="wantedly-visit-button" data-visit-button-id="lyE_IgY4VF5ukBo_EUKZLg" data-width="300" data-height="60"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "https://platform.wantedly.com/visit_buttons/script.js";
 fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "wantedly-visit-buttons-wjs"));
</script>
</body></html>

Ramda.jsの関数を例にしてJavaScriptによる関数型プログラミングの考え方を紹介します


JavaScript で触れる関数型プログラミング