ReactとかNextを使うことになったから頑張る①

はじめに

本記事は最終的にNext.jsがなんとなくわかるようになるまでを目標に書いています。ほぼ備忘録的な使い方をしているので、同じような考えの方いたら是非ストックを！

本記事は参考文献にあります
https://www.udemy.com/course/react-complete-guide/
の講義の内容を基に作成しています。興味ある方はこちらも是非

ほんとは上の講義の内容を一つの記事にまとめたかったけど、めちゃ長くなりそうだから分割していく。(全部で何編になるだろうか。。。)

とりあえず①はほぼjavascriptの基本的なところになってしまったので、Reactから見てみたい方がいれば②の記事から

②：https://qiita.com/atsu123456789/items/9fc5b6bf02dafd9e0212

対象者

HTMLについてわかってる(なんとなくでおｋ)
最低限のjavascriptを知っている
ReactやNext.jsの勉強をしたい

アロー関数

main.js

// 一般的な関数の定義
function fn(number) {
    return number * 2;
}

// アロー関数
const fn = (number) => {
    return number * 2;
}

// 引数が一つの時、()を省略できる
const fn = number => {
    return number * 2;
}

// 処理が一行の時、{}を省略できる
const fn = number => number * 2;

// オブジェクトを返り値として返したいときは()で括る
const fnArrowObj = number => ({ result: number*2});

ESModuleのExport/Importについて

module.js

// exportをつけることで外部ファイルから関数の呼び出しが可能に
export const hello = () => {
     console.log("hello!");
};

main.js

// 外部ファイルからの呼び出し
import {hello} from "./module.js"
hello();

classの呼び出し

module.js

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

export { User }

main.js

import {User} from "./module.js";

const user = new User("Tom");
user.hello();

コールバック関数

main.js

// 引数callbackには関数名を入れることが出来る
function print(callback) {
    const result = callback(2);
    console.log(result);
}

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

print(fn)

DOMとイベントリスナについて

DOMとは　・・・JavascriptでHTMLを操作するためのオブジェクト(タグ)

main.js

// htmlのh1タグを指定
const h1element = document.querySelector('h1');
console.dir(h1element);

h1element.textContent = "変更後のタイトル";

// buttonをクリック時に起こす処理方法を記載
const btnEl = document.querySelector('button');
btnEl.addEventListener('click', (e) => {
	console.log(e.target);
	console.log('hello');
})

// イベントハンドラは関数名で渡すことも可能
const helloEb = (e) => {
	console.log('hello');
}

const btnEl = document.querySelector('button');
btnEl.addEventListener('click', helloFn);

map関数とfilter関数

main.js

const arry = [10, 20, 30, 40];
const newArry = [];

const newArry2 = arry.map(val => val*2);

// 上のmap関数の処理は以下の処理と同じことをしている
for(let i = 0; i < arry.length; i++){
	newArry.push(arry[i] * 2);
}

// 第二引数を持たせると、index番号が入る
const newArry3 = arry.map((val, i, arry) => {
	console.log(i);
	console.log(arry);
	return val * 2;
});

// filter関数
const newArry4 = newArry2.filter(val => val > 50);

// 上のfilter関数の処理は以下と同じことをしている
for(let i = 0; i < arry.length; i++){
	const val = arry[i] * 2;
	if(val > 50){
		newArry.push(arry[i] * 2);
	}
}

スプレット演算子と余残引数について

main.js

// 関数の引数に配列を展開して渡すとき
const nums = [3,1,4,1,5,10,2,6];
const result = Math.max(...nums);

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let newArr = [...arr];
let newArr1 = arr;
if(newArr1 == arr1) // True
if(newArr == arr1) // False
newArr1.push(4) // 参照元であるarr1にも4がpushされる
newArr.push(4) ///arr1は別々の配列であるため、arr1には影響がない
let newArr2 = [...arr1, ...arr2]; // 2つのスプレット演算子を使うことも可能

// 関数の引数でも使うことが出来る
const restA = (...argA) => {
    console.log(argA);
}
restA(1,3,4,5)

// 特定の引数のみをスプレット演算子以外で渡すことも可能
const restB = (n, ...argB) => {
    console.log(argB);
}
restB(1,3,4);

三項演算子

main.js

// ?の直後のものがaがtrueであった時の処理、:の後ろがfalseであった時の処理を記述している
const a = true;
let resultA = a ? "true" : "false";

// 上の三項演算子を使った処理は以下の処理と同じである
if(a) {
  resultA = "true";
} else {
  resultA = "false";
}

Promiseを使った非同期処理

main.js

let a = 0;

// 引数resolveはthen以下での引数とでき、rejectはcatchの処理で使われる
new Promise((resolve, reject) => {
	setTimeout(() => {
		a = 1;
		resolve(a);
	}, 2000);
}).then(() => {
	console.log(a);
}).catch(() => {
	console.log('catchが実行');
})

awaitとasysnc

main.js

let a = 0;

// awaitを用いることで、resolve()の処理を待ってから次の処理を行う。
// その際に関数名の前にasyncをつける必要がある
async function init() {
    await new Promise((resolve, reject) => {
        setTimeout(() => {
            a = 1;
            resolve(a)
        }, 2000);
    })
    console.log(a);
}

// 下記のようにすると、resolve(a)がresultという変数に格納される
async function init() {
    const result = await new Promise((resolve, reject) => {
        setTimeout(() => {
            a = 1;
            resolve(a)
        }, 2000);
    })
    console.log(result);
}

// try, catchを用いることで先ほどのようにthenなどを使わないで書ける
async function init() {
    try {
        const result = await new Promise((resolve, reject) => {
            setTimeout(() => {
                a = 1;
                resolve(a)
            }, 2000);
        })
            console.log(result);
    } catch(e) {
        console.log('catchが実行', e)
    }
}

参考文献