Open10

udemy学習【2024年最新】React(v18)完全入門ガイド｜Hooks、Next14、Redux、TypeScript

Udemy
Aritomo KawaharaAritomo Kawahara

Arrow関数について

本来はこういった形で関数を定義

function fn(number) {
  return number * 2;
}

Arrow関数はこう書ける。
メリット：記述量が少なくなる

const fnArrow = (number) => {
  return number * 2;
}

１行のみであれば returnと{}も省略可能

const fnArrow2 = (number) => number * 2;
const fnArrow3 = number => number * 2;

Objectを返す場合は、()で囲う必要がある。

const fnArrowObj = (number) => ({ result: number * 2 });
Aritomo KawaharaAritomo Kawahara

ESmoduleについて

moduleを使う場合、以下のように記載が必要。

 <script type="module" src="main.js"></script>

ただし、Reactなどは自動で保管してくれたりはする。直接記載する際は必要。

普通の関数を呼び出す場合は以下のようにする。

import { hello } from './module.js';

hello();

classを呼ぶ際はこうする。

import { User } from './module.js';
const user = new User('John');
user.sayHello();

defaultのものを呼ぶときは以下。

import funcB from './module.js';
funcB();

名前も変更可能

import functionB from './module.js';
functionB();

まとめて呼ぶ際はこうなる

import functionB, { hello, User } from "./module.js";
Aritomo KawaharaAritomo Kawahara

コールバック関数

関数の引数として、関数を渡すことができる。
引数に対して ()をつけることで、関数として実行できる。

また、引数に = を使うことでデフォルト値を設定することができる。

function print(fn) {
  const result = fn(2);
  console.log(result);
}

function fn(number = 3) {
  return number * 2;
}

debugger;
print(fn);

debuggerを使うと、デバッグモードを実行できる。

Aritomo KawaharaAritomo Kawahara

イベントリスナ

querySelectorでDOMが取れる。
オプションが見たい場合は console.dirを使う

const h1 = document.querySelector('h1');
console.log(h1);
console.dir(h1);

addEventListenerを使う場合に引数に eventをとれ、オプションなども確認が可能

button.addEventListener('click', (e) => {
  console.log('ボタンがクリックされました');
  console.log(e);
  console.log(e.target);
});
Aritomo KawaharaAritomo Kawahara

map関数とfilter関数

知らなかったことだけ記載
第二引数に 繰り返し回数
第三引数に 配列をとる

また

const arry = [10, 20, 30, 40];
const newArry = [];
// i , arrも参照可能
arry.map((val, i , arr) => {
  newArry.push(val * 2);
});

チェインすれば、mapした後にfilterなども可能

const newArry2 = arry.map(val => val * 2).filter(val => val > 50);
Aritomo KawaharaAritomo Kawahara

分割代入

こんな感じで代入が可能。
出力結果は同じ

const arry = ["配列1", "配列2", "配列3"];
console.log(arry[0]);
console.log(arry[2]);

const [a, , c] =  ["配列1", "配列2", "配列3"];
console.log(a);
console.log(c);

また以下のようにもできる。

const arr = ["Japan", "Tokyo", "Shinjuku"];
const objAddress = { country: "Japan", state: "Tokyo", city: "Shinjuku" };

const fnArr = (arry) => {
  console.log("---配列---");
  console.log(`country: ${arry[0]}`);
  console.log(`state: ${arry[1]}`);
  console.log(`city: ${arry[2]}`);
};

const fnArr = ([ country, state, city ]) => {
  console.log("---配列---");
  console.log(`country: ${country}`);
  console.log(`state: ${state}`);
  console.log(`city: ${city}`);
};

const fnObj = (objAddr) => {
  console.log("---オブジェクト---");
  console.log(`country: ${objAddr.country}`);
  console.log(`state: ${objAddr.state}`);
  console.log(`city: ${objAddr.city}`);
};

const fnObj = ({ country, state }) => {
  console.log("---オブジェクト---");
  console.log(`country: ${country}`);
  console.log(`state: ${state}`);
  // console.log(`city: ${city}`);
};
Aritomo KawaharaAritomo Kawahara

スプレット演算子と残余引数

展開が可能な演算子

const nums = [3, 1, 4, 1, 5, 10, 2, 6];

const result = Math.max(3, 1, 4, 1, 5, 10, 2, 6);
console.log(result); // 3, 1, 4, 1, 5, 10, 2, 6

展開されたものは別のオブジェクトとなる。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = [...arr1];
let newArr1 = arr1

console.log(newArr === newArr1) // false
newArr1.push(10);
console.log(newArr1); // 1,2,3,10
console.log(arr1);// 1,2,3,10

newArr.push(10);
console.log(newArr); // 1,2,3,10
console.log(arr1);// 1,2,3

残余引数

こんな感じで引数でも使うことが可能。

console.log(newObj);

const restA = (...argA) => console.log(argA);
restA(1, 3, 4)

const restB = (n, ...argB) => console.log(argB);
restB(1, 3, 4)
Aritomo KawaharaAritomo Kawahara

truty falsy

faltyとみなされる値

false
0 (数字)
0n (big int)
"" (空文字)
null
undefined
NaN (Not a Number)

論理積と論理和

// 論理積 (&&) について
// falthyがあればそれを返す
const resultA = "" && "foo";
const resultB = 2 && 1 && 0 && 3;
const resultC = "foo" && 4;

// console.log(resultA); //
// console.log(resultB);
// console.log(resultC);

// 理論和 (||) について
// trutyがあればそれを返し、なければ一番右を返す
const resultD = "" || "foo";
const resultE = 0 || 2 || 0;
const resultF = "foo" || 4;
Aritomo KawaharaAritomo Kawahara

非同期処理

非同期処理を実行してから処理を書きたいときに　Promisek関数を使う。
・thenは繋げて書くことが可能
・catchはerror時に発生

// POINT 非同期処理（Promise）
let a = 0;

new Promise((resolve, reject) => {
    setTimeout(() => {
        a = 1;
        resolve(a)
    }, 2000);
}).then((b) => {
    console.log(b);
    return b;
}).then((b) => {
    console.log(b);
}).catch((c) => {
    console.log('catchが実行', c)
})
Aritomo KawaharaAritomo Kawahara

await/asyncの使い方

async function... /await Promise ...の形で記載する。
resolveに渡した引数はresultで受け取ることが可能。
もし、catchしたい場合は、try{}catch{}の形で、asyncした関数内で記載すると、エラーハンドリングが可能。

// POINT 非同期処理（await/async）
let a = 0;

init();
async function init() {
    try {
        const result = await new Promise((resolve, reject) => {
            setTimeout(() => {
                a = 1;
                reject(a)
            }, 2000);
        })
            console.log(result);
    } catch(e) {
        console.log('catchが実行', e)
    }
    
    // }).catch((c) => {
    //     console.log('catchが実行', c)
    // })
}