React JSで押さえておくところ[No.1]

• モダンJavaScript

• スプレッド構文

• map関数

• filter関数

• 論理演算子

モダンJavaScript
ES6＝ES2015以降のこと
ECMAScriptという規格があり年に1回更新される
以下詳細

モジュールバンドラー
JSファイルを本番用に一つにまとめたもの
webpackなど

トランスパイラ
古い記法のJavaScriptに変換してくれるもの
Babelなど

テンプレート文字列
`文字列${変数}文字列`;

アロー関数
引数が1つだと()が、1行の時は{}とreturnを省略できる

const func = str => console.log(str);
ちゃんと書くと下になる
const func = (str) =>{
    return console.log(str);
}

メモinnerHTMLの使い方

【JavaScript】innerHTMLの使い方 - Qiita

分割代入

オブジェクトや配列の中身を取り出して変数のようにする

//オブジェクトの場合
const myProfile ={name: 'fukada', age: 29,};
const {name, age} = myProfile;
const talk = `私の名前は${name}、${age}歳よろしくね`;

//配列の場合
const score = [50, 30];
const [lang, math] = score;
const total = `あなたの点数は国語が${lang}点、算数が${math}点です。`

スプレッド構文

配列を一気に扱うもの…配列名と書く

//まとめて展開
const ary1 = [2, 55, 89, 93];

console.log(...ary1);// 2 55 89 93
console.log(ary1);// [2, 55, 89, 93]

//まとめて分割代入
const ary2 = [1, 2, 3, 4, 5];
const[ary3, ary4, ...aryEtc] = ary2;
console.log(ary3);// 1
console.log(ary4);// 2
console.log(aryEtc);// [3, 4, 5]

//配列のコピー
const ary5 = [9, 8, 7];

const aryCp = [...ary5];

console.log(aryCp);// [9, 8, 7]参照が別物になっている
aryCp[0] = 100
console.log(aryCp);// [100, 8, 7]
console.log(ary5);// [9, 8, 7]

//配列の結合
const ary6 = [99, 88, 77];
const ary7 = [66, 55, 44];
const ary8 = [...ary6, ...ary7];
console.log(ary8);// [99, 88, 77, 66, 55, 44];

map関数

配列の各要素に処理を加える
第二引数にインデックス番号が入る

const nameArr = ['佐藤', '田中', '山田'];

const nameArr2 = nameArr.map( (name, index) => {
  return `出席番号${index + 1}、${name}さん`;
})

console.log(nameArr2);// ["出席番号1、佐藤さん", "出席番号2、田中さん", "出席番号3、山田さん"]

filter関数

配列を絞り込む

const numAry = [1, 2, 3, 4, 5, 6];

//偶数のみに絞り込み
const newNumber = numAry.filter((num) =>{
  return num % 2 === 0;
});

console.log(newNumber);//[2, 4, 6]

三項演算子
if文を1行で書くことができる

let num1 = 100;
let num2 = 200;

const judge = (x, y) =>{
  return num1 + num2 >= 100 ? '100以上です。' : '100より小さいです。';
} 
console.log(judge(num1, num2));// 100以上です。

論理演算子

||　左側がtrueなら左側の値を、
左側がfalseなら右側の値を返す

let x = 100;
const fee = x || '値を入力してください';
console.log(fee);// 100

let x2 = null;
const fee1 = x2 || '値を入力してください';
console.log(fee1); //値を入力してください 

&&　両方trueなら右側を
左がfalseなら左側を返す

let x = 100;
const fee = x && "値が設定されました";
console.log(fee);// 値が設定されました

let x2 = null;
const fee1 = x2 && "値が設定されました";
console.log(fee1); //null