この記事では、実務でよく使われるJavaScriptの神テクニック10選を紹介します。
1 、Optional Chaining（安全なプロパティ参照）
オブジェクトが存在しない場合でもエラーを防ぐことができます。
const name = user?.profile?.name従来の書き方
if(user && user.profile){
console.log(user.profile.name)
}コードがかなりシンプルになります。
2、 Null合体演算子（??）
値が null または undefined の場合のみデフォルト値を設定できます。
const username = inputName ?? "guest"注意
const value = 0 || 10
// 10になるしかし
const value = 0 ?? 10
// 0になる3、 分割代入（Destructuring）
オブジェクトから簡単に値を取り出せます。
const user = {
name: "Taro",
age: 30
}
const { name, age } = userReactなどでは必須レベルのテクニックです。
4、 スプレッド構文（…）
配列やオブジェクトを簡単にコピーできます。
const arr = [1,2,3]
const newArr = [...arr]オブジェクトでも使えます。
const user = {name:"Taro"}
const newUser = {...user}5、 配列の重複削除
Setを使うと簡単にできます。
const numbers = [1,2,3,3,4]
const unique = [...new Set(numbers)]結果
[1,2,3,4]6 、短絡評価（Short Circuit）
条件によって処理を簡単に書けます。
isLogin && showDashboard()従来
if(isLogin){
showDashboard()
}7、 配列の合計を1行で
reduceを使います。
const numbers = [1,2,3,4]
const sum = numbers.reduce((a,b)=>a+b,0)結果
108、 配列をオブジェクトに変換
const users = [
{id:1,name:"Taro"},
{id:2,name:"Hanako"}
]
const map = Object.fromEntries(
users.map(u => [u.id, u])
)結果
{
1:{id:1,name:"Taro"},
2:{id:2,name:"Hanako"}
}検索速度が上がります。
9、 Promiseを並列処理
非同期処理を高速化できます。
const results = await Promise.all([
fetchUser(),
fetchPosts(),
fetchComments()
])順番に処理するより圧倒的に高速です。
10、 オブジェクトのキー取得
const user = {
name:"Taro",
age:30
}
Object.keys(user)
Object.values(user)
Object.entries(user)結果
["name","age"]
["Taro",30]
[
['name', 'Taro'],
['age', 30]
]まとめ
JavaScriptの神テクニックとして紹介したのは次の10個です。
- Optional Chaining
- Null合体演算子
- 分割代入
- スプレッド構文
- Setで重複削除
- 短絡評価
- reduceで合計
- 配列→オブジェクト変換
- Promise.all並列処理
- Object.keys / values / entries
これらは モダンJavaScriptでは必須レベルのテクニックです。
知らないものがあれば
ぜひ実務コードに取り入れてみてください。
コメントを残す