ECMA Script6（JavaScript）のモダンなコーディング

ECMA Script6（JavaScript）のモダンなコーディング

ECMA Script6（JavaScript）のモダンな記述方法です。

{}を付けてオブジェクトを作成する

let a = 'test';
let obj = {a};
console.log(obj);

結果は以下のように変数名をキーとして、値が変数の値となります。

{ a: 'test' }

変数の初期化

変数初期化するのには、||を使います。

const x = undefined
const height = x || 180 // 初期値を||の後に書く
console.log(height) // 180
const y = null
const weight = y || 60 // 初期値を||の後に書く
console.log(weight) // 60

関数にオブジェクトで引数を渡す

関数の引数をオブジェクトで渡します。

受け取る関数の引数もオブジェクトにします。この記述のメリットはキー名が同じであれば引数の順序は関係ないという点です。

function test({c,b,a}) {// 順序関係なく、キー名が一致していれば良い
  console.log('c=>',c,'b=>',b,'a=>',a);
  return a + b + c;
}
console.log(test({a:3,b:5,c:10}));// c=> 10 b=> 5 a=> 3

関数に配列で引数を渡す

関数に配列で引数を渡すことができます。スプレッド演算子を使用します。

配列で渡す場合は、順序が同じである必要があります。

let arr = [1,2,3];

function a(a,b,c){
  console.log('a=>',a,'b=>',b,'c=>',c);
  return a + b + c;
}
console.log(a(...arr));// スプレッド演算子を使用 結果は → a=> 1 b=> 2 c=> 3

関数の引数を初期化する

関数の引数が指定されなかった場合にデフォルト値を初期化することができます。

function test(name="takahashi", age=22){ // 引数初期化
console.log(name); // takahashi
console.log(age); // 22
}
test(); // 引数を指定しない

文字列型を数値型に変換する

JavaScriptで数値に変換するには、Number(変数)としますが、を末尾に|0付けることで数値に変換することができます。

let n = '101'|0;
console.log(typeof n);// numberで返ってくる
console.log(Number(n));// 101で返ってくる

但し、小数点がある場合は意図したとおりに動作しませんので+を付けて変換する方が良いかもしれません。

let n = '100.6'|0;
console.log(n); // 100となる

文字列型の変数に+を付けるだけでnumber型に変更することも可能です。

let n = '100';
console.log(typeof +n); // number

数値型を文字列に変換する

ぱっとモダンなコーディングが思いつかないのですが、ベタに”という文字列を連結すれば数値は文字列型になります。

let n = 100;
console.log(typeof (n+'')); // string

オブジェクトを分割代入する

オブジェクトをデストラクチャリングして分割代入することができます。

const params = {
  'id': '1',
  'name': 'taro'
};

let {id, name} = params;
console.log(id); // 1
console.log(name); // taro

配列に配列を追加する

「ECMA Script6（JavaScript）で配列に配列を追加する」参照

配列を降順にソートする

一旦ソートしてから、リバースすれば降順ソートになります。

arr.sort().reverse();

配列でソートするときに数値のソートは文字列としてソートされるため、辞書順になります。

その為、数値の場合は比較関数を引数に渡す必要があります。

「JavaScriptで配列をソートする」参照

配列の要素を0にする

配列を空配列にしたい場合はlengthに0を代入してあげます。これで空配列にすることが出来ます。

const arr = [1,2]
arr.length = 0
console.log(arr) // []

オブジェクトのスプレッド演算子

スプレッド演算子とはピリオド三つのことを指します。続けて変数名を指定します。

このスプレッド演算子を指定してオブジェクトのコピーができます。

let obj = {a:1,b:2};
let ret = {...obj}; // シャローコピー
console.log(ret); // {a:1,b:2}

シャローコピーなのでオブジェクトがネストされる場合は同じ参照となりますので注意です。

const obj = {
  a: {
    b: 1
  }
};
const ret = {...obj};
obj.a.b = 1000;
console.log(ret);// {a: {b:1000}} 同じ参照先の為、1000になる

オブジェクト変数であれば、{…obj}.aという記述方法も可能です。

const obj = {a:1,b:2}
console.log({...obj}.a); // 1と表示される

ディープコピーする場合は「ECMA Script6（JavaScript）でObjectをコピーするObject.assignメソッド」を参照ください。

※Object.assignメソッドもシャローコピーです。

オブジェクトのプロパティ存在チェック

in文を使えばオブジェクトのプロパティ存在チェックができます。

const obj = {name: 'takahashi', age: 22};
console.log('name' in obj); // true
const bool = 'name' in obj;
if(bool) {
  console.log('name is exist.'); // 通る
}

inプロパティは実は配列の添え字に対して存在チェックすることも可能です。

これは、配列の添え字も単なるプロパティだからです。

const arr = [, 2, undefined, , 5]
console.log(3 in arr) // false
console.log(2 in arr) // true
console.log(1 in arr) // true
console.log(0 in arr) // false

オブジェクトのプロパティ(key)存在チェック

Object.keysと~（チルダ）を使ってプロパティが存在すればtrueを返すことが出来ます。

objがオブジェクト、indexOfメソッドの引数にチェックしたいプロパティ名を指定します。

const obj = {'name': 'takahashi'}

if(~Object.keys(obj).indexOf('name')) {
  console.log('true')
}

文字列を含む判定にも~(チルダ)は使えます。以下参照ください。

JavaScriptで文字列を含む判定するindexOf

オブジェクトのkeyを取得する

Objectのkey – valueのうち、keyのみを取得したい場合、以下のようにコーディングしていました。

let obj = { name: 'takahshi', age: 20 }
let keys = []
for (let key in obj) {
  keys.push(key)
}
console.log(keys) // ['name', 'age']

Object.keysメソッドを使用すれば簡単にkeyのみ取得することができます。

let obj = { name: 'takahshi', age: 20 }
let arr = Object.keys(obj)
console.log(arr) // [ 'name', 'age' ]

但し、継承しているクラスのプロパティも取得されてしまいますので、Object.hasOwnPropertyメソッドを使用すると継承しているクラスのプロパティは省かれます。

let arr = Object.keys(obj).map(e => {
  if (obj.hasOwnProperty(e)) {
    return e
  }
})
console.log(arr) // [ 'name', 'age' ]

オブジェクトのvalueを取得する

オブジェクトからkey – valueのvalueを取得するには以下のように記述していました。

let obj = { name: 'takahshi', age: 20 }
let arr = []
for (let key in obj) {
  arr.push(obj[key])
}
console.log(arr) // [ 'takahshi', 20 ]

ES8からObject.valuesメソッドで簡単にvalueを取得することが可能になりました。

let obj = { name: 'takahshi', age: 20 }
let val = Object.values(obj)
console.log(val) // [ 'takahshi', 20 ]

配列をユニークにする

「ECMA Script6（JavaScript）で配列をユニークにする方法」を参照ください。

配列を空にする

配列を空にするには、lengthプロパティに0を代入するだけで空配列にすることができます。

const arr = [1, 2, 3, 4, 5]
arr.length = 0
console.log(arr) // 配列が[]になる

^(キャレット)で反転する

true,faseを逆にします。変換なのでmapを使用します。

const arr = [true,false]
console.log(arr.map((item)=>!item) // [false,true]となる

0,1の配列を1,0にする方法です。変換なのでmapを使用します。

const arr = [0, 1, 0]
console.log(arr.map((item)=> item^1)) // [ 1, 0, 1 ]となる

truthy and falsy

「ECMA Script6（JavaScript）のtruthy and falsy」を参照ください。

日付はmoment.jsを使う ※moment.jsはメンテナンスモードになりました

Dateオブジェクトはなにかとイケてないので、moment.jsを使った方が良いです。

「日時を扱うmoment.js 」を参照ください。

moment.jsはメンテナンスモードになったため、date-fnsやDay.jsを利用してください。

util.inspectを使ってログ表示する

「console.log()でオブジェクトの階層が深い場合に[Object]となる場合の対処法」を参照ください。

配列のforEachは使わない方向でコーディングする

find,filter,map,reduceなどで代用できないか検討したほうが良いです。forEach内でPromiseオブジェクトを返す関数は使えない為です。（Promise.allを使用すべきです）

2つの変数の値の入れ替え

xとyの値を入れ替えるにはよくtmpという一時変数を使っていたと思います。

が、以下のようにコーディングするだけでxとyの値は1行で入れ替わります。

let x = 10
let y = 20
[x, y] = [y, x] // 入れ替え
console.log(x) // 20
console.log(y) // 10

Promise.allの結果を受け取る

Promise.allの結果を[ret1,ret2]みたいな感じで受け取ることができます。受け取る配列の要素数はPromise.allの要素数と同じです。

(async function main() {
  const [a, b] = await Promise.all([
    new Promise(resolve => resolve('promise1')),
    new Promise(resolve => resolve('promise2'))
  ])
  console.log(a, b) // promise1 promise2
})()

Promise.allと配列のmapメソッドで並列処理を行う

同期をとって処理するとnode.jsのメリットが薄れてしまうので、重たい処理は並列で行った方が良いです。

その際、Promise.allと配列のmapメソッド、async-awaitを使用します。以下例では配列にAWS S3のオブジェクトキーが入っている前提です。

await Promise.all(
  deleteTargets.map(async fullPathFile => {
    await s3.deleteObject('S3バケット名', fullPathFile)
  })
)

文字列の中の特定文字列の前後を取得する

文字列を分割するときに、その文字列内の特定文字列の前後を取得したい場合があります。

substring,split,正規表現などで実現できます。

let str = 'hoge/fuga'
str.substring(0, str.indexOf('/')) // hoge
str.substring(str.indexOf('/') + 1) // fuga

str = 'hoge/fuga'
str.split('/')[0] // hoge
str.split('/')[1] // fuga

str = 'hoge/fuga'
regexp = /(.*)\/(.*)/g

let match
if(match = regexp.exec(str)) {
  match[1] // hoge
  match[2] // fuga
}

Mapクラスを２次元配列で初期化する

JSのMapクラスを使います。重複するキーは許されません。new Map()の引数に２次元配列を指定することによって初期化することができます。重複するキーが存在する場合は後勝ちになります。

const a = [
  [1, 'kieru'],
  [1, 'hoge'],
  [2, 'fuga']
]
const map = new Map(a) // Map { 1 => 'hoge', 2 => 'fuga' }

Mapクラスで分岐を減らします。

let waribiki = 0,shop = 'Yahoo'
if(shop ==='Yahoo') {
  waribiki = 0.1
}else if(shop === 'Rakuten') {
  waribiki = 0.2
} else if(shop === 'Amazon') {
  waribiki = 0.3
}
↓
const shops = new Map([
    [
        'Rakuten',
        0.1
    ],
    [
        'Yahoo',
        0.2
    ],
    [
        'Amazon',
        0.3
    ]
])
shop = 'Yahoo'
shops.get(shop) // 0.2

javascriptで配列の最後の要素を取得する

やり方はいくつかありますが、at(-1)とすると簡単に取得することが可能です。

const arr = [
  {
    '品目':'砂糖',
    'カテゴリ':'調味料'
  },
  {
    '品目':'塩',
    'カテゴリ':'調味料'
  },
  {
    '品目':'お酢',
    'カテゴリ':'調味料'
  }
]
const result = arr.at(-1)
console.log(result) // {'品目':'お酢','カテゴリ':'調味料'}

null合体演算子

??についてです。変数?? 値という記述します。

変数がnullまたはundefinedの際に値が設定されます。以下例です。

let a,x
a = null
x = a?? 20 // x = 20
a = undefined
x = a?? 30 // x = 30
a = 1
x = a?? 40 // x = 1

配列を指定要素数で分割する

配列を指定した要素数で分割し、二次元配列にするにはspliceメソッドを使用すれば簡単に実現できます。

「JavaScriptで不定な配列を一定数の二次元配列に変換する」を参照ください。