はじめに
「読んで学ぶTypeScript」をちょっとずつ読み進めます！
今回は、配列に〇〇する方法についてです！
コーディングに慣れていないので、ところどころ用語を調べて記載しながら書きますmm
そのため、初心者の方が理解するには、助けになるかもしれません 
配列に型注釈する方法
-
Type[]- 要素の型の後ろに
[]をつける
- 要素の型の後ろに
let array: number[];
array = [1, 2, 3];
-
Array<T>（T＝要素の型）
let array: Array<number>;
array = [1, 2, 3];
-
[]とArray<T>どっちを使うべきか？- 意味は同じ（コンパイラのチェック内容は同じ）
- どちらを使っても問題ないが、プロジェクトで書き方は統一するべき
配列に読み取り専用として型注釈する方法
-
readonlyキーワードを使う- 配列の型注釈の前に
readonlyを入れる
- 配列の型注釈の前に
const nums: readonly number[] = [1, 2, 3];
//^^^配列の型注釈
-
ReadonlyArray<T>- T：配列に格納される要素の型
const nums: ReadonlyArray<number> = [1, 2, 3];
-
readonly T[]とReadonlyArray<T>どっちを使うべきか？- これも意味は同じ（コンパイラのチェック内容は同じ）
- どちらを使っても問題ないが、プロジェクトで書き方は統一するべき
配列をコピーする方法
- 単純に代入しても値のコピーにならない
- 代入元の変数と代入先の変数は同じ値を指す
- 一方の変数だけを変更したつもりでも、他方にも変更が反映される
以下例です。
// 例
let obj1 = {name: "太郎", age: 20};
let obj2 = obj1;
obj2.name = "二郎";
console.log(obj1.name); // 二郎 が出力される
コピーのため obj2 に obj1 を代入した。obj1とobj2は別の値を参照してほしいが...
obj2 と obj1 の変数が同じ値を示すようになっただけ↓
そのため、obj2のname の値を指定し直すと、obj1.name の値も変更されてしまい、
console.log(obj1.name); で obj2.nameのつもりで指定した"二郎"が出力されます
では、どうすれば値のコピーができるのでしょうか？
スプレッド構文を使う
- スプレッド構文とは
- 配列やオブジェクトの中身を取り出して展開できる書き方
元の配列を変更せずに新しい配列を簡単に作れる
// 例
let obj1 = {name: "太郎", age: 20};
let obj2 = {...obj1}; // スプレッド構文で新しいオブジェクトをシャローコピー
obj2.name = "二郎"; // obj2 のプロパティを変更
console.log(obj1.name); // 太郎 が出力される
- スプレッド構文が使える場面
- 配列をコピーして、新しい配列を作る
- 配列を連結する
- 配列の複数要素を、関数の引数として個別に渡す
スプレッド構文によるコピーは、シャローコピー（浅いコピー）
配列の中にオブジェクトが含まれている場合、そのオブジェクト自体はコピーされません
配列から要素を取り出す方法
インデックス番号でアクセスする
- インデックス番号
- 配列の中の要素を見つけやすくする
-
0から始まる
const abc = ["a", "b", "c"];
console.log(abc[0]); // 配列先頭の`a`を取り出して出力する
分割代入
- 配列やオブジェクトなどのデータ構造から要素を取り出す際に便利な機能
- 配列の要素を分割代入するときは
[]を使用する
// 配列の分割代入
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
//^^^ a,b,cの値を配列から一気に取り出して変数に代入できる！
console.log(a); // 結果：1
console.log(b); // 結果：2
console.log(c); // 結果：3
分割代入を活用すると、簡潔にかける
配列にメソッドを使う
メソッドとは、オブジェクトの操作を定義したものです
オブジェクトの一つである配列にも、メソッドが提供されています
以下例です
filter()
- 指定したテスト関数に満たす、すべての要素を含む新しい配列を生成する
- 元の配列は変更されない
const users = [
{ name: "太郎", age: 18 },
{ name: "花子", age: 25 },
{ name: "次郎", age: 30 },
{ name: "さくら", age: 19 }
];
const adults = users.filter(user => user.age >= 20);
// ^^^ 年齢(age)が20歳以上のユーザー
console.log(adults);
/*
出力:
[
{ name: "花子", age: 25 },
{ name: "次郎", age: 30 }
]
*/
find()
- 指定されたテスト関数を満たす、配列内の最初の要素の値を返す
- 条件を満たす要素が見つからない場合は
undefinedを返します。
const users = [
{ name: "太郎", age: 18 },
{ name: "花子", age: 25 }, // 花子1
{ name: "次郎", age: 30 },
{ name: "花子", age: 40 } // 花子2
];
const hanako = users.find(user => user.name === "花子");
console.log(hanako);
/*
出力:
{ name: "花子", age: 25 } // 2番目の「花子」は無視される
*/
map()
- 元の配列のすべての要素を一つずつ処理（変換）し、その結果を使って新しい配列を作成する
- 元の配列は変更されない
map() の動作手順
- map() は、元の配列（users）の各要素に、引数として渡されたコールバック関数を実行
- コールバック関数は、現在の要素（この例では user オブジェクト）を受け取り、変換後の値を返す
- map() は、コールバック関数が返した新しい値を集めて、元の配列と同じ長さの新しい配列を作成する
const users = [
{ name: "太郎", age: 18 },
{ name: "花子", age: 25 },
{ name: "次郎", age: 30 }
];
const names = users.map(user => user.name);
console.log(names);
/*
出力:
[ "太郎", "花子", "次郎" ]
*/
さいごに
なんとなく使っていた配列の性質などが、改めて理解できました！
配列は他にもメソッドが色々あるので、どんな処理ができるのか、また学んでみます 
アドカレ2025が開催中！ 
今年もアドカレ開催中です 
面白そうなカレンダーがたくさんです！
特設サイト ↓
ギフトカードや Airpods, iPadなど、豪華賞品すぎるプレゼントカレンダーは必見！
↓
参考