以下で色々とチャレンジした結果を整理したいと思います。
まずは私が理解できなかったことを整理します。
ECMAScript Modules
ESM (ECMAScript Modules) は、CommonJS などの以前の形式に比べて多くの利点を備えた最新のモジュール形式です。これはほとんどの Web ブラウザでネイティブにサポートされており、非常に高速であり、他の機能の中でもとりわけツリー シェイキングの新しい機会を開きます。ただし、これは CommonJS/AMD/UMD からの大きな変化であり、これらのモジュール形式のいずれかに慣れている場合は使用するのが難しい場合があります。
ESMとは何ですか?
ECMAScript モジュールは、ECMAScript (JavaScript) 標準の一部として作成されたモジュール形式です。これは ES6 ECMAScript バージョンで標準化されており、多くの構文機能が追加されていることで知られているかもしれません。ES モジュールは、JavaScript の重大な問題を解決することを目的としています。つまり、スクリプト間でコードを共有する方法が組み込まれていません。を使用してインポートすることには精通しているかもしれませんrequire()。これは、一部のバンドラーと Node.js でのみサポートされている CommonJS を使用することです。さらに、CommonJS には同期性などの問題がいくつかあります。
ESM は、1 つのモジュール形式を普遍化しながら、これらすべての問題を解決することを目指しています。現在、Chrome、Safari、Firefox は ESM を完全にサポートしているため、最新のブラウザで問題なく実行できるはずです。さらに、Node v12+ は ESM をサポートしていますが、CommonJS ではなく ESM を使用していることを伝える必要があります。これを行う方法については後ほど詳しく説明します。
ESM 構文
モジュールのインポートとエクスポートに使用される構文は、CommonJS などの他のモジュール システムよりも若干複雑ですが、それでも理解するのはかなり簡単です。最も基本的な例は次のとおりです。
// script.js
import { example } from "./library.js";
example();
// library.js
export const example = function () {
console.log("hello world");
};
ここでは、 fromという関数をインポートします
周りの括弧に注目してください。これは、インポートしているだけであることを示しています。したがって、複数のものをインポートしたい場合は、次のようにすることができます。
import { example, example2 } from "./library.js";
Web での ESM の使用
ネイティブESM
Web 上で ESM を使用する最も簡単な方法は、ESM のネイティブ サポートを利用することです。約 95% 以上のユーザー ( Caniuse ) では、ESM はポリフィルなしでサポートされています。ESM でスクリプトをロードするには、type="module"script タグを追加します。
<script src="./esmscript.js" type="module">
その後、そのスクリプトからインポートしたすべてのモジュールも ES モジュールとしてロードされます。
実際のコード
ただしPsotmanのリクエストは使ってません。Chart.jsが動くかを確かめています。
折れ線グラフの例
// Visualizer that renders a Chart.js graph with the Salesforce API limits consumption
const template =
`
<script type="module" src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<canvas id="myChart" width="400" height="800"></canvas>
<script>
pm.getData((err, chartData) => {
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: "line",
data: {
datasets: [{
label: "値1",
fill: false,
borderColor: 'rgba(0, 0, 255, 0.5)',
lineTension: 0.1, //曲線にする度合
data: chartData,
}],
},
options: {
spanGaps: true, //点をつなげる場合
scales: {
x: {
type: 'time',
time:{
unit: 'week', //週に線
displayFormats: {
week: 'yyyy-MM-dd'
}
},
}
}
}
});
});
</script>
`;
var chartData =[
{x:"2020-02-01",y:100},
{x:"2020-02-02",y:200},
{x:"2020-02-03",y:300},
{x:"2020-02-04",y:400},
{x:"2020-02-07",y:200},
{x:"2020-02-14",y:600}
];
// Render vizualizer
pm.visualizer.set(template, chartData);
棒グラフ
// Visualizer that renders a Chart.js graph with the Salesforce API limits consumption
const template =
`
<script type="module" src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<canvas id="myChart" width="400" height="800"></canvas>
<script>
pm.getData((err, chartData) => {
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: chartData,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
</script>
`;
var chartData =[12, 19, 3, 5, 2, 3];
// Render vizualizer
pm.visualizer.set(template, chartData);
棒グラフが表示されました。
棒グラフでは日付を使ってないのでアダプターは不要でした。
<script type="module" src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
以下のエラーになったので、それぞれインポートしたらエラーは解消されました。
でもちょっと面倒だな。
Uncaught Error: "bar" is not a registered controller
Uncaught Error: "category" is not a registered scale.
// Visualizer that renders a Chart.js graph with the Salesforce API limits consumption
const template =
`
<script type="module" src="https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.js"></script>
<canvas id="myChart" width="400" height="800"></canvas>
<script type="module">
import {Chart, BarController,BarElement,CategoryScale,LinearScale, PointElement, Tooltip, Legend, TimeScale} from 'https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.js';
Chart.register(BarController,BarElement,CategoryScale,LinearScale, PointElement, Tooltip, Legend, TimeScale);
pm.getData((err, chartData) => {
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: chartData,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
</script>
`;
var chartData =[12, 19, 3, 5, 2, 3];
// Render vizualizer
pm.visualizer.set(template, chartData);
エラー
Failed to create chart: can't acquire context from the given item
間違って以下を消したためでした。
<canvas id="myChart" width="400" height="800"></canvas>