ひな姉と学ぶJS!データの宝箱「配列」を使いこなそう！

今回は、Javascriptでよく使われる「配列」についてひな姉と一緒に勉強していきましょう

登場人物

• 天野 陽菜（あまの ひな）：おしゃれな自社サービス開発企業に勤めるフロントエンドエンジニア。明るくフレンドリーで、後輩の育成にも積極的。実は元ゲーマーで方向音痴。
• 読者（あなた）：JavaScriptを学び始めた初心者。

たくさんのデータ、どうやってまとめる？

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_57_27.png” name=”後輩ちゃん” type=”l line”]ひな姉、こんにちは！JavaScriptで変数をいくつか作るのは慣れてきたんですけど、例えば、好きな食べ物を5つとか、もっとたくさん記録したい時って、変数をいっぱい作らなきゃいけないんですか？ちょっと大変そうだなって…。[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]こんにちはー！いいところに気がついたね！確かに、関連するデータがたくさんある時に、一つひとつ別の変数を作るのは大変だし、管理しにくいよね。そんな時に大活躍するのが、今日のテーマ『配列』なんだ！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]配列…ですか？なんだか強そうな名前ですね！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]ふふ、頼りになるよ！配列は、たくさんのデータをひとまとめにして、順番に並べて保管できる、とっても便利な『データの入れ物』みたいなものなんだ。イメージとしては、番号付きのロッカーとか、電車の車両みたいな感じかな。[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]なるほど！ロッカーなら、どこに何を入れたか番号で分かりますもんね。[/voice]

配列って何？もう少し詳しく！

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]その通り！JavaScriptで言う配列は、複数の値を順番に格納できるオブジェクトの一種なんだ。文字列、数値、真偽値（true/false）、さらには他の配列やオブジェクトだって入れられるよ。[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]え、色々な種類のデータを一緒に入れられるんですか？[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]そうなんだ。でも、実際には同じ種類のデータをまとめておくことが多いかな。例えば、さっき言ってた『好きな食べ物リスト』とか、『テストの点数リスト』みたいにね。その方が、後で扱いやすいから。[/voice]

解説
ひな姉は配列の中に配列を入れることができると言っていました。
このように、配列の中に配列が入っている形を「二次元配列」と呼びます。
イメージとしては、ただの配列はx軸だけ、二次元配列はx軸とy軸の2つの座標があるイメージです。
配列の例
[1,2,3]
二次元配列の例
[[1,2,3],
[4,5,6]]
z軸を追加した三次元配列も作成できますが、イメージしづらいので私はあまり使いません。

配列を作ってみよう！最初の第一歩

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]じゃあ、早速配列を作ってみようか。作り方はとっても簡単で、角括弧 [] を使うんだ。[/voice]

const emptyLocker = [];
console.log(emptyLocker);//何も入っていない配列が表示される

const favoriteFoods = ['カレーライス','ラーメン','お寿司','ハンバーグ'];
const testScores = [85,92,78,100,60];

console.log(favoriteFood);
console.log(testScores);

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]わ、本当だ！ [] の中に、入れたいデータをカンマで区切って書くだけなんですね。これなら私にもできそうです！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]そうでしょ？これが配列の基本的な作り方だよ。[/voice]

解説
配列は[]の中にデータを収納することができます。
各データの区切り位置の部分に,（カンマ）をつけることで、複数のデータを収納することができます。
配列を定義する時は、変数を定義する時と同じようにconstやvarを使って定義します。

配列の中身を取り出してみよう！インデックスって何？

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]さて、配列にデータを入れたら、次はそれを取り出したいよね。ここで大事になるのが『インデックス』っていう考え方なんだ。[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]インデックス…？ さっきのロッカーの番号みたいなものですか？[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]大正解！配列の中の各データには、先頭から順番に0、1、2…っていう番号が自動的に割り振られるんだ。この番号のことをインデックスって呼ぶよ。そして、ここがJavaScriptの（そして多くのプログラミング言語の）ちょっと面白いところで、インデックスは必ず0から始まるんだ。[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]えっ、1からじゃなくて0からなんですか！？ ちょっと意外です。[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]
ふふ、最初は戸惑うかもしれないけど、すぐに慣れるよ！プログラマーの合言葉みたいなものかな。例えば、さっきの favoriteFoods 配列だと、こんな感じ。
「"カレーライス" がインデックス 0」
「"ラーメン" がインデックス 1」
「"お寿司" がインデックス 2」
「"ハンバーグ" がインデックス 3」
取り出す時は、配列名の後に [インデックス番号] をつけるんだ。
[/voice]

console.log(favoliteFood[0]);//カレーライス
console.log(favoriteFood[2]);//お寿司

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]なるほど！ favoriteFoods[0] で最初のカレーライスが取り出せるんですね。じゃあ、もし存在しないインデックスを指定したらどうなるんですか？ 例えば favoriteFoods[10] とか。[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]いい質問だね！その場合は、JavaScriptは『そこには何も入っていませんよ』っていう意味で undefined（未定義）っていう値を返してくれるんだ。[/voice]

解説
配列の中のデータを取り出したい時は、配列名[0]のように、データの番号を指定します。
ここで注意してほしいのが、配列の最初のデータの番号は1ではなく0です。
私はこれを間違えて、3時間ほど悩んでました。(forループを使う時に間違えがち)

配列の長さを知りたい！.lenghtプロパティ

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]配列に今、いくつのデータが入っているかを知りたい時もよくあるんだ。そういう時は、配列の length（レングス）っていうプロパティを使うと便利だよ。[/voice]

console.log(favoriteFoods.length);4と表示される
console.log(testScores.length);5と表示される
console.log(emptyLocker.length);0と表示される

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]配列名.length って書くだけで、中のデータの個数が分かるんですね！これは便利そうです。[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]うん。この length は、後で配列の全てのデータに対して何か処理をしたい時とかに、とっても重要になってくるんだ。[/voice]

配列の中身を書き換えてみよう！

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]配列に入れたデータを後から変更したい時もあるよね。それもインデックスを使えば簡単にできるよ。[/voice]

const colors = ["赤","緑","青"];
console.log(`変更前:${colors}`);//変更前:["赤","緑","青"]colors[1] = "黄色";//1番目の要素(緑)を黄色に書き換える
console.log(`変更後:${colors}`);//変更後:["赤","黄色","青"]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]コードに使われている${}はテンプレートリテラルだね！
テンプレートリテラルは下の記事で詳しく解説しているから、一緒に確認してみてね！[/voice]

[kanren postid=”996″]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]わ、さっきデータを取り出した時と同じようにインデックスを指定して、新しい値を代入するだけなんですね！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]その通り！まるで『ロッカー1番の中身を、これに入れ替えて！』ってお願いするみたいだね。[/voice]

解説
配列のデータのインデックスを指定して、値を上書きすることができます。
例えばcolors[0] = “青” という指令を出してあげれば、colorsの0番目のデータが青という文字列に置き換わります。

今回のまとめ：配列の基本、まずはここまで！

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]
さて、今日は配列の本当に基本的なところを見てきたけど、どうだったかな？
ポイントをまとめると…

• 配列は、複数のデータを順番にまとめて管理できる『入れ物』だよ。
• 作る時は角括弧 [] を使って、データはカンマで区切る。
• 中のデータを取り出したり、書き換えたりする時は、0から始まる『インデックス』を使う。
• 配列に入っているデータの個数は .length で調べられる。

これが配列の第一歩。まずはこの基本をしっかり押さえておこうね。
[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]はい！0から始まるインデックスにはまだちょっと慣れが必要そうですけど、思ったより難しくなかったです。たくさんのデータを扱えるようになるのは嬉しいです！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]よかった！配列はね、これからもっと色々なことができるようになるんだ。例えば、後からデータを追加したり、削除したり、配列の中のデータを順番に全部取り出して処理したりとかね。それはまた次回のお楽しみということで！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]わー、楽しみです！ひな姉、今日もありがとうございました！[/voice]

[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]どういたしまして！実際に自分で色々配列を作って、中身を見たり、長さを確認したりして遊んでみると、もっと仲良くなれると思うよ。じゃあ、またね！[/voice]