精神と時の部屋日記6 | Reactをマスターしたい

Reactを包括的に理解したい

jsとは

• ウェブブラウザで複雑な動きをするためのものだった
• モダンjavascriptとは

仮想DOM

• DOM document object model　木構造
• 仮想DOM差分だけを変えてくれる。

パッケージマネージャー

• 一つのjsファイルに全部書いてた。⇨ファイル毎に機能を変えた
• npm/yarnなどのパッケージマネージャー
• 依存関係勝手に解決。importが明示的。パッケージがコマンドひとつで。
• NPMパッケージのレジストリ→package.json設計書→package-lock.json or yarn.lock依存関係→node_modules各モジュールの実態。githubにはあげない。jsファイル。サイズでかい

ESMAScriptとは

• jsの標準規格
• ES2015に多くの変更があった
• let, constやClass, アローファンクションなど

モジュールバンドラー

• jsファイルを一つにまとめるもの。

トランスパイラ

• 新しいjsの記法を古い記法に変換してくれる
• 対応しないブラウザに対処するため

SPA single page application

• モダンjsはspaが基本
• htmlは1つでjsで画面を編集する
• 画面遷移が起こらない。jsでhtmlのDOMを書き換えて遷移
• UXが良くなる。
• コンポーネント

モダンjsを把握したい

const, let変数宣言

• varは再宣言可能で変数内に意図しない変数が入ることがあった
• letは再宣言ができない。
• constは上書きもできない

let test="let変数";
console.log(test);

test="let変数を上書き";
//これはできない
let test="let変数を再宣言"

const test1="const変数"
test1="const変数は上書きできない"

const test2={
	name: "あああ",
	age: 111,
};
test2.name = "iii";
test2.testtt="uuuu";

• プロパティは変更可能

const test3=["dog", "cat"];
test3[1]="bird";
test3.push("monkey");

• 配列のプロパティ変更は可能

テンプレート文字列

const name="太郎";
const age="22";
//　従来は
const message1="私の名前は" + name + "です。年齢は" + age + "です。";
// テンプレート文字列を用いると
const message2 = `私の名前は${name}です。年齢は${age}です。`;

アロー関数

// 従来の関数
function func1(str){
	return str;
};
console.log(func1("func1です"));
// アロー関数
const func2 = (str) => {
	return str;
};
console.log(func2("func2です"));

• 引数1つなら引数の括弧はいらない。
• 単一式の場合returnと{}省略可

const func3 = (num1, num2) =>{
	return num1+num2;
};
console.log(func3(10, 20));

分割代入

const myProfile = {
	name:"aaa",
	age:"bbb",
};

const message1=`名前は${myProfile.name}です。年齢は${myProfile.age}歳です。`;
console.log(message1);

//分割代入
const {name, age}=myProfile;
const message2=`名前は${name}です。年齢は${age}です。`;
console.log(message2);
//配列でも
const myProfile=["aaa", 22];
const [name, age]=myProfile;
const message=`名前は${name}です。年齢は${age}です。`;
console.log(message);

デフォルト値, 引数

const sayHello = (name) => console.log(`こんにちは${name}さん！`);
sayHello("aaa");

スプレッド構文

• ...ピリオドみっつ

const arr1=[1,2];
console.log(arr1);
console.log(...arr1);

• スプレッド構文にするとリストの中身をそのまま順番通り出してくれる。

const arr1=[1,2];
const sumFunc=(num1, num2)=> console.log(num1 + num2);
sumFunc(arr1[0], arr1[1]);
sumFunc(...arr1);
// 上に行は同じこと。配列に対して順番に処理してくれるのでこのようなリスト内の計算などは楽チンにできる

const arr2=[1,2,3,4,5];
const [num1, num2, ...arr3]=arr2;
console.log(arr3);

//配列のコピー
const arr4 = [10, 20];
const arr5 = [30, 40];
const arr6 = [...arr4];
console.log(arr6);
const arr7= [...arr4, ...arr5];
console.log(arr7);
//=で繋いでコピーすると同じところを参照するからリスト内データを変更する時一気に参照元も変わってしまう。
arr6[0]=100;
console.log(arr6);

mapやfilterを使った配列処理

const nameArr=["田中", "山田", "あずま"];
for (let index = 0; index < nameArr.length; index++) {
	console.log(nameArr[index]);
};

const nameArr2 = nameArr.map((name)=> {
	return name;
});
console.log(nameArr2);

nameArr.map((name)=> console.log(name));

const numArr=[1,2,3,4,5];
const newNumArr=numArr.filter((num)=>{
	return num%2===1;
});
console.log(newNumArr);

nameArr.map((name, index)=> console.log(`${index + 1}番目は${name}です。`));

const newNameArr=nameArr.map((name)=>{
	if(name==="あずま"){
		return name
	}else{
	return `${name]さん`
	}
});

三項演算子

//ある条件 ? 条件がtrueの時 : 条件がfalseの時
const val1 = 1 > 0 ? "trueです。" : "falseです。";
console.log(val1);

const num=1300;
console.log(num.toLocaleString());

const format=typeof num === "number" ? num.toLocaleString() : "数値を入力してください";
console.log(format);

const checkSum = (num1, num2) => {
	return num1 + num2 > 100 ? "100超えてる" : "許容";
}
console.log(checkSum(50,349));

論理演算子

const flag1=true;
const flag2=false;

if (flag1 || flag2){
	console.log("1か2はtrueになります");
};
if (flag1 && flag2){
	console.log("1か2はtrueになります");
};

const num=null;
const fee=num|| "金額未設定です";
console.log(fee);
// ||左がfalseなら右側返すだからorみたいに使える

const num2=100;
const fee2=num2 && "何か設定されました";
console.log(fee2);
// &&は左がtrueなら右側返す。

まとめ

• let constで変数宣言。letは再宣言不可能 constは上書きも無理。オブジェクトや配列は要素追加削除できる
• ``で${}で変数使える
• あろー関数=>で処理楽に。関数定義できる
• 分割
• デフォルト引数設定
• 配列map filter
• 三項演算子　?：
• 論理演算子||はまたは　&&でかつ