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