ﾉﾘｰｰｰﾝ’s Blog

Nuxt.jsのCreatedとmounted、$elと$refについての備忘録。
Nuxtについて調べていると、Vue.jsのドキュメントの方が充実しているため、Nuxtでの適用方法が分からなかったりする。
基本的にはVue.jsと同じ仕組みだが、ここではNuxtでの書き方・特徴にフォーカスして書く。

免責
初学者です。間違っていたらご指摘ください。

Created \ mountedの違い

Vueでel: '#app',と書くと、それはVueインスタンスそのものを指す。
例

<script>
new Vue({
    el: '#app',
}) 
</script>

Nuxt
mountedやcreatedでの挙動を確かめようと思い、以下のようにしてみる。Nuxtでは、Vueをnewしたりel: '#app',を定義する必要はない。デフォルトでされる。

created() {
    console.log('created')
    console.log(this.$el)
},
mounted() {
    console.log('mounted')
    console.log(this.$el)
},

結果

created
undefined
mounted
▶︎<div></div>

ここで使用した$elは、DOMに直接アクセスして取得し（ようとし）た、Vueインスタンスcomponentsのルート（html要素の最上位）。

Nuxtライフサイクルでは、createdがDOM生成前、mountedがDOM生成（直）後とされているため、createdで定義したthis.$elはundefinedになる。

余談

では、Vueにおけるel: '#app',をNuxtで取得したい場合はどういう風に書けばいいのかというと、thisを使えば良い。
例

export default {
    data() {
        return {
            el: this,
        }
    },
    created() {
        console.log('created')
        console.log(this.el)
    },
}

VueインスタンスそのものであるthisはDOMを参照しないのでcreatedでもmountedでも結果は同じ。

結果

created
▶︎ VueComponent {_uid: 34, _isVue: true, __v_skip: true, _scope: EffectScope, $options: {…}, …}

なので、関数内などでもVue componentを使いたい、このthisの挙動を変えたくない場合などは、data内でself: thisとかなんとか定義しておいて、thisの代わりにself.hogeなどとする方法もある。って母方のばーちゃんが言ってた。

ちょっと脱線（computed vs methods）

computed

computedは、計算機能付きのプロパティである。
getterとsetterがあり、get()／set()を省略するとcomputedはgetterとなる。
変数への代入はsetterで行い、getterでは基本的にグローバルな変数への代入はできない。
どうしてもgetterで代入を行いたい時は関数を用意する。
計算結果をキャッシュするので、再計算が必要ない場合、一度行った計算結果を返す速度が速い。プロパティなので呼び出し時は()不要。
以下Nuxt componentに渡した値を変更する例。依存関係にある値が変わった時に自動計算したい時などにピッタリ！

<template>
  <div>
    <v-text-field
      :id="id"
      v-model="innerValue"
      :label="label"
      @input="input"
    ></v-text-field>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: '',
    },
    id: {
      type: String,
      default: '',
    },
    label: {
      type: String,
      default: '',
    },
    input: {
      type: Function,
      // eslint-disable-next-line
      default: () => {},
    },
  },
  computed: {
    innerValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
  },
}
</script>

関数にする場合

computed: {  // 関数として実装、参照時はプロパティとして機能
    算出プロパティ名: function() {
      // return ...
}

methods

一方、メソッドはgetterのみ。setterは使えない。呼び出し時は <button @click="メソッド名()">送信</button>のように()が必要。
送信ボタンが押された時、など、アクションが起きた時の処理にピッタリ！

methods: {
    メソッド名: function() {
      // 処理
}

\$elと\$ref

\$elも\$refもVueインスタンスが持つプロパティ。他にも以下のようなものがある。

• $data
• $props
• $el
• $options
• $parent
• $root
• $slots
• $refs
• $attrs

\$el

ここで使用した$elは、DOMに直接アクセスして取得し（ようとし）た、Vueインスタンスcomponentsのルート（html要素の最上位）。

先に述べたように、\$elは要素の最上位であるルート(html)のDOM要素。型はany。

\$ref

一方\$refはref属性をつけたDOM要素とcomponentインスタンスのオブジェクト。
htmlにおけるidのようなもので、ref=""の形で要素にツバをつけておいて、\$refで要素を参照できる。型はobject。

<template>
    <button ref="hello">Hello</button>
</template>
<script>
  mounted() {
    console.log('$refs')
    console.log(this.$refs.hello)
  },
</script>

結果

$refs
▶︎ VueComponent {_uid: 83, _isVue: true, __v_skip: true, _scope: EffectScope, $options: {…}, …}

参考

# 【Vue.js】createdとmountedの違い
# 【Vue.js】 DOMを直接操作　$el $ref
# 【Vue】getterとsetterの使い方。大元の変数を間接的に変更する方法
# Vueのcomputedとmethodsの「使い分け」を解説
# インスタンスプロパティ（$data、$props、$el、$options、$parent、$root、$slots、$refs、$attrs） [Vue.js]

前回書いた[Nuxt.js]FusionCharts導入覚書 – Plain javascript編のvueバージョンです。

以前はVueフレームワークバージョンのfusionChartsを使うと動かなかったのですが、大先輩の偉大な助けにより解決したので備忘録。
結論から言うと、FusionChartsのプラグイン化が必要でした。

Vueを使っている人は、シンプルにこちらを参照すれば実装できると思います。
https://cfusioncharts.com/dev/getting-started/vue/your-first-chart-using-vuejs

バージョン

• MacOs 12.1
• node v16.2.0
• yarn 1.22.10
• nuxt 2.15.7
• fusioncharts 3.18.0

ライブラリを追加

fusionchartsは3系だとエラーが出るので2系に。該当のプロジェクト内で下記を実行。

$ yarn add fusioncharts
$ yarn add 'vue-fusioncharts@^2.0.4'

npm の人

$ npm install fusioncharts vue-fusioncharts --save
$ npm install vue-fusioncharts@^2.0.4' --save

plugins/fusioncharts.js

pluginsにDependencyを追加。
チャートの種類などはここに記載されている。
https://www.fusioncharts.com/dev/chart-guide/list-of-charts

import Vue from 'vue'
import VueFusionCharts from 'vue-fusioncharts'
import FusionCharts from 'fusioncharts'
import Charts from 'fusioncharts/fusioncharts.charts'
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'

Vue.use(
  VueFusionCharts,
  FusionCharts,
  Charts,
  FusionTheme
)

nuxt.config.js

plugins: [{ src: '~/plugins/fusioncharts.js', ssr: false }],

pages/chart.vue

ページ名はなんでもいいですが…

<template>
  <div>
    <Header></Header>
    <section class="container">
      <client-only>
        <div>
          <fusioncharts
            :type="type"
            :width="width"
            :height="height"
            :dataFormat="dataFormat"
            :dataSource="dataSource"
          ></fusioncharts>
        </div>
      </client-only>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: '100%',
      height: '400',
      type: 'column2d',
      dataFormat: 'json',
      dataSource: {
        'chart': {
          'caption': 'Countries With Most Oil Reserves [2017-18]',
          'subCaption': 'In MMbbl = One Million barrels',
          'xAxisName': 'Country',
          'yAxisName': 'Reserves (MMbbl)',
          'numberSuffix': 'K',
          'theme': 'fusion',
        },
        'data': [
          {
            'label': 'Venezuela',
            'value': '290',
          },
          {
            'label': 'Saudi',
            'value': '260',
          },
          {
            'label': 'Canada',
            'value': '180',
          },
          {
            'label': 'Iran',
            'value': '140',
          },
          {
            'label': 'Russia',
            'value': '115',
          },
          {
            'label': 'UAE',
            'value': '100',
          },
          {
            'label': 'US',
            'value': '30',
          },
          {
            'label': 'China',
            'value': '30',
          },
        ],
      },
    }
  },
}
</script>

nuxt.jsのプロジェクトを作成するたびに前回の作成から時間が空いてしまい、「あれ初期設定どうしてたっけ」となりがちなので自分用に備忘録。

• OS MacOS Monterey 12.1
• Node v16.2.0
• npm 7.20.0
• Nuxt.js 2.15.7

まずはプロジェクト作成

$ npm init nuxt-app test-project

設定項目

画像でドン！

参考

https://ma-vericks.com/blog/nuxt-init/

axios追加

インストール

npm install --save @nuxtjs/axios

nuxt.config.jsに追記

  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    "@nuxtjs/axios",
  ],

参考

https://public-constructor.com/nuxtjs-with-axios/

vuetifyのdarkモードをfalseに

フレームワークでvuetifyを選択した場合、dark modeがtrueになっているので設定を削除しtrueをfalseに書き換え。

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
    },
  },

いらないものを削除

デフォルトの要素たちにセイ・グッバイ

layouts/default.vueの中身にさよなら

<v-app></v-app>の中をざっくり消して、<Nuxt />だけ残す。今回はVuetifyのサイジングを使用するので<v-main><v-container>も残しました。footerはコンポーネント実装にするなら消す。今回はlayouts実装でいいや。ということで残した。

// layouts/default.vue
<template>
  <v-app>
    <v-main>
      <v-container>
        <Nuxt />
      </v-container>
    </v-main>
    <v-footer :absolute="!fixed" app>
      <span>&copy; {{ new Date().getFullYear() }}</span>
    </v-footer>
  </v-app>
</template>

index.vueの中身にさよなら

まっさらな状態に。

<template>
  <div></div>
</template>

components配下のディレクトリパスを設定

atomic designを採用しているが、初期のままだとコンポーネント名の頭にディレクトリ名をつけなければならないため（例<MoleculesHeader />）、パスを通す。nuxt.config.jsに以下を記載。

  components: {
    dirs: [
      '~/components',
      '~/components/atoms',
      '~/components/molecules',
      '~/components/organisms',
    ],
  },

こちらにも書いた

eslintrcのルール変更

console.logなど、よく使用する機能に関してはエラーが出ないよう、.eslintrc.jsにルールを追加しておく。

  rules: {
    'no-console': 'off', // console.log();OK
    'no-unused-vars': 'off', // 使っていない変数あってもOK
    // ↓空白行に対してwarnのみ出るようにする。
    'no-multiple-empty-lines': ['warn', { max: 1 }],
    'no-empty-function': 'off', // 空のfunctioｎあっても大丈夫
    'spaced-comment': 'off', // //の後にスペースかtabなくてもOK
  },

一旦ここまで。また思い出したら追記。

その他参考

vuetifyについてわかりやすかった記事

https://dev83.com/vue-vuetify-basic/

https://v3.nuxtjs.org/getting-started/quick-start/

Nuxt.js 3のget startedを読んでいたところ、VSCodeの設定でわからない箇所が。

Prerequisitesに

• Volar Extension 👉 Download
  • Either enable Take Over Mode (recommended)
  • … or add TypeScript Vue Plugin (Volar) 👉 Download

とあったのでTake Over Modeを入れようと下記URLの内容を参考に取り掛かるも、

https://github.com/johnsoncodehk/volar/discussions/471

How to enable Take Over Mode?に書いてある2のやり方(Run Extensions: Show Built-in Extensions command)がわからなかったのです。

1. Update Volar to 0.27.17.
2. Disable built-in TypeScript extension:
   2.1. Run Extensions: Show Built-in Extensions command
   2.2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
3. Reload VSCode, and then open any vue file to trigger Volar activation (no longer need in 0.28.4).

Extensions: Show Built-in Extensionsってどうやるんじゃ！！

VSCode

答えはこちらにありました。

https://code.visualstudio.com/docs/editor/extension-marketplace

Extensionsの検索窓から@builtinでフィルターをかけられるよ、というもの。検索結果からTypeScript and JavaScript Language Featuresを探し、右クリックからdisable(Workspace)を選択します。

Run Extensions: Show Built-in Extensions commandなので文字通りコマンドからやる方法があるんでしょうけど、わからなかったので手動です。

誰か賢い方、教えてください。

Nuxt.jsでFusionChartsを入れたので、その覚書。

最初はVueフレームワークで導入を試みようとしたのですが、エラーが消えなかったので断念。VueとNuxtの超えられない壁を感じたのですが、githubにnuxtで動かしている人もいて、多分nuxtでも動かせるんだろうけど、私の知識不足により実現できていません。

先輩の偉大な助けにより、vue dependencyをプラグイン化することで解決しました。ありがたやありがたや。

[Nuxt.js]FusionCharts導入覚書 – Vueフレームワーク編

ちなみに該当githubはこちら。プロジェクトをDLして動かしたら、選択できる地図が現れました。気になる方は動かしてみてください。

https://github.com/ICJIA/fusioncharts-test

Plain JavaScriptで動かす

というわけで、シンプルにPlain JavaScriptで動かすことにしました。

公式のGet Startedはこちらです。

https://www.fusioncharts.com/dev/getting-started/plain-javascript/your-first-chart-using-plain-javascript

前提条件

npmでfusionchartsをインストールする場合は、Node.jsのインストールが必要です。

インストール

CDN、ローカルファイル、npmのそれぞれでインストールする方法があります。

CDNの場合は、nuxt.config.jsのhead: { script: [ {src: ”,}, ],}部分にcdnソースを2つ、盛り込みましょう。

  head: {
    script: [
      // Step 1 - Include the fusioncharts core library
      {
        src: 'https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js',
      },
      // Step 2 - Include the fusion theme
      {
        src: 'https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js',
      },
    ],

はい。

私はnpmでインストールしました。

既存のnuxt.jsプロジェクトディレクトリで、npmを叩くだけ。先に最新のwebpackを入れておきます。

$ npm install webpack webpack-cli --save-dev
$ npm install fusioncharts

テンプレートを用意

pages>fusioncharts>index.vueを作成し、templateを用意。必要なdependencyをimportします。

<template>
  <div>
    <div id="chart-container">FusionCharts XT will load here!</div>
  </div>
</template>

<script>
// Include the core fusioncharts file from core
import FusionCharts from 'fusioncharts/core'
// Include the chart from viz folder
import Column2D from 'fusioncharts/viz/column2d'
// Include the fusion theme
import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion'
// Add the chart and theme as dependency
// E.g. FusionCharts.addDep(ChartType)
FusionCharts.addDep(Column2D)
FusionCharts.addDep(FusionTheme)
</script>

これで準備完了です。

データを用意

チャートを作成するにはデータが必要ですね。例として、ここでは世界の石油保有国とその量を示した2D chart を表現することにしましょう（公式に沿ってるだけですよ）。

<script></script>内importの下に、chartDataを定義します。x軸となるデータラベルをlabel、y軸となるデータバリューをvalueとして、オブジェクトにします。この辺はconstants/define.jsとかに書いてindex.vueでimportした方がnuxtっぽいけど。

// Preparing the chart data
const chartData = [
  {
    label: "Venezuela",
    value: "290"
  },
  {
    label: "Saudi",
    value: "260"
  },
  {
    label: "Canada",
    value: "180"
  },
  {
    label: "Iran",
    value: "140"
  },
  {
    label: "Russia",
    value: "115"
  },
  {
    label: "UAE",
    value: "100"
  },
  {
    label: "US",
    value: "30"
  },
  {
    label: "China",
    value: "30"
  }
];

チャート設定

データが用意できたので、いよいよ次はチャートの設定部分です。以下では公式の例をそのまま載せていますが、掲載されているオプションを元に色々カスタマイズができます。

// Create a JSON object to store the chart configurations
const chartConfig = {
  // チャートのタイプ
  type: "column2d",
  // Set the container object
  renderAt: "chart-container",
  // Specify the width of the chart
  width: "100%",
  // Specify the height of the chart
  height: "400",
  // Set the type of data
  dataFormat: "json",
  dataSource: {
    chart: {
      // Set the chart caption
      caption: "Countries With Most Oil Reserves [2017-18]",
      // Set the chart subcaption
      subCaption: "In MMbbl = One Million barrels",
      // Set the x-axis name
      xAxisName: "Country",
      // Set the y-axis name
      yAxisName: "Reserves (MMbbl)",
      numberSuffix: "K",
      // Set the theme for your chart
      theme: "fusion"
    },
    // Chart Data from Step 2
    data: chartData
  }
};

FusionChartsをmoutedで描画

最後に、FusionChartsをMountedします。

export default {
  mounted() {
    FusionCharts.ready(function () {
      console.log('passed FunctionChart')
      const fusioncharts = new FusionCharts(chartConfig)
      fusioncharts.render()
    })
    console.log('mounted!')
  },
}

npx nuxtした際の見た目