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)
All rights reserved