配列操作の理解

知識課題

知識課題1

• 配列/要素/インデックスの各用語について、その定義と役割を具体例を交えて説明してください。
• 配列リテラルを利用し、密な配列と疎な配列のそれぞれの例を作成するコード例を示してください。
• 2次元配列を用いて、array[0]やarray[0][0]のようなインデックスアクセスの方法を具体例とともに解説してください。
• 配列のlengthプロパティを利用して、配列の最後の要素にアクセスする方法を具体的なコード例とともに説明してください。
• 存在しないインデックスにアクセスした場合の結果について考察してください。

知識課題2

• 分割代入を用いて、配列内の特定のインデックスの値を変数に代入する方法を具体例を交えて説明してください。
• Array.isArrayを使用して、与えられたオブジェクトが配列かどうかを判定する方法をコード例とともに解説してください。
• Array.prototype.atメソッドを利用した要素アクセスの具体例を示し、その動作について説明してください。
• indexOf/findIndex/findLastIndexを用いて、配列から特定の要素を検索する方法を、各メソッドの特徴と具体例を交えて解説してください。
• find/findLastを用いて、条件に合致する要素の取得する方法を、各メソッドの特徴と具体例を交えて解説してください。
• sliceメソッドを用いて配列の一部を抽出する方法を、コード例とともに解説してください。
• includesやsomeを使用して、特定の要素や条件が配列内に存在するかどうかを判定する方法を、具体的なコード例とともに説明してください。

知識課題3

• push/pop/shift/unshift の各メソッドを使用して、配列への要素の追加や削除を行う方法を具体例を交えて説明してください。
• 配列同士の結合において、concatメソッドとスプレッド構文（...）を用いた展開方法を比較し、それぞれの特徴と使用方法について説明してください。
• 配列から要素を削除する方法として、spliceメソッド、lengthプロパティへの再代入、空の配列を代入する手法の違いを実例を交えて説明してください。
• flatメソッドを用いてネストされた配列を平坦化する具体的なコード例を作成し、その動作や用途について解説してください。

知識課題4

• forEachの基本的な使用方法や特徴について説明してください。
• mapを使用した配列の変換処理について、その動作と具体例を示しながら説明してください。
• filterを使用して条件に合致する要素を抽出する方法を具体例とともに説明してください。
• reduceを用いた配列の集約処理の仕組みと、実際の使用例について解説してください。
• sortメソッドの動作原理と、ソート処理の具体例を示しながら説明してください。
• groupByの概念と、配列操作における活用方法について説明してください。
• メソッドチェーンの概念と、配列操作における利点について具体例を交えて説明してください。
• 配列操作における破壊的なメソッドと非破壊的なメソッドの違いを、具体例を交えて比較し、各手法の適切な使用シーンについて考察してください。

実践課題

下記のデータに対し、指定された操作および処理を実装してください。

// 社員データ
const employees = [
  { id: 1, name: "田中太郎", age: 30, department: "営業", projects: ["プロジェクトA", "プロジェクトB"] },
  { id: 2, name: "佐藤花子", age: 25, department: "企画", projects: ["プロジェクトC"] },
  { id: 3, name: "鈴木一郎", age: 28, department: "開発", projects: [] },
];

// 追加する社員の指定

// push により追加する社員
const pushEmployee = { 
  id: 4, 
  name: "高橋次郎", 
  age: 32, 
  department: "開発", 
  projects: ["プロジェクトD"] 
};

// unshift により追加する社員
const unshiftEmployee = { 
  id: 5, 
  name: "山本花子", 
  age: 27, 
  department: "企画", 
  projects: ["プロジェクトE"] 
};

// newEmployees 配列に含める社員（結合用）
const newEmployees = [
  { 
    id: 6, 
    name: "小林健", 
    age: 29, 
    department: "営業", 
    projects: ["プロジェクトF"] 
  }
];

実践課題1

• employeesの先頭の社員にアクセスし、その内容をコンソールへ出力してください。
• employeesの最後の社員にアクセスするコードを、以下の2通りの方法で実装してください。
  • lengthプロパティを利用する方法。
  • Array.prototype.atメソッドを利用する方法。
• 存在しないインデックス（employees[10]）にアクセスした結果がundefinedとなることを確認してください。

実践課題2

• employees配列の先頭（インデックス0）の社員情報を分割代入を用いてそれぞれの変数に格納し、その内容をコンソールへ出力してください。

実践課題3

• Array.isArrayを使用して、employeesが配列であることを確認し、その結果をコンソールへ出力してください。
• 各社員のprojectsプロパティが配列であることを確認し、その結果をコンソールへ出力してください。

実践課題4

• findIndexを使用して、idが2の社員のインデックスを取得し、その結果を出力してください。
• findを使用して、nameが鈴木一郎の社員を取得し、その結果を出力してください。
• sliceを使用して、employeesの先頭2名の社員情報を抽出し、その結果を出力してください。
• someを使用して、departmentが営業の社員が存在するかどうか判定し、その結果を出力してください。

実践課題5

• pushを使用して、指定された社員{ id: 4, name: "高橋次郎", ... }をemployeesの末尾に追加し、追加後の配列をコンソールへ出力してください。
• popを使用して、employeesの末尾の社員を削除し、削除された社員および削除後の配列をコンソールへ出力してください。
• unshiftを使用して、指定された社員{ id: 5, name: "山本花子", ... }をemployeesの先頭に追加し、追加後の配列をコンソールへ出力してください。
• shiftを使用して、employeesの先頭の社員を削除し、削除された社員および削除後の配列をコンソールへ出力してください。
• 以下の2通りの方法で、employees配列とnewEmployees配列（指定されたデータ：[ { id: 6, name: "小林健", ... } ]）を結合し、その結果をコンソールへ出力してください。
  • concatメソッドを使用する方法。
  • スプレッド構文（...）を使用する方法。
• spliceを使用して、employeesからidが3の社員を削除してください。
  • 削除前に該当社員のインデックスを取得し、削除後に削除された社員および配列の状態をコンソールへ出力してください。
• 配列全体のクリアについて、以下の2通りの方法を実装し、その結果をコンソールへ出力してください。クリアは元の配列を変更しないよう、スプレッド構文などを用いてコピーを作成して実施してください。
  • 方法1: lengthプロパティに0を代入して配列をクリアする方法。
  • 方法2: 変数に空の配列 ([])を再代入して配列をクリアする方法。

実践課題6

• employees内の各社員のprojectsプロパティをmapで抽出し、flatを用いて1つの平坦な配列に変換し、その結果をコンソールへ出力してください。

実践課題7

• forEachを使用して、employees内のすべての社員のnameをコンソールへ出力してください。
• mapを使用して、各社員のnameのみを抽出した新しい配列を作成し、その結果を出力してください。
• filterを使用して、departmentが企画の社員のみを抽出し、その結果を出力してください。
• reduceを使用して、すべての社員の合計年齢および平均年齢を計算し、その結果を出力してください。
• sortメソッドを使用して、社員をageの降順に並べ替えるコードを実装してください。
  • 並べ替えは元の配列を変更しないよう、スプレッド構文などを用いてコピーを作成して実施してください。
  • その結果を出力してください。

実践課題8

• reduceを使用して、employeesをdepartmentごとにグループ化してください。
  • グループ化した結果をコンソールへ出力してください。
• メソッドチェーンを使用し、下記の処理を1つにまとめて実装してください:
  • employeesからdepartmentが営業の社員を抽出する。
  • 抽出した社員をageの昇順に並べ替える。
  • 並べ替えた社員のnameのみを抽出した配列を生成する。
  • その結果をコンソールへ出力してください。

参考資料

• 配列
• 配列