🌟

【忘備録】Reactの基礎

に公開
React
tech

Reactで頻出するJavaScriptの機能

変数

  • let
    • 変数の上書き可能。変数の再宣言は不可。
  • const
    • 変数の上書きも再宣言も不可能。
    • オブジェクトや配列は値を変更可能。

テンプレート文字列

文字列の中で、式や変数の値をそのまま埋め込むことができる。

  • 従来の方法
const name = "太郎";
const age = 23;

const message1 = "私の名前は"+name+"です。年齢は"+age+"です";
console.log(message1);
  • テンプレート文字列を使った方法
const name = "太郎";
const age = 23;

const message1 = `私の名前は${name}です。年齢は${age}です。`;
console.log(message2);

アロー関数

従来の関数に比べて、処理を短く書くことができ、　thisの参照先を固定することができる。

  • 従来の方法
function func1(str){
    return str;
}

console.log(func1("従来の関数"))
  • アロー関数
const func2 = (str) => {
    return str;
}
console.log(func2("アロー関数です"))

分割代入

分割代入は、オブジェクトではプロパティを、配列では値を取り出して、別個の変数に代入することができる。
これにより記述が短くなり、使いまわしやすくなる。

オブジェクトの場合

  • 従来の方法【オブジェクト】
const myProfile = {
    name : "太郎",
    age : 23
}

const msg1 = `名前は${myProfile.name}です。年齢は${myProfile.age}です。`
console.log(msg1)
  • 分割代入を使った場合【オブジェクト】
const myProfile = {
    name : "太郎",
    age : 23
}

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

配列の場合

  • 従来の方法【配列】
const myProfile = ['太郎',23];

const msg3 = `名前は${myProfile[0]}です。年齢は${myProfile[1]}です。`;
console.log(msg3);
  • 分割代入を使った場合【配列】
const myProfile = ['太郎',23];

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

デフォルト値・デフォルト引数

関数に値が渡されない場合や undefined が渡された場合に、デフォルト値で初期化される引数を指定できる。

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

sayHello();

スプレット構文

配列の展開

数値が展開された状態となる。

const arr1 = [1,2];
console.log(...arr1); //[1,2]ではなく、1,2となる

const arr1 = [1,2];

const sumFunc = (num1,num2) => {
    return console.log(num1+num2)
}
sumFunc(...arr1);

配列をまとめる

配列を関数の引数に設定する際に、まとめて書くことができる。（まとめて渡せる）

const arr2 = [1,2,3,4,5];
const [num1,num2,...arr3] = arr2;

console.log(num1) //1
console.log(num2) //2
console.log(arr3) //3,4,5

配列のコピー・結合

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

const arr7 = [...arr4,...arr5]
console.log(arr7) //[10,20,30,40]

map・filter

map

配列の展開

  • 従来のforを使った展開
const nameArr = ['田中','山田','太郎'];

for(let i = 0; i < nameArr.length; i++){
    console.log(nameArr[i])
}
  • mapを使用した展開
const nameArr = ['田中','山田','太郎'];

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

filter

条件に一致したものだけ、抽出できる。

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

console.log(newNum) //[1,3,5]

三項演算子

if文の省略形または代替手段として利用することが可能で、3つの値・式を必要とする特殊な演算子。

  • 従来のif文
if (条件式) {
    //Trueの処理
} else {
    //Falseの処理
}
  • 三項演算子を使用した場合
const val1 = 1 < 0 ? 'trueです' : 'falseです';
console.log(val1)

Discussion