🚶 はじめに

最近自己開発で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について学習してく

📖 参考

https://www.tohoho-web.com/js/what.htm#ECMAScript
https://www.udemy.com/course/modern_javascipt_react_beginner/
- ここでお勉強しています