JavaScriptの基本を理解しよう〜ES6（2015）以降のモダンな記法〜

const user = {
  name: "オカ",
  age: 31
};
// 従来
const oldType = "僕は" + user.name + "です。年齢は" + user.age + "歳です。";
console.log(oldType);
//僕はオカです。年齢は31歳です。 

// イマドキ
const newType = `僕は${user.name}です。年齢は${user.age}歳です。`;
console.log(newType);
//僕はオカです。年齢は31歳です。 

const message = 
`こんにちは！
JavaScriptの学習はかどっていますか？
一緒に頑張りましょう〜！`;

console.log(message);
//こんにちは！
//JavaScriptの学習はかどっていますか？
//一緒に頑張りましょう〜！ 

const list = ["a", "b"];
const item1 = list[0];
const item2 = list[1];
console.log(item1, item2); // a b

const list2 = ["c", "d"];
const [item3, item4] = list2;
console.log(item3, item4); //c d

const nameList = ["田中", "山田", "佐藤", "鈴木"];
const [name1, name2] = nameList;
console.log(name1);
console.log(name3);

const myInfo = {
  name: "オカ",
  age: "31"
};
const userName = myInfo.name;
const userAge = myInfo.age;
console.log(userName, userAge); //オカ 31

const myInfo2 = {
  name: "おか",
  age: "32"
};
const { name, age } = myInfo2;
console.log(name, age); //おか 32

// 変数名の変更
const myInfo3 = {
  name: "OKA",
  age: "３３"
};
const { name: myName, age: myAge } = myInfo3;
console.log(myName, myAge); // OKA 33

const myInfo = {
  age: "３２"
};
const { name = "ゲスト", age } = myInfo;
console.log(`こんにちは${name}さん。あなたは${age}歳です。`);

function showAddress({ country = "日本", prefecture, city }) {
  console.log(`住所:${country} ${prefecture}県 ${city}市`);
}
const address = {
  prefecture: "愛知",
  city: "半田"
};
showAddress(address);
// 住所:日本 愛知県 半田市 

const list = ["a", "b"];
console.log(list); //["a", "b"]
console.log(...list); // a b

// 配列の結合
const area1 = ["愛知県", "岐阜県"];
const area2 = ["大阪府", "京都府", "滋賀県"];
const newArea = [...area1, ...area2];
console.log(newArea); //["愛知県", "岐阜県", "大阪府", "京都府", "滋賀県"]

const obj3 = [
  {
    title: "ワンピース",
    content: "海賊"
  },
  {
    title: "ドラゴンボール",
    content: "格闘"
  },
  {
    title: "ハンターハンター",
    content: "格闘"
  },
  {
    title: "スラムダンク",
    content: "バスケ"
  }
];

console.log(obj3);

//ログ結果
(4) [Object, Object, Object, Object]
0: Object
title: "ワンピース"
content: "海賊"
1: Object
title: "ドラゴンボール"
content: "格闘"
2: Object
title: "ハンターハンター"
content: "格闘"
3: Object
title: "スラムダンク"
content: "バスケ"

console.log(...obj3);

//ログ結果
{title: "ワンピース", content: "海賊"}
{title: "ドラゴンボール", content: "格闘"}
{title: "ハンターハンター", content: "格闘"}
{title: "スラムダンク", content: "バスケ"}

//同様の結果になります。
console.log(JSON.stringify(obj3));
console.dir(obj3);

//ログ結果
[{"title":"ワンピース","content":"海賊"},
{"title":"ドラゴンボール","content":"格闘"},
{"title":"ハンターハンター","content":"格闘"},
{"title":"スラムダンク","content":"バスケ"}] 

const battle = obj3.filter((item) => item.content === "格闘");
console.log(...battle);

//ログ結果
{title: "ドラゴンボール", content: "格闘"}
{title: "ハンターハンター", content: "格闘"}

//基本形
const country = "日本";
const greeting = "こんにちは";
const info = {
  country: country,
  greeting: greeting
};
console.log(info);

//省略形
const country = "日本";
const greeting = "こんにちは";
const info = {
  country,
  greeting
};
console.log(info);

//ログ結果
{country: "日本", greeting: "こんにちは"}

const fruits = ["りんご", "バナナ", "いちご"];
const newFruits = fruits.map((item, index) =>  
  //実行したい処理
  return `${index + 1}番目の人: ${item}を食べたい`;
});
console.log(newFruits);
// ["1番目の人: りんごを食べたい", "2番目の人: バナナを食べたい", "3番目の人: いちごを食べたい"]

const animals = [
  { id: 1, category: "動物", kind: "犬" },
  { id: 2, category: "動物", kind: "猫" },
  { id: 3, category: "動物", kind: "鳥" }
];

const kinds = animals.map((item) => item.kind);
console.log(kinds); //["犬", "猫", "鳥"]

const numbers = [...Array(60).keys()].map((i) => ++i);
// 1~60までの数字を作成
const oddNumber = numbers.filter((number) => {
  return number % 3 === 0;
});
console.log(oddNumber);

let text = "hello";
let errorMessage = null;
let message = errorMessage ?? text;
console.log(message); //hello

errorMessage = undefined;
message = errorMessage ?? text;
console.log(message); //hello

errorMessage = "エラー！！！！";
message = errorMessage ?? text;
console.log(message); //エラー！！！！

class User {
  constructor(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  greet() {
    console.log(`こんにちは!${this.name}です！`);
  }
}

const oka = new User("オカ", 31);

const oka = new User("オカ", 31, "男");
console.log(oka.name); //オカ
console.log(oka.age); //31
console.log(oka.gender); //男
oka.greet(); //こんにちは!オカです！

const child1 = new User("一郎");
console.log(child1.name); //一郎
console.log(child1.age); //undefined
console.log(child1.gender); //undefined