魔法JS☆あれい 第2話「shiftはとってもunshiftって」

登場人物

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

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

• 第1話「popでpushした、ような……」

shift()

イテレー太「あれい、また説明をキレイさっぱり省略するけど、今戦闘の真っ最中だよ！」
あれい「また楽しやがったなこの駄犬」
イ「そして、話の流れ的に勘付いてるとは思うけど、今回の敵の弱点は『配列の最初の要素』だよ！」
あ「相変わらずマイペースだな。皮剥ぐぞ」
イ「さて、今回僕が魔法世界から召喚したデータは……これだよ！」

items = ['へしこ', 'ソースカツ丼', '焼き鯖寿司'];

あ「今度は福井の名物かよ。福井駅前の居酒屋のメニューか」
イ「さあ、あれいの配列魔法で、敵の弱点である『配列の最初の要素』をreturnして倒してよ！」
あ「面倒くせえなあ……」

return items.shift();

イ「おおっ！　やったよ、あれい！　へしこが炸裂したよ！　福井名産へしこで敵が苦しんでるよ！」
あ「だからお前黙ってろ。口縫うぞ」

解説

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

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

前回のpop()では『積み重ねられたカード』に例えましたが、今回は『タピオカ店の行列に並んでいる人達』をイメージすると良いかもしれません。つまり、shift() メソッドは、行列の一番前の人を呼び出すようなイメージです。これも、配列のもう一つの側面である『キュー』データ構造に対する、直感的でわかりやすい動きです。

unshift()

イ「では、続いての敵にいってみましょう」
あ「ラジオパーソナリティーかよ」
イ「さて、僕が魔法世界から召喚したデータは、今こんな状態になっているよ！」

items = ['ソースカツ丼', '焼き鯖寿司'];

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

newItems = ['越前おろしそば', 'ボルガライス'];

イ「このデータを……」
あ「元の配列の最初に追加した上で、その最初の要素を敵にぶつけりゃいいのか？」
イ「……なんでそんな無駄なことするの？」
あ「お前が前回そうしろっつったんだろ。大根おろしを目にぶっかけるぞ」
イ「まあまあ。今回は、元の配列の最初に追加して、その配列の要素数をreturnすればいいよ！」
あ「面倒くせえなあ……」

return items.unshift(newItems);

イ「やったね、あれい！　4で敵が苦しんでるよ！」
あ「いまだに仕組みが良くわからんな」

解説

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

unshift() メソッドは、配列の最初に 1 つ以上の要素を追加し、新しい配列の長さを返します。

つまり、タピオカ店の行列の一番前に、何人かが割り込みするようなイメージです。とても理不尽ですね。
また、このメソッドの戻り値は、push()メソッドと同じく、新しい配列の要素の数になります。

次回予告

無理して並び替えてるだけで、処理が遅くてもメモリを食い潰しても誰にも相談できないし、一人ぼっちで泣いてばかり。
良いものじゃないわよ、sortなんて。

第3話 もうsortもreverseも怖くない