HACKSION

  • JavaScript神テクニック10選

    この記事では、実務でよく使われる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 } = user

    Reactなどでは必須レベルのテクニックです。

    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)

    結果

    10

    8、 配列をオブジェクトに変換

    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では必須レベルのテクニックです。

    知らないものがあれば

    ぜひ実務コードに取り入れてみてください。