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


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



# 基礎編

### コンソールに出力

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

### 式計算

```javascript
// 算術演算 --------------
//足し算
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 !"

```

### 変数
```javascript
const x = 10;
let y = 20 ;
```

### if（分岐）
```javascript
if(name === "tbsten"){
  //...
}

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

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

```

### switch（分岐）
```javascript
switch(type){
  case "attack" :
    //...
    break;
  case "run" :
    //...
    break;
  default :
    //...
}
```

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

### while（繰り返し）

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

### for（繰り返し）
```javascript
for(let i = 0;i < 10;i++){
  //...
}
```

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


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

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

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

```

# 知っているようで知らない編
### 配列・オブジェクトの要素のアクセス

```javascript:
//配列
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を使う意味は正直なないです。

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

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

# そんな文法あったのか編
### オブジェクト初期化時

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

```

### 分割代入
```javascript
//配列の分割代入
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
```javascript
//名前付きエクスポート
export const API_KEY = "0123456789abcdefg" ;
export let configs = {
  //...
} ;
export function myFunc(){
  //...
};

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

### import
```javascript
import module1 from "ファイル名" ;
import {func1,func2,} from "ファイル名" ;
```
 - `{}`を使うべき時と使わないべき時の違いが分かりますか？

# 便利な関数・メソッドを知っておこう編
### 配列関連
```javascript
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);
```

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