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

2020-08-01

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

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

そこで使えるのがOptional Chaining。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/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があった。

https://github.com/vuejs/vue/issues/4638

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

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

{{ $get(a, 'b.c.d') }}
  • lodashのgetメソッドをimportする。
  • Vue.prototypeを使ってプラグインとして使えるようにする
  • 使いたいtemplateファイルに記述する。

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

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

このissueも参照すると良い。 https://github.com/vuejs/vue/issues/11088

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


ソースコードはこちらのリポジトリにあります。

Google Analyticsを使っています。