💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、学生たちは包括的な実践的な学習体験を通じて、重要なJavaScript配列操作技術を探求します。この実験では、slice()、unshift()、shift()、ソート、および配列の変換などの主要な配列メソッドがカバーされており、配列データ構造の管理と変更に関する実践的なスキルを提供します。
参加者は、slice()を使用して配列要素を抽出し、unshift()を使用して配列の先頭に要素を追加し、shift()を使用して最初の要素を削除し、配列のソートと逆順にする方法を学びます。実際のコーディング例を通じて作業することで、学習者はJavaScriptで配列を効果的に操作する方法をしっかりと理解し、プログラミング能力と問題解決能力を向上させます。
このステップでは、JavaScriptで配列の一部を抽出するためにslice()メソッドをどのように使用するかを学びます。slice()メソッドを使用すると、既存の配列から要素を選択して新しい配列を作成でき、元の配列は変更されません。
まず、サンプル配列を作成して要素をスライスする方法を練習しましょう。WebIDEを開き、~/projectディレクトリにarray-slice.jsという新しいファイルを作成します。
// 果物の配列を作成
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];
// 最初の3つの要素をスライス
const slicedFruits1 = fruits.slice(0, 3);
console.log("最初の3つの果物:", slicedFruits1);
// インデックス2から最後までスライス
const slicedFruits2 = fruits.slice(2);
console.log("インデックス2からの果物:", slicedFruits2);
// マイナスインデックスを使用して最後の2つの要素をスライス
const slicedFruits3 = fruits.slice(-2);
console.log("最後の2つの果物:", slicedFruits3);次に、スクリプトを実行して結果を確認しましょう：
node ~/project/array-slice.js出力例：
最初の3つの果物: [ 'apple', 'banana', 'cherry' ]
インデックス2からの果物: [ 'cherry', 'date', 'elderberry' ]
最後の2つの果物: [ 'date', 'elderberry' ]slice()に関するポイント：
このステップでは、JavaScriptにおいて配列の先頭に1つ以上の要素を追加するためにunshift()メソッドをどのように使用するかを学びます。unshift()メソッドは、配列の先頭に要素を挿入することで元の配列を変更し、配列の新しい長さを返します。
~/projectディレクトリにarray-unshift.jsという新しいファイルを作成し、次のコードを追加します。
// 初期の果物の配列を作成
let fruits = ["banana", "cherry", "date"];
console.log("元の配列:", fruits);
// 配列の先頭に1つの要素を追加
fruits.unshift("apple");
console.log("1つの要素を追加後:", fruits);
// 配列の先頭に複数の要素を追加
fruits.unshift("grape", "kiwi");
console.log("複数の要素を追加後:", fruits);
// 配列の新しい長さを格納
let newLength = fruits.unshift("orange");
console.log("新しい配列の長さ:", newLength);
console.log("最終的な配列:", fruits);次に、スクリプトを実行して結果を確認しましょう：
node ~/project/array-unshift.js出力例：
元の配列: [ 'banana', 'cherry', 'date' ]
1つの要素を追加後: [ 'apple', 'banana', 'cherry', 'date' ]
複数の要素を追加後: [ 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]
新しい配列の長さ: 7
最終的な配列: [ 'orange', 'grape', 'kiwi', 'apple', 'banana', 'cherry', 'date' ]unshift()に関するポイント：
このステップでは、JavaScriptにおいて配列から最初の要素を削除するためにshift()メソッドをどのように使用するかを学びます。shift()メソッドは、最初の要素を削除することで元の配列を変更し、削除された要素を返します。
~/projectディレクトリにarray-shift.jsという新しいファイルを作成し、次のコードを追加します。
// 初期のプログラミング言語の配列を作成
let languages = ["JavaScript", "Python", "Java", "C++", "Ruby"];
console.log("元の配列:", languages);
// 最初の要素を削除して格納
let removedLanguage = languages.shift();
console.log("削除された言語:", removedLanguage);
console.log("シフト後の配列:", languages);
// shift() を複数回呼び出して複数の要素を削除
let secondRemovedLanguage = languages.shift();
console.log("2番目に削除された言語:", secondRemovedLanguage);
console.log("2番目のシフト後の配列:", languages);
// 空の配列で何が起こるかを示す
let emptyArray = [];
let result = emptyArray.shift();
console.log("空の配列からシフトする:", result);
console.log("空の配列は残る:", emptyArray);次に、スクリプトを実行して結果を確認しましょう：
node ~/project/array-shift.js出力例：
元の配列: [ 'JavaScript', 'Python', 'Java', 'C++', 'Ruby' ]
削除された言語: JavaScript
シフト後の配列: [ 'Python', 'Java', 'C++', 'Ruby' ]
2番目に削除された言語: Python
2番目のシフト後の配列: [ 'Java', 'C++', 'Ruby' ]
空の配列からシフトする: undefined
空の配列は残る: []shift()に関するポイント：
undefined を返しますこのステップでは、JavaScriptにおいて配列要素を操作するためにsort()とreverse()メソッドをどのように使用するかを学びます。これらのメソッドは、配列の内容を整理して並び替えるための簡単な方法を提供します。
~/projectディレクトリにarray-sort-reverse.jsという新しいファイルを作成し、次のコードを追加します。
// ソートのデモ用の配列を作成
let numbers = [5, 2, 9, 1, 7];
let fruits = ["banana", "apple", "cherry", "date"];
// デフォルトのソート（文字列は辞書順、数値は昇順）
console.log("元の数値:", numbers);
numbers.sort();
console.log("デフォルトのソート:", numbers);
// 数値のソートには比較関数が必要
numbers = [5, 2, 9, 1, 7];
numbers.sort((a, b) => a - b);
console.log("数値のソート:", numbers);
// 逆順ソート
console.log("\n元の果物:", fruits);
fruits.sort().reverse();
console.log("ソートして逆順にした:", fruits);
// ソートせずに配列を逆順にする
let colors = ["red", "green", "blue", "yellow"];
console.log("\n元の色:", colors);
colors.reverse();
console.log("逆順の色:", colors);次に、スクリプトを実行して結果を確認しましょう：
node ~/project/array-sort-reverse.js出力例：
元の数値: [ 5, 2, 9, 1, 7 ]
デフォルトのソート: [ 1, 2, 5, 7, 9 ]
数値のソート: [ 1, 2, 5, 7, 9 ]
元の果物: [ 'banana', 'apple', 'cherry', 'date' ]
ソートして逆順にした: [ 'date', 'cherry', 'banana', 'apple' ]
元の色: [ 'red', 'green', 'blue', 'yellow' ]
逆順の色: [ 'yellow', 'blue', 'green','red' ]sort()とreverse()に関するポイント：
sort()は元の配列を変更しますsort()は要素を文字列に変換して辞書順にソートしますreverse()は配列内の要素の順序を逆にしますこのステップでは、JavaScriptにおいて配列要素を変換して分析するための強力な配列メソッドであるmap()、filter()、およびreduce()を調べます。これらのメソッドは、配列を操作して情報を抽出するためのエレガントな方法を提供します。
~/projectディレクトリにarray-transform.jsという新しいファイルを作成し、次のコードを追加します。
// 学生の点数のサンプル配列
const scores = [85, 92, 78, 65, 90, 55, 88];
// map() を使用して修正された値を持つ新しい配列を作成
const adjustedScores = scores.map((score) => score + 5);
console.log("元の点数:", scores);
console.log("調整後の点数:", adjustedScores);
// filter() を使用して合格点（70点以上）の配列を作成
const passingScores = scores.filter((score) => score >= 70);
console.log("合格点:", passingScores);
// reduce() を使用して点数の合計を計算
const totalScore = scores.reduce((sum, score) => sum + score, 0);
const averageScore = totalScore / scores.length;
console.log("合計点数:", totalScore);
console.log("平均点数:", averageScore.toFixed(2));
// メソッドを組み合わせる：合格点の平均を求める
const averagePassingScore =
passingScores.reduce((sum, score) => sum + score, 0) / passingScores.length;
console.log("合格点の平均:", averagePassingScore.toFixed(2));
// 名前の配列を変換する
const names = ["alice", "bob", "charlie"];
const capitalizedNames = names.map(
(name) => name.charAt(0).toUpperCase() + name.slice(1)
);
console.log("元の名前:", names);
console.log("大文字にした名前:", capitalizedNames);次に、スクリプトを実行して結果を確認しましょう：
node ~/project/array-transform.js出力例：
元の点数: [ 85, 92, 78, 65, 90, 55, 88 ]
調整後の点数: [ 90, 97, 83, 70, 95, 60, 93 ]
合格点: [ 85, 92, 78, 90, 88 ]
合計点数: 553
平均点数: 79.00
合格点の平均: 86.60
元の名前: [ 'alice', 'bob', 'charlie' ]
大文字にした名前: [ 'Alice', 'Bob', 'Charlie' ]配列変換メソッドに関するポイント：
map()：各要素を変換することで新しい配列を作成しますfilter()：テストに合格する要素を持つ新しい配列を作成しますreduce()：コールバック関数を通じて配列を単一の値に減らしますこの実験では、参加者は組み込みメソッドを使用してさまざまなJavaScript配列操作技術を探求しました。この実験では、元の配列を変更することなく配列の特定の部分を抽出することができるslice()メソッドを使用して配列要素をスライスする方法を学ぶことに焦点を当てました。参加者は、正のインデックスと負のインデックスを含むさまざまなインデックス範囲を使用して要素を選択することにより、新しい配列を作成する練習を行いました。
この実験では、配列の先頭に要素を追加するためのunshift()、最初の要素を削除するためのshift()、および配列要素をソートして逆順にする技術などのメソッドも紹介されました。実践的なコーディング演習を通じて、学習者は配列を変換して分析する実際の経験を得、これらのメソッドがJavaScriptの配列構造からデータを効率的に変更して抽出する方法を理解しました。
