TypeScriptのReadonlyとImmutable設計を理解する
ソフトウェア開発では
データを書き換えないという設計がとても重要です。
この考え方を
Immutable（イミュータブル）と呼びます。
TypeScriptでは、このImmutable設計を実現するために
readonlyという機能が用意されています。
この記事では
• readonlyとは
• Immutable設計とは
• 実務での使い方
を解説します。
Immutableとは？
Immutableとは
一度作ったデータを変更しない設計のことです。
let user = {
name: "Taro"
}
user.name = "Hanako"このように値を変更する設計を
Mutable（ミュータブル）と呼びます。
しかし大規模なアプリケーションでは
- バグの原因になる
- 状態管理が複雑になる
という問題があります。
そこで
Immutable設計が使われます。
readonlyとは？
TypeScriptでは
readonlyを使うことで、値を変更できないプロパティを作ることができます。
例
interface User {
readonly id: number
name: string
}使用例
const user: User = {
id: 1,
name: "Taro"
}もし
user.id = 2と書くと
エラーになります。
配列のreadonly
配列にもreadonlyを使えます。
const numbers: readonly number[] = [1,2,3]この場合
numbers.push(4)はエラーになります。
Readonly Utility Type
以前紹介した
Utility Typesにもreadonlyがあります。
例
interface User {
id: number
name: string
}type ReadonlyUser = Readonly<User>結果
{
readonly id: number
readonly name: string
}Immutableなオブジェクト更新
Immutable設計では
オブジェクトを書き換えません。
代わりに
新しいオブジェクトを作る方法を使います。
例
const user = {
name: "Taro",
age: 30
}更新
const newUser = {
...user,
age: 31
}この方法を
Immutable Updateと呼びます。
Reactでも使われる設計
Immutable設計は
フロントエンドでよく使われます。
特に
- React
- Redux
- 状態管理ライブラリ
などです。
理由
状態変更を安全に管理できるからです。
Immutableのメリット
Immutable設計には次のメリットがあります。
バグが減る
データを書き換えないため、予期しない変更が起きません。
状態管理が簡単
状態の変化を追いやすくなります。
デバッグしやすい
どこでデータが変更されたか分かりやすくなります。
実務でのおすすめ設計
TypeScriptでは、次のルールがよく使われます。
基本はImmutableつまり
- readonlyを使う
- オブジェクトを書き換えない
- 新しいオブジェクトを作る
という設計です。
まとめ
Immutable設計とは
データを変更しない設計です。
TypeScriptでは
readonlyを使うことで
Immutableなコードを書くことができます。
メリット
- バグを減らせる
- 状態管理が楽になる
- 安全なコードになる
そのため
モダンJavaScript / TypeScriptでは非常に重要な設計です。
コメント