JavaScriptの配列完全マスター：基礎から実践的なテクニックまで

const arr = [1, 2, 2, 3, 3, 4];
const unique = [...new Set(arr)];  // [1, 2, 3, 4]
// ↑ Setオブジェクトを使って重複を除去し、スプレッド演算子(...)で配列に戻す

const shuffle = arr => {
    return arr.sort(() => Math.random() - 0.5);
};
// ↑ sort()とMath.random()を組み合わせてランダムに並び替え

const str = "a,b,c";
const arr = str.split(",");    // ["a", "b", "c"]
// ↑ カンマで区切られた文字列を配列に変換

const joined = arr.join(",");  // "a,b,c"
// ↑ 配列の要素をカンマで結合して文字列に変換

// ユーザー情報を配列で管理
// 各ユーザーはオブジェクト（id, name, roleのプロパティを持つ）として表現
const users = [
    { id: 1, name: "田中", role: "admin" },
    { id: 2, name: "鈴木", role: "user" },
    { id: 3, name: "佐藤", role: "user" }
];

// filter()メソッドを使って管理者（role: "admin"）のみを抽出
// filterは条件に合う要素だけを集めた新しい配列を作ります
const admins = users.filter(user => user.role === "admin");
// 結果: [{ id: 1, name: "田中", role: "admin" }]

// map()メソッドを使ってユーザー名の一覧を作成
// mapは各要素を変換した新しい配列を作ります
const userNames = users.map(user => user.name);
// 結果: ["田中", "鈴木", "佐藤"]

// カート内の商品を配列で管理
// 各商品は商品ID、名前、価格、数量の情報を持つ
const cart = [
    { id: "item1", name: "Tシャツ", price: 2000, quantity: 2 },
    { id: "item2", name: "ジーンズ", price: 5000, quantity: 1 }
];

// reduce()メソッドを使って合計金額を計算
// reduceは配列の要素を1つずつ処理して、単一の値にまとめます
const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
// 計算過程：
// 1周目: 0 + (2000 × 2) = 4000
// 2周目: 4000 + (5000 × 1) = 9000
// 結果: 9000

// 配列のlengthプロパティで品目数を取得
const itemCount = cart.length;  // 結果: 2

// TODOタスクを配列で管理
// 各タスクはID、タスク内容、完了状態の情報を持つ
const todos = [
    { id: 1, task: "買い物", completed: false },
    { id: 2, task: "勉強", completed: true }
];

// filter()を使って未完了のタスクだけを抽出
// completedがfalseのタスクだけを集めます
const incompleteTasks = todos.filter(todo => !todo.completed);
// 結果: [{ id: 1, task: "買い物", completed: false }]

// push()メソッドで新しいタスクを追加
// 配列の末尾に新しい要素を追加します
todos.push({ id: 3, task: "運動", completed: false });
// 結果: todos配列に新しいタスクが追加される

// 日々の売上データを配列で管理
// 単純な数値の配列として表現
const sales = [120, 200, 350, 100, 280];

// reduce()を使って合計を計算し、lengthで割って平均を算出
const average = sales.reduce((sum, sale) => sum + sale) / sales.length;
// 計算過程：
// 1. reduce()で合計を計算: 120 + 200 + 350 + 100 + 280 = 1050
// 2. 配列の長さ（5）で割る: 1050 / 5 = 210
// 結果: 210

// filter()を使って売上目標（200）以上の日を抽出
const goodSalesDays = sales.filter(sale => sale >= 200);
// 結果: [200, 350, 280]

// CSVのような文字列データを配列に変換
const csvData = "りんご,バナナ,オレンジ";
// split()メソッドで文字列をカンマで区切って配列に変換
const fruits = csvData.split(",");
// 結果: ["りんご", "バナナ", "オレンジ"]

// 配列を文字列に戻す
// join()メソッドで配列の要素を指定した区切り文字でつなげる
const backToString = fruits.join("-");
// 結果: "りんご-バナナ-オレンジ"