[jQuery]エラー:Uncaught ReferenceError: $ is not defined

突然ですが、このようなエラーを吐き出したことはありますか?

main.js:2 Uncaught ReferenceError: $ is not defined

私は、あります。

原因は、シンプルにjs読み込み位置を間違えていたというものです。以下stackoverflowより。

The most common reason behind the error “Uncaught ReferenceError: $ is not defined” is executing the jQuery code before the jQuery library file has loaded. Therefore make sure that you’re executing the jQuery code only after jQuery library file has finished loading.

このエラーは最も散見されるエラーで、jQueryの実行コードをライブラリよりも先に読み込んでしまっている場合に起こるよ、読み込み順序適切か確認しようね、というわけです(意訳)

https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined

ですのでこれを

<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

こう

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="js/main.js"></script>

めでたしめでたし

[git]既に作成したディレクトリ名を変更

既にgit管理しているプロジェクトのディレクトリ名を変えたい時があります。そんな時は、gitコマンドでディレクトリ名を変更します。

対象ディレクトリへ移動(cd)し、

$ git mv before/ after/

ちなみに、既にmv before/ after/ をしていたり、finderなどから名前を変更してしまったりしていると、たとえ元に戻したとしてもエラーを吐きます。

$ mv before/ after/
$ git mv xxx_frontend yyy_frontend
$ fatal: bad source, source=before, destination=after/

初期段階だったので、gitごと消してgit initしました。

$ rm -rf .git/
$ mv before after
$ git init

参考

https://qiita.com/b4b4r07/items/cac4abd9ae66537e2833

[Nuxt.js]FusionCharts導入覚書 – Plain javascript編

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した際の見た目

FusionCharts