【React】モダンjavascript備忘録

はじめに

長らく使っていない言語は、思いの他忘れがちですよね。
これから「React、Vue、Angular、Riot」等を学んでいく方も、久し振りに振り返りを行っていく方も、一緒にモダンjavascriptを学んでいきましょう。

これでモダンjavascript対策はバッチリ解決です！

分割代入

オブジェクトから特定の要素を取得する方法。
使用頻度がかなり高く、後のコンポーネントで必須の知識になります。

配列

前半分を取得。

const list = ["日本", "平安時代", "藤原道長", "紫式部"];
const [ country, era ] = list;
console.log(country, era);
>>日本 平安時代

後半分を取得。また、要素より多い場合は「undefined」となる。

const [,,man,woman,other] = list;
console.log(man, woman, other);
>>藤原道長 紫式部 undefined

残りを一括で取得する

左の要素と、残を「…」で取得する方法

const [country, ...other] = list;
console.log(country, other);
>>日本 ["平安時代", "藤原道長", "紫式部"]

入れ子を取得する

const list = ["日本","平安時代",["藤原道隆","藤原道兼","藤原道長"],"紫式部"];
const [,,[,,man]] = list;
console.log(man);
>>藤原道長

オブジェクト

オブジェクトの分割代入と、初期値の設定方法

const obj = {
  country: "日本",
  era: "平安時代",
  man: "藤原道長",
  woman: "紫式部",
};
const { man, woman, taiga = "光る君へ", broadcaster } = obj;
console.log(man, woman, taiga, broadcaster);
>>藤原道長 紫式部 光る君へ undefined

変数名を変える

const { woman: heroine } = obj;
console.log( heroine);
>>紫式部

残りを一括で取得

要素と、残要素を「…」で取得する方法

const { woman, ...other } = obj;
console.log(woman, other);
>>紫式部 {country: '日本', era: '平安時代', man: '藤原道長'}

入れ子を取得する

const obj = {
  country: "日本",
  era: "平安時代",
  fujiwara: {
    eldest_son: "藤原道隆",
    second_son: "藤原道兼",
    third_son: "藤原道長",
  },
  woman: "紫式部",
};
const { fujiwara: { third_son }, woman } = obj;
console.log(third_son, woman);
>>藤原道長 紫式部

変数宣言と分ける場合

let man, woman;
({fujiwara:{third_son:man},woman} = obj);
console.log(man,woman);
>>藤原道長 紫式部

引数

この分割代入も使用頻度がかなり高いので、覚えることが必須となる。

function actor({country, era, man, woman}) {
  console.log(country, era, man, woman);
}
actor({country: "日本", era: "平安時代", man: "藤原道長", woman: "紫式部"});
>>日本 平安時代 藤原道長 紫式部

スプレッド構文

分割代入と共に使用頻度がかなり高い。
シャローコピーのため、入れ子まではコピーできない。

配列

変数から変数へコピー「const test = list;」しても、アドレスしかコピーできていない。
お互いに同じヒープメモリを参照しているため、結果が同じになる。

const list = ["藤原道長", "紫式部", "清少納言"];
const test = list;
list[1] = "藤原斉信";
console.log(list);
console.log(test);
>>['藤原道長', '藤原斉信', '清少納言']
>>['藤原道長', '藤原斉信', '清少納言']

スプレッド構文を使えば、別のオブジェクトとしてコピー出来る。

const list = ["藤原道長", "紫式部", "清少納言"];
const test = [...list];
list[1] = "藤原斉信";
console.log(list);
console.log(test); // 元の配列のまま
>>['藤原道長', '藤原斉信', '清少納言']
>>['藤原道長', '紫式部', '清少納言']

ディープコピーでは無い！！

const list = ["藤原道長", ["藤原公任", "藤原行成"], "清少納言"];
const test = [...list];
list[1][1] = "藤原斉信";
console.log(list);
console.log(test);
>>["藤原道長", ["藤原公任", "藤原斉信"], "清少納言"]
>>["藤原道長", ["藤原公任", "藤原斉信"], "清少納言"]

「list」「test」共に、藤原行成が藤原斉信に変わっている。

オブジェクト

const obj = {
  country: "日本",
  era: "平安時代",
  man: "藤原道長",
  woman: "紫式部",
};
const newObj = { ...obj };
console.log(newObj);
>>{country: '日本', era: '平安時代', man: '藤原道長', woman: '紫式部'}

引数

引数でのスプレッド構文
配列に「…」を付けることで、ばらして各々の引数にできる。

function actor(country, era, man, woman){
    console.log(country, era, man, woman);
}
actor(...["日本", "平安時代", "藤原道長", "紫式部"]);
>>日本 平安時代 藤原道長 紫式部

アロー関数

引数と関数を「=>(アロー)」で繋げて記載する。
この二つの関数は、同じ挙動をする。

function addition1(num1, num2) {
  return num1 + num2;
}

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

関数が１行である場合は、returnも省略可能である。

const addition2 = (num1, num2) => num1 + num2;

引数が１つの場合は、「()」が省略可能である。
　※引数が無い場合は、「()」は省略不可である。

const addition3 = num => num + 10;

オブジェクト内での関数の記述方法。
　※お好みで

const func = {
  villain: "藤原道兼",
  man: "藤原道長",
  woman: "紫式部",
  now: function(){
    console.log(`敵役：${this.villain}`);
  },
  call() {
    console.log(`主人公：${this.man}`);
  },
  call2: () => {
    console.log(`ヒロイン：${func.woman}`);
  },
};
func.now(); // 従来の書き方
func.call(); // 簡易文
func.call2(); // アロー関数
>>藤原道兼
>>藤原道長
>>紫式部

Arrayインスタンスのメソッド

先々のReactコンポーネント制作にて、度々登場するメソッドを集めてみました。

map()

配列を全て呼出し、指定した条件下で配列を生成します。
　※コンポーネント内では、どちらかと言うと「呼び出す」性質が重宝している。

function Blog(){
    const ary = ['りんご','みかん','すいか','なし'];
    return (
        <div>
            { ary.map((dt,idx)=>(
                <div key={idx}>{dt}</div>
            ))}
        </div>
    )
}
export default Blog;

探す

下記は、find(), findIndex()のサンプルで使用する配列です。

    const ary = [
        {code:'001', name:'りんご'},
        {code:'002', name:'みかん'},
        {code:'003', name:'すいか'},
        {code:'004', name:'なし'}
    ];

find()

テスト関数の条件を満たす最初の要素を返す。満たす要素が無い場合は、undefinedを返す。

const dt = ary.find(data => data.code === '003');
console.log(dt.name) // -> すいか

findIndex()

テスト関数の条件を満たす最初のインデックスを返す。満たす要素が無い場合は、-1を返す。

const idx = ary.findIndex(data => data.code === '003');
console.log(idx); // -> 2

indexOf()

引数に与えられた内容と同じ内容を持つ最初の要素のインデックスを返す。存在しない場合は-1を返す。
　→findIndex()と異なり、式ではなく値で比較を行う。

const ary = ['りんご','みかん','すいか','なし'];
const idx = ary.indexOf('すいか');
console.log(idx); // -> 2

includes()

特定の要素が配列に含まれているかをtrue or falseで返す。

const ary = ['りんご','みかん','すいか','なし'];
const bol = ary.includes('すいか');
console.log(bol); // -> true

sort()

配列の要素をソートして、配列の参照を返します。

const ary = [
    {code:'003', name:'りんご'},
    {code:'002', name:'みかん'},
    {code:'001', name:'すいか'},
    {code:'004', name:'なし'}
];
ary.sort((a,b)=>{
    if ( a.code > b.code ){
        return 1;
    }else{
        return -1;
    }
});
console.log(sort);

オプショナルチェーン(?.)

チェーン内の各参照が正しいか確認せずに取得を可能とする

const obj = null;
console.log(obj?.sample?.test); // エラーにならない
>>undefined

以前は・・・
変数の中身を厳重に確認していた頃と比べたら、楽になったと思う。

let val;
if ( val !== null && val !== undefined){
    何らかの式
}

??

「null」「undefined」の場合、置き換える手法になる。

const obj = null
console.log(obj ?? 'テスト');

代入も可能である

let val;
val ??= 'テスト'; // valがundefinedのため、代入される
console.log(val);
val ??= '変更してみる'; // valに値があるため、こちらは代入されない
console.log(val);
>>テスト
>>テスト

引数の初期設定と可変長引数

引数の初期設定

const taiga = (era = "平安時代") => {
  console.log(era);
};
taiga();
>>平安時代

可変長引数

可変長引数は、必ず最後の引数として記述する。

const taiga = (main, ...actor) => {
  console.log(main, actor);
};
taiga("藤原道長", "紫式部", "清少納言");
>>"藤原道長" ["紫式部", "清少納言"]

オブジェクトの簡易作成

変数をそのままオブジェクトとして利用可能

const man = "藤原道長";
const woman = "紫式部";
console.log({ man, woman });
>>{man: '藤原道長', woman: '紫式部'}

配列も可能

console.log([man,woman]);
>>['藤原道長','紫式部']

変数宣言

宣言説明備考
var変数を宣言スコープが広すぎて使用が難しい。基本利用すべきではない。
let変数を宣言変数宣言としてはメインで使用していく
const定数(再代入禁止)を宣言再代入しないのであれば、全てこちらを使用した方がいい

ブロックスコープに対応

正常なケース

これは、「change」が出力される

let test = "test";
if (true) {
  test = "change";
}
console.log(test);
>>change

エラーになるケース

if文やfor文等の内部で宣言した変数は、その外に影響する事は無い。

if (true) {
  let test = "test";
}
console.log(test);

const

再代入しなければ、オブジェクトや配列に要素を追加・変更・削除しても問題無い。

正常なケース

オブジェクト等はリテラル値では無い為、変数に格納されているのはヒープメモリのアドレスである。
　※本体はヒープメモリにある。
その為、下記操作はアドレスが変わる訳では無い為、問題無く行える。

const dt = { code: 123, name: "山田太郎", sex: "男" };
dt.age = 64;
console.log(JSON.stringify(dt));
>>{"code":123,"name":"山田太郎","sex":"男","age":64}

エラーになるケース

再代入は流石に仕様通りNGである。

const dt = { code: 123, name: "山田太郎", sex: "男" };
dt = { code: 123, name: "山田太郎", sex: "男", age: 64 };

リテラル関連

テンプレート文字列

「“(バッククォート)」で括った文字列に変数を代入する事ができる。
また、改行もそのまま反映されるため、従来の「\n」等は不要になる。

const name = "山田太郎";
const msg = `私は${name}です。
よろしくお願い致します。`;
console.log(msg);
>>私は山田太郎です。
よろしくお願い致します。

数値セパレータ

数値をアンダースコアでつなげる事で、桁数が分かりやすくなります。
つなげ方は自由なので、3桁でも4桁でもOKです。

const num = 1_2345_6789;
console.log(num);
>>123456789

エラーになるケース

const num1 = 0._123; // 少数点前後
const num2 = 12345_; // 数値の前後
const num3 = 123__456; // 2個以上の連結

おわりに

以上で、モダンjavascriptのサンプルをご紹介しました。

普段使わないと、ぽつぽつと忘れてしまいがちですが、何度も見返せるようにまとめてみました。