こんにちは、フロントエンドエンジニアのザワです。
突然ですが、みなさんは「繋がり」を大事にしていますか？
老後のことを考えると、人はひとりじゃ生きていけませんから、やはり誰かと手と手を取り合って生きていかなければなりません。今回のArrayシリーズは、そんな友達100人作りたいあなたにぴったりのメソッド、Array.prototype.concatをご紹介します。
※ここからの説明は個人的に調べて解釈したざっくりとした説明になります。詳しく知りたい方はこちらへどうぞ
Array.prototype.concat()メソッドとは
値を連結させて新しい配列を作るメソッドです。
Array.prototype.concat。発音はコンカット？ コンカト？ とにかく物理的に固そうな名前ですね。辞書で調べてみると、concatは見つからなかったのですが、concatenate、連結させる、という意味を見つけることができました。
さてさて、ではでは、concatメソッドを使って友達100人を作っていきましょう。早速例文です。
実装例文
See the Pen
Array.prototype.concat() sample1 by Zawa (@sowork)
on CodePen.
古くからの友人3人と新しく出会った友人3人を合わせて、合計6人の友達ができました。学生時代はこんな感じで友達の輪が簡単に広がっていったものです。感慨深いですね。
さて、コンソールログを見ると2つの配列が1つに連結されてますね。先ほどの例では、文字列で構成された配列同士をつなぎ合わせました。
今度は、数値の配列と文字列の配列を連結してみましょう。
See the Pen
Array.prototype.concat() sample2 by Zawa (@sowork)
on CodePen.
コンソールログを見ると、文字列の要素3つの後に、数値の要素が3つ続いているのがわかると思います。友人3人の名前と誰の身長かもわからない数値がミックスされて1つの配列になりました。
引数を加えてBooleanもミックスしてみましょう。
See the Pen
Array.prototype.concat() sample3 by Zawa (@sowork)
on CodePen.
コンソールログを見てみると、身長を表しているであろう数値の後に、trueが3つ追加されているのがわかると思います。3人とも嘘つきであると思っているのでしょうか。自分の廃れ具合に嫌気がさしてきますね。
次はconcatメソッドの総決算！ 現実逃避して空想上で友達100人作ってみましょう。
See the Pen
Array.prototype.concat() sample4 by Zawa (@sowork)
on CodePen.
コンソールログを見てみましょう。あっという間に、ゾッとするほど友達が増えています。
10人組のグループ10組の人間、みんなをconcatすると友達が100人できてしまいました。あくまで妄想に過ぎませんが、幸福度が上がった気がします。
その後の人間関係のことまで考えるのはやめときましょう。
終わりに
最後はwe are the world状態でしたが、今回も妄想ストーリーを通して、concatメソッドという武器を得ました。
地道な道のりですが、インスピレーションは努力から生まれるはず！ ここから自分の成長に繋がると信じて、この連載を続けていきたいと思います。それでは良い制作ライフを！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
