【JavaScript】基礎　モダンJavaScriptの基礎から始める挫折しないためのReact入門

2021.11.09

React学習に取り掛かる前に学んでおきたいJavaScriptの基礎について、こちらのUdemy教材で学習したことをまとめました。

「モダンJavaScriptの基礎から始める挫折しないためのReact入門」

目次
  1. アロー関数
  2. 分割代入
  3. デフォルト値、引数など
  4. スプレッド構文（…のこと）
  5. mapを使った配列
  6. filter
  7. 三項演算子
  8. &&と||の本当の意味

アロー関数

const func2 = (str) => {
  return str;
};
console.log(func2("func2です"));

引数strに”func2です”が渡され、rerurnで返される。

アロー関数の特徴

上記のreturnは省略でき、省略すると以下のように波括弧は不要となる。

逆に、波括弧で囲ったときにはreturnが必要

const func2 = (str) => str;
console.log(func2("func2です"));

関数fun2に引数strを設定して、consoleで呼び出すと、strが出力される。

分割代入

オブジェクトから指定のプロパティを取り出してconstに定義することができる。

こうすることで冗長な書き方を解消できる。

const { 取り出したい変数, 取り出したい変数 } = オブジェクト名;

const myProfile = {
  name: "太郎",
  age: 30
};

const { name, age } = myProfile;
const message2 = `名前は${name}です。年齢は${age}歳です。`;
console.log(message2);

分割代入は配列でも使うことができる。

配列の場合は、オブジェクトのように名前が無いので、順番で受け取る。

そのため、順番が大事になってくる。

今回の例では任意に付けた名前、nameとageという変数名を設定する。

const myProfile = ["太郎", 30];

const [name, age] = myProfile;
const message4 = `名前は${name}です。年齢は${age}です。`;
console.log(message4);

デフォルト値、引数など

JavaScriptの場合、引数に何も値が入っていない場合、初期状態はundefinedになってしまう。

そのため、引数に何も入っていない場合はデフォルト値を設定する。

設定の仕方

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

引数のnameに直接”ゲスト”を設定する。

スプレッド構文（…のこと）

配列の展開

通常の配列の展開だと、、、

const arr1 = [1, 2, 3];
console.log(arr1);

> [1, 2, 3]

配列のまま出力される。

スプレット構文だと、、、

const arr1 = [1, 2, 3];
console.log(...arr1);

> 1 2 3

配列をまとめる

const arr2 = [1, 2, 3];
const [num1, ...arr3] = arr2;     ここのarr2はオブジェクト名。配列の分割代入でやった内容
console.log(num1);
console.log(arr3);

> 1
> [2, 3]

配列のコピー

const arr4 = [10, 20];
const arr5 = [30, 40];

const arr6 = [...arr4];
console.log(arr6);

> [10, 20]

NGなコピーの仕方

以下のコピーの仕方だと、共有状態となってしまう。

const arr8 = arr4;
arr4[0] = 100;
console.log(arr8);
console.log(arr4);

>[100, 20]
>[100, 20]

変更したいのはarr4だけなのに、arr8の値も変更されてしまう。

スプレット構文でのコピーだと、基の配列は影響を受けない。

const arr4 = [10, 20];
const arr5 = [30, 40];

const arr6 = [...arr4];
arr6[0] = 100;
console.log(arr6);
console.log(arr4);

> [100, 20]
> [10, 20]

arr6はarr4をコピーしているが、arr6はarr4の影響を受けていない。

配列の結合

const arr4 = [10, 20];
const arr5 = [30, 40];

const arr7 = [...arr4, ...arr5];
console.log(arr7);

> [10, 20, 30, 40]

mapを使った配列

mapによりfor文は使わなくなった。

for文を使う場合

const nameArr = ["加藤", "佐藤", "内藤"];

for (let index = 0; index < nameArr.length; index++) {
  console.log(nameArr[index]);
}

> 加藤 
> 佐藤 
> 内藤

mapを使うと

return結果に基づいて新しい配列を生成する
const nameArr = ["加藤", "佐藤", "内藤"];

const nameArr2 = nameArr.map((name) => {
  return name;
});
console.log(nameArr2);

> ["加藤", "佐藤", "内藤"]

配列を順番に取り出し、配列に入れているため、このような出力となる。

配列をループして処理する
const nameArr = ["加藤", "佐藤", "内藤"];

nameArr.map((name) => console.log(name));

> 加藤 
> 佐藤 
> 内藤

配列の要素が順番に引数に設定され、関数内で処理する。

filter

配列に対しある条件に一致するものだけ取り出す。

配列から奇数の値のみ取り出す。

ここの書き方はmapと同じ。

returnの中に条件式を書いて、その条件に一致するものだけ返す。

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

> [2, 4]

入ってきた値を2で割って1になるものだけ返す。

三項演算子

条件 ? 条件がtrueの時 : 条件がfalseの時


const val1 = 1 < 0 ? 'true' : 'false';
console.log(val1);

> false

関数のreturnに三項演算子を使う例

const checkSum = (num1, num2) => {
  return num1 + num2 > 100 ? "100より大きい" : "100より小さい";
};
console.log(checkSum(50, 40));

&&と||の本当の意味

これらの本当の意味は、”且つ”、”または”ではなかった。

&&

左側がtrueなら右側を返し、falseなら左側を返す。

結果的に、右側がtrueならtrueに、falseならfalseになる。

||

左側がtrueなら左側を返し、falseなら右側を返す。

コメント