Nuxt(Vue)のtemplateで簡単にnull判定できないからlodashで解決する

2020-08-01

まずはじめに言っておくとlodashなんて本当は使いたくない。けど解決策としてはありかなと思ったので書いた。

APIの値がちゃんとオブジェクトで返ってきたりオブジェクトではなく、nullやundefinedで返ってきたりするケースに出くわした。こういう場合、返ってくる値がnullやundefinedかどうかをチェックする必要がある。

そこで使えるのがOptional Chaining。

obj?.a?.bのようにオブジェクトチェーンのプロパティを正しいかどうか確認せずに読み込み可能にするもの。

とっても便利。しかしこの構文はVue、Nuxtで使う場合は少々問題にぶち当たる。というのもtemplate内ではこの構文を使うことができないため例えば、バインドする箇所でそのままOptional Chainingを使おうとするとエラーになる。

以下が例。

<template>
  <ul>
    <li
      v-for="item in items">
      {{ items?.a?.b }}:
    </li>
  </ul>
</template>

上記の書き方はエラーとなる。

これを解決するには、computedを使うことで解決することは可能。

computed: {
  formatItem(): string {
    return (
      items?.a?.b ?? ''
    )
  }
}

参照するプロパティごとにcomputedを使うのはコード量も多くなり大変。

調べてみると、Vueの公式リポジトリで同様の内容で困っているissueがあった。

このissueの中で、lodashを使って解決できるとコメントされていた。

import lodashGet from 'lodash/get'
Vue.prototype.$get = lodashGet

{{ $get(a, 'b.c.d') }}

Nuxt.jsの場合は、plugin配下にlodashをimportしたファイルを置きnuxt.config.tsのpluginsで読む込むように設定すれば使用可能。

気持ち的にlodashを使いたくないが、こういう地味なオブジェクトの操作には威力を発揮するなと染み染み思う。computedを各プロパティごとに大量に書くとVueファイル内のソースコードも肥大化するので見通しは、lodashの方が良いと思った。

Vue3では解消される？？ようなのでlodashを捨てることが出来るかも知れない。。