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

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

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

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

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

例

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

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

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 } }
  // ]

結論

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

Mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.

Donate mình một ly cafe hoặc 1 cây bút bi để mình có thêm động lực cho ra nhiều bài viết hay và chất lượng hơn trong tương lai nhé. À mà nếu bạn có bất kỳ câu hỏi nào thì đừng ngại comment hoặc liên hệ mình qua: Zalo - 0374226770 hoặc Facebook. Mình xin cảm ơn.

Momo: NGUYỄN ANH TUẤN - 0374226770

TPBank: NGUYỄN ANH TUẤN - 0374226770 (hoặc 01681423001)