[メモ]基礎から学ぶ React / React Hooks : Reactを始めるために必要なJavaScriptの知識

· ·

一冊入門的な React 本を読んだものの、他者が書いた React が読めなかったりするので「基礎から学ぶ React/React Hooks」を読んでみる

Chapter 1 🔗

  • グローバルスコープ、ローカルスコープ(関数スコープ・ブロックスコープ)。ブロックスコープは知らなかった。関数内の if 文など特定ブロック内で変数を定義するとスコープはブロック限定になるらしい
  • 無名関数とアロー関数
1
2
3
4
5

const sampleFunc = function (..., ...){
    return ...
}

const sampleFunc2 = (..., ...) => { return ...}
  • コールバック関数 : 関数の引数として渡された別の関数
1
2
3

setTimeout(() => {
  console.log("...");
}, 3000);
  • デフォルト引数指定
1

const rectangleArea = (width = 3, height = 2) => {...}
  • 可変長引数
1

const sampleFunc = (a, b, ...rest){}
  • 分割代入。object の分割代入の書き方がこれで配列の分割代入は配列をいくつかの変数に分割代入するという感じ
1
2
3
4
5
6

const user = {
  name: "",
  message: "",
};
const sampleFunc = ({ message }) => console.log(message);
sampleFunc(user);
  • switch 文って全然使ったことないんだよな…。break 必要。default は必須ではないがあるべき。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

switch (条件) {
  case 値1:
    処理;
    break;
  case 値2:
    処理;
    break;
  default:
    処理;
    break;
}
  • for…in : オブジェクトの場合はプロパティ名が取り出せる
  • for…of : 知らなかったけど、配列で一つ一つの値を取り出しながら処理する場合は in じゃなくて of だったんだなぁ。配列の場合は in で index 指定してた
  • Array.includes(arg) : 配列の中に arg で指定された要素が含まれているかどうか。 indexOf でも大丈夫だけど…。返却値は bool
1
2

const sampleArrayIncludes = ["red", "yellow", "green"];
console.log(sampleArrayIncludes.includes("red"));
  • Array.sort(arr)Array.reverse(arr)は破壊的メソッドだけどスプレッド構文や concat()と併用すると、もとの配列の並び順に影響はない
1
2

console.log([...sampleArrayStrSort].sort());
console.log(sampleArrayStrSort.concat().sort());
  • 配列の要素削除 : pop() 最後の要素削除、 shift() 最初の要素削除, splice() index 指定削除
  • 配列の要素追加 : push() 最後に要素追加、unshift() 最初に要素追加
  • 配列のフラット化 : Array.flat(depth) で多次元配列を低次元配列へフラット化する。引数を指定しない場合 2 階層が 1 階層に、3 階層が 2 階層になる。引数に Infinity を入れるとすべての配列がフラット化
  • 高階関数 : コールバック関数を引数で受け取る関数
  • Array.forEach(callback) : 配列から要素を１つずつ取り出し callback 関数で順番に処理
    • 第 1 引数 : value (必須)
    • 第 2 引数 : index
    • 第 3 引数 : array(元の配列)
1
2
3
4

const sampleArrayForEach = [2, 4, 6, 8];
sampleArrayForEach.forEach((value, index, array) => {
  console.log(`value: ${value}, index: ${index}, array: ${array}`);
});
  • Array.map(callback)
    • 第 1 引数 : value (必須)
    • 第 2 引数 : index
    • 第 3 引数 : array(元の配列)
  • Array.filter(callback)
    • 第 1 引数 : value (必須)
    • 第 2 引数 : index
    • 第 3 引数 : array(元の配列)
1
2
3
4

const sampleArrayForFilter = [3, 5, 7, 9, 15];
const sampleArrayForFilterResult = sampleArrayForFilter.filter((value) => {
  return value % 3 === 0;
});
  • Array.find(callback) : 取り出された排列要素に対し、引数に渡されたコールバック関数の戻り値が最初に true になった要素の値を返す。見つからなかった場合は undefined
    • 第 1 引数 : value (必須)
    • 第 2 引数 : index
    • 第 3 引数 : array(元の配列)
1
2
3

const sampleArrayForFilter = [3, 5, 7, 9, 15];
const sampleArrayForFilterResult = sampleArrayForFilter.find((value) => {
  return value % 3 === 0; //3
  • Array.findIndex(callback)
    • 第 1 引数 : value (必須)
    • 第 2 引数 : index
    • 第 3 引数 : array(元の配列)
  • Array.every(callback) : 渡された引数をコールバック関数で順番で処理し、すべての条件に一致する場合のみ true
    • 第 1 引数 : value (必須)
    • 第 2 引数 : index
    • 第 3 引数 : array(元の配列)
  • Array.some(callback) : 渡された引数をコールバック関数で順番で処理し、１つでも条件に一致すれば true
    • 第 1 引数 : value (必須)
    • 第 2 引数 : index
    • 第 3 引数 : array(元の配列)
  • Array.reduce(callback, initialValue) : 前回の値 accumulator と現在の値 currentValue の排列要素を受け取って、コールバック関数で処理された値として返す
    • 第 1 引数 : accumulator (必須、前回の値)
    • 第 2 引数 : currentValue (必須、現在の値)
    • 第 3 引数 : index
    • 第 4 引数 : array(元の配列)
1
2
3

Array.reduce((accumulator, currentValue, currentIndex, array) => {
  return accumulator;
}, initialValue);

1
2
3
4
5
6

consot sampleArrayForReduce = [0, 1, 2, 3];
const initialValue = 0;
const sampleArrayForReduceResult = sampleArrayForReduce.reduce((accumulator, currentValue) => {
    console.log("accumulator: ", accumulator, "currentValue: ", currentValue);
    return accumulator + currentValue
}, initialValue);
  • Object.values(obj)メソッドを利用すると、オブジェクトの value を配列で取得できる
1
2

const points = { a: 10, b: 20, c: 10, d: 20 };
const values = Object.values(points); // [10, 20, 10, 20]
  • Object.entries(obj)メソッドを利用すると、オブジェクトのプロパティを要素荷物配列を返却
1
2

const points = { a: 10, b: 20, c: 10, d: 20 };
const entries = Object.entries(points); // [["a", 10], ["b", 20], ["c", 10], ["d", 20]]
  • Promise コンストラクタ基本構文。成功した時は resolve() 失敗した時は reject() が実行される
1
2

const statements = (resolve, reject) => {};
const promise = new Promise(statements);
  • Promise.then()利用例
1
2
3
4

const promise = new Promise((resolve, reject) => {});
const inCaseOfSuccess = () => {};
const inCaseOfFailure = () => {};
promise.then(inCaseOfSuccess, inCaseOfFailure);
  • Promise.catch() はオブジェクトにおける非同期処理失敗結果を受け取る。try…catch の catch 側か。
1

promise.then(inCaseOfSuccess).catch(inCaseOfFailure);
  • Promise.finally() : 非同期処理の成功失敗にかかわらず実行されるコールバック関数を登録できる
  • Promise.all() : Promise オブジェクトすべての非同期処理が成功した場合の結果を受け取る
1
2
3

Promise.all(promiseObjects)
  .then(() => {})
  .catch(() => {});
  • Promise.race() : 複数の Promise オブジェクトのうち最初に状態が変わったという通知を受け取ったものを実行する
react javascript
comments powered by Disqus