基礎から学ぶJavaScript入門 90日コース | JavaScriptでデータを扱う － Day 16：配列の追加・削除

90日で身につけるJavaScript
スポンサーリンク
スポンサーリンク
  1. Day 16：配列の追加・削除（前半）―「リストを動かす」感覚を身につける
  2. 配列を「動かす」ための4つの基本メソッド
    1. 4つのメソッドの役割をざっくり整理する
  3. push()：末尾に要素を追加する
    1. push() の基本的な使い方
    2. push() の戻り値
  4. pop()：末尾から要素を削除する
    1. pop() の基本的な使い方
  5. shift()：先頭から要素を削除する
    1. shift() の基本的な使い方
  6. unshift()：先頭に要素を追加する
    1. unshift() の基本的な使い方
    2. unshift() の戻り値
  7. 実践：ToDoデータを追加・削除してみる
    1. ステップ1：初期のToDoリストを作る
    2. ステップ2：push() で末尾にタスクを追加する
    3. ステップ3：unshift() で先頭に「重要なタスク」を追加する
    4. ステップ4：shift() で「一番古いタスク」を完了扱いにする
    5. ステップ5：pop() で「後回しにするタスク」を削除する
  8. Day 16 前半 練習テンプレート（ブラウザで動かせる例）
  9. Day 16 前半のまとめ
  10. Day 16：配列の追加・削除（後半）
  11. 配列を操作する4つの基本メソッドをもう一度整理する
    1. 配列の前後を操作するメソッド
  12. ToDoリストを題材にして「配列を動かす」流れを体で覚える
  13. Step 1：初期の ToDo リストを作る
  14. Step 2：push() で末尾にタスクを追加する
  15. Step 3：unshift() で先頭に重要タスクを追加する
  16. Step 4：shift() で先頭のタスクを完了扱いにする
  17. Step 5：pop() で末尾のタスクを削除する
  18. Day 16 後半：まとめて動かすテンプレート（ブラウザで実行可能）
  19. Day 16 後半のまとめ

Day 16：配列の追加・削除（前半）―「リストを動かす」感覚を身につける

Day 16では、配列の中身を 追加したり削除したりして動かす 方法を学びます。 ここまでで「配列とは」「インデックス」「要素の取得」は理解してきましたが、 実際のアプリでは、リストの中身が増えたり減ったりすることが当たり前です。

そこで登場するのが、次の4つのメソッドです。

  • push()
  • pop()
  • shift()
  • unshift()

これらを使うことで、配列を 「末尾から」「先頭から」 追加・削除できるようになります。 実践では、ToDoリスト（やることリスト）を題材にして、 ステップバイステップで動きを確認していきます。

配列を「動かす」ための4つの基本メソッド

4つのメソッドの役割をざっくり整理する

まずは、4つのメソッドの役割をざっくり言葉で整理します。

  • push()：配列の 末尾に要素を追加 する
  • pop()：配列の 末尾から要素を削除 する
  • shift()：配列の 先頭から要素を削除 する
  • unshift()：配列の 先頭に要素を追加 する

この4つを使いこなせると、 「リストの前後に追加・削除する」という操作が自由にできるようになります。

push()：末尾に要素を追加する

push() の基本的な使い方

push() は、配列の 一番後ろに新しい要素を追加する メソッドです。

const todos = ['買い物に行く', 'メールを返信する'];

todos.push('本を読む'); // 末尾に「本を読む」を追加します

console.log(todos);
// ['買い物に行く', 'メールを返信する', '本を読む']
JavaScript
  • todos.push('本を読む') によって、配列の末尾に新しいToDoが追加されます。
  • 元の配列 todos が 直接書き換えられる ことがポイントです。

push() の戻り値

push() は、追加後の配列の長さ を戻り値として返します。

javascript

const todos = ['買い物に行く', 'メールを返信する'];

const newLength = todos.push('本を読む');

console.log('追加後の配列の長さ：', newLength); // 3
console.log('現在のToDoリスト：', todos);
  • 戻り値を使うことで、「今いくつのToDoがあるか」を知ることもできます。

pop()：末尾から要素を削除する

pop() の基本的な使い方

pop() は、配列の 一番後ろの要素を削除して、その値を返す メソッドです。

const todos = ['買い物に行く', 'メールを返信する', '本を読む'];

const removedTodo = todos.pop(); // 末尾の「本を読む」を削除します

console.log('削除されたToDo：', removedTodo); // 本を読む
console.log('現在のToDoリスト：', todos);
// ['買い物に行く', 'メールを返信する']
JavaScript
  • todos.pop() によって、末尾の要素が削除されます。
  • 戻り値として「削除された要素」が返ってくるので、 「何を削除したのか」をログに出したり、別の処理に使ったりできます。

shift()：先頭から要素を削除する

shift() の基本的な使い方

shift() は、配列の 一番前の要素を削除して、その値を返す メソッドです。

const todos = ['買い物に行く', 'メールを返信する', '本を読む'];

const removedTodo = todos.shift(); // 先頭の「買い物に行く」を削除します

console.log('削除されたToDo：', removedTodo); // 買い物に行く
console.log('現在のToDoリスト：', todos);
// ['メールを返信する', '本を読む']
JavaScript
  • shift() は「先頭から取り出す」イメージです。
  • 「一番古いタスクから処理していく」といった使い方に向いています。

unshift()：先頭に要素を追加する

unshift() の基本的な使い方

unshift() は、配列の 一番前に新しい要素を追加する メソッドです。

const todos = ['メールを返信する', '本を読む'];

todos.unshift('買い物に行く'); // 先頭に「買い物に行く」を追加します

console.log('現在のToDoリスト：', todos);
// ['買い物に行く', 'メールを返信する', '本を読む']
JavaScript
  • unshift() は「先頭に差し込む」イメージです。
  • 「優先度の高いタスクを先頭に追加する」といった使い方に向いています。

unshift() の戻り値

unshift() も、push() と同じく 追加後の配列の長さ を戻り値として返します。

const todos = ['メールを返信する', '本を読む'];

const newLength = todos.unshift('買い物に行く');

console.log('追加後の配列の長さ：', newLength); // 3
console.log('現在のToDoリスト：', todos);
JavaScript

実践：ToDoデータを追加・削除してみる

ここからは、ToDoリスト（やることリスト）を題材にして、 4つのメソッドを組み合わせて使ってみます。

ステップ1：初期のToDoリストを作る

// 初期のToDoリストを配列で作成します
const todos = ['メールを返信する', '部屋を片付ける'];

console.log('初期のToDoリスト：', todos);
JavaScript

ステップ2：push() で末尾にタスクを追加する

// 新しいタスクを末尾に追加します
todos.push('本を読む');

console.log('本を読むを追加後のToDoリスト：', todos);
// ['メールを返信する', '部屋を片付ける', '本を読む']
JavaScript

ステップ3：unshift() で先頭に「重要なタスク」を追加する

// 優先度の高いタスクを先頭に追加します
todos.unshift('重要な書類を提出する');

console.log('重要な書類を提出するを追加後のToDoリスト：', todos);
// ['重要な書類を提出する', 'メールを返信する', '部屋を片付ける', '本を読む']
JavaScript

ステップ4：shift() で「一番古いタスク」を完了扱いにする

// 先頭のタスクを完了したものとして削除します
const doneTodo1 = todos.shift();

console.log('完了したタスク：', doneTodo1);
console.log('残りのToDoリスト：', todos);
// ['メールを返信する', '部屋を片付ける', '本を読む']
JavaScript

ステップ5：pop() で「後回しにするタスク」を削除する

// 末尾のタスクを「今回はやめる」として削除します
const canceledTodo = todos.pop();

console.log('今回はやめたタスク：', canceledTodo);
console.log('最終的なToDoリスト：', todos);
// ['メールを返信する', '部屋を片付ける']
JavaScript

Day 16 前半 練習テンプレート（ブラウザで動かせる例）

ここまでの内容を1つにまとめたテンプレートです。 ブラウザで開き、コンソールを表示して、 配列がどのように変化していくかを追いかけてみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 16 前半：配列の追加・削除 練習テンプレート</title>
</head>
<body>
  <h1>Day 16 前半：配列の追加・削除（push / pop / shift / unshift）</h1>
  <p>ブラウザのコンソールを開いて、ToDoリストがどのように変化するかを確認してください。</p>

  <script>
    console.log('--- 初期のToDoリストを作成 ---');

    // 初期のToDoリスト
    const todos = ['メールを返信する', '部屋を片付ける'];

    console.log('初期のToDoリスト：', todos);

    console.log('--- push() で末尾にタスクを追加 ---');

    // 末尾に「本を読む」を追加
    todos.push('本を読む');

    console.log('本を読むを追加後のToDoリスト：', todos);

    console.log('--- unshift() で先頭に重要なタスクを追加 ---');

    // 先頭に「重要な書類を提出する」を追加
    todos.unshift('重要な書類を提出する');

    console.log('重要な書類を提出するを追加後のToDoリスト：', todos);

    console.log('--- shift() で先頭のタスクを完了扱いにして削除 ---');

    // 先頭のタスクを削除し、その内容を変数に保存
    const doneTodo1 = todos.shift();

    console.log('完了したタスク：', doneTodo1);
    console.log('残りのToDoリスト：', todos);

    console.log('--- pop() で末尾のタスクを削除（今回はやめる） ---');

    // 末尾のタスクを削除し、その内容を変数に保存
    const canceledTodo = todos.pop();

    console.log('今回はやめたタスク：', canceledTodo);
    console.log('最終的なToDoリスト：', todos);

    console.log('--- Day 16 前半：配列の追加・削除の練習が完了しました ---');
  </script>
</body>
</html>

Day 16 前半のまとめ

Day 16前半では、配列の中身を動かすための4つの基本メソッド

  • push()：末尾に追加
  • pop()：末尾から削除
  • shift()：先頭から削除
  • unshift()：先頭に追加

を、ToDoリストを題材にして学びました。

ここで意識してほしいのは、

  • 配列は「ただの並び」ではなく、 追加・削除によって動かせるデータ構造 であること
  • 末尾と先頭で、使うメソッドが違うこと
  • 削除系メソッド（pop() と shift()）は、 「削除した要素を戻り値として返す」ので、 その情報をログや別の処理に活用できること

です。

この4つをしっかり押さえておくと、 後半やその先で学ぶ「より高度な配列操作」や「ToDoアプリのような実践的な機能」に、 スムーズにつなげていくことができます。

Day 16：配列の追加・削除（後半）

配列を「動かす」操作を実践でしっかり身につける

Day 16後半では、前半で学んだ push / pop / shift / unshift を、 実際の ToDo リスト操作に落とし込みながら、 「配列を使ってデータを管理する」感覚をさらに強めていきます。

ここでは、初心者がつまずきやすいポイントを深掘りしながら、 ステップバイステップで丁寧に解説していきます。

配列を操作する4つの基本メソッドをもう一度整理する

配列の前後を操作するメソッド

  • push：末尾に追加
  • pop：末尾を削除
  • shift：先頭を削除
  • unshift：先頭に追加

この4つを使いこなすことで、 配列を「前から」「後ろから」自由に動かせるようになります。

ToDoリストを題材にして「配列を動かす」流れを体で覚える

ここでは、ToDoリストを配列で管理しながら、 追加・削除を順番に行っていきます。

Step 1：初期の ToDo リストを作る

まずは、配列で ToDo リストを作ります。

const todos = ['メールを返信する', '部屋を片付ける'];

console.log('初期のToDoリスト：', todos);
JavaScript
  • 配列の中に「やること」を並べています。
  • この配列を、これから追加・削除して動かしていきます。

Step 2：push() で末尾にタスクを追加する

todos.push('本を読む'); // 末尾に追加

console.log('本を読むを追加後のToDoリスト：', todos);
JavaScript

ポイント深掘り：

  • push() は「後ろに追加」
  • 元の配列がそのまま書き換わる（破壊的メソッド）
  • 戻り値は「追加後の配列の長さ」

Step 3：unshift() で先頭に重要タスクを追加する

todos.unshift('重要な書類を提出する'); // 先頭に追加

console.log('重要な書類を提出するを追加後のToDoリスト：', todos);
JavaScript

ポイント深掘り：

  • unshift() は「前に追加」
  • 優先度の高いタスクを先頭に入れたいときに便利
  • 戻り値は「追加後の配列の長さ」

Step 4：shift() で先頭のタスクを完了扱いにする

const doneTodo = todos.shift(); // 先頭を削除

console.log('完了したタスク：', doneTodo);
console.log('残りのToDoリスト：', todos);
JavaScript

ポイント深掘り：

  • shift() は「前から削除」
  • 戻り値は「削除された要素」
  • 「古いタスクから順番に処理する」場面でよく使う

Step 5：pop() で末尾のタスクを削除する

javascript

const canceledTodo = todos.pop(); // 末尾を削除

console.log('今回はやめたタスク：', canceledTodo);
console.log('最終的なToDoリスト：', todos);
JavaScript

ポイント深掘り：

  • pop() は「後ろから削除」
  • 戻り値は「削除された要素」
  • 「後回しにするタスクを削除する」などに使える

Day 16 後半：まとめて動かすテンプレート（ブラウザで実行可能）

以下のテンプレートをブラウザで開き、 コンソールを見ながら配列がどのように変化するかを確認してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 16 後半：配列の追加・削除 練習テンプレート</title>
</head>
<body>
  <h1>Day 16 後半：配列の追加・削除（push / pop / shift / unshift）</h1>
  <p>ブラウザのコンソールを開いて、ToDoリストの変化を確認してください。</p>

  <script>
    console.log('--- 初期のToDoリスト ---');

    const todos = ['メールを返信する', '部屋を片付ける'];
    console.log('初期のToDoリスト：', todos);

    console.log('--- push()：末尾に追加 ---');
    todos.push('本を読む');
    console.log('本を読むを追加後：', todos);

    console.log('--- unshift()：先頭に追加 ---');
    todos.unshift('重要な書類を提出する');
    console.log('重要な書類を提出するを追加後：', todos);

    console.log('--- shift()：先頭を削除（完了扱い） ---');
    const doneTodo = todos.shift();
    console.log('完了したタスク：', doneTodo);
    console.log('残りのToDoリスト：', todos);

    console.log('--- pop()：末尾を削除（今回はやめる） ---');
    const canceledTodo = todos.pop();
    console.log('今回はやめたタスク：', canceledTodo);
    console.log('最終的なToDoリスト：', todos);

    console.log('--- Day 16 後半：配列操作の練習が完了しました ---');
  </script>
</body>
</html>

Day 16 後半のまとめ

Day 16後半では、配列の追加・削除を実践的に扱いながら、

  • push：末尾に追加
  • pop：末尾を削除
  • shift：先頭を削除
  • unshift：先頭に追加

という4つの基本操作を、ToDoリストを使って体で覚えました。

ここで意識してほしいのは、

  • 配列は「並び」だけでなく「動かせるデータ構造」であること
  • 先頭と末尾で使うメソッドが違うこと
  • 削除メソッドは「削除した要素を返す」ので、ログや処理に活用できること

です。

スポンサーリンク
タイトルとURLをコピーしました