Bài viết này được mình dịch từ một bài viết tương tự của mình (Link tham khảo).
Để giúp các bạn có thể nâng cao trình độ tiếng Nhật, Blog này mình sẽ viết bằng tiếng Nhật.
Mục tiêu sẽ là, sử dụng Technical Document để học Tiếng Nhật. Mình sẽ cố gắng sử dụng ngữ pháp và từ vựng đơn giản nhất (tầm N4-N3) để giúp các bạn đọc nó dễ dàng hơn.

こんにちは、私は東京からのフルスタックWebデベロッパーであるTUANです。

今後の便利で面白い記事を見逃さないように、私のブログをフォローしてください。

不変パターンは、データの値を作成した後に変更しないようにするコードを設計する方法です。これは、コードを理解しやすくし、デバッグを容易にする関数型プログラミングで特に有用です。

不変パターンを使用する理由

コードで不変パターンを使用すると、以下のようなメリットがあります。

データへの誤った変更を防ぎ、トラッキングするのが難しいバグを防ぎます。
入力と出力が明確に定義されるので、コードを理解しやすくします。
ジャヴァスクリプトエンジンによる最適化が可能であるため、コードのパフォーマンスが向上します。

例

アプリケーションの状態の保存

大規模なアプリケーションでは、アプリの状態を不変なオブジェクトに保存することが有用です。これにより、状態の変化を時間の経過とともに追跡し、問題が発生したときにデバッグが容易になります。

const initialState = {
  user: {
    name: 'John',
    age: 30
  },
  todos: []
}

function updateUser(state, user) {
  return {
    ...state,
    user
  }
}

const newState = updateUser(initialState, { name: 'Jane', age: 25 })
// newState: { user: { name: 'Jane', age: 25 }, todos: [] }

アイテムのリストの管理

アイテムのリストを扱う場合、不変データ構造を使用すると、リストへの誤った変更を防ぎやすくなります。

const initialList = [1, 2, 3, 4]

function addItem(list, item) {
  return [...list, item]
}

const newList = addItem(initialList, 5)
// newList: [1, 2, 3, 4, 5]

アンドゥ/リドゥの機能の実装

不変パターンは、データを時間の経過とともに追跡することができるため、特にアンドゥ/リドゥの機能を実装する場合に有用です。

let currentState = {
  user: {
    name: 'John',
    age: 30
  }
}

const history = []

function updateUser(state, user) {
  history.push(state)
  return {
    ...state,
    user
  }
}

currentState = updateUser(currentState, { name: 'Jane', age: 25 })
// currentState: { user: { name: 'Jane', age: 25 } }

function undo() {
  currentState = history.pop()
}

undo()
// currentState: { user: { name: 'John', age: 30 } }

ユーザー入力の検証

ユーザー入力を検証する場合、元のデータを変更するのではなく、入力データの新しい不変版を作成することが有用です。

function validateInput(input) {
  const errors = []

  if (!input.name) {
    errors.push('Name is required')
  }
  if (!input.email) {
    errors.push('Email is required')
  }
  if (!input.password) {
    errors.push('Password is required')
  }

  return {
    ...input,
    errors
  }
}

const validatedInput = validateInput({ name: 'John', email: 'john@example.com' })
// validatedInput: { name: 'John', email: 'john@example.com', errors: ['Password is required'] }

レポートの作成

レポートを作成する場合、元のデータを変更するのではなく、データの不変版を作成することが有用です。

const data = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Bob', age: 35 }
]

function createReport(data) {
  const report = {
    total: data.length,
    averageAge: data.reduce((sum, item) => sum + item.age, 0) / data.length
  }

  return {
    ...data,
    report
  }
}

const reportData = createReport(data)
  // reportData: [
  // { name: 'John', age: 30, report: { total: 3, averageAge: 30 } },
  // { name: 'Jane', age: 25, report: { total: 3, averageAge: 30 } },
  // { name: 'Bob', age: 35, report: { total: 3, averageAge: 30 } }
  // ]

結論

不変パターンは、理解しやすくデバッグが容易なコードを設計するための有用なツールです。このパターンを使用することで、予測可能で理解しやすいコードを作成することができ、最終的にはより保守性が高くスケーラブルなアプリケーションを作成することができます。

いつものように、この記事を楽しんで新しいことを学んでいただけたと思います。

ありがとうございました。次の記事でお会いしましょう！

この記事が気に入ったら、いいねをして購読してサポートしてください。ありがとうございます。

Blog#82: Javascriptにおける不変パターンとは何ですか？