概要
Reactを学習する上で欠かせないjavascriptのルールについてざっくりまとめました。
初学者の方の参考になれば幸いです。
記事を書いた背景
reactを学んでいく上で「あれこれってなんだっけ」という表現が多くあったのでまとめようと思いました。
学習のまとめでもあります。
よく使われる表現・ルール
const,letの変数宣言
出来ること
変数の宣言
書き方
let 変数名
const 変数名
let ・・・上書き可能、再宣言不可
const・・・上書き・再宣言不可
constはオブジェクト型と呼ばれるオブジェクト、配列、関数は中の値を変更できる。
基本的にはconstで定義し、動的に変わる部分はstateという別の概念で値を管理していくのが基本。
テンプレート文字列
###出来ること
文字列の中で変数を展開するもの。rubyの式展開のようなイメージ。
###書き方
バッククウォートと＄と{}を利用。
アロー関数
出来ること
functionで記述していたものが短縮できる。
書き方
const 変数名 = (引数) => {
return 返却値;
}
注意点
-
引数が１つの場合は（）は省略できる。
const func4 = (num1,num2) => num1 + num2; -
処理を単一行で返却する場合は波括弧とreturnを省略できる。
console,log(func4(10,20)); // 30
また返却値が複数行に及ぶ場合は（）を使うことで単一行のようにまとめて返却することができる。
const func1 = (num1,num2) => (
{
name:num1
age:num2
}
)
分割代入
出来ること
オブジェクトや配列から値を抽出する
書き方
オブジェクト：{}を変数宣言部に書く。取り出すときはコロンを使用して変数名を使える。順番関係なし。
配列：宣言部に[]を使う。格納された順番通りに変数名を設定できる。
const myProfile = {
name: "山田",
age: "24",
};
const { name,age } = myProfile;
const message = `私の名前は${name}です。年齢は${age}歳です`
console.log(message); //私の名前は山田です。年齢は24歳。
{}を変数宣言部に使用することでオブジェクト内から一致するプロパティを取り出すことができる。
また取り出したものに：(コロン)を使用することでその変数名を使うこともできる。
オブジェクトのプロパティを引っこ抜いて楽に記述できる。
また配列の再代入も可能。
const myProfile = ["山田",24];
const [name, age] = myProfile;
const message = `私の名前は${name}です。年齢は${age}歳です`
console.log(message); //私の名前は山田です。年齢は24歳。
変数宣言部に[]を使う。配列に格納されている順番に任意の変数名を設定して抽出できる。
配列の場合は順番厳守。またインデックスの途中までで十分なら省略もできる。
デフォルト値
出来ること
引数名の後ろに＝で値を記述することでデフォルト値を使用できる。
値が存在しない場合の初期値を設定することができる。
書き方
引数、変数名の後ろに＝で設定
スプレッド構文
出来ること
...を配列に使うことで配列の中身を展開してくれる
書き方
const arr1 = [1,2];
console.log(arr1): //[1,2]
console.log(...arr1); //1 2
このように展開してくれる。
また２つの引数を合計して出力する関数がある場合、
const arr1 = [1,2];
const summaryFunc = (num1,num2) => console.log(num1+num2);
//普通に配列の値を渡す場合
summaryFunc(arr1[0],arr1[1]); // 3
//スプレッド構文を用いた方法
summaryFunc(...arr1); // 3
普通に渡すよりも楽に表現できる。
さらにスプレッド構文は要素をまとめるというニュアンスでも使用することができる。
const arr2 = [1,2,3,4,5];
const [num1,num2,...arr3] = arr2;
console.log(num1) // 1
console.log(num2) // 2
console.log(num3) // [3,4,5]
のように後の値をまとめることもできる。
要素のコピー、結合する方法としても使える。
const arr4 = [10,20]
const arr5 = [30,40]
このarr4をコピーした新たな配列を、スプレッド構文を使って生成する場合
const arr6 = [...arr4];
...で順番に展開して[]で囲んでいるので結果的に新しい配列ができるというもの。
結合も行える。
const arr7 = [...arr4, ...arr5];
console.log(arr7) //[10,20,30,40]
コピーと同じ理屈で複数の配列を結合することもできる
オブジェクトも同様に可能。
オブジェクトの省略記法
出来ること
使用頻度の高い省略記法、「オブジェクトのプロパティ名」と「設定する変数名」が同一の場合は省略できる。
書き方
const name = "山田";
const age = 24;
// ユーザーオブジェクトを定義(プロパティ名はnameとage)
const user = [
name: name,
age: age,
];
console.log(user); // {name:"山田", age: 24}
上記の他にも以下のように記述できる
もっと短く、
const user = {
name,
age,
}
コロン以降を省略する。分割代入で別名をつける逆のイメージ。
この省略記法も頻繁に使っていくので注意。
map,filter
出来ること
配列を順番に処理して処理した結果を配列として受け取ることができる。
書き方
const nameArr = ["主田","先岡","後藤"];
const nameArr2 = nameArr.map((name)=>{
return name;
});
console.log(nameArr2); //["山田","田中","後藤"]
filter関数の使い方
出来ること
returnの後に条件式を記述して一致するもののみが返却される関数になる
書き方
const numArr = [1,2,3,4,5];
const newNumArr = numArr,filter((num) => {
return num % 2 === 1;
});
console.log(newNumArr); // [1,3,5]
上記は奇数のみを取り出す例
「配列の中から特定の条件に一致するものを取り出して処理したい」という時に使う
indexの扱い
出来ること
順序の概念を取り扱える。
書き方
配列をループで処理する場合、何番目の要素かというのを考える時従来のfor文の場合indexを利用しているので以下のようにすることで順序の概念も取り扱える。
for文のindexで配列の要素順を取り出す
const nameArr = ["山田","田中","後藤"]
for (let index = 0; index < nameArr.length; index++){
console.log(`${index + 1}番目は${nameArr[index]}です`);
}
// 1番目は山田です
// 2番目は田中です
// 3番目は後藤です
同じ処理をmap関数で行う
//第二引数にindexが入ってくる
nameArr.map((name,index) => console.log(`${index + 1}番目は${name}です));
このようにmap内の関数は第２引数をかくことができ、書いた場合はそこにから順番にindexの情報が格納される。
まとめ
reactを学習していく上で必須の知識になるので身につけたいと思います。
参考書籍
モダンJavaScriptの基本から始める React実践の教科書 (最新ReactHooks対応)