文系大学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をもっと楽しく使おう！
これらの記事を理解して少し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.メソッド名()」で親クラスのメソッドを実行する。
###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);のように登場。
###非同期処理、コールバック関数
redux-saga等の理解に不可欠。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('hello');
resolve();
}, 500);
});
promise.then(() => console.log('world!'));
＊Promiseとasync/awaitでJavaScriptの非同期処理をシンプルに記述する
###イテレータ ジェネレータ
これも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入門を理解するための超入門/環境構築編も書いたのでぜひ見てください！