はじめに
今回は、中級者向けにJavaScriptの便利技をいくつか紹介します。
全てを覚える必要はないですが、他のプログラマーが使っている場合がありますので、
複数人で開発している方は、知っておいたほうが良い内容になっています。
また、個人的には使っていると気分が上がるので、こういう便利技は積極的に使います！
分割代入
分割代入は、一度にまとめて変数に値を格納する方法です。
２つ程度の変数であれば、そんなに便利とは感じませんが３つ以上になる便利だと感じます。
早速ですが、サンプルコードは以下になります。
const [name, age, gender] = ['jonny', 23, 'man']
console.log(name) // jonny
console.log(age) // 23
console.log(gender) // manこのように、1度に３つの変数に対して値の代入ができるため、
便利なだけでなく、可読性も上がります。
次のサンプルコードは、少し特殊でオブジェクトを使って分割代入してみます。
const {name, age, gender} = {name: 'jonny', age: 23, gender: 'man'}
console.log(name) // jonny
console.log(age) // 23
console.log(gender) // man
const {x, y} = {x: 10, y: 20, z: 30}
console.log(x) // 10
console.log(y) // 20
console.log(z) // Error注意点としては、存在しない変数への代入自体はエラーになりませんが、
存在しない変数へのアクセスはエラーになることです。
オプショナルチェイニング（Optional Chaining）
これは、存在しない変数へアクセスしてしまった場合のエラー回避方法になります。
変数の後ろに「？」をつけることで、その変数が存在しない場合でもエラーにはなりません。
サンプルコードはこちらです。
const obj = {data: {num: 1}}
console.log(obj.data?.num) // 1
console.log(obj.data?.number) // undefinedこの例では、dataの後ろに「？」をつけています。
「？」をつけることでdataが存在していなくても、エラーにはならずにundefinedがかえってきます。
これが、オプションチェイニングになります。
これによって、エラーになる可能性を回避できるので、
nullチェック用のコードを書かなくても良くなるというメリットが生まれます。
ちなみに、「obj」もnullの可能性がある場合は、「obj?」と記述します。
Null合体演算子
これは非常に便利で、値がnullまたはundefinedの場合に、デフォルト値を設定できる演算子です。
サンプルコードは、こちらです。Null合体演算子は「??」で表現します。
const result1 = null ?? 'default'
console.log(result1) // default
const result2 = undefined ?? 'default'
console.log(result2) // default
const result3 = 'success' ?? 'default'
console.log(result3) // success今回は、nullやundefinedを直接指定しますが、
nullやundefinedになる可能性のある変数を設定した上で、
Null合体演算子を使用するのが一般的な使い方になります。
テンプレートリテラル
これは、文字列の結合を便利にしてくれたもので、
通常は、「＋」で繋げて記述するのが一般的ですが、テンプレートリテラルを使うと、
簡単に記述することができます。
こちらがサンプルコードです。
const [name, age] = ['jonny', 25]
console.log(`僕の名前は${name}です。年齢は${age}歳です。`)
// 僕の名前はjonnyです。年齢は25歳です。「`」（バッククォート）で囲んだ上で、埋め込みたい箇所に「${変数}」を入れて記述します。
ちなみに、バッククォートの入力の仕方は「Shift」を押しながら「アットマート」を押します。
ショートサーキット評価
これは「&&」や「||」を使って、デフォルト値を設定する方法です。
Null合体演算子と似ていますが、全く一緒というわけではなく使い分けることで効果的になります。
こちらのサンプルコードを使って、使い分けについて解説します。
const check = true
console.log(check && '成功') // 成功
console.log(check || '失敗') // trueまずは「&&」の場合、変数checkがtrueなら右辺の結果が返されます。
逆にfalseなら、変数checkの値が返されます。
そして、「||」の場合は逆になり、変数checkがtrueなら変数checkが返され、
falseなら右辺の結果が返されます。
Null合体演算子とショートサーキット評価の違い
Null合体演算子は左辺がnullまたはundefinedの場合のみ、
右辺の結果が返されるというものでしたが、
ショートサーキット評価では、nullまたはundefinedの他に「0」や「”」（空文字）も対象になります。
つまり、デフォルト値（右辺）を使う条件によって使い分けることができます。
const str = ''
console.log(str || '空白') // 空白
const num = 0
console.log(num || 'ゼロ') // ゼロスプレット構文
これは、配列やオブジェクトを簡単にコピーしたり結合したりする方法です。
個人的には一番好きで、非常に便利で他の言語でも採用してほしいと思っています。
こちらが、サンプルコードです。
const array1 = [1, 2, 3]
const array1Copy = [...array1, 4, 5]
console.log(array1Copy) // [ 1, 2, 3, 4, 5 ]スプレッド構文の便利な使い方
スプレッド構文は配列やオブジェクトのコピーや結合だけではなく、
もっと便利な使い方があるのでサンプルコードを使って紹介します。
const obj = {
name: 'jonny',
age: 26,
height: 170,
weight: 60
}
const newObj = {...obj, age: 28, height: 180}
console.log(newObj)
// { name: 'jonny', age: 28, height: 180, weight: 60 }このようにオブジェクトの一部だけ値を変更したい時に非常に便利で、簡単に書き換えができます。
オブジェクトの配列もこのように書き換えをすることができます。
const obj1 = {
name: 'jonny', age: 26, height: 170, weight: 60
}
const obj2 = {
name: 'san', age: 31, height: 160, weight: 55
}
const objArray = [obj1, obj2]
console.log(objArray)
// [
// { name: 'jonny', age: 26, height: 170, weight: 60 },
// { name: 'san', age: 31, height: 160, weight: 55 }
// ]
// 配列内のオブジェクトのheightを180に変更
const newObjArray = objArray.map(m => {
return {...m, height: 180}
})
console.log(newObjArray)
// [
// { name: 'jonny', age: 26, height: 180, weight: 60 },
// { name: 'san', age: 31, height: 180, weight: 55 }
// ]まとめ
今回は、JavaScriptで使える便利技を紹介しました。
今回紹介したもの以外にも、様々な便利技がありますので、後々紹介したいと思います。
ここまで読んでいただきありがとうございます。
コメント