📝

学習記録　udemy～React(v18)完全入門ガイド｜Hooks、Next14、Redux、TypeScript～　#1

に公開
React
未経験
Udemy
独学
tech

スクラップ記事に書き残していたが、割と量が多くなるので記事にしてもいいかなと思いこちらに書いていこうと思います

<セクション　３>

アロー関数

  • 通常の関数
main.js
function fn(number) {
    return number * 2
}

console.log(fn(2));
  • アロー関数
main.js
const fnArrow = (number) => {
    return number * 2;
}

console.log(fnArrow(2));

//引数が１つ、return以降の本文が１行の時、簡略化できる
const fnArrow = number => {
    return number * 2;
}


ESmoduleのexport/import

  • exportで外部から拾えるように
module.js
export const hello = () => {
    console.log("hello!");
};

const funcB = () => {
    console.log("funcB output!");
};

export default funcB;

class User {
    constructor(name) {
        this.name = name;
    }
    hello() {
        console.log(this.name);
    }
}

export { User }


  • importで拾ってくる
main.js
import { hello } from "./module.js";
import { User } from "./module.js";
import functionB from "./module.js";//defualtは名前を変えられる
hello ();//実行
functionB();

// const user = new User("Tom");//classはnewをつけて使用
// user.hello();


truthy falsyな値

const a = 0;
let result = a ? 10 : -10;
console.log(result);

const falsy = 0;
const truthy = 1;
console.log(Boolean(truthy));
console.log(Boolean(falsy));


論理積　理論和

//論理積(&&)
//&&より左側がfalthyの値ならそれを返す
//両方がtruthyなら右側を返す
const resultA = "" && "foo";
const resultB = NaN && 0;//両方falthyなら左を返す
const resultC = "foo" && 4;

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

//理論和
//truthyなら返す、両方truthyなら左を返す
const resultD = "" || "foo";

console.log(resultD);

非同期処理


main.js
//非同期処理
//同期処理はコードを順番に読み込んでいくこと
let a = 0;

//resolve(a)により、2000ミリ秒後1が代入され、
//それをthen(b)へ代入される
new Promise((resolve, reject) => {
    setTimeout(() => {
        a = 1;
        resolve(a)
    }, 2000);
}).then((b) => {
    console.log(b);
})
  • ここでは細かいことはかかない。なので使うとき、わからなくなった時udemyで見返す

await/asyncで簡略化

main.js
const result = await new Promise((resolve, reject) => {
    setTimeout(() => {
        a = 1;
        resolve(a)
    }, 4000);
})

console.log(result);
  • ここでコンソールで確認したら、本当に4000ミリ秒での後に表示されたので、感動しました！

総括

学習していて、先ほどもお伝えした通り時間差を意図的にプログラムで作ってること、また模写でも自分でコードを打って実際に確認できたことが学習できている実感につながっていると思います。Zennの記事の書き方も少しずつ慣れていきますので、見にくいとこもありますが、どうか暖かい目で引き続見ていただければと思います。

Discussion