4歳娘「パパ、懐かしいJavaScript書いてるね！」

リモートワーク中ワイ

ワイ「お、社長からメールや！」
ワイ「また何か仕事をさせる気やな・・・！」

よめ太郎「（そらせやろ）」

ワイ「どれどれ・・・」

["たかし", 37, 173, 75]
↑この配列を元にオブジェクトを作ってくれ。

配列の中の4つの値は、それぞれ名前・年齢・身長・体重やで。

ワイ「ふーん」
ワイ「何やこの意味わからん仕事」
ワイ「まあええか、やってみよ」

やってみる

ワイ「まず、元の配列は・・・」

const array = ["たかし", 37, 173, 75];

ワイ「↑こうやな」
ワイ「ほんで、この配列の中の4つの値は」
ワイ「それぞれ名前・年齢・身長・体重を表しとるんやったな」
ワイ「ほな、分かりやすいように名前をつけたろか」

const array = ["たかし", 37, 173, 75];

const name = array[0];
const age = array[1];
const height = array[2];
const weight = array[3];

ワイ「↑こうやな」

娘（4歳）「パパ、懐かしいJavaScript書いてるね！」

ワイ「・・・と言いますと？」

分割代入

娘「いまどきは、分割代入を使って↓こう書けばいいんじゃない？」

const array = ["たかし", 37, 173, 75];

const [name, age, height, weight] = array;

ワイ「ファッ！？」
ワイ「これでname, age, height, weightっていう4つの変数を定義できるんか」

娘「そうだよ」
娘「ちなみに、nameとageだけ使いたい場合は」

const [name, age] = array;

娘「↑こうも書けるよ」

ワイ「おお、後ろのほうの値は使わんこともできるんか」

娘「うん」
娘「逆に、後ろのほうの値だけを使うこともできるよ」

const [, , height, weight] = array;

娘「↑こうだね」

ワイ「おお」
ワイ「ありがとう、娘ちゃん・・・」

そこからオブジェクトを作る

ワイ「ほんで、オブジェクトを作らなあかんのやったな」
ワイ「ほな・・・」

const takashi = {
  name: name,
  age: age,
  height: height,
  weight: weight
};

ワイ「↑これでええか」

娘「もうちょっと楽に書けるよ」

const takashi = {
  name,
  age,
  height,
  weight
};

娘「↑これでいいんだよ」

ワイ「おお」
ワイ「変数名がキー名と同じ場合は」
ワイ「そう書くだけでええんやね」

社長から次の指示

追加でお願いや。

["ひろゆき", 48, 175, 65]
↑この配列もオブジェクトにしてほしいんや。

ワイ「また似たような仕事やな」
ワイ「これはさっきの処理の使い回しでイケるな」
ワイ「ほな、さっきの処理を関数にして、使い回せるようにしておこか」
ワイ「配列を受け取って、オブジェクトを返す関数やから・・・」

const makePerson = (array) => {
  const [name, age, height, weight] = array;

  return {
    name,
    age,
    height,
    weight
  };
}

ワイ「↑こうやな！」
ワイ「人間っぽいオブジェクトを作るから、関数名はmakePersonや！」
ワイ「このmakePersonにさっきの配列を渡してやればええわけやから・・・」

const hiroyuki = makePerson(["ひろゆき", 48, 175, 65]);

ワイ「↑こうや！」

娘「さっそく分割代入を使ってるんだね」
娘「さすがパパ！」

ワイ「ゲヘヘ」

娘「でもね、分割代入は引数を受け取るときにも使えるから」

const makePerson = ([name, age, height, weight]) => {
  return {
    name,
    age,
    height,
    weight
  };
}

娘「↑こうでいいんだよ」

ワイ「おお、楽チンやな」
ワイ「ん？社長からまたメールや」

またまた追加指示

さっき作った人間オブジェクトを元に
「こんにちは！私はたかし！37歳だよ！」っていうテキストを生成する、
挨拶関数を作ってくれや。

ワイ「挨拶関数か。楽勝やな！」
ワイ「人間オブジェクトを受け取って、文字列を返す関数やから・・・」

const makeGreetingText = (person) => {
  const name = person.name;
  const age = person.age;
  return "こんにちは！私は" + name + "！" + age + "歳だよ！";
};

ワイ「↑こうやな！」

娘「パパ、オブジェクトからも分割代入できるよ」

ワイ「と言いますと？」

娘「つまり・・・」

const makeGreetingText = ({name, age}) => {
  return "こんにちは！私は" + name + "！" + age + "歳だよ！";
};

娘「↑これでいいってこと」

ワイ「Oh...素敵やん」
ワイ「ってことは例えば・・・」

const {name, age} = person;

ワイ「↑こういう書き方もできるんやね」

娘「そうそう」

ワイ「でも、person.nameとperson.ageを」
ワイ「userNameとかuserAgeみたいな、ちょっと違う名前の変数に入れたい場合は・・・」

const userName = person.name;
const userAge = person.age;

ワイ「↑こう書くしかないんかな・・・？」

娘「ええとね」
娘「その場合は・・・」

const {name: userName, age: userAge} = person;

娘「こう書けばいいんだよ」

ワイ「おお、オブジェクトのプロパティ名と異なる名前の変数にもできるんや」

娘「うん」
娘「あとね・・・」
娘「文字列と変数を連結させてる部分も・・・」

テンプレート文字列

娘「↓こっちの方がいいかも」

return `こんにちは！私は${name}！${age}歳だよ！`;

娘「テンプレート文字列ってやつだね」

ワイ「ほええ、文字列の中で変数の中身を展開してくれるんやね」
ワイ「なんや、PHPみたいやな」

またまたまた追加指示

ワイ「また社長からメールが来たで」

たかしには双子の弟がおるんや。
名前はいちろうや。
いちろうもオブジェクトにしてあげてや。

名前以外は、たかしと全く同じや。

ワイ「たかしの弟がいちろうって、どないなっとんねん」
ワイ「たかし、無かったことにされとるやないか」
ワイ「まあええわ」
ワイ「たかしをコピーして作ればええやろ」
ワイ「配列をコピーするには、↓こうやな！」

const array = ["たかし", 37, 173, 75];
const copiedArray = [].concat(array);

ワイ「配列が持っとるconcatメソッドを使って」
ワイ「空配列に、コピー元の配列を連結してやると」
ワイ「配列をコピーできるんや」

娘「それでもいいけど・・・」

スプレッド構文

娘「↓こうも書けるよ」

const array = ["たかし", 37, 173, 75];
const copiedArray = [...array];

娘「...arrayはスプレッド構文ってやつだね」
娘「配列を展開してくれるやつ」

ワイ「配列を展開・・・？」
ワイ「展開とは・・・？」

娘「ええと」

["たかし", 37, 173, 75]

娘「↑この配列を」

...["たかし", 37, 173, 75]

娘「↑こうスプレッド構文で展開すると」

"たかし", 37, 173, 75

娘「↑こうしてくれる感じだね」
娘「両端にある[と]を取ってくれる感じ」
娘「だから、展開」

ワイ「なるほど、たしかに展開って感じやな」
ワイ「つまり」

const copiedArray = [...array];

ワイ「↑これはどうなるんや？」
ワイ「arrayには["たかし", 37, 173, 75]が入っとるわけやから」

const copiedArray = [...["たかし", 37, 173, 75]];

ワイ「↑こういうことやな？」
ワイ「ほんで、...が付いとるから」
ワイ「["たかし", 37, 173, 75]が展開されて」
ワイ「"たかし", 37, 173, 75になって」

const copiedArray = ["たかし", 37, 173, 75];

ワイ「↑こういう意味になるってことか」
ワイ「だから配列がコピーされるんやな」

娘「そうそう」
娘「でも、一段階だけのシャローコピー（浅いコピー）だから注意してね？」
娘「配列の中に、更に配列が入ってたり、オブジェクトが入っている場合は」
娘「完全に複製されるわけではないから」

ワイ「せやったな」

娘「スプレッド構文は、複数の配列を連結させるときにも使えるよ」

const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [7, 8, 9];

const abc = [...a, ...b, ...c];

娘「↑こうすると」

[1, 2, 3, 4, 5, 6, 7, 8, 9]

娘「↑こんな配列ができあがるの」

ワイ「おお、concatメソッドより直感的やな！」
ワイ「書きやすいし、読みやすい気がするわ！」

双子の弟「いちろう」を作る

ワイ「これで双子の弟『いちろう』を作ることができるな」

const array = ["たかし", 37, 173, 75];
const copiedArray = [...array];
copiedArray[0] = "いちろう";

ワイ「↑こんな感じで、名前だけ"いちろう"に変えてやって・・・」

const ichiro = makePerson(copiedArray);

ワイ「makePerson関数でオブジェクトにしてやればええんや」

娘「それでもいいけど、さっきtakashiっていうオブジェクトを作ったんだから」
娘「takashiをコピーしてnameだけ変えてもいいんじゃない？」

ワイ「そうか」

const ichiro = takashi;
ichiro.name = "いちろう";

ワイ「↑こうやな！」

娘「いや、それだとtakashiもichiroも同じオブジェクトを指していることになっちゃうから」
娘「takashiのnameも"いちろう"になっちゃうよ」
娘「ていうか同一人物になっちゃうじゃん」

ワイ「まあ、双子なんやし、同一人物みたいなもんやろ・・・」

娘「いやいや全然違うでしょ」
娘「タッチファンに◯されるよ？」

ワイ「なるほど、想像してみたら確かにマズイわ」
ワイ「ほな、ちゃんとオブジェクトを複製せなあかんのやな」

const ichiro = Object.assign({}, takashi);
ichiro.name = "いちろう";

ワイ「↑こうやな！」
ワイ「Object.assignメソッドで」
ワイ「空オブジェクトにtakashiをマージしてやることで」
ワイ「takashiの複製を作ってやんねん」

娘「そんなときも、さっきの配列の時みたいに」
娘「スプレッド構文が使えるよ！」

const ichiro = {...takashi};
ichiro.name = "いちろう";

娘「↑こうだね」
娘「さらに・・・」

const ichiro = {
  ...takashi,
  name: "いちろう"
};

娘「↑こうも書けるよ！」

ワイ「ええ、何やその書き方」
ワイ「えらいスッキリ書けるんやな」
ワイ「ええと、スプレッド構文は両端のカッコを外してくれるイメージやったな・・・」

const ichiro = {
  ...takashi,
  name: "いちろう"
};

ワイ「↑このtakashiには・・・」
ワイ「{name: "たかし", age: 37, height: 173, weight: 75}が入ってるから・・・」

const ichiro = {
  ...{
    name: "たかし",
    age: 37,
    height: 173,
    weight: 75
  },
  name: "いちろう"
};

ワイ「↑こんなイメージか」
ワイ「ほんで、スプレッド構文が両端のカッコを外して展開してくれるから・・・」

const ichiro = {
  name: "たかし",
  age: 37,
  height: 173,
  weight: 75,
  name: "いちろう"
};

ワイ「こんなイメージやな」
ワイ「あれ、nameが2つになってしもうたで」

娘「その場合は、より後ろにあるnameで上書きされるよ」

ワイ「ほな結局・・・」

const ichiro = {
  ...takashi,
  name: "いちろう"
};

ワイ「↑この書き方をすると」

const ichiro = {
  name: "いちろう",
  age: 37,
  height: 173,
  weight: 75
};

ワイ「↑こういう感じになるわけか」
ワイ「オブジェクトをコピーしつつ、nameだけ上書き、みたいな」
ワイ「便利な時代になったもんやなぁ・・・」

娘「これもシャローコピーだから気をつけてね」

次は何をする

ワイ「ほんで結局、このtakashiやichiroを使って」
ワイ「何をすればええんやろ」
ワイ「メールで社長に聞いてみよか」

ワイ「takashiとichiro作りましたで」
ワイ「次は何をするんか教えてや」

ワイ「これでよし、と」
ワイ「おっ」
ワイ「さっそくお返事が来たで」

社長「いや何をするとかではないねん」
社長「ただちょっと・・・」
社長「・・・作ってみてほしかったんや」

ワイ「・・・」
ワイ「何やそれ！」
ワイ「酒飲む時間がなくなってもうたやんけ！」

よめ太郎「レガシー記法を脱却できたし」
よめ太郎「酒量も減るし、よかったやん」

〜おしまい〜

この記事もよろしくやで！

4歳娘「パパ、constしか使わないで？」

参考文献

• 分割代入 - JavaScript | MDN
• テンプレート文字列 - JavaScript | MDN
• 代入 - uhyohyo.net