モダンフロント学習街道～JavaScript編～

var val1 = "var変数";

// var変数は上書き可能
val1 = "var変数を上書き";

// var変数は再宣言可能
var val1 = "var変数を再宣言";

let val2 = "let変数";
// letは上書きが可能
val2 = "let変数を上書き";

// letは再宣言不可能（NG）
let val2 = "let変数を再宣言";

const val3 = "const変数";
// const変数は上書き不可（NG）
val3 = "const変数を上書き";
// const変数は再宣言不可（NG）
const val3 = "const変数を再宣言";

// constで定義したオブジェクトはプロパティ変更が可能
const val4 = {
  name: "じゃけえ",
  age: 28,
};
val4.name = "jak";
val4.address = "Hiroshima";


// constで定義した配列はプロパティ変更が可能
const val5 = ["dog", "cat"];
val5[0] = "bird";
val5.push("monkey");

const name = "じゃけえ";

const age = 28;
//「私の名前はじゃけぇです。年齢は28歳です。」

// 従来の方法
const message1 = "私の名前は" + name + "です。年齢は" + age + "です。";


const message2 = `私の名前は${name}です。年齢は${age}です。`;

// 従来の関数
function func1(str) {
  return str;
}
const func1 = function (str) {
  return str;
};


// アロー関数
const func2 = (str) => {
  return str;
};
// 中の処理が単一式の場合、ブラケット({})とreturnを省略できる
const func3 = (num1, num2) => num1 + num2; 

const myProfile = {
  name: "じゃけぇ",
  age: 28
};

// オブジェクトのプロパティを都度参照する形
const message1 = `名前は${myProfile.name}です。年齢は${myProfile.age}です。`;

// 分割代入の形（オブジェクト版） myProfileオブジェクトから指定のプロパティを抜き出して変数に格納
const { name, age } = myProfile;
const message2 = `名前は${name}です。年齢は${age}です。`;

const myProfile = ["じゃけぇ", 28];
// 配列の要素を都度参照する形
const message3 = `名前は${myProfile[0]}です。年齢は${myProfile[1]}です。`;
// 分割代入の形（配列版）myProfile配列から指定の要素を抜き出して変数に格納
const [name, age] = myProfile;
const message4 = `名前は${name}です。年齢は${age}です。`;

const sayHello = (name = "ゲスト") => console.log(`こんにちは！${name}さん！`);

sayHello("じゃけぇ"); // 結果：こんにちは！じゃけぇさん！

sayHello(); // 結果：こんにちは！ゲストさん！

// 配列の展開
const arr1 = [1, 2];

const sumFunc = (num1, num2) => console.log(num1 + num2);
sumFunc(arr1[0], arr1[1]); // 結果：3 
sumFunc(...arr1); // 結果：3

// まとめる
const arr2 = [1, 2, 3, 4, 5];
const [num1, num2, ...arr3] = arr2; // 結果： num1=1 num2=2 arr3=[3,4,5]

// 配列のコピー,結合
const arr4 = [10, 20];
const arr5 = [30, 40];

// 参照はコピーせず値のみコピーするパターン
const arr6 = [...arr4];
arr6[0] = 100; // arr4の要素は変動なし

// 2つ以上配列の結合 結果：[10,20,30,40]
const arr7 = [...arr4, ...arr5]; 

// 参照もコピーしてしまうパターン
const arr8 = arr4;
arr8[0] = 100; // arr4[0]の値も書き換わってしまう

const nameArr = ["田中", "山田", "じゃけぇ"];

// for文で配列を処理する
for (let index = 0; index < nameArr.length; index++) {
  console.log(`${index + 1}番目は${nameArr[index]}です。`);
}

// mapを使って配列を処理する
const nameArr2 = nameArr.map((name) => {
  return name;
});
console.log(nameArr2); // 結果：["田中", "山田", "じゃけぇ"]

// 第一引数に値、第二引数にインデックスが渡される。
nameArr.map((name, index) => console.log(`${index + 1}番目は${name}です。`));

const newNameArr = nameArr.map((name) => {
  if (name === "じゃけぇ") {
    return name;
  } else {
    return `${name}さん`;
  }
});
console.log(newNameArr); // 結果：[ '田中さん', '山田さん', 'じゃけぇ' ]

// filterを使って配列を処理する
const numArr = [1, 2, 3, 4, 5];
// 奇数の値だけ取り出す
const newNumArr = numArr.filter((num) => {
// 条件式を書いて一致するものだけ返却
  return num % 2 === 1;
});
console.log(newNumArr); // 結果：[1,3,5]

// ある条件 ? 条件がtrueの時 : 条件がfalseの時
const val1 = 1 < 0 ? "trueです" : "falseです";
console.log(val1); // 結果：falseです

// 数値が来た場合は3桁区切りの数値、数値以外が来た場合はエラーメッセージを設定する
const num = 1300;
const formatedNum =
  typeof num === "number" ? num.toLocaleString() : "数値を入力してください";
console.log(formatedNum); // 結果：1,300

// 関数のreturn部分に三項演算子を使用する例
const checkSum = (num1, num2) => {
  return num1 + num2 > 100 ? "100を超えています！" : "許容範囲内です";
};
console.log(checkSum(50, 40)); // 結果：許容範囲内です

// 論理演算子の一般的な使い方
const flag1 = true;
const flag2 = true;

if (flag1 || flag2) {
  console.log("1か2はtrueになります"); // 出力されない
}

if (flag1 && flag2) {
  console.log("1も2もtrueになります"); // 出力される
}


// 論理演算子の本質を理解する
// || は左側がfalseなら右側を返す
const num = null;
const fee = num || "金額未設定です";
console.log(fee); // 結果：金額未設定です

// && は左側がtrueなら右側を返す
const num2 = 100;
const fee2 = num2 && "何か設定されました";
console.log(fee2); // 結果：何か設定されました