この実験 (Lab) では、JavaScript の最も基本的なデータ構造の一つである配列 (array) を探求します。配列は、一度に複数の値を保持できる特別な変数です。配列は、アイテムのリスト、数値、文字列などの順序付けられたデータのコレクションを格納するために使用されます。
以下の方法を学びます。
この実験 (Lab) では、WebIDE 内で作業します。JavaScript コードは script.js ファイルに記述します。コードの結果を確認するには、ブラウザの開発者コンソールを使用します。「Web 8080」タブでアクセスできます。
このステップでは、JavaScript で配列を作成する最も一般的な方法である配列リテラルについて学びます。配列リテラルとは、角括弧 ([]) で囲まれた、ゼロ個以上の式からなるリストであり、各式は配列の要素を表します。
まず、WebIDE の左側にあるファイルエクスプローラーで script.js ファイルを見つけます。それをクリックしてエディターで開きます。
次に、script.js に以下のコードを追加して、果物の配列を作成し、コンソールにログ出力します。
const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits);コードを追加したら、ファイルを保存します（Ctrl+S または Cmd+S を使用できます）。出力を見るには、画面上部の「Web 8080」タブに切り替えます。ブラウザの開発者コンソールを開く必要がある場合があります（通常は F12 を押すか、ページを右クリックして「検証」を選択し、「コンソール」タブに移動します）。コンソールに配列が出力されているのが見えるはずです。
["Apple", "Banana", "Cherry"];
このステップでは、配列内の個々の要素にアクセスする方法を学びます。JavaScript の配列はゼロベースのインデックス付けされており、最初の要素はインデックス 0、2 番目の要素はインデックス 1 となります。角括弧内にインデックス番号を指定することで、要素にアクセスできます。
引き続き script.js ファイルを編集しましょう。既存のコードの下に以下の行を追加して、fruits 配列の最初の要素にアクセスし、ログ出力します。
// 最初の要素（インデックス 0）にアクセス
const firstFruit = fruits[0];
console.log("The first fruit is:", firstFruit);
// 3 番目の要素（インデックス 2）にアクセス
console.log("The third fruit is:", fruits[2]);script.js ファイルを保存し、「Web 8080」タブをリフレッシュします。開発者コンソールを確認してください。前のステップの出力に加えて、新しい出力が表示されるはずです。
The first fruit is: Apple
The third fruit is: Cherry
このステップでは、既存の配列の末尾に新しい要素を追加する方法を学びます。これを行う最も簡単な方法は push() メソッドを使用することです。このメソッドは、配列の末尾に 1 つ以上の要素を追加し、配列の新しい長さを返します。
fruits 配列に "Orange" を追加するために、script.js ファイルの末尾に以下のコードを追加してください。
// 配列の末尾に新しい要素を追加
fruits.push("Orange");
console.log("Array after push:", fruits);ファイルを保存し、「Web 8080」タブのコンソールを確認してください。fruits 配列に 4 つの要素が含まれていることがわかるはずです。
Array after push: [ "Apple", "Banana", "Cherry", "Orange" ]
このステップでは、pop() メソッドを使用して配列から最後の要素を削除する方法を学びます。このメソッドは配列から最後の要素を削除し、その要素を返します。この操作により、配列の長さが変更されます。
script.js ファイルの末尾に以下のコードを追加してください。これにより、先ほど追加した最後の要素が削除され、削除された要素と更新された配列の両方がログ出力されます。
// 配列から最後の要素を削除
const removedFruit = fruits.pop();
console.log("Removed fruit:", removedFruit);
console.log("Array after pop:", fruits);ファイルを保存し、「Web 8080」タブのコンソール出力を確認してください。"Orange" が削除され、配列は元の 3 つの要素に戻っていることがわかるはずです。
Removed fruit: Orange
Array after pop: [ "Apple", "Banana", "Cherry" ]
このステップでは、配列内のすべての要素をループ処理する方法を学びます。これを行う一般的な方法は for ループを使用することです。配列の length プロパティを使用して、ループを実行する回数を決定できます。
配列内の各フルーツをコンソールに新しい行で出力するために、script.js の末尾に以下の for ループを追加してください。
console.log("Iterating through the array with a for loop:");
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}ループは i = 0 から始まり、i が fruits 配列の長さより小さい間継続します。各反復処理で、現在のインデックス i の要素が出力されます。
ファイルを保存し、「Web 8080」タブのコンソールを確認してください。各フルーツが個別にリストされていることがわかるはずです。
Iterating through the array with a for loop:
Apple
Banana
Cherry
JavaScript 配列の実験を完了しました。おめでとうございます！
この実験では、JavaScript で配列を扱うための基本的な操作を学びました。以下の項目を実践しました。
[] を使用した配列の作成。array[0]。push() メソッドを使用した配列の末尾への要素の追加。pop() メソッドを使用した配列の最後の要素の削除。for ループと length プロパティを使用した配列のすべての要素の反復処理。配列は JavaScript プログラミングの礎です。forEach()、map()、filter() など、さらに強力なメソッドがたくさんあります。これらを使用すると、コードをさらに簡潔で表現力豊かにすることができます。この基本的なデータ構造を習得するために、練習を続けてください。
