こんにちは、フロントエンドエンジニアのザワです。
突然ですが……
気持ち、切り替えられていますか？
私は季節の変わり目に新しい自分を迎える準備として断捨離を行います。そして、気分を一新するために新しい洋服を購入します。頭の先から足の先まで。
要するに、帽子や靴などを含む身にまとうものすべてを新しくします。すると、手っ取り早くテンションを上げられるので、最近3年くらいはこのスタンスでいます。あげぽよです。ただし、異常に気に入るアイテムがあった場合、次の年に同じものが手に入るとは限らないのでタンスの奥にしまうこともあります。
「断捨離ってないじゃないか！」
「例外のルールがあるなんてエンジニアとして失格じゃないか？」
そんな声が聞こえてきますが、厳密なルールというのは崩れると弱いものです。気に入った服があったときにはそのトキメキに感謝して、次の年まで愛でてあげる。柔軟に新しいルールをひとつ増やしてもよいのではないでしょうか。
さて、今回のArrayシリーズは、Array.prototype.spliceを取り上げます。実は私自身、spliceメソッドを使った記憶ははありません。ただ、よく見かけます。特に、デキるエンジニアのソースコードで見かける印象があります。いいなー、spliceメソッドを使いこなしててかっこいいー、と毎回思います。私もかっこよいエンジニアになりたいのでこの機に習得を目指します。
※ ここからの説明は個人的に調べて解釈したざっくりとした説明になります。詳しく知りたい方はこちらへどうぞ
Array.prototype.splice()メソッドとは
spliceという単語がまず聞きなれないので辞書なりgoogle翻訳さんで調べてみます。すると、「接合する」や「継ぎ合わせる」といった言葉が見つかります。
ここからイメージできるのは、配列を継ぎ接ぎするのかなーといった具合です。想像しにくいし日本語も難しいので、習うより慣れろということで、さっそく書いてみましょう。
実装例文
今回は、春の装いから、夏の涼しい装いに衣替えすることを目指していきます。
春の装いを、ニットキャップ・Yシャツ・長いパンツ・下着・長い靴下・スニーカーとしています。はたしてこの人は断捨離をし、あげぽよになれるのでしょうか。
構文としては、第一引数に配列の何番目から開始するかのインデックス値を指定します。第二引数に削除する個数を指定します。第三引数に追加する値を指定します。第三引数以降には値を複数指定できます。
まずは、ニットキャップをベースボールキャップに換えてみたいと思います。夏にニットキャップでは蒸れて周囲に悪影響が出ますよね。気をつけましょう。
ニットキャップはインデックス値が0の位置にあるので、第一引数に「0」を指定します。ニットキャップだけをまずは変えるので第二引数には「1」を指定します。第三引数は追加する要素なので、「ベースボールキャップ」を指定します。
さて、ここまででコンソールに何が表示されるか見てみましょう。
See the Pen
Array.prototype.splice() sample1 by Zawa (@sowork)
on CodePen.
コンソールログを見ると、「ニットキャップ」だけが格納された配列が表示されています。あれ！？ 想像していたのとなにか違う……と思いませんでしたか？ 夏の装いに近づけると思っていたのに、まさかベースボールキャップだけを被った変態になるとは思ってませんでした。
要するに、spliceメソッドの返り値は、削除した要素が格納された配列になります。
では、全身コーディネートはどこにあるのか。元の配列であるitemを見てみましょう。
See the Pen
Array.prototype.splice() sample2 by Zawa (@sowork)
on CodePen.
安心しました。ちゃんと服を着ています。
次は、靴下と靴を一気に買い換えます。
See the Pen
Array.prototype.splice() sample3 by Zawa (@sowork)
on CodePen.
もう一息です。あとは、「Yシャツ」と「長いパンツ」を涼しげな服に買い換えたら完成です。
See the Pen
Array.prototype.splice() sample4 by Zawa (@sowork)
on CodePen.
と思いきや、サンダルに靴下は高等テクなので、靴下は脱ぎましょう。
See the Pen
Array.prototype.splice() sample5 by Zawa (@sowork)
on CodePen.
さいごの例では、第一引数にマイナスの値を指定して、配列の後ろから2番目の「長い靴下」から1つを取り除いています。
これで夏服が完成しました。涼しげになりましたね。
終わりに
エンジニアとして働き始めて約4年程になりますが、右肩上がりに楽しさが増していると感じる今日この頃です。経験の中で良いと感じるものは残しながら、興味を持ったものは新しく取り入れていく。好きこそものの上手なれとはよく言われますが、楽しいと感じているときが知識も技術も伸びると感じています。
それでは良い制作ライフを！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
