Gizanbeak

TypeScriptを使って開発を進めている中で「スプレッド構文」という言葉を耳にしたことはありますか？

ArrayやObjectを簡単に展開・コピーするときに非常に役立つこの構文は、実際の開発ではよく使用される技術の一つです。
スプレッド構文の基本から実践的な使い方、そして注意点までをわかりやすく解説していきますので、ぜひ最後までお付き合いください！

スプレッド構文とは？

スプレッド構文とは何か、その基本を解説します。

TypeScriptにおけるスプレッド構文は 配列やオブジェクトを展開するためのシンタックス です。
使い方はとてもにシンプルで以下のコードのようになります！

const numbers = [1, 2, 3];
const spreadNumbers = [...numbers]; // [1, 2, 3]

このコードでは配列 numbers の要素が新しい配列 spreadNumbers に展開されています。
この展開がスプレッド構文というわけですね。

新しく配列を作成

次にスプレッド構文によって新しい配列を作成する方法を解説します。

スプレッド構文を使うと元の配列を変更せずに新しい配列を簡単に作れます。

const fruits = ['apple', 'banana'];
const moreFruits = [...fruits, 'cherry']; // ['apple', 'banana', 'cherry']

上記のコードでは配列 fruitsに新しい値として cherry を追加した配列 moreFruits を作成しています。

このように既存の配列を維持したまま、新しい要素を追加することができます。
便利ですね！

TypeScript で配列をループする簡単な3つの方法を紹介

初心者向けにTypeScriptの配列をループする方法を分かりやすく解説！for、for-of、forEachの3つを紹介。

gizanbeak.com

配列のコピーとそのメリット

配列のコピーをする際のスプレッド構文の強力なメリットについて紹介します。

TypeScriptで配列をコピーする際、スプレッド構文を使用すると新しい配列を生成する、というのは先程お話しました。

これは参照渡しではなく、実際の値そのものをコピーします。

const pets = ['dog', 'cat', 'bird'];
const copiedPets = [...pets]; // ['dog', 'cat', 'bird']

ここで copiedPets を変更しても元の pets 配列は変わりません。
これには以下のような大きな利点があります。

• データの不変性: 関数やコンポーネントにデータを渡す際、元のデータを変更せずに新しいデータを生成・操作することができるためバグを減らすことができます
• 再レンダリングの最適化: フレームワークやライブラリ（例: React）でステート管理を行う際、新しい参照を持つデータのみを再レンダリングすることが可能となるためパフォーマンスの最適化できます
• 安全なデータの操作: 他の部分のコードで不意に元の配列が変更される心配がなくなりコードの安全性が向上します

このように、スプレッド構文を使うことでこれらのメリットを簡単に享受することができます。
日々の開発での安心感や、保守性の向上に繋がるのでぜひ取り入れてみてください！

TypeScriptでオブジェクトをコピーする方法をわかりやすく解説

TypeScriptのオブジェクトコピー法を学ぼう！参照渡し、シャローコピー、ディープコピーの違いを詳解します。

gizanbeak.com

注意点

最後にスプレッド構文を使用する際の注意するべきポイントを紹介します。

スプレッド構文は非常に便利ですが、深いネストされたオブジェクトに対しては浅いコピー しか行いません。
そのため、以下のようなコードでは注意が必要です。

const original = [{ id: 1 }, { id: 2 }];
const copy = [...original];
copy[0].id = 99; 
// originalの内容も変更される: [{ id: 99 }, { id: 2 }]

この例では、オブジェクトの内部のプロパティが共有されてしまうため copy 配列を変更すると original 配列も変更されます...！

うっかりミスに注意しましょう！

以上がTypeScriptのスプレッド構文の解説です。
明日からでも使える内容ばかりなので、ぜひコーディングに取り入れてみてください！