MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
JSでのFunctional Programmingの原則と書き方

JSでのFunctional Programmingの原則と書き方

公開日:2021年10月04日
最終更新日:2021年10月04日
t.yoshioka
テクノロジー
プログラミング
ホーム > 全記事一覧 > 制作 > エンジニア > プログラミング > JSでのFunctional Programmingの原則と書き方
このエントリーをはてなブックマークに追加
JSでのFunctional Programmingの原則と書き方
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちは!初めまして。エンジニアのTYです。

この度、初めてのブログ執筆と言うことで、僕が好きなJS関連のことを共有したいと思いました!

そこで、最近興味のある、JavascriptによるFunctional Programming(関数型プログラミング)をアウトプットも含め、知識をシェアしたいと思います。

 

Functional Programmingとは

「そもそもFunctional Programmingって何?」と思われた方も多いかと思います。もしかすると、「Object Oritented Programming(オブジェクト指向)は聞いたことある、もしくは、理解している。」方もいるかと思います。

Functional Programming(以下、FP)とは、プログラミングパラダイム(プログラミングの考え方と記述方法の枠組みを規定するもの)の一つです。

Javascriptといえば、Object Oriented Programming(以下、OOP)が有名だと思いますが、OOPもプログラミングパラダイムの一つです。ただ、オブジェクトを中心にプログラムを書くOOPとは違い、FPでは名前の通り、関数が中心になってきます。

少し具体的に言うと、

Pure Function(純粋関数)でソフトウェアを構成し、Shared State(グローバルスコープ、またはクロージャースコープにある変数)、Mutable Data(ミュータブルデータ)、Side-effects(副作用)を避けてプログラムすること。

 

FPにおいて、絶対に覚えておかなければいけないことは、

 

・Functions are pure(関数が純粋であること。)

・Variables are Immutable(変数はイミュータブルであること。)

 

文章による説明だと、「、、、 どう言うこと?」ってなるので、実際に手を動かしながら勉強していきたいと思います!

Functional Programmingの必須知識

FPを書く上で、必要な知識、実装の仕方があります。ここでは実際に手を動かしながら解説していきます。

 

Pure Functions(純粋関数)

FPにおいて関数がPure Functionsであることが前提となってきます。

Pure Functionsとは、 

・同じ引数の場合、戻り値はいつも同じになる。

・副作用が発生しない。(データベース、ファイルの書き換え等々)

関数です。

Pure FunctionとImpure Function(Pure Functionではない関数)を書いてみると、

 

Impure Function

Pure Function

 

Pure Functionsの条件は

 

・同じ引数の場合、戻り値はいつも同じになる。

・副作用が発生しない。(データベース、ファイルの書き換え等々)

 

でした。

Impure Functionの例では、グローバルスコープの impureCar オブジェクトに依存しているため、副作用が発生しています。(値を直接変えている)

一方、Pure Functionの場合直接 pureCar オブジェクトには触れておらず、引数として受けとり、それをコピーして新たなオブジェクトを生成しています。(値はそのまま)

このように、FPでは、副作用をうまないPure Functionsを組み合わせてプログラムしていきます。

Immutability 

immutableとは日本語で「不変」と言う意味で、FPにおいて一度定義したデータは変えません。

ただ、実際にデータを変えたい時はどうすればいいのか。ここでは、オブジェクト、配列のデータの変え方を見ていきます。

オブジェクトのデータ変更

配列のデータ変更

 

どちらも直接もとのデータを変更していません。

また、配列を操作するときに直接配列を操作するpush, pop, shift, unshiftなどは使われません。

代わりにmap, filter, reduceがよく用いられます。

 

Currying (カリー化)

カリー化とは、簡単に表すと、関数に渡した引数が足りない場合、それを補う関数を返すこと指します。

わかりすく表記で表すと、f(a, b, c) を f(a)(b)(c) にすることです。

例えば、「引数を二つ取りたいけど、一つしか渡せない」ときは、f(a, b) を f(a)(b) の形にします。

例にあるgreet関数はgreetingとnameの引数が必要です。しかし、配列のmap関数で引数に渡せるのはnameだけなので、greet(greeting, name) から greet(greeting)(name) に変更する必要があります。

最終的にmap関数に渡されてる関数はgreet("hello")(name)となります。

Higher Order Functions(高階関数)

高階関数とは関数を引数としてとる関数、もしくは引数を返す関数を指します。

FPでは高階関数が至る所で使われ、実際に先程のカリー化の例でも使われています。

 

Functional Composition(関数合成)

関数合成とは他の関数と組み合わせて新しい関数を作ることです。

例えば、文字列の並びを反対にしたい場合2つの関数を用いて実行できます。

const split = (str) => str.split(" ");

const reverse = (arr) => arr.reverse().join(""); 

関数合成で一つにまとめると

spritとreverseを組み合わせて、reverseStringと言う新たな関数を作っています。

reverseStringに渡した引数はsplitの引数として渡され、その戻り値がreverseの引数として渡されます。reverseの戻り値が最終的にreverseStringの戻り値となります。

R.composeの関数は、Ramdaと言うlibraryからインポートしています。

実はRamdaのように、FPのlibraryも数多く存在します。それらを用いることで、開発がしやすくなります。

Functional Programmingのメリット

ここまで記述方法を勉強しましたが正直、「書き方が決められていてめんどくさい、わかりにくい。」って思うますよね。なので最後にFPのメリットを紹介します。

 

・戻り値が決まっているので、テストがしやすい

・イミュータブルなので、バグがへる

・関数の使い回しができる(リユーザブル)

・関数の組み合わせがしやすい(コンポーザブル)

・キャッシュがしやすい

 

関数はPure Functions、変数はImmutableにするメリットはたくさんあります。

関数を書くときに、副作用がないに越したことはないですね。バグが生まれにくくなります。関数を組み合わせたり、使いまわすことも出来ます。また、同じ引数の場合、戻り値も同じになるので、テストがしやすくなります。

まとめ

以上、JavascriptでFunctional Programmingのコアな部分を解説しましたが、

OOPとFPはどっちが良いというものは無く、何を開発するのかによって使い分ける必要がありそうです。

僕自身、まだ表面的な部分しか学べておらず、勉強するたびに奥の深さを感じます。

この記事が勉強の役に立てれば幸いです。

ありがとうございました。

 

 

参考文献、資料、素材 

 


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

現場で働いているからわかる!人気プログラミング言語を徹底比較
プログラミング
公開日: 2019年07月10日
最終更新日: 2019年07月10日
現場で働いているからわかる!人気プログラミング言語を徹底比較
  • # プログラミング言語
  • # 比較
オンスタ運営
AMP (Accelerated Mobile Pages) HTML のおさらい
テクノロジー
公開日: 2016年11月14日
最終更新日: 2022年01月17日
AMP (Accelerated Mobile Pages) HTML のおさらい
  • # AMP HTML
オンスタ運営
「HTML5プロフェッショナル認定試験」合格に向けての勉強方法〜資格取得を目標にして知識を深めよう〜
プログラミング
マークアップ
公開日: 2017年10月20日
最終更新日: 2017年10月20日
「HTML5プロフェッショナル認定試験」合格に向けての勉強方法〜資格取得を目標にして知識を深めよう〜
オンスタ運営
【.htaccess】WordPressでも馴染みの深い.htaccess。その概要とよく使うTips5選
WordPress
システム
テクノロジー
デザイン
公開日: 2020年06月29日
最終更新日: 2022年01月17日
【.htaccess】WordPressでも馴染みの深い.htaccess。その概要とよく使うTips5選
  • # .htaccess
オンスタ運営
@keyframesでアニメーションをさせたい!
テクノロジー
プログラミング
公開日: 2020年11月25日
最終更新日: 2020年11月25日
@keyframesでアニメーションをさせたい!
s.masuda
【調査】次のweb標準!?まことしやかに囁かれ続けるWeb Componentsとは?
テクノロジー
マークアップ
公開日: 2018年01月20日
最終更新日: 2018年01月20日
【調査】次のweb標準!?まことしやかに囁かれ続けるWeb Componentsとは?
オンスタ運営
やさしいGoogle Meetの参加方法
アプリケーション
テクノロジー
公開日: 2020年11月04日
最終更新日: 2020年11月04日
やさしいGoogle Meetの参加方法
s.tsujiyama
【仮想環境構築】Vagrant + VirtualBoxで「作って壊せる」テスト環境を作ってみよう!
システム
テクノロジー
プログラミング
公開日: 2018年03月16日
最終更新日: 2018年03月16日
【仮想環境構築】Vagrant + VirtualBoxで「作って壊せる」テスト環境を作ってみよう!
オンスタ運営
JSのWeb API(getBoundingClientRect)の活用例を紹介
プログラミング
公開日: 2021年10月15日
最終更新日: 2021年10月15日
JSのWeb API(getBoundingClientRect)の活用例を紹介
m.watanabe
【CSS】CSSレイアウト組まとめ(中編)
テクノロジー
マークアップ
公開日: 2017年10月06日
最終更新日: 2017年10月06日
【CSS】CSSレイアウト組まとめ(中編)
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。