Zenn
🐇

Array.slice から始める関数型プログラミング

2024/10/14に公開
JavaScript
fp
tech

関数型プログラミングってなに？

関数型プログラミング（FP）について簡単に説明します。

  • 不変性（Immutability）：データを直接変更せず、新しいデータを作ること。
  • 純粋関数（Pure Function）：同じ入力に対して常に同じ出力を返し、他のデータに影響を与えない関数。

関数型プログラミングでは、不変性を保つことでコードの予測がしやすくなり、バグを減らすことができます。

なぜ配列をコピーする必要があるの？

配列を直接変更すると、思わぬところで問題が起きることがあります。

例：

const numbers = [1, 2, 3];

function addNumber(array, number) {
  array.push(number);
  return array;
}

const newNumbers = addNumber(numbers, 4);

console.log(numbers);     // 出力: [1, 2, 3, 4]
console.log(newNumbers);  // 出力: [1, 2, 3, 4]

addNumber 関数は元の numbers 配列を直接変更してしまいます。これでは、numbers を他の場所で使っているときに予期せぬ影響が出てしまいます。

Array.slice を使って配列をコピーしよう

Array.slice メソッドを使うと、元の配列を変更せずにコピー（複製）を作ることができます。

基本的な使い方

const originalArray = [1, 2, 3];
const copiedArray = originalArray.slice();
  • originalArray.slice() は、originalArray のコピーを返します。
  • originalArray はそのままなので、安全に copiedArray を操作できます。

コピーした配列を操作してみる

copiedArray.push(4);

console.log('元の配列:', originalArray);   // 出力: 元の配列: [1, 2, 3]
console.log('コピーした配列:', copiedArray); // 出力: コピーした配列: [1, 2, 3, 4]
  • copiedArray に 4 を追加しましたが、originalArray は変わっていません。
  • これで、元のデータを安全に保ちながら新しい配列を使うことができます。

関数を不変にする例

配列を直接変更しない関数を書いてみましょう。

function addNumberImmutable(array, number) {
  const newArray = array.slice(); // 配列をコピー
  newArray.push(number);          // コピーに対して操作
  return newArray;                // 新しい配列を返す
}

const numbers = [1, 2, 3];
const newNumbers = addNumberImmutable(numbers, 4);

console.log('元の配列:', numbers);       // 出力: 元の配列: [1, 2, 3]
console.log('新しい配列:', newNumbers);  // 出力: 新しい配列: [1, 2, 3, 4]
  • addNumberImmutable 関数は、元の配列を変更せずに新しい配列を返します。
  • これが関数型プログラミングでの「不変性」を保つ方法です。

配列をコピーする他の方法

スプレッド構文

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

copiedArray.push(4);

console.log('元の配列:', originalArray);   // 出力: 元の配列: [1, 2, 3]
console.log('コピーした配列:', copiedArray); // 出力: コピーした配列: [1, 2, 3, 4]
  • ... を使うと、配列を簡単にコピーできます。

concat メソッド

const originalArray = [1, 2, 3];
const newArray = originalArray.concat(4);

console.log('元の配列:', originalArray); // 出力: 元の配列: [1, 2, 3]
console.log('新しい配列:', newArray);    // 出力: 新しい配列: [1, 2, 3, 4]
  • concat は元の配列を変更せずに、新しい配列を返します。

まとめ

  • Array.slice を使うと、配列をコピーして元の配列を変更せずに操作できる。
  • 関数型プログラミングでは、不変性を保つことが大切。
  • データを直接変更せずに、新しいデータを作成しよう。

配列を安全に操作するために、slice や他の非破壊的なメソッドを活用してみてください。

これにより、コードがわかりやすくなり、思わぬバグを防ぐことができます。

最後に一言：

配列をコピーしてから操作することで、元のデータを守りながら柔軟にプログラミングできます。

関数型プログラミングの考え方を取り入れて、より安全で信頼性の高いコードを書いてみましょう。

Discussion