🚶 はじめに
最近 自己開発でReactを使い、社内システムでもReactをよく触ってますが、私自身 React...いやフロントエンド技術自体を体系的に理解できていません
なので、一旦モダンJsについて学び ES6以降の記法についてアウトプット記事を書こうと思いました
📝 ESxxについて
ES は ECMAScript の略称で、欧州電子計算機工業会(ECMA: European Computer Manufacturers Association)が標準化を進めているのでそう呼ばれているらしい。
元々は Netscape 社が開発を進めていたらしいですね。
ESは ES6(ES201)と、西暦と略された書き方の2通りがある。略称は西暦の値と1ずれているので少しわかりづらい。
🙆♀️ モダンJavascriptの記法をまとめてみた
書き方の変更で説明不要なところは概要を省きます
ES5以降の書き方全ては紹介していません
const let 宣言
説明
var -> let -> const の順に制約が厳しくなる
var : 再宣言・変数の上書きが可能
let : 再宣言は不可能。変数の上書きは可能
const : 再宣言・変数の上書きが不可能。(オブジェクトや配列であれば再定義可能)
コード
var,let,const の 再宣言・変数の上書き
var val1 = "vars"
console.log(val1);
val1 = "var2"; // var変数は値の上書きが可能な変数である
console.log(val1);
var val1 = "re:var"// 再定義が可能である
console.log(val1);
let var2 = "lets"
console.log(var2)
var2 = "let2" // 上書き可能な変数
console.log(var2)
// let var2="let3"// 再宣言は不可能 ERROR
// console.log(var2)
const var3 = "consts"; //プリミティブ
console.log(var3);
// var3 = "var3"; // ERROR, readonlyによるエラー
// console.log(var3)
// const var3 = "var4"; // ERROR
constのオブジェクト値の上書き・配列の値上書き
const var4 = {
name: "hoge",
age: 31
}
console.log(var4)
var4.name = "hogehoge"
console.log(var4)
var4.address = "Fukushima"
console.log(var4)
// 配列についても中身を変更可能になる
const var5 = ["dog","cat"];
console.log(var5);
var5[0] = "bird";
console.log(var5);
var5.push("monkey")
console.log(var5);
テンプレート文字列
概要
従来の文字列の結合 ("a"+"a") の方法から一新された書き方ができるようになった
コード
/**
* テンプレート文字列
* */
const name="hoge";
const age = 12;
// old
const messageOld = "Old MyName is " + name + ". age is " + age;
console.log(messageOld);
// ES5 Template 文字列
const messageNew = `New MyName is ${name}. age is ${age}`;
console.log(messageNew);
アロー関数
コード
従来の書き方 と アロー関数の書き方を比較
/**
* アロー関数
* */
// 従来の関数
function old(str){
return str;
}
const funcOld = function(str){
return str;
}
console.log(old("old function"));
console.log(funcOld("funcOld"));
引数を省略した書き方。 returnも省略可能
/**
* 引数が1つの場合は () を省略できる
* */
const newFunc = (str) => {
return str;
}
const newLittleArgFunc = str => {
return str;
}
// return と {} を省略
const newLittleReturnFunc = str => str;
console.log(newFunc("newFunc"));
console.log(newLittleArgFunc("newLittleArgFunc"));
console.log(newLittleReturnFunc("newLittleReturnFunc"));
// 計算するやつ
const sumCalcFunc = (num1,num2) => num1 + num2;
const calc = sumCalcFunc(1,4);
console.log(`sum: ${calc}`);
分割代入
概要
オブジェクトの要素(キー)名を指定することで、変数に値を代入できる
hoge.key , hoge.name と冗長になっていた書き方を短縮できる
コード
オブジェクトの分割代入
/**
* 分割代入
* */
const myProfile = {
myname : "hoge",
myage : 12
};
//従来のフル指定していた書き方
const messagePro = `myname : ${myProfile.myname}, myage: ${myProfile.myage}`;
console.log(messagePro);
//分割代入
const {myname, myage} = myProfile;
const messagePro2 = `myname2 : ${myname}, myage2: ${myage}`;
console.log(messagePro2);
配列の分割代入
// 従来の書き方
const myProArray = ["hoge",21];
const oldMyProArrayMessage = `oldMyProArrayMessage >>> myName : ${myProArray[0]} , myAge: ${myProArray[1]}`;
console.log(oldMyProArrayMessage)
// 要素数を変数に割り当てる
const [arrayName,arrayAge] = myProArray;
const myProArrayMessage = `myProArrayMessage >>> name: ${arrayName} , arrayAge: ${arrayAge}`;
console.log(myProArrayMessage);
デフォルト値
コード
/**
* デフォルト値 (引数, 分割代入) << で使う
* 何もstrに入っていないと => undefined を返す => デフォルト値を設定しておく (Guest)
* */
const sayHello = (sayHelloStr = "Guest") => {console.log(`こんにちは ${sayHelloStr} さん`)};
sayHello();
sayHello("Har");
const {gender="not setting"} = myProfile;
// myageはコード上部で取得しているので省略
console.log(`${myage}歳 で genderは ${gender}です`);
スプレッド構文
概要
... を用いて配列を展開する
値の参照(ディープコピー)ではなく、コピーができる(参照もと変数の値を変えても参照先の値は変わらない値渡し)
配列の結合にも使える
コード
/**
* スプレッド構文 ...
* */
//配列の展開
const arrayA = [1,2];
console.log(arrayA); //配列で返る
console.log(...arrayA); //数値で返る
console.log( sumCalcFunc(arrayA[0],arrayA[1]) );
console.log( sumCalcFunc(...arrayA) ); //配列を展開して値を渡す.(3つの要素でも2番目までを参照される)
//分割代入で取得する
const arrayB = [1,2,3,4,5];
const [num1,num2,...arrayC] = arrayB;
console.log(num1);
console.log(num2);
console.log(arrayC); //配列型で 3~5が取得できる
//配列のコピー
const arrayD = [6,7];
const arrayE = [8,9];
const arrayF = [...arrayD];
console.log(arrayF); //配列の結合 [6,7]
const arrayG = [...arrayD, ...arrayE];
console.log(arrayG); //配列の結合 [6,7,8,9]
const arrayH = arrayD; //参照コピー
arrayH[0] = 1;
console.log(`arrayH: ${arrayH} & arrayD: ${arrayD}`) //arrayDにも同様の変更が加えられている。同じメモリを見てる
Map Filterを使った配列処理
概要
- Map
- 配列内の値に対して処理ができる。indexの引数を持つことで処理している配列数を取得できる
- Filter
- 条件に一致する値のみを返す
コード
/**
* map や filterを使った配列処理
* */
const nameArr = ["hoge","fuga","jake"];
for(let index=0; index<nameArr.length; index++){
console.log(nameArr[index]);
console.log(`${index}番目は${nameArr[index]}です`);
}
//2番目の引数に配列数が入ってくるしよう
nameArr.map((name, index) => {
console.log(`map : ${index}番目は${nameArr[index]}です`);
})
//同じ処理をmapでやる
//returnすると新しい配列を作れる
const nameArrB = nameArr.map((name) => {
return name;
})
console.log(nameArrB);
const nameArrC = nameArr.map((name) => {
return name === "jake" ? name : `${name}さん`;
});
console.log(nameArrC);
//条件でtrueの場合のみ値を返す
const numArray = [1,2,3,4,5]
const numArrayOdd = numArray.filter((num) => {
return num % 2 === 1;
})
console.log(numArrayOdd);
三項演算子
コード
const val = 0 < 1 ? "true" : "false";
console.log(`結果は${val}です`)
const sankoNum = 1300;
const formatedSankoNum = typeof sankoNum === 'number' ? sankoNum.toLocaleString() : "数値を入力して";
console.log(formatedSankoNum);
const sankoCheckSum = (num1,num2) => {
return num1 + num2 > 100 ? "100超え" : "許容範囲内" ;
}
console.log(sankoCheckSum(30,30))
console.log(sankoCheckSum(50,52))
📣 感想
改めてモダンJavascriptを学びなすことで、Reactを使う際にコードをメチャクチャ読みやすくなった👏
また、古い記述方式であるかどうかの判断がつくようになったので、社内システムや自己システムでリファクタリングしていきたい🚀
次はReactについて学習してく