ホームページ ウェブフロントエンド jsチュートリアル より良いコードのための優れた JavaScript 関数プログラミング手法

より良いコードのための優れた JavaScript 関数プログラミング手法

Jan 08, 2025 pm 06:39 PM

owerful JavaScript Functional Programming Techniques for Better Code

ベストセラー作家として、アマゾンで私の本を探索することをお勧めします。 Medium で私をフォローしてサポートを示すことを忘れないでください。ありがとう!あなたのサポートは世界を意味します!

JavaScript 関数型プログラミングは、コードの編成と問題解決へのアプローチ方法に革命をもたらしました。これらの手法を採用することで、開発者はより保守しやすく、テストしやすく、スケーラブルなアプリケーションを作成できます。 JavaScript コードベースを大幅に改善できる 8 つの強力な関数型プログラミングの概念を見てみましょう。

純粋関数は関数型プログラミングの基礎を形成します。これらは、外部状態を変更したり副作用を引き起こすことなく、特定の入力に対して一貫して同じ出力を返す関数です。純粋な関数は予測可能でテストが容易なため、複雑なアプリケーションにとって理想的なビルディング ブロックとなります。

次の純粋関数の例を考えてみましょう:

function addNumbers(a, b) {
  return a + b;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

この関数は、外部の状態に影響を与えることなく、常に 2 つの引数の合計を返します。対照的に、不純な関数は次のようになります:

let total = 0;

function addToTotal(value) {
  total += value;
  return total;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

addToTotal 関数は外部合計変数を変更するため、変数が不純になり、推論が困難になります。

不変性は、関数型プログラミングにおけるもう 1 つの重要な概念です。データを直接変更する代わりに、必要な変更を加えた新しいコピーを作成します。このアプローチにより、予期しない副作用が防止され、コードがより予測可能になります。

不変データを扱う例を次に示します:

const originalArray = [1, 2, 3, 4, 5];
const newArray = [...originalArray, 6];

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(newArray);      // [1, 2, 3, 4, 5, 6]
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

この場合、元の配列を変更するのではなく、追加の要素を含む新しい配列を作成します。

高階関数は、他の関数を引数として受け取ったり、関数を返したりする関数です。これらにより、強力な抽象化とコードの再利用が可能になります。 Map、filter、reduce などの JavaScript の組み込みメソッドは、高階関数の優れた例です。

カスタム高階関数を見てみましょう:

function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

repeat(3, console.log);
// Output:
// 0
// 1
// 2
ログイン後にコピー
ログイン後にコピー

この繰り返し関数は引数として数値と関数を受け取り、関数をその回数だけ実行します。

関数を合成すると、複数の関数を組み合わせて、より複雑な操作を作成できます。この手法は、複雑な問題をより小さく、より管理しやすい部分に分割するのに役立ちます。

関数合成の例を次に示します:

const double = x => x * 2;
const square = x => x * x;

const doubleAndSquare = x => square(double(x));

console.log(doubleAndSquare(3)); // 36
ログイン後にコピー
ログイン後にコピー

作成関数を使用して、このプロセスをより柔軟にすることもできます。

const compose = (...fns) => x => fns.reduceRight((y, f) => f(y), x);

const doubleAndSquare = compose(square, double);
console.log(doubleAndSquare(3)); // 36
ログイン後にコピー
ログイン後にコピー

カリー化は、複数の引数を持つ関数を、それぞれが 1 つの引数を取る一連の関数に変換する手法です。これにより、関数の部分的な適用が可能になり、より再利用可能なコードが得られます。

これはカリー化の例です:

function addNumbers(a, b) {
  return a + b;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

再帰は、関数がそれ自体を呼び出して、問題をより小さな自己相似の部分問題に分割することで問題を解決する強力な手法です。関数型プログラミングに限定されるものではありませんが、関数型コードでは命令型ループよりも再帰が好まれることがよくあります。

階乗関数の再帰実装は次のとおりです。

let total = 0;

function addToTotal(value) {
  total += value;
  return total;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

ポイントフリー スタイルは、暗黙のプログラミングとも呼ばれ、引数を明示的に指定せずに関数を作成することを伴います。このスタイルは関数の合成に焦点を当てており、より簡潔で読みやすいコードを実現できます。

次の例を考えてみましょう:

const originalArray = [1, 2, 3, 4, 5];
const newArray = [...originalArray, 6];

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(newArray);      // [1, 2, 3, 4, 5, 6]
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

違いは微妙に見えるかもしれませんが、ポイントフリー スタイルは、高階関数や関数合成を扱う場合に特に役立ちます。

ファンクターとモナドは、関数型プログラミングの高度な概念であり、関数的な方法で副作用や複雑な操作を処理する方法を提供します。ファンクターはマッピング可能な型であり、モナドはその特定の型に対して関数の適用と合成がどのように機能するかを定義する型です。

JavaScript のファンクターの簡単な例を次に示します。

function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

repeat(3, console.log);
// Output:
// 0
// 1
// 2
ログイン後にコピー
ログイン後にコピー

この例では、Maybe は、null または未定義の可能性のある値に対して安全に操作を実行できるようにするファンクターです。

これら 8 つの関数型プログラミング手法を説明したので、これらを実際のシナリオにどのように適用して、よりクリーンで保守しやすいコードを作成できるかを見てみましょう。

関数型プログラミングの一般的な使用例の 1 つはデータ変換です。ユーザー オブジェクトの配列があり、特定の情報を抽出してフォーマットしたいとします。これを実現するには、純粋関数、高階関数、関数合成を組み合わせて使用​​できます。

const double = x => x * 2;
const square = x => x * x;

const doubleAndSquare = x => square(double(x));

console.log(doubleAndSquare(3)); // 36
ログイン後にコピー
ログイン後にコピー

この例では、純粋な関数 (getName、capitalize、addGreeting)、関数合成 (compose)、および高階関数 (map) を使用して、クリーンで再利用可能な方法でデータを変換しました。

関数型プログラミングのもう 1 つの強力な応用は、状態管理です。状態を不変として扱い、純粋関数を使用して新しい状態を計算することにより、より予測可能でデバッグが容易なアプリケーションを作成できます。関数原理を使用して実装されたカウンターの簡単な例を次に示します。

const compose = (...fns) => x => fns.reduceRight((y, f) => f(y), x);

const doubleAndSquare = compose(square, double);
console.log(doubleAndSquare(3)); // 36
ログイン後にコピー
ログイン後にコピー

不変の状態更新と新しい状態を計算するための純粋関数のこのパターンは、Redux などの多くの最新の状態管理ライブラリの基礎です。

関数型プログラミングは、非同期操作を大幅に簡素化することもできます。ファンクターとモナドを使用すると、より予測可能で構成可能な方法で非同期コードを処理できます。これは単純な Task モナドを使用した例です:

function addNumbers(a, b) {
  return a + b;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

この例では、非同期操作を連鎖させ、機能的な方法でエラーを処理できるようにする Task モナドを作成しました。このアプローチは、従来のコールバックまたはプロミスベースのアプローチと比較して、より読みやすく保守しやすい非同期コードを実現できます。

関数型プログラミング手法は、フロントエンド開発における DOM 操作やイベント処理にも適用できます。 DOM を不変のデータ構造として扱い、純粋関数を使用して新しい DOM 状態を計算することにより、より予測可能でテストが容易な UI コードを作成できます。

DOM 内のカウンターを更新する関数的アプローチの簡単な例を次に示します。

let total = 0;

function addToTotal(value) {
  total += value;
  return total;
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

この例では、純粋関数を使用して状態を更新し、UI をレンダリングすることで、コードがより予測可能になり、テストが容易になりました。

関数型プログラミング手法は、エラー処理にも適用できます。予測できない制御フローを引き起こす可能性がある例外のスローとキャッチの代わりに、Either や Result のようなファンクターを使用して、失敗する可能性のある計算を表すことができます。

const originalArray = [1, 2, 3, 4, 5];
const newArray = [...originalArray, 6];

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(newArray);      // [1, 2, 3, 4, 5, 6]
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

このアプローチにより、例外処理に依存することなく、より予測可能かつ構成可能な方法でエラーを処理できるようになります。

結論として、関数型プログラミング手法は、よりクリーンで保守しやすい JavaScript コードを作成するための強力なツールを提供します。純粋関数、不変性、高階関数、関数合成などの概念を採用することで、理解しやすく、テストし、デバッグしやすいコードを作成できます。カリー化、再帰、ポイントフリー スタイル、ファンクターなどの高度な概念により、コードを構造化して最大限の柔軟性と再利用性を実現するさらに多くの方法が提供されます。

関数型プログラミングのパラダイムに適応するには時間がかかるかもしれませんが、コードの品質と開発者の生産性という点では大きなメリットがあります。これらのテクニックを JavaScript プロジェクトに組み込むと、コードがよりモジュール化され、推論が容易になり、バグが発生しにくくなることがわかります。重要なのは、小さなことから始めて、関数の概念をコードベースに徐々に導入し、基本に慣れてきたらより高度なテクニックを構築することです。

関数型プログラミングは、全か無かの命題ではないことを覚えておいてください。まずは純粋な関数と不変性を既存のコードベースに導入し、必要に応じてより高度なテクニックを徐々に採用していきます。目標は、よりクリーンで保守しやすいコードを記述することであり、関数型プログラミングは、その目標を達成するための強力なツールのセットを提供します。


101冊

101 Books は、著者 Aarav Joshi が共同設立した AI 主導の出版社です。高度な AI テクノロジーを活用することで、出版コストを信じられないほど低く抑えており、書籍によっては $4 という低価格で販売されており、誰もが質の高い知識にアクセスできるようになっています。

Amazon で入手できる私たちの書籍 Golang Clean Code をチェックしてください。

最新情報とエキサイティングなニュースにご期待ください。本を購入する際は、Aarav Joshi を検索して、さらに多くのタイトルを見つけてください。提供されたリンクを使用して特別割引をお楽しみください!

私たちの作品

私たちの作品をぜひチェックしてください:

インベスターセントラル | 投資家中央スペイン人 | 中央ドイツの投資家 | スマートな暮らし | エポックとエコー | 不可解な謎 | ヒンドゥーヴァ | エリート開発者 | JS スクール


私たちは中程度です

Tech Koala Insights | エポックズ&エコーズワールド | インベスター・セントラル・メディア | 不可解な謎 中 | 科学とエポックミディアム | 現代ヒンドゥーヴァ

以上がより良いコードのための優れた JavaScript 関数プログラミング手法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Python vs. JavaScript:学習曲線と使いやすさ Python vs. JavaScript:学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

JavaScriptとWeb:コア機能とユースケース JavaScriptとWeb:コア機能とユースケース Apr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScript in Action:実際の例とプロジェクト JavaScript in Action:実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンの理解:実装の詳細 JavaScriptエンジンの理解:実装の詳細 Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:開発環境とツール Python vs. JavaScript:開発環境とツール Apr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1)Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2)JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScript通訳者とコンパイラにおけるC/Cの役割 JavaScript通訳者とコンパイラにおけるC/Cの役割 Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

Python vs. JavaScript:ユースケースとアプリケーションと比較されます Python vs. JavaScript:ユースケースとアプリケーションと比較されます Apr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

Webサイトからアプリまで:JavaScriptの多様なアプリケーション Webサイトからアプリまで:JavaScriptの多様なアプリケーション Apr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

See all articles