これくらい知っておけばReactは困らない

「JavaScriptが分かってない」、ゆえに「Reactが分からない」 そんな人のためのJavaScript文法（など）集です。ここでは文法（など）を羅列するだけでここの解説は他のサイトに任せます。

基礎編

コンソールに出力

console.log("hello !");
console.error("エラー発生！");

式計算

// 算術演算 --------------
//足し算
1+2  //3

//引き算
100-5 //95

//掛け算
3*10 //30

//割り算
20/3 //6.666666666666667 (誤差がある)

//割り算の余り
20%3 //2

//べき乗
2**4 //16

// 関係演算 --------------
//大なり
10>2 //true

//小なり
3<6 //true

//イコール
1===2 //false

//ノットイコール
1!==2 //true

//大なりイコール
10>=2 //true

//小なりイコール
2<=10 //true

// 論理演算 --------------
//かつ
true && false //false

//または
true || false //true

// 三項演算子 --------------

true ? "ok !" : "error" //"ok !"

変数

const x = 10;
let y = 20 ;

if（分岐）

if(name === "tbsten"){
  //...
}

if(name === "tbsten"){
  //...
}else{
  //...
}

if(name === "tbsten"){
  //...
}else if(name === "tbsten"){
  //...
}else{
  //...
}

switch（分岐）

switch(type){
  case "attack" :
    //...
    break;
  case "run" :
    //...
    break;
  default :
    //...
}

• breakが必要な理由を説明できますか？

while（繰り返し）

while(i < 10){
  //...
}

for（繰り返し）

for(let i = 0;i < 10;i++){
  //...
}

配列

//配列の作成
const array = [10,20,30] ;

オブジェクト

//オブジェクトの作成
const obj = {
  "name":"tbsten",
  "old":30 ,
} ;

関数

//関数定義
function cook(zairyou){ //引数
  //処理
  return "にくじゃが" ;  //戻り値
}
//関数実行
cook("じゃがいも");

//アロー関数
const cook = (zairyou)=>{
  //...
}
const cook = zairyou => {
  //...
}
const cook = ()=>"にくじゃが" ;
const cook = ()=>(
  "にくじゃが"
) ;

知っているようで知らない編

配列・オブジェクトの要素のアクセス

//配列
const array = [10,20,30] ;

array[0] //10
array.length //3

//オブジェクト
const obj = {
  name: "tbsten", 
  old:32,  
} ;

//「オブジェクト.キー」で値取得
obj.name //"tbsten"
//「オブジェクト[キー]」でも取得できる
obj["name"] //"tbsten" 

//[]を使うと[]内に変数を使える
const key = "name" ;
obj[key] //"tbsten"

DOM編

これがわかってなかったらReactを使う意味は正直なないです。

//DOM要素を取得
const btn = document.getElementById("button");
//要素の書き換え
btn.innerHTML = "かきかえたよ" ;
//〇〇した時に実行
btn.addEventListener("click",(event)=>{
  //...
});

• addEventListenerのコールバック関数の引数(event)には何が入ってくるかわかりますか？

そんな文法あったのか編

オブジェクト初期化時

const key = "name" ;
const obj = {
  [key]:"tbs",
  key:"ten"
} ;
↓↓↓ 下のようなオブジェクトができる
{
  "name":"tbs",
  "key":"ten"
}

分割代入

//配列の分割代入
const array = [10,20,30] ;
const [one,two] = array ; //one : 10 two : 20

//オブジェクトの分割代入
const obj = {
  name:"tbsten",
  old:35,
} ;
const {name} = obj ;  //name : "tbsten"

モジュール編

export

//名前付きエクスポート
export const API_KEY = "0123456789abcdefg" ;
export let configs = {
  //...
} ;
export function myFunc(){
  //...
};

//名前なしエクスポート
export defaut myFunc ;

import

import module1 from "ファイル名" ;
import {func1,func2,} from "ファイル名" ;

• {}を使うべき時と使わないべき時の違いが分かりますか？

便利な関数・メソッドを知っておこう編

配列関連

const array = [10,20,30] ;
//forEach
array.forEach(el=>{
  //...
})

//map
const newArray = array.map(el=>{
  //...
})

//filter
const array = array.filter(el=>el >= 20);

//reduce
const total = array.reduce(el=>{
  //...
}, 0);

オブジェクト関連

//オブジェクトのコピー
const obj = {
  name:"tbsten",
  old:99
} ;
const newObj = Object.assign({},obj);