はじめに
目的
本記事はJavaScript&TypeScriptの基礎知識を体系的に学び直して、生成AIに頼りすぎず自力でコーディングできるようになることを目的としています。
学んだ内容のアウトプットとして、シリーズ形式で書いていきます。
ゴール
- TypeScriptでフルスタックアプリを個人開発する
- チーム開発でタスクを渡された際に、メンバーのコードを読んで理解したり自分で実装したりできる状態にする（調べる回数をできるだけ少なくする）
シリーズ記事
【ノート】JavaScript基礎①（変数const, let・データ型と型変換）
【ノート】JavaScript基礎②（条件分岐）
配列操作
もとの配列
const baseArray = ["A", "B", "C", "D", "E"];
配列の要素へアクセスする
//配列の先頭から数えた位置の要素へアクセスする
//インデックスは0から始まる
console.log("baseArrayの0番目の値：",baseArray[0]); //A
//存在しないインデックスの場合はundefinedが返る
//配列の末尾から数えた位置の要素へアクセスする
console.log("baseArrayの末尾から1番目の値：",baseArray.at(-1)); //E
//正の数字を指定した場合は通常のインデックスと同じ
配列の要素数を取得する
console.log("baseArrayの要素数：",baseArray.length); //5
分割代入
配列に格納された値を変数に分けて処理したいときに使う。
オブジェクトに対しても同じ操作ができる。
const [first, second] = baseArray;
console.log("firstの値：",first); //A
console.log("secondの値：",second); //B
//変数名は任意の名前をつけられる
配列をもとに新しい配列を作る
//指定範囲の要素を取得して、新しい配列を作成する
const slicedArray = baseArray.slice(1, 4);
console.log("baseArrayの1番目から3番目までの値：",slicedArray); //["B", "C", "D"]
注意点
- 開始インデックスは含むが、終了インデックスは含まない
- 引数を省略した場合、もとの配列のコピーを返す
- 負の数を指定した場合、配列の末尾から数えた位置を表す
- もとの配列は変更されない
- 第一引数＝第二引数の場合と、第一引数>第二引数の場合は空の配列を返す
条件に合う要素が配列に含まれているか調べる
//配列に指定した要素が含まれているかを調べる
console.log("baseArrayにCが含まれているか：",baseArray.includes("C")); //true
console.log("baseArrayにZが含まれているか：",baseArray.includes("Z")); //false
//大文字と小文字は区別される
//配列の要素がオブジェクトの場合、参照が同じでないとtrueにならない
//コールバック関数にマッチする要素が配列に含まれているかを調べる
const hasLongString = baseArray.some((value) => value.length > 1);
console.log("baseArrayに長さが2以上の文字列が含まれているか：",hasLongString); //false
//一つでもマッチする要素があればtrueを返し、マッチする要素がなければfalseを返す
要素の追加・削除・並び替え
配列の値を変更するメソッドには、もとの配列本体を変更するものと、元の配列は変更せず、その参照（コピー）の配列の値を変更するものがある。前者を破壊的メソッドといい、後者を非破壊的メソッドという。
破壊的メソッド
//配列の末尾に要素を追加する
baseArray.push("F");
console.log("baseArrayにFを追加：",baseArray); //["A", "B", "C", "D", "E", "F"]
//配列の末尾の要素を削除する
const removedValue = baseArray.pop();
console.log("baseArrayの末尾の要素を削除：",baseArray); //["A", "B", "C", "D", "E"]
console.log("削除された値：",removedValue); //F
//配列の先頭に要素を追加する
baseArray.unshift("Z");
console.log("baseArrayの先頭にZを追加：",baseArray); //["Z", "A", "B", "C", "D", "E"]
//配列の先頭の要素を削除する
const removedFirstValue = baseArray.shift();
console.log("baseArrayの先頭の要素を削除：",baseArray); //["A", "B", "C", "D", "E"]
console.log("削除された値：",removedFirstValue); //Z
//配列の任意の位置に要素を追加・削除する
//第一引数：開始インデックス、第二引数：削除する要素数、第三引数以降：追加する要素
//削除する要素数を0にすると、指定した位置に要素を追加できる
baseArray.splice(2, 1, "X", "Y");
console.log("baseArrayの2番目の要素を1つ削除して、XとYを追加：",baseArray); //["A", "B", "X", "Y", "D", "E"]
//配列の要素を並び替える
baseArray.sort();
console.log("baseArrayをアルファベット順に並び替え：",baseArray); //["A", "B", "D", "E", "X", "Y"]
非破壊的メソッド
//配列の展開（スプレッド構文：配列に含まれる値を個別の値として扱えるようにする）
//配列のカッコ[]をはずして、中身をばらすイメージ
const newArray = [...baseArray, "F", "G"];
console.log("baseArrayを展開して、FとGを追加した新しい配列：",newArray); //["A", "B", "C, "D", "E", "F", "G"]
//配列の末尾に要素を追加する
const appendedArray = baseArray.concat("F", "G");//方法1
const appendedArray2 = [...appendedArray, "X"]; //方法2
console.log("baseArrayの末尾にFとGを追加した新しい配列：",appendedArray); //["A", "B", "C", "D", "E", "F", "G"]
console.log("appendedArrayの末尾にXを追加した新しい配列：",appendedArray2); //["A", "B", "C", "D", "E", "F", "G", "X"]
//配列の末尾から要素を削除する
const arrayAfterPop = baseArray.toSpliced(0, baseArray.length - 1); //方法1
console.log("baseArrayの末尾の要素を削除した新しい配列：",arrayAfterPop); //["A", "B", "C", "D"]
const arrayAfterPop2 = baseArray.slice(0, -1); //方法2
console.log("baseArrayの末尾の要素を削除した新しい配列（slice使用）：",arrayAfterPop2); //["A", "B", "C", "D"]
コールバック関数を使った反復処理
//配列の各要素に対して、指定した処理を一度ずつ実行する
//戻り値はない
baseArray.forEach((value, index) => {
console.log(`baseArrayの${index}番目の値：`, value);
});
//配列の各要素に対して、指定した処理を一度ずつ実行し、新しい配列を作成する
//もとの配列は変更されない
const mappedArray = baseArray.map((value) => {
return value.toLowerCase()
});
console.log("mappedArray",mappedArray); //["a", "b", "c", "d", "e"]
//コールバック関数内の条件にマッチする最初の要素を返す
const foundValue = baseArray.find((value) => {
return value === "C"
});
console.log("foundValue：",foundValue); //C
//コールバック関数がtrueを返すすべての要素を集めた新しい配列を返す
const filteredArray = baseArray.filter((value) => {
return value < "D"
});
console.log("filteredArray：",filteredArray); //["A", "B", "C"]
//配列から配列以外の要素を含む任意の値を生成する
const reducedValue = baseArray.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, ""); //初期値は空文字列(number型の場合は0)
console.log("reducedValue：",reducedValue); //ABCDE
//初期値を省略した場合、配列の最初の要素が初期値となる