モダンJavaScriptの基本

React学習にあたって最低限抑えておきたい基本JS

1. 変数宣言

① var : 再代入○ 再宣言○
② let : 再代入○ 再宣言×
③ const : 再代入× 再宣言×

constの特性

・ほとんどconstしか使わない
・オブジェクト型/配列型はプロパティの変更が可能

const val1 = {
  name: "ナオキ",
  age: 22,
};
val1.name = "naoki"; //nameプロパティを変更
val1.address = "Sapporo"; //addressプロパティを追加
console.log(val1);

const val2 = ["cat", "dog"];
val2[0] = "bird"; //0番目をbirdに変更
val2.push("monkey"); //文字列を追加
console.log(val2);

2.テンプレート文字列

文字列の中でJSの変数を展開したい時は${}に格納する

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

//テンプレート文字列を用いた方法
const message = `私の名前は${name}です。年齢は${age}です。`;

3.アロー関数

手順
const func = () => {}
①constで変数を定義
②()で引数を用意し=>アローを記述
③{}で関数の中身を記述

//アロー関数
const func = (str) => {
    return str;
};
console.log(func("funcです。"));

//従来の関数
function func(str) {
  return str;
}

//または
const func = function (str) {
  return str;
};
console.log(func1("func1です。"));

アロー関数の特徴

・引数が一つの場合は()を省略できる
const func = str => { return str; };
・関数の中身が単一式の場合は{return}を省略できる
const func = (str) => str;

2つの引数を受け取ってその和を求め返却する場合の記述

//単一式の省略記法
const func = (num1, num2) => num1 + num2;
console.log(func(10, 20));

4.分割代入

下記のように複数値がある場合、毎回myProfile.hogeと書くのが大変
そのような時に使えるのが分割代入
・オブジェクトの分割代入
・配列の分割代入

オブジェクトの分割代入

分割代入を使わない場合

const myProfile = {
  name: "ナオキ",
  age: 22,
};
const message = `名前は${myProfile.name}です。年齢は${myProfile.age}歳です。`;

分割代入を使う場合

//myProfileからnameとageを取り出す
const { name, age } = myProfile;　
const message = `名前は${name}です。年齢は${age}歳です。`;

配列の分割代入

分割代入を使わない場合

const myProfile = ["ナオキ", 22];
const message3 = `名前は${myProfile[0]}です。年齢は${myProfile[1]}歳です。`;

分割代入を使う場合

const [name, age] = myProfile;
const message = `名前は${name}です。年齢は${age}歳です。`;

5.デフォルト値

以下のような場合、引数に何も入っていないとconsoleにはundefindと表示される

const sayHello = (name) => console.log(`こんにちは${name}さん!`);
sayHello("ナオキ");

//引数を指定しない
const sayHello = (name) => console.log(`こんにちは${name}さん!`);
sayHello();

値が渡ってない時でもある程度の機能はさせたい時にデフォルト値を指定する

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

//あくまでデフォルトのため引数が渡っていればそれが表示される
const sayHello = (name = "ゲスト") => console.log(`こんにちは${name}さん!`);
sayHello("ナオキ");

オブジェクトの分割代入を行うときのデフォルト値

nameプロパティが設定されていない時undefindeではなくデフォルト値を表示させる

const myProfile = {
  age: 22,
};
const { age, name = "ゲスト" } = myProfile; //分割代入
console.log(age);
console.log(name);

6.オブジェクトの省略記法

プロパティの名前と変数の名前が一致する時省略できる

const name = "ナオキ";
const age = "22";

const myProfile = {
  name: name, //変数nameに格納した値を格納
  age: age, //変数ageに格納した値を格納
};
console.log(myProfile);

//省略後
const name = "ナオキ";
const age = "22";

const myProfile = { name, age };
console.log(myProfile);

7.スプレッド構文

...と書く構文

①配列の展開に使う方法

配列の中身を展開して順番に表示してくれる

const arr1 = [1, 2];
console.log(arr1);　//consoleの結果 [1, 2]
console.log(...arr1);　//consoleの結果 1 2

const sumFunc = (num1, num2) => console.log(num1 + num2);
sumFunc(arr1[0], arr1[1]);

例えば2つの引数を受け取ってその和を求め返却する場合

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

//スプレッド構文を使うと
sumFunc(...arr1); //consoleの結果 3

②配列の値をまとめる方法

const arr2 = [1, 2, 3, 4, 5];
const [num1, num2, ...arr3] = arr2;
console.log(num1);　//consoleの結果 1
console.log(num2);　//consoleの結果 2
console.log(arr3);　//consoleの結果 [3, 4, 5]

③配列のコピーと結合

const arr4 = [10, 20];
const arr5 = [30, 40];
const arr6 = [...arr4];　//consoleの結果 [10, 20]

const arr7 = [...arr4, ...arr5]; //consoleの結果 [10, 20, 30, 40]

8.mapとfilterを使った配列の処理

従来のfor分で配列を記述するとやや複雑

const nameArr = ["田中", "山田", "ナオキ"];
for (let index = 0; index < nameArr.length; index++) {
  console.log(nameArr[index]);　//配列の値を順に参照している
}

①mapメソッドを使うと…

const nameArr = ["田中", "山田", "ナオキ"];
nameArr.map(name) => console.log(name); // consoleの結果 田中 山田 ナオキ
//for文と同じ結果になる

mapメソッドで新たに配列を生成できる

const nameArr = ["田中", "山田", "ナオキ"];
const nameArr = nameArr.map((name) => {
  return name;
});
console.log(nameArr); // consoleの結果 [田中, 山田, ナオキ]

②filterメソッドを使うと…

ある配列から特定の要素だけ抜き取って、それで配列を生成したい時に使う
例えば奇数の要素を抜き取って配列を生成する場合

const numArr = [1, 2, 3, 4, 5];
const newNumArr = numArr.filter((num) => {
  return num % 2 === 1;
});
console.log(newNumArr);　 // consoleの結果 [1, 3, 5]

③mapを使って配列の各要素をn番目としていく場合

const nameArr = ["田中", "山田", "ナオキ"];
nameArr.map((name, index) => console.log(`${index + 1}番目は${name}です`));
/* 
    1番目は田中です
    2番目は山田です
    3番目はナオキです
*/

④一部の要素に敬称をつけたいなどの場合

mapを使う

const nameArr = ["田中", "山田", "ナオキ"];
const newNameArr = nameArr.map((name) => {
    if (name === "ナオキ") {
        return name;
    } else {
        return `${name}さん`;
    }
})
console.log(newNameArr); // consoleの結果 [田中さん, 山田さん, ナオキ]

9.三項演算子

ある条件 ? 条件がtrueの時 : 条件がfalseの時という処理
つまりif {} elseの処理を１行で行うもの

const val1 = 1 > 0 ? "trueです" : "falseです";
console.log(val1);　 // consoleの結果 trueです

「こういう時に~したい、でもああいうときは…したい」
そんな場合に三項演算子を使うことができる。

10.論理演算子

&&と||の2種類がある

const flag1 = true;
const flag2 = false;

if (flag1 || flag2) {
  console.log("1か2はtrueになります");
}
if (flag1 && flag2) {
  console.log("1も2もtrueになります");
}

// ||は左側がtruthyの時その時点で返却する
const num = 100;
const fee = num || "金額は未設定です";
console.log(fee);

// &&は左側がfalsyの時その時点で返却する
const num2 = null;
const fee2 = num2 && "何か設定されました";
console.log(fee2);