前回はJavascriptの配列についてひな姉が解説してくれました。
今回は、配列に要素を追加する方法について、ひな姉が解説してくれるそうです。
[kanren postid=”1004″]
登場人物
- 天野 陽菜（あまの ひな）：おしゃれな自社サービス開発企業に勤めるフロントエンドエンジニア。明るくフレンドリーで、後輩の育成にも積極的。実は元ゲーマーで方向音痴。
- 後輩ちゃん：JavaScriptを学び始めた初心者。
今日のテーマは「配列の仲間」を増やす方法！
[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”]まさにそんな感じ！そういう時に役立つ、配列に新しい『仲間』、つまり要素を追加する方法をいくつか紹介するね。準備はいいかな？[/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]
末尾に追加するならコレ！ push() メソッド
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]まず一番よく使われるのが、配列の一番最後に新しい要素を追加する push()（プッシュ）っていうメソッドだよ。文字通り、新しい要素を配列の最後に『押し込む』イメージかな。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_38.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 fruits = ["りんご","バナナ"];
console.log(`元の配列:${fruits}`);//元の配列:["りんご","バナナ"]
fruits.push("みかん");
console.log(`みかんを追加後:${fruits}`);//みかんを追加後:["りんご","バナナ","みかん"][voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]わ、本当だ！ fruits.push("みかん") って書くだけで、最後に『みかん』が追加されました！[/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”]そうでしょ？ しかも push() は、一度に複数の要素を追加することもできるんだよ。[/voice]
fruits.push("ぶどう","もも");
console.log(`さらに追加後:${fruits}`);//さらに追加後:["りんご","バナナ","みかん","ぶどう","もも"][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]
解説
push()を使うと、配列の末尾に要素を追加することができます。
push()の使い方は非常に簡単です。
配列名.push(“追加したい要素”);
で配列に要素を追加することができます。
forループやif文の中でも使うことができるので、さまざまな場面で活躍してくれますよ！
[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″]
先頭に追加したい時は？ unshift() メソッド
[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_38.png” name=”後輩ちゃん” type=”l line”]うーん… push() が最後なら、最初に追加する別の命令があるんでしょうか？[/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”]その通り！そういう時は unshift()（アンシフト）っていうメソッドを使うんだ。push() とは逆で、要素を先頭に『押し入れる』感じだね。[/voice]
const colors = ["赤","青"];
console.log(`元の配列:${colors}`);// 元の配列: ["赤", "青"]
colors.unshift("黄色");
console.log(`黄色を追加後:${colors}`);//黄色を追加後: ["黄色", "赤", "青"][voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]おおー！今度は『黄色』が一番最初に追加されました！ unshift() も push() と同じように、複数の要素を一度に追加できますか？[/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]
colors.unshift("緑","紫");
console.log(`さらに追加後${colors}`)// さらに追加後: ["緑", "紫", "黄色", "赤", "青"][voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]なるほど！ push() と unshift()、セットで覚えておくと便利そうですね。[/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”]そうだね。ただ、unshift() を使うと、既存の要素のインデックス番号が全部一つずつ後ろにズレるから、要素がたくさんある配列で使うと、ほんの少しだけ push() より処理に時間がかかることがあるって言われてるんだ。でも、普段使いでそこまで気にする必要はないと思うよ。[/voice]
解説
push()に比べて、unshift()は処理が遅くなってしまう原因になります。
1つの処理程度であれば問題ありませんが、10万回のループでpushとunshiftの処理速度を比較したところ、約150倍もの差が生まれてしまったというデータがありました。
ループ回数が多くなりそうな時は、なるべくpushを使うようにすると良いでしょう。
参考:javascriptのunshift、shiftは遅すぎる。
（ちょっと補足）他にも方法は…？
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]実は、配列の特定の場所に直接要素を入れたり、もっと柔軟に配列を操作する方法もあるんだ。例えば、配列の長さを利用して fruits[fruits.length] = "新しい果物" みたいに末尾に追加したり、スプレッド構文 ... を使って const newFruits = [...fruits, "新しい果物"] みたいに元の配列は変更せずに新しい配列を作ったりとかね。[/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”]うん。でも、まずは基本の push() と unshift() をしっかり使えるようになるのが大事だよ。今の段階では、『こういうのもあるんだな』くらいに頭の片隅に置いておく程度で大丈夫。また追々、詳しく見ていこうね。[/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]
実践！ToDoリストにタスクを追加してみよう
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]じゃあ、学んだことを使って、簡単なToDoリストに新しいタスクを追加してみようか。最初は空っぽのToDoリストからスタートね。[/voice]
const todoList = [];
console.log(`最初のtodoリスト:${todoList}`);
// 新しいタスクをいくつか追加してみよう！
// 例えば、「買い物に行く」をリストの最後に追加
todoList.push("買い物に行く");
console.log(`タスク追加後:${todoList}`);
//["買い物に行く"]
// 「朝の準備をする」をリストの最初に追加
todoList.unshift("朝の準備をする");
console.log(`さらにタスク追加後:${todoList}`);
//["朝の準備をする","買い物に行く"]
// さらに「JavaScriptの勉強」を最後に追加
todoList.push("Javascriptの勉強");
console.log(`最終的なtodoリスト${todoList}`);
//["朝の準備をする","買い物に行く","Javascriptの勉強"][voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]おおー！ push() と unshift() を使って、ちゃんとタスクが追加されていきますね！こうやって見ると、いつ使うかがイメージしやすいです。[/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日-18_16_00.png” name=”天野先輩” type=”l line”]
今日のポイントはこんな感じ！
- 配列の末尾に要素を追加するなら
push()メソッド！ - 配列の先頭に要素を追加するなら
unshift()メソッド！ - どちらも複数の要素を一度に追加できるよ。
- まずはこの2つをしっかり覚えて、使いこなせるようになろうね。
どうだったかな？ 配列に要素を追加するの、そんなに難しくなかったでしょ？
[/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”]はい！ push() と unshift() の違いも分かりましたし、実際にどうやって使うのかもイメージできました。これからたくさん使ってみようと思います！[/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]
コメント