8.2 KiB

Raw Permalink Blame History Unescape Escape

JavaScript 基礎: 配列とループ

スケッチノート: Tomomi Imura

講義前クイズ

このレッスンでは、ウェブ上でインタラクティブ性を提供する言語であるJavaScriptの基礎を学びます。このレッスンでは、データを操作するために使用される配列とループについて学びます。

🎥 上記の画像をクリックすると、配列とループに関する動画が視聴できます。

このレッスンは Microsoft Learn でも受講できます！

配列

データを扱うことはどのプログラミング言語でも一般的なタスクであり、配列のような構造化された形式でデータが整理されていると、作業がはるかに簡単になります。配列を使うと、リストのような構造でデータを保存できます。配列の大きな利点の1つは、1つの配列に異なる種類のデータを保存できることです。

✅ 配列は私たちの身の回りにたくさんあります！例えば、ソーラーパネルの配列のような実生活の例を思い浮かべられますか？

配列の構文は、角括弧のペアです。

let myArray = [];

これは空の配列ですが、配列はデータをすでに格納した状態で宣言することもできます。配列内の複数の値はカンマで区切られます。

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

配列の値には、インデックスと呼ばれる一意の値が割り当てられます。インデックスは配列の先頭からの距離に基づいて割り当てられる整数です。上記の例では、文字列値 "Chocolate" のインデックスは0で、"Rocky Road" のインデックスは4です。インデックスを角括弧とともに使用して、配列の値を取得、変更、または挿入できます。

✅ 配列がゼロインデックスから始まることに驚きましたか？一部のプログラミング言語では、インデックスは1から始まります。この歴史については、Wikipedia で読むことができます。

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

インデックスを利用して値を変更することもできます。例えば、次のようにします：

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

また、指定したインデックスに新しい値を挿入することもできます：

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ 配列に値を追加するより一般的な方法は、array.push() のような配列演算子を使用することです。

配列内の項目数を調べるには、length プロパティを使用します。

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ 自分で試してみましょう！ブラウザのコンソールを使って、自分で作成した配列を操作してみてください。

ループ

ループを使用すると、繰り返しまたは反復的なタスクを実行でき、時間とコードを大幅に節約できます。各反復では、変数、値、条件が異なる場合があります。JavaScriptにはさまざまな種類のループがあり、それぞれに小さな違いがありますが、本質的には同じことを行います：データをループすることです。

Forループ

for ループは、反復するために次の3つの部分が必要です：

counter 通常、反復回数を数えるために数値で初期化される変数
condition 比較演算子を使用して、false になったときにループを停止させる式
iteration-expression 各反復の最後に実行され、通常はカウンター値を変更するために使用される

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

✅ このコードをブラウザのコンソールで実行してみてください。カウンター、条件、または反復式を少し変更するとどうなりますか？逆方向に実行してカウントダウンを作成できますか？

Whileループ

for ループの構文とは異なり、while ループは条件だけを必要とし、その条件が false になるとループが停止します。ループ内の条件は通常、カウンターのような他の値に依存し、ループ中に管理する必要があります。カウンターの初期値はループの外で作成する必要があり、条件を満たすための式（カウンターの変更を含む）はループ内で維持する必要があります。

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ なぜforループを選ぶのか、またはwhileループを選ぶのか？17,000人の視聴者がStackOverflowで同じ質問をしました。その意見のいくつかはこちらで興味深く読めます。

ループと配列

配列はループと一緒に使用されることが多いです。ほとんどの条件はループを停止するために配列の長さを必要とし、インデックスもカウンター値として使用できます。

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ 自分で作成した配列をブラウザのコンソールでループしてみてください。

🚀 チャレンジ

forやwhileループ以外にも配列をループする方法があります。forEach、for-of、map などです。これらの技術の1つを使って、配列ループを書き直してみましょう。

講義後クイズ

復習と自己学習

JavaScriptの配列には、データ操作に非常に便利な多くのメソッドが付属しています。これらのメソッドについて調べるとともに、（push、pop、slice、spliceなど）自分で作成した配列で試してみてください。

課題

配列をループする

免責事項:
この文書は、AI翻訳サービス Co-op Translator を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があることをご承知おきください。元の言語で記載された文書が公式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。

8.2 KiB Raw Permalink Blame History Unescape Escape