Help us understand the problem. What is going on with this article?

魔法JS☆あれい 第1話「popでpushした、ような……」

登場人物

丹生(にゅう)あれい
魔法少女「魔法(マジカル)JS(女子小学生)☆あれい」として活動中。

イテレー太
正体不明の魔法生物。

目次

第1部「ミューテーター・メソッド編」
* 第1話「popでpushした、ような……」
* 第2話「shiftはとってもunshiftって」
* 第3話「もうsortもreverseも怖くない」
* 第4話「fillも、spliceも、copyWithinもあるんだよ」

第2部「アクセサ・メソッド編」
* 第5話「joinなんて、concatなわけない」
* 第6話「indexOfなの絶対lastIndexOf」
* 第7話「includesのsliceと向き合えますか?」

第3部「イテレーション・メソッド編」
* 第8話「filterって、ほんとfindとfindIndex」
* 第9話「someなの、everyが許さない」
* 第10話「もうmapにもforEachにも頼らない」
* 第11話「最後に残ったreduceとreduceRight」
* 最終話「flatの、最高のflatMap」

pop()

イテレー太「あれい、すべての前置きを端折るけど、今戦闘の真っ最中だよ!」
あれい「楽してんじゃねえよこの駄犬が」
イ「犬じゃなくてイテレータ型魔法生物だよ! そして敵を倒すにはあれいの配列魔法が必要なんだ!」
あ「人の話を聞けこの雑種」
イ「僕が魔法世界から召喚したデータを、あれいの配列魔法を使って、敵の弱点に合わせた値に変換してreturnする事で、ダメージを与えることができるんだ!」
あ「なら最初からまともなデータを用意しろよポンコツ」
イ「さて、今回僕が召喚したデータは……これだよ!」

items = ['羽二重餅', '水ようかん', '梅月せんべい'];

あ「……それ、全部福井の銘菓じゃねえか。相変わらず福井県民丸出しだな」
イ「そして、今回の敵の弱点は、『配列の最後の要素』だよ! さあ、配列の最後の要素をreturnしてぶつけるんだ!」
あ「だから最後の要素だけ召喚しろっつってんだろこのボロ雑巾」
イ「頼んだよ! あれい!」
あ「面倒くせえなあ……」

return items.pop();

イ「おおっ! やったよ、あれい! 梅月せんべいが炸裂したよ! 梅月せんべいで敵をやっつけたよ!」
あ「お前ちょっと黙ってろ」

解説

pop() メソッドは、配列を操作するメソッドの中でも最も基本的なものです。
MDNによると……

pop() メソッドは、配列から最後の要素を取り除き、その要素を返します。このメソッドは配列の長さを変化させます。

つまり、積み重ねられたカードから、一番上に乗っているカードを1枚取って、そのカードを相手に返すようなイメージです。配列というスタック構造のデータの操作としては、最も直感的にわかりやすい動きですね。

push()

イ「おっと、次の敵が出てきたよ!」
あ「どうなってるんだこの街は」
イ「さて、僕が魔法世界から召喚したデータは、今こんな状態になっているよ!」

items = ['羽二重餅', '水ようかん'];

あ「そうだな」
イ「そして、新たに魔法世界から召喚したデータは、これだ!」

newItem = '五月ヶ瀬';

イ「このデータを、元の配列の最後に追加した上で、その最後の要素を敵にぶつけるんだ!」
あ「……それこそ直接ぶつけりゃいいじゃねえか。バカなのかお前は」
イ「いいから! 急いで、あれい!」
あ「面倒くせえなあ……」

return items.push(newItem);

あ「……おい、効いてないぞ」
イ「わははは、引っかかったね! push()メソッドの戻り値は、配列の要素の数なんだよ!」
あ「お前どっちの味方なんだよ」

解説

push() メソッドも、最も基本的な操作の一つですね。
またまたMDNによると……

push() メソッドは、配列の末尾に 1 つ以上の要素を追加することができます。また戻り値として新しい配列の要素数を返します。

つまり、積み重ねられたカードの上に、さらにカードを乗せるようなイメージです。これも直感的にわかりやすい動きですね。
また、このメソッドの戻り値は、配列の要素の数です。例えば、空の配列に1つの要素をpush()した場合、戻り値は1になります。


イ「さて、ピンチだよ! どうする、あれい!」

return items[items.push(newItem)-1];

あ「これでいいのか」
イ「あ、うん……攻撃できたね」
あ「だからどっちの味方なんだよ」

return items.slice(0, items.push(newItem)).pop();

あ「これでもいいのか」
イ「あ、slice()とかはもっと後の話で出てくるからまだやめて……」

次回予告

shiftは、配列から最初の要素をなんでも一つ取り除いてあげる。
なんだって構わない。どんな要素だって取り除いてあげられるよ。

第2話 shiftはとってもunshiftって

8amjp
福井市に住むSE・プログラマ。Kindleストアで技術系異世界ファンタジー小説「Redmineで始める異世界人心掌握術」販売中。JavaScript学園コメディ「恋に落ちるコード.js」電子書籍化準備中。
https://8am.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした