戻る

JavaScriptでの関数型プログラミングその1 - イントロダクション

パヴェル・ゲド

Vue.js開発者

私たちの記事を読んで、JavaScriptにおける関数型プログラミングのパワーを発見してください。関数型プログラミングは、プログラムの記述と計算が分離された宣言型のパラダイムに分類されます。

関数型プログラミングとは何か？

「簡単に言えば、関数型プログラミングはソフトウェア開発機能重視のスタイル"

本からの抜粋ルイス・アテンシオ "関数型プログラミング入門 JavaScript.を向上させる方法 JavaScript 機能的手法を用いたプログラム"

関数型プログラミング に分類される。 宣言的 このパラダイムでは、プログラムの記述が計算から分離されている。ここで重視されるのは、プログラム・ロジックを記述するために式を使用することである。これは 必要不可欠 プログラミングを行う。コードはステップ・バイ・ステップで実行され、コンピュータに仕事の進め方を詳細に指示する。

宣言型と命令型の違い、例

整数の配列があり、それぞれを2乗して、偶数でない値だけを選択する必要がある場合を考えてみよう。

インペラティブ

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]；

const results = [].

for(let i = 0; i < numbers.length; i++) { { { for(let i = 0; i < numbers.length; i++)
const secondPower = Math.pow(numbers[i], 2)
if(secondPower & 1) { // または % 2、ただしビット演算の方が高速
results.push(secondPower)；
}
}

console.log(results) // [1, 9, 25, 49, 81].

に関しては 必要不可欠 solution, the focus on implementation details is clearly visible. In the loop, you can see the array index based on the need to control the number of elements. Due to the large number of details in the code, it is harder to focus on what it is doing. Let us now focus on the 宣言的 解決策だ。

宣言的

const risesToSecondPower = (num) => Math.pow(num, 2)
const isOdd = (num) => num & 1；

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9].

const results = numbers
.map(risesToSecondPower)
.filter(isOdd)；

console.log(results) // [1, 9, 25, 49, 81].

このソリューションでは、ロジックを別々の関数にすることで、実装と呼び出しが分離されている。このソリューションのおかげで、関数の中で起こっていることを説明する関数名だけに集中できる。さらに、抽象化レベルが上がり、ロジックを再利用できるようになりました。では、呼び出しに注目してみよう。このコードで何をするのか、ステップ・バイ・ステップで説明するだけである：

マップ(risesToSecondPower) - 配列の各要素を取り出し、それを2乗する、
フィルター(isOdd) - フィルターをかけて奇数の要素を選択する。

メリット

関数型プログラミング には多くの利点がある。それは JavaScript関数型言語なのだから、関数の使用は当然である。この言語のクラスは「構文上の糖分」であり、その下は関数で構成されている。

読みやすさについて言えば、命令型アプローチでは、コードは通常、ロジックを掘り下げることなく逐次読むことができる関数名のリストになる。その結果、私たちは実装の詳細には目を向けません。

もうひとつの利点は、イミュータブル・オブジェクトの慣例にこだわることだ。このアプローチのおかげで、コードはより安全になる。 JavaScript は非常に強力で、不要なオブジェクトを修正するのは簡単だ。

関数型プログラミングでは、コードは小さな関数に分解され、再利用可能な抽象コードとして簡単に考えることができる。

純粋機能

関数型プログラミングにおける重要な検討事項のひとつに純粋関数がある。このような関数を作るには、いくつかのルールを覚えておく必要がある：

関数が返す結果は、入力パラメータにのみ依存する、
グローバル変数や、自分の範囲を超えた変数を使用しないでください、
パラメータの状態を変更しない、
純粋関数は「副作用」（通常はオブジェクトのプロパティを変更する）を持たない、
を指定された入力パラメータに代入すると、常に同じ結果を返す、
純粋関数は常にパラメータを取り、常にパラメータを返す。

// インピュア関数
カウンター = 5
...
const multipleCounter = (乗数) => { ...
カウンタ = カウンタ * 乗数
}

multiplyCounter(2) // -> ? 結果は初期値による

// 純粋関数
const multiplyBy = (multiplier) => (value) => value * multiplier
const multipleByTwo = multiplyBy(2)

const counter = multiplyByTwo(5) // -> 10

最初の関数は、変化する可能性のある外部パラメータに依存するため、予測不可能である。番目の関数は透明であり、入力パラメータのみに依存し、パラメータを変更せず、範囲外の変数を使用しない。パラメータに依存し、パラメータを変更せず、範囲外の変数を使用せず、新しい値を返すので、透明である。