💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、学生たちは JavaScript で配列を作成および操作する基本概念を探求します。この実験では、配列の初期化、配列要素のアクセス、および実際のコーディング演習を通じた基本的な配列操作について包括的な紹介を行います。参加者は、角括弧表記や Array コンストラクタなどのさまざまな方法を使って配列を作成する方法を学び、さまざまなデータ型を含む配列を扱う方法を理解します。
この実験では、数値、文字列、および混合要素を使って配列を定義すること、インデックスを使って個々の配列要素にアクセスすること、および基本的な配列操作技術を示すことなどの重要なスキルをカバーしています。手を動かしながらの例を通じて、学習者は JavaScript プログラミングにおける不可欠なデータ構造である配列を作成、アクセス、および操作する実践的な経験を得るでしょう。
このステップでは、JavaScript の配列について学びます。配列は、単一の変数に複数の値を格納するために使用される基本的なデータ構造です。配列を使うことで、関連するデータを効率的に収集して整理することができます。
まずは、JavaScript で簡単な配列を作成してみましょう。WebIDE を開き、~/project ディレクトリに arrays.js という新しいファイルを作成します。
// 数値の配列を作成する
let numbers = [1, 2, 3, 4, 5];
// 文字列の配列を作成する
let fruits = ["apple", "banana", "orange"];
// 空の配列を作成する
let emptyArray = [];
// 混合データ型の配列を作成する
let mixedArray = [42, "hello", true, null];
console.log("Numbers array:", numbers);
console.log("Fruits array:", fruits);
console.log("Empty array:", emptyArray);
console.log("Mixed array:", mixedArray);このコードを実行すると、以下のような出力例が表示されます。
Numbers array: [1, 2, 3, 4, 5]
Fruits array: ['apple', 'banana', 'orange']
Empty array: []
Mixed array: [42, 'hello', true, null]配列初期化に関する要点：
[] を使って作成されますまた、Array コンストラクタを使っても配列を作成できます。
// Array コンストラクタを使用する
let numbersConstructor = new Array(1, 2, 3, 4, 5);
console.log("Array using constructor:", numbersConstructor);このステップでは、配列内の個々の要素にインデックスを使ってどのようにアクセスするかを学びます。JavaScript では、配列のインデックスは 0 から始まります。これは、最初の要素がインデックス 0 にあり、2 番目の要素がインデックス 1 にあり、以下同様であることを意味します。
~/project ディレクトリにある arrays.js ファイルを開き、以下のコードを追加します。
// 色の配列を作成する
let colors = ["red", "green", "blue", "yellow", "purple"];
// インデックスを使って配列要素にアクセスする
console.log("First color:", colors[0]); // 最初の要素
console.log("Third color:", colors[2]); // 3 番目の要素
console.log("Last color:", colors[colors.length - 1]); // 最後の要素
// 配列要素を変更する
colors[1] = "orange"; // 2 番目の要素を変更する
console.log("Modified colors array:", colors);
// インデックス範囲を示す
console.log("Array length:", colors.length);このコードを実行すると、以下のような出力例が表示されます。
First color: red
Third color: blue
Last color: purple
Modified colors array: ['red', 'orange', 'blue', 'yellow', 'purple']
Array length: 5配列インデックスに関する要点：
[] を使いますarray.length は要素の総数を返しますarray[array.length - 1] を使います配列の範囲外の要素にアクセスして何が起こるか試してみましょう。
console.log("Accessing out-of-range index:", colors[10]); // undefined が返されますこのステップでは、果物の配列を作成し、それを使ってどのように操作するかを学びます。~/project ディレクトリにある arrays.js ファイルを開き、以下のコードを追加します。
// 果物の配列を作成する
let fruits = ["apple", "banana", "orange", "mango", "strawberry"];
// 果物の配列全体を表示する
console.log("Fruits array:", fruits);
// 配列の末尾に新しい果物を追加する
fruits.push("grape");
console.log("Adding grape to fruits:", fruits);
// さまざまな種類の果物の配列を作成する
let tropicalFruits = ["pineapple", "coconut", "papaya"];
// 2 つの果物の配列を結合する
let allFruits = fruits.concat(tropicalFruits);
console.log("All fruits:", allFruits);
// 果物の数を確認する
console.log("Total number of fruits:", allFruits.length);このコードを実行すると、以下のような出力例が表示されます。
Fruits array: ['apple', 'banana', 'orange','mango','strawberry']
Adding grape to fruits: ['apple', 'banana', 'orange','mango','strawberry', 'grape']
All fruits: ['apple', 'banana', 'orange','mango','strawberry', 'grape', 'pineapple', 'coconut', 'papaya']
Total number of fruits: 9果物の配列を作成および操作する際の要点：
push() を使って新しい要素を追加できますconcat() を使って配列を結合できますlength プロパティは要素の総数を示しますこのステップでは、HTMLとJavaScriptを使って配列要素をWebページに表示する方法を学びます。まず、~/project ディレクトリに fruits.html というHTMLファイルを作成します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Fruits Array Display</title>
<style>
body {
font-family: Arial, sans-serif;
}
#fruits-list {
background-color: #f4f4f4;
padding: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>My Fruits Collection</h1>
<div id="fruits-list"></div>
<script>
// 果物の配列を作成する
let fruits = ["Apple", "Banana", "Orange", "Mango", "Strawberry"];
// 果物のリストコンテナを取得する
let fruitsList = document.getElementById("fruits-list");
// 果物を表示するための無順リストを作成する
let ul = document.createElement("ul");
// 果物の配列をループしてリスト項目を作成する
fruits.forEach(function (fruit) {
let li = document.createElement("li");
li.textContent = fruit;
ul.appendChild(li);
});
// ページにリストを追加する
fruitsList.appendChild(ul);
</script>
</body>
</html>この例はいくつかの重要な概念を示しています。
forEach() を使って配列要素を反復処理することこのHTMLファイルをWebブラウザで開くと、ページに果物のリストが表示されます。
innerHTML を使った代替方法：
// 果物を表示する代替方法
let fruitsList = document.getElementById("fruits-list");
fruitsList.innerHTML = fruits.map((fruit) => `<li>${fruit}</li>`).join("");このステップでは、JavaScriptにおける一般的な配列操作について学びます。~/project ディレクトリにある arrays.js ファイルを開き、以下のコードを追加します。
// 数値の配列を作成する
let numbers = [5, 2, 8, 1, 9, 3];
// 要素を追加する
numbers.push(10); // 要素を末尾に追加する
numbers.unshift(0); // 要素を先頭に追加する
console.log("要素を追加した後:", numbers);
// 要素を削除する
let lastNumber = numbers.pop(); // 最後の要素を削除する
let firstNumber = numbers.shift(); // 最初の要素を削除する
console.log("要素を削除した後:", numbers);
// 配列をソートする
numbers.sort((a, b) => a - b); // 昇順にソートする
console.log("ソートされた配列:", numbers);
// 配列を逆順にする
numbers.reverse();
console.log("逆順の配列:", numbers);
// 要素を見つける
let index = numbers.indexOf(8);
console.log("8のインデックス:", index);
// 配列をスライスする
let slicedNumbers = numbers.slice(1, 4);
console.log("スライスされた配列:", slicedNumbers);
// 配列をフィルタリングする
let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log("偶数の数値:", evenNumbers);
// 配列をマッピングする
let squaredNumbers = numbers.map((num) => num * num);
console.log("二乗された数値:", squaredNumbers);このコードを実行すると、以下のような出力例が表示されます。
要素を追加した後: [0, 5, 2, 8, 1, 9, 3, 10]
要素を削除した後: [5, 2, 8, 1, 9, 3, 10]
ソートされた配列: [1, 2, 3, 5, 8, 9, 10]
逆順の配列: [10, 9, 8, 5, 3, 2, 1]
8のインデックス: 2
スライスされた配列: [9, 8, 5]
偶数の数値: [10, 8, 2]
二乗された数値: [100, 81, 64, 25, 9, 4, 1]示された主な配列操作：
push() と unshift()pop() と shift()sort()reverse()indexOf()slice()filter()map()この実験では、参加者はJavaScriptにおける配列の基本を探求し、配列データ構造をどのように作成、初期化、操作するかを学びました。この実験では、角括弧とArrayコンストラクタを使って配列を定義するなどの重要な概念を扱い、数値、文字列、そして混合データ型を含むさまざまな種類の要素で配列を作成できることを示しました。
参加者は、インデックスを通じて配列要素にアクセスする実践的なスキルを習得し、配列のインデックスは0から始まることを理解し、基本的な配列操作を行う方法を学びました。この実践的なアプローチにより、学習者は配列を作成し、その内容をログに記録し、JavaScriptの配列がデータを効率的に格納および整理する際の柔軟性を探求する練習を行うことができました。
