文系大学1回生です。
半月ほどReactとReduxの勉強をしています。
理解がなかなか難しいので、勉強したこと、自分なりのポイントをアウトプットしていきます。

ReactやReduxのコードの意味が分からないのは、jsの基礎が抜けているのも一つの原因でした。
そこで、jsの基礎をもう一度確認しました。

jsの基礎

`document.getElementById("hoge")`

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

</body>
</html>

Reactにも出てきます。
任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメソッドです。

`オブジェクト`

<script>
// Create an object:
var car = {type:"Fiat", model:"500", color:"white"};

// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>

Reactでは、複数のスタイルを設定するために、スタイル名をプロパティとしたオブジェクトのリテラルを記述するときや、ステートの値を設定するときなどに必要な知識です。

＊new演算子の使い方と生成方法まとめ！
これもオブジェクトの勉強になった。

`アロー関数`

普通の関数。

hello = function() {
  return "Hello World!";
}

アロー関数。

hello = () => {
  return "Hello World!";
}

リターン省略。

hello = () => "Hello World!";

引数あり。

hello = (val) => "Hello " + val;

()省略。

hello = val => "Hello " + val;

`コールバック関数`

function doTwice(func) {
  func(); // 1回目！
  func(); // 2回目！
}

// あいさつするだけの関数
function hello() {
  console.log('Hello!');
}

// あいさつを2回実行する
doTwice(hello); //Hello!
                //Hello!

hello:コールバック関数　渡すときは()をはずす。
doTwice:高階関数(関数を受け取る関数)

`map`

構文

var array = [ 配列データ ];

array.map( コールバック関数 );

基本的な使い方

var items = [1,2,3,4,5];

var result = items.map(function( value ) {

    //配列の各要素を2倍にする
    return value * 2;

});

console.log( result ); //[2, 4, 6, 8, 10]

mapとアロー関数


var result = items.map(( value ) => {

    //配列の各要素を2倍にする
    return value * 2;

});

`Spread Operator`

配列


const hoge = [2, 3];
console.log([1, ...hoge, 4, 5]) //[1, 2, 3, 4, 5]

オブジェクト


const fuga = {name: 'Taro' , age: 25 };
const piyo = {name: 'Jiro' , location : 'Tokyo'};
console.log({...fuga, ...piyo}); //{ name: 'Jiro', age: 25, location: 'Tokyo'}

`slice`


var array = ['メロン', 'リンゴ', 'イチゴ', 'バナナ'];

//開始位置を指定
var result1 = array.slice( 1 );

//開始位置と終了位置を指定
var result2 = array.slice( 1, 3 );

//そのまま返す
var result3 = array.slice( );

console.log( result1 ); //["リンゴ", "イチゴ", "バナナ"]
console.log( result2 ); //["リンゴ", "イチゴ"]
console.log( result3 ); //["メロン", "リンゴ", "イチゴ", "バナナ"]

そのまま返すなんて意味がないと思うかもしれない。
しかし、Reduxで配列操作をする時に必要なのだ！

`concat`

var array1 = ['ho', 'ge'];
var array2 = ['wa', 'fu'];
var result = array1.concat(array2);

console.log(result);// ho,ge,wa,fu

配列を結合できる。
とにかくReduxでは配列を直接いじりたくない。

`三項演算子の省略`

構文

真偽値 ? trueの時に実行する文 : falseの時に実行する文

trueの例


let hoge = "true"
console.log (hoge ? "hogeやで" : "hogeじゃないで"); //hogeやで

falseの例


let hoge = "false"
console.log (hoge ? "hogeやで" : "hogeじゃないで"); //hogeじゃないで

`イベント`

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

上記はonclickイベント。クリック時に発動。
他に、onchange onmouseover onkeydownなどがある。

`this`

var myObject = {
  value: 10,
  show: function() {
    console.log(this.value);
  }
}
myObject.show(); // 10

上記は、単にメソッドの呼び出しを行っています。
しかし、thisはそんなに生易しいものでは無いようです。

＊thisって何？使い方を覚えて、JavaScriptをもっと楽しく使おう！

＊windowオブジェクトとグローバルの実態について

＊strictモードの使い方を徹底解説！

＊applyって何だ？callとの違いまで徹底解説

＊JavaScriptの「this」は「4種類」？？

これらの記事を理解して少しthisについて詳しくなったと思います。
windowオブジェクトとグローバルの実態なんて知らなかった。。。

`super`


class Animal {
  constructor(name) {
    console.log('親クラスのコンストラクタ');
    this.name = name;
  }

  speak() {
    console.log('親クラスのspeakメソッド');
  }
}

class Dog extends Animal {
  constructor(name, age) {
    console.log('子クラスのコンストラクタ');
    super(name);
    this.age = age;
  }

  speak() {
    super.speak();
    console.log('子クラスのspeakメソッド');
  }
}
const dog = new Dog('ポチ', 1);
dog.speak();
console.log('名前: ' + dog.name + '年齢: ' + dog.age); //"名前: ポチ年齢: 1"

constructor : 「super()」で親クラスのconstructorを実行する。
constructor以外のメソッド : 「super.メソッド名()」で親クラスのメソッドを実行する。

＊【JavaScript】superの使い方【クラス継承】

`bind`

function say(){
 console.log("こんにちは。" + this + "です");
}
var taro = say.bind("hoge");
taro(); //こんにちは。hogeです

function sum(x, y, z){
    return x + y + z;
}
var keisan = sum.bind(null, 10, 20, 30);
console.log(keisan()); //60

関数に対してthisや引数を指定することができるメソッド。

Reactでは、this.hogehoge = this,hogehoge.bind(this);のように登場。

＊JavaScriptでbindメソッドを使う方法

`非同期処理、コールバック関数`

redux-saga等の理解に不可欠。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => { 
        console.log('hello');
        resolve();
    }, 500);
});

promise.then(() => console.log('world!'));

＊Promiseとasync/awaitでJavaScriptの非同期処理をシンプルに記述する

＊async/await 入門（JavaScript）

＊XMLHTTPRequest

＊Objectのgetとsetについて理解をまとめる

`イテレータ　ジェネレータ`

これもredux-saga等の理解に不可欠。

function* gfn(n){
    n++;
    yield n;
    n *= 2;
    yield n;
    n = 0;
    yield n;
}

var g = gfn(10); // ジェネレータを作った

console.log( g.next() ); // { value: 11, done: false }
// n++; が実行された後、yield n; によって n の値が返された。

console.log( g.next() ); // { value: 22, done: false }
// n *= 2; が実行された後、yield n; によって n の値が返された。

console.log( g.next() ); // { value: 0, done: false }
// n = 0; が実行された後、yield n; によって n の値が返された。

console.log( g.next() ); // { value: undefined, done: true }
// 関数の実行が終了したので、.done が true になった。

＊JavaScript のイテレータを極める！
＊JavaScript のジェネレータを極める！

まとめ

これらすべてを理解するとReactのコードが理解できやすくなるのではないでしょうか。
以下のサイトもおすすめです。
□w3schoolscom
英語ですが、とても分かりやすいです。
実際に手を動かして基礎の理解を深められます。
□公式ドキュメント
Reactにも出てくる構文の基礎を固めるのに最適です。

Reactを始める一歩めの記事として【初心者】React&Redux入門を理解するための超入門/環境構築編も書いたのでぜひ見てください！

【初心者】React&Redux入門を理解するための超入門/jsの基礎編

jsの基礎

document.getElementById("hoge")

オブジェクト

アロー関数

コールバック関数

map

Spread Operator

slice

concat

三項演算子の省略

イベント

this

super

bind

非同期処理、コールバック関数

イテレータ ジェネレータ

まとめ