初心者向け JavaScript 配列の解説（簡単な例付き）

こんにちは 👋。これは私の JavaScript シリーズ第 4 投稿です。このブログでは、「何ぞ配列か」を、「なぜ配列が必要なのか」を理解し、配列上で実行できるいくつかの操作を取り上げていきます。 想像してみてください：学生の成績を保存するタスクが与えられたとしましょう。配列がなければ、成績をどのように保存するか考えます？おそらく、こんなようにしてでしょう： let mark1 = 90; let mark2 = 87; let mark3 = 80; ... let markn = 43; 次に、100 個、あるいは 1000 個の成績を保存する必要がある状況を想像してください。それは多大な労力を要する作業です。ここへ配列が登場します。 JavaScript における配列とは、番号付きインデックス（0 から始まる）を使用してアクセスする、複数の値の順序付けられたコレクションまたはリストを保存する単一の変数です。配列を作成するには、角括弧を使用し、カンマ区切りで値を格納します。 例： let marks = [90, 87, 80, 79, 94] 単一変数 marks は複数の値を含み、これらの値はインデックスを使用してアクセスできます。配列内の各値はインデックスによってアクセス可能であり、インデックスは 0 から始まります。 例： let arr = ["apple", "banana", "watermelon", "chocolava"] let value = arr[3]; console.log(value) //OUTPUT //chocolava 例： let arr = ["apple", "banana", "watermelon", "chocolava"] let value = arr[arr.length - 1]; console.log(value) //OUTPUT // chocolava .at() メソッド 例： let arr = ["apple", "banana", "watermelon", "chocolava"] let value = arr.at(2); console.log(value) //OUTPUT // watermelon 例： let arr = ["apple", "banana", "watermelon", "chocolava"] let value = arr.at(-1); console.log(value) //OUTPUT // chocolava 例： let arr = ["apple", "banana", "watermelon", "chocolava"] let value = arr.at(2); arr[2] = "changed value" // ここでの値の変更!!! console.log(arr) // OUTPUT // [ 'apple', 'banana', 'changed value', 'chocolava' ] .length プロパティ .length を使用すると、配列内の要素の数をアクセスできます。これは整数値を返します。 例： let arr = [32, 43, 54, 90] let len = arr.length; console.log(len) // 4 配列のループ 配列をループで処理するには複数の方法があります。いくつかの方法は以下です： - for ループ - .map 関数 - for...of ループ for ループ配列を処理する最も一般的な方法は for ループを使用することです。 例： let arr = ["apple", "banana", "watermelon", "chocolava"] for (let i = 0; i < arr.length; i++) { console.log(arr[i]) } // OUTPUT // apple // banana // watermelon // chocolava let i = 0 → ループはインデックス 0 から始まります。 i < arr.length → ループは配列の最後の要素まで実行されます。 i++ → 各反復後にインデックスが増加します。 arr[i] → 現在のインデックスにある要素にアクセスします。 for...of ループJavaScript は、for...of を使用して配列をよりシンプルでクリーンな方法でループ処理する機能も提供しています。インデックスを扱う代わりに、配列の値を直接取得します。 例： let arr = ["apple", "banana", "watermelon", "chocolava"] for (let fruit of arr) { console.log(fruit) } // OUTPUT // apple // banana // watermelon // chocolava これは、インデックスではなく値のみが必要である場合、読みやすく、クリーンになります。 .map() 関数配列と作業するもう一つの強力な方法は、.map() メソッドを使用することです。 .map() は、既存の配列の各要素を変換して新しい配列を作成したいときに使用されます。 例： let numbers = [1, 2, 3, 4] let doubled = numbers.map(num => num * 2) console.log(doubled) // OUTPUT // [2, 4, 6, 8] .map() はコールバック関数を受け取り、配列の各要素に対してその関数を実行します。返された値は新しい配列の一部となります。重要：.map() は元の配列を変更しません。 配列は JavaScript の最も基本的かつ強力なデータ構造の一つです。関連する値を複数の変数で保存する代わりに、配列を使用することで、一つの場所においてそれらを効率的に保存・管理できます。このブログでは、以下を学びました： - 配列とは何か、そしてなぜそれが必要なのか - 配列の作成方法 - 配列要素のアクセスと更新方法 - .length プロパティの使い方 - for、for...of、.map() を使用して配列をループする異なる方法 配列を理解することは非常に重要であり、...

Hello readers 👋, this is the 4th blog of my JavaScript series. In this blog we will understand What is array?, Why do we need array? and some operations that we can perform on array. Imagine this: you are given a task to store the marks of students. How would you store the marks if arrays did not exist? Probably like this: let mark1 = 90; let mark2 = 87; let mark3 = 80; . . . let markn = 43; Now imagine this situation where you need to store 100s or 1000s of marks. How tedious task it would be. This is where arrays come into the picture. In JavaScript, an array is a single variable used to store an ordered collection or list of multiple values, which are accessed using numbered indexes starting at zero. To create an array we use square braces to store the values separated by comma. Example: let marks = [90, 87, 80, 79, 94] This single variable marks contains multiple values, and the values can be accessed using their index. In an array, each value can be accessed by an index. The index starts from 0. let arr = ["apple", "banana", "watermelon", "chocolava"] let value = arr[3]; console.log(value) //OUTPUT //chocolava let arr = ["apple", "banana", "watermelon", "chocolava"] let value = arr[arr.length - 1]; console.log(value) //chocolava // OUTPUT // chocolava at() let arr = ["apple", "banana", "watermelon", "chocolava"] let value = arr.at(2); console.log(value) //watermelon // OUTPUT // watermelon let arr = ["apple", "banana", "watermelon", "chocolava"] let value = arr.at(-1); console.log(value) //chocolava // OUTPUT // chocolava let arr = ["apple", "banana", "watermelon", "chocolava"] let value = arr.at(2); arr[2] = "changed value" // Changing the value here!!! console.log(arr) // OUTPUT // [ 'apple', 'banana', 'changed value', 'chocolava' ] .length property Using .length we can access the number of element in the array. It returns an integer value. let arr = [32, 43, 54, 90] let len = arr.length; console.log(len) // 4 looping over the array. There are multiple ways to loop over the array. Some of the methods are:- for loop .map function for...of loop for loop The most common way to iterate through an array is using a for loop. Example: let arr = ["apple", "banana", "watermelon", "chocolava"] for (let i = 0; i < arr.length; i++) { console.log(arr[i]) } // OUTPUT // apple // banana // watermelon // chocolava let i = 0 → The loop starts from index 0. i < arr.length → The loop runs until the last element of the array. i++ → The index increases after every iteration. arr[i] → Accesses the element at the current index. for...of loop JavaScript also provides a simpler and cleaner way to loop through arrays using for...of. Instead of working with indexes, it directly gives us the values of the array. Example: let arr = ["apple", "banana", "watermelon", "chocolava"] for (let fruit of arr) { console.log(fruit) } // OUTPUT // apple // banana // watermelon // chocolava This is often more readable and cleaner when you only need the values and not the index. .map() function Another powerful way to work with arrays is using the .map() method. .map() is used when we want to create a new array by transforming each element of the existing array. Example: let numbers = [1, 2, 3, 4] let doubled = numbers.map(num => num * 2) console.log(doubled) // OUTPUT // [2, 4, 6, 8] .map() works It takes a callback function. That function runs for every element in the array. The returned value becomes part of a new array. Important: .map() does not modify the original array. Arrays are one of the most fundamental and powerful data structures in JavaScript. Instead of creating multiple variables to store related values, arrays allow us to store and manage them efficiently in a single place. In this blog, we learned: What an array is and why we need it How to create an array How to access and update array elements How to use the .length property Different ways to loop through arrays using for, for...of, and .map() Understanding arrays is extremely important because they are used everywhere in JavaScript - from handling lists of data to working with APIs and building dynamic applications. Hope you liked this blog. If there’s any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.