Zenn
🎍

宣言的プログラミングと配列メソッドの活用：JavaScriptのコードをより良くする

2024/12/30に公開
JavaScript
TypeScript
宣言的プログラミング
配列メソッド
tech

JavaScriptにおける配列操作は、フロントエンドからバックエンドまで幅広い開発現場で日常的に行われる重要なタスクです。

従来の手続き型なループ処理に加え、map、sort、reduceといった宣言的な配列メソッドを活用することで、コードの可読性や保守性を向上させることが可能です。

本記事では、宣言的プログラミングの概念と、mapやreduceといったメソッドがどのように抽象化を提供し、「何をするか」に集中できるのかについても深掘りします。

宣言的プログラミングとは

宣言的プログラミングは、「何を達成したいか」をコードで表現するプログラミングパラダイムです。

具体的な手順や操作の詳細を記述するのではなく、目的や結果を明示することで、コードの可読性や保守性を向上させます。

これに対し、手続き型プログラミングは、「どのように達成するか」を詳細に記述します。

宣言的プログラミングの特徴

  • 高レベルの抽象化: 処理の詳細を隠蔽し、目的に集中。
  • 可読性の向上: コードが何をしているのか一目で理解しやすい。
  • 保守性の向上: コード量が少なく、変更や修正が容易。

手続き型プログラミングとの比較

手続き型プログラミング

手続き型プログラミングでは、処理の手順を一つ一つ明示的に記述します。

具体的なループや条件分岐を用いて、データの処理方法を詳細に制御します。

手続き型の例：配列の要素を2倍にする

const numbers = [1, 2, 3, 4, 5];
const doubled = [];

for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

console.log(doubled); // [2, 4, 6, 8, 10]

宣言的プログラミング

宣言的プログラミングでは、データの変換や操作を高レベルのメソッドを用いて記述します。具体的なループの管理やインデックスの操作はメソッド内部に委ね、コードは目的を明確に示します。

宣言的の例：mapメソッドを使用

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

比較と解説

  1. 意図の明確さ

    • 宣言的アプローチでは、mapメソッドを使用することで「各要素を変換して新しい配列を作成する」という意図が明確です。
    • 手続き型アプローチでは、ループの中で具体的な処理を記述するため、意図を理解するためにコード全体を追う必要があります。

  2. コードの簡潔さ

    • 宣言的アプローチは、コード量が少なく、シンプルです。mapメソッド一行で目的の処理が完結します。
    • 手続き型アプローチは、ループの初期化、条件、インクリメント、要素の追加など、詳細な手順を記述する必要があり、コードが長くなります。

  3. 抽象化のレベル

    • 宣言的アプローチは、高レベルの抽象化を提供します。具体的な実装の詳細を隠蔽し、目的に集中できます。
    • 手続き型アプローチは、低レベルの詳細に焦点を当てます。処理の手順を一つ一つ明示するため、抽象化のレベルが低くなります。

宣言的プログラミングの利点

上の解説でも触れましたが、宣言的プログラミングを採用することで、以下のような多くの利点があります。

1. 可読性の向上

メソッド名自体が操作の内容を示すため、コードの目的が一目でわかります。例えば、mapメソッドを見ただけで「各要素を変換して新しい配列を作成する」という意図が理解できます。

2. コードの簡潔さ

高レベルのメソッドを使用することで、コード量が減少し、シンプルになります。これにより、バグの発生リスクも低減します。

3. 保守性の向上

コードが短く明確になるため、後からの修正や機能追加が容易になります。また、抽象化が進むことで、異なる部分に同じメソッドを再利用することが可能です。

4. 抽象化のレベル向上

高レベルの抽象化を提供することで、複雑な処理を簡潔に表現できます。これにより、ビジネスロジックに集中しやすくなります。

mapやreduceの抽象化とそのメリット

抽象化の概念

抽象化とは、複雑な処理や詳細を隠蔽し、必要な部分だけを扱うことで、開発者がより高いレベルで問題を解決できるようにする手法です。

mapやreduceは、配列の操作に関する詳細な手順（例えば、ループの管理やインデックスの操作）を内部で処理し、開発者は「何をしたいか」に集中できるようにします。

mapの例

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

抽象化のポイント:

  • 何をするか: 各要素を2倍にする。
  • どうするか: mapメソッドが内部でループを回し、各要素に対して指定した関数を適用して新しい配列を生成する。

reduceの例

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); // 15

抽象化のポイント:

  • 何をするか: 配列の全要素を合計する。
  • どうするか: reduceメソッドが内部でループを回し、累積値を管理しながら各要素を処理する。

なぜ抽象化が有効なのか？

  1. 可読性の向上

    • メソッド名自体が操作の内容を示すため、コードを読むだけで「何をしているか」が直感的に理解できます。例えば、mapは「各要素を変換する」、reduceは「配列を1つの値に集約する」といった具合です。

  2. エラーの減少

    • ループの初期化や条件設定、インクリメントなどの細かい部分を自分で管理する必要がなくなるため、ヒューマンエラーのリスクが減ります。

  3. 再利用性の向上

    • 抽象化されたメソッドは汎用的に設計されているため、異なる状況でも再利用しやすくなります。同じメソッドを使って、異なる配列や異なる操作を簡単に適用できます。

  4. メンテナンスの容易さ

    • コードが短く明確になるため、後からの修正や機能追加が容易になります。例えば、mapを使用している場合、変換ロジックを変更したいときは、コールバック関数内の処理を変更するだけで済みます。

初めてmapやreduceを使うときのポイント

  1. メソッドの目的を理解する

    • 各配列メソッドには特定の目的があります。mapは「各要素を変換」、filterは「条件に合う要素を抽出」、reduceは「配列を1つの値に集約」といった具合です。目的に応じて適切なメソッドを選ぶことが重要です。

  2. コールバック関数の理解

    • これらのメソッドは、コールバック関数を引数として受け取ります。コールバック関数の引数や返り値を理解することで、より効果的にメソッドを活用できます。

  3. チェーンリングを活用する

    • 複数の配列メソッドを連続して使用することで、複雑なデータ処理を簡潔に表現できます。例えば、filterとmapを組み合わせて、特定の条件を満たす要素のみを変換することが可能です。
    const numbers = [1, 2, 3, 4, 5, 6];
const evenDoubled = numbers
  .filter(number => number % 2 === 0)
  .map(number => number * 2);

console.log(evenDoubled); // [4, 8, 12]

実践的な使用例

ここでは、宣言的プログラミングと配列メソッドを活用した具体的な例をいくつか紹介します。

1. フルーツのリストにインデックスを付加する

宣言的アプローチ

const fruits = ['Apple', 'Banana', 'Cherry'];

const indexedFruits = fruits.map((fruit, index) => `${index + 1}: ${fruit}`);

console.log(indexedFruits); // ["1: Apple", "2: Banana", "3: Cherry"]

手続き型アプローチ

const fruits = ['Apple', 'Banana', 'Cherry'];
const indexedFruits = [];

for (let i = 0; i < fruits.length; i++) {
  indexedFruits.push(`${i + 1}: ${fruits[i]}`);
}

console.log(indexedFruits); // ["1: Apple", "2: Banana", "3: Cherry"]

2. オブジェクトの配列から特定のプロパティを抽出する

宣言的アプローチ

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const names = users.map(user => user.name);

console.log(names); // ["Alice", "Bob", "Charlie"]

手続き型アプローチ

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
const names = [];

for (let i = 0; i < users.length; i++) {
  names.push(users[i].name);
}

console.log(names); // ["Alice", "Bob", "Charlie"]

3. 配列から偶数のみを抽出し、その合計を計算する

宣言的アプローチ

const numbers = [1, 2, 3, 4, 5, 6];

const evenSum = numbers
  .filter(number => number % 2 === 0)
  .reduce((acc, curr) => acc + curr, 0);

console.log(evenSum); // 12

手続き型アプローチ

const numbers = [1, 2, 3, 4, 5, 6];
let evenSum = 0;

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    evenSum += numbers[i];
  }
}

console.log(evenSum); // 12

まとめ

宣言的プログラミングは、「何を達成したいか」を明確に記述することで、コードの可読性や保守性を向上させることができます。

JavaScriptのmap、sort、reduceといった配列メソッドを活用し、高レベルの抽象化を提供することで、理解しやすいコードを書くことが可能です。

参考資料

Discussion