React入門のためにJavaScriptの基礎を学び直した

Reactを学びたい動機

こんにちは。私は普段RubyやRailsでのバックエンド開発をメインに行っています。
昨今の流れとして、バックエンドはRailsのAPIモードで用意して、フロントエンドはReactやNextJS で記述するといった構成が増えていると思います。
私は常々Reactも使いこなせるようになりたい！とは思いつつも、JavaScriptの理解が不十分だったこともあり、いざReact構文に触れても、そもそも意味がよくわからないといったことが多かったように思います。
そこでReactを勉強していくうえで必要最低限のJavaScriptを勉強してからReactを触っていこうと思いました。
この記事はそれらを端的にまとめたものです。

JavaScript基礎

以下雑多に必要そうだと思ったことを書き連ねています。
JavaScriptのバージョンはES6想定です。

const で定義されている中身の値は書き換え可能

const val5 = ["dog", "cat"];
val5[0] = "bird";
val5.push("monkey");
console.log(val5);

テンプレート文字列を用いる

const message2 = `私の名前は${name}です。${age}歳です`;

console.log(message2);

関数の書き方

function func1(str) {
	return str;
}

const func1 = function (str) {
	return str;
}

console.log(func1("func1です。"));

上のように2通りで書くことできる。

アロー関数の書き方

// arrow function

const func2 = (str) => {
	return str;
};

console.log(func2("func2です"));

引数が1つのとき、（）は省略できる。

const func2 = str => {
	return str;
};

またこういうふうにも省略できる。

const func2 = str => str;

const func3 = (num1, num2) => {
	return num1 + num2;
}

console.log(func3(1,2))

//かっこ省略バージョン
const func3 = (num1, num2) => num1 + num2;

console.log(func3(1,2))

//これはできない
const func3 = num1, num2 => num1 + num2;

オブジェクトを返却したいとき

const func3 = (num1, num2) => ({
	hoge: num1,
	huga: num2,
});

console.log(func3(1,2));

//output: {hoge: 1, huga: 2}

分割代入

const myProfile = {
	name: "hoge",
	age: 25
};

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


//分割代入
const { name, age } = myProfile;

//ドットでアクセスせずに使える。
const message2 = `名前は${name}です。年齢は${age}です。`;

配列の分割代入

const myProfile = ["hoge", 100];
//値に好きな引数を指定できる
const [name, age] = myProfile;

const message2 = `名前は${name}です。年齢は${age}です。`;

オブジェクトの分割代入、配列の分割代入はReactでもよく使うらしい。

デフォルト値(引数、分割代入)

//アロー関数と分割代入を組み合わせたパターン
const sayHello = (name) => console.log(`こんにちは!${name}さん!`);

sayHello("Hoge");

仮に名前を渡さないで関数を呼び出すと、undefinedさんになる。
デフォルト値を以下のように与えることができる。

const sayHello = (name = "ゲスト") => console.log(`こんにちは!${name}さん!`);

sayHello();

//値が渡って来ていないときに、デフォルト値を与えることができる
const { age, name = "ゲスト"} = myProfile;
console.log(age);
console.log(name);

オブジェクトの省略記法

const name = "hoge";
const age = 31;

const myProfile = {
	name: name,
	age: age
};

console.log(myProfile);



const name = "hoge";
const age = 31;

// 引き渡す値とkeyが同じときは省略できる
const myProfile = {
	name
	age
};

console.log(myProfile);

スプレッド構文

// 配列の展開としての使用
const arr1 = [1, 2];
console.log(arr1);

console.log(...arr1);


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;

// num1, num2は単体でそれぞれ取得、あとの値はまとめて取得したいといったケース
console.log(num1);
console.log(num2);
console.log(arr3);

//output
1
2
[3, 4, 5]

既存の配列をコピーする

// 配列のコピー、結合
const arr4 = [10, 20];
const arr5 = [30, 40];

const arr6 = [...arr4];
console.log(arr6);

output: [10, 20]


const arr7 = [...arr4, ...arr5];
console.log(arr7);

output: [10,20,30,40]

const arr4 = [10, 20];
const arr8 = arr4;
arr8[0] = 100;
console.log(arr8);
console.log(arr4);

これをやると、 arr4の中身まで書き換わってしまう。のでNG


これであれば arr4の値を書き換えなくて済む。
const arr6 = [...arr4];
arr6[0] = 100;
console.log(arr6);
console.log(arr4);

スプレッド構文を使えば、参照を引き継がなくて済む。
つまり新しい配列として作ることができる。

map や filterを使った配列の処理

例えばこういう書き方だと記述量が多い。

const nameArr = ["Hoge", "Guge","Oge" ];
for(let index = 0; index < nameArr.length; index++) {
	console.log(nameArr[index]);
}

map を使うと、

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

とできる。

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

新たな配列として取得できる。

アロー関数で、引数が一つであるので、

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

という感じで書くことができる。

filter

奇数だけを取り出したい

const numArr = [1,2,3,4,5];

const newNumArr = numArr.filter((num) => {
	return num % 2 === 1;
})

console.log(newNumArr);

部分テンプレートを用いて、mapの引数に何番目かというindexをもたせることで、このように書ける。

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

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

console.log(newNameArr);

三項演算子

const val1 = 1 > 0 ? "trueです" : "falseです";

console.log(val1);

const num = "sdfsdf";

console.log(num.toLocaleString());

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

const checkSum = (num1, num2) => {
	return num1 + num2 > 100 ? "100を超えています" : "範囲内です。";
}

console.log(checkSum(40,80));

まとめ

アロー関数と const の使い方がかなり基本になってくるなと感じました。

この記事が少しでも役に立ちましたら、いいねしてくれるとうれしいです！

参考

React18 テンプレート

Docker上で簡単にReact環境を構築できるように template作りました。
よかったらぜひ使ってください