[Vue]d3.jsを用いてTSVデータをVue3で描画するまでの方法

• フロントエンド開発においてAPIではjson、コンテンツではmarkdownをfetchして加工したり描画することが多い。
• Vue2利用の際も当てはまるが、最近Nuxt3のBetaが発表されたことも相まって、そこで導入されているVue3やViteの注目率や利用率が日に日に上昇。
• そこで今回はデータ形式としてよく使うTSVのVue3での描画処理を記録していく。

環境

• Mac OS 11.2.3
• Node.js v14.16.0
• Vue 3.2.16

前提

• 利用するサンプルプロジェクトとして以下を満たしていることとする。
  • Vue3の利用
  • Vite2の利用
• 以下で上記を満たすサンプルを用意することが可能。

npm init vite@latest sample -- --template vue

手順

TSVデータの用意

• 描画対象のTSVデータとして以下を用意して任意のディレクトリに入れておく。

data/members.tsv

id  name    score
1   tanaka  90
2   suzuki  80
3   saito   70
4   oda 100

解析ライブラリのインストール

• TSVを解析するため以下のコマンドでライブラリをインストールする。

# d3.jsのインストール
npm i d3

描画

• 上記までの手順が完了後、実際にvueファイルを修正して画面に描画していく。
• 今回は以下の2つの方法で描画する処理を見ていく。用途に合った方を利用する。
  1. top-level-awaitを利用しない場合
  2. top-level-awaitを利用する場合
     • ※2の方法は実験的機能であるらしく、利用には注意が必要

top-level-awaitを利用しない場合

• 以下のファイル群を修正する。

  • 今回はsrc/components/配下のvueコンポーネントをsrc/App.vueで呼び出して表示させる形式にする。

• src/components/Member.vue

src/components/Member.vue

<script setup>
import { ref } from 'vue'
import * as d3 from 'd3'

// リアクティブ値
const members = ref(null)

// tsvパース処理
async function getMembers(){
  try{
    // サンプルデータ指定
    members.value = await d3.tsv("../../data/members.tsv",(d) => {
      return {
        id: d['id'],
        name: d['name'],
        score: d['score']
      }
    })
  } catch(err){
    console.error(err)
  }
}

// 呼び出し
(async () => {
  await getMembers()
})()
</script>

<template>
  <li v-for="member in members" :key="member">
    id : {{ member.id }}, name : {{ member.name }}, score : {{ member.score }}
  </li>
</template>

• src/App.vue

src/App.vue

<script setup>
import Member from './components/Member.vue'
</script>

<template>
  <Member />
</template>

top-level-awaitの利用の場合

• 以下のファイル群を修正する。

  • ※以下のApp.vueで使われているタグは実験的機能のため、利用の際は注意する。
  • 参考

• src/components/Member.vue

src/components/Member.vue

<script setup>
import { ref } from 'vue'
import * as d3 from 'd3'

const members = ref(null)

try{
  members.value = await d3.tsv("../../data/members.tsv",(d) => {
    return {
      id: d['id'],
      name: d['name'],
      score: d['score']
    }
  })
} catch(err){
  console.error(err)
}
</script>

<template>
  <li v-for="member in members" :key="member">
    id : {{ member.id }}, name : {{ member.name }}, score : {{ member.score }}
  </li>
</template>

• src/App.vue

src/App.vue

<script setup>
import Member from './components/Member.vue'
</script>

<template>
  <suspense>
    <template #default>
      <Member />
    </template>
    <template #fallback>
      読み込み中・・・
    </template>
  </suspense>
</template>

確認

• 上記の記載後、npm run dev等でサーバーを起動して、以下のように任意のTSVデータが描画されていることを確認する。

まとめ

• 普段データとしてTSVを扱うことが多いため、Vue3での扱い方を記録できた。
• 実験的な機能であるsuspenseを扱ったため、今後正式に利用が推奨されていくのか動向を確認していく。

参考

• https://d3js.org/
• https://v3.ja.vuejs.org/guide/migration/suspense.html