LoginSignup
@aono1234

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

javascript chart.jsについて

Q&A

JavaScriptクラス連想配列chart.js

chart.jsのchart関数？オブジェクト？について教えてください。

chart.jsのリファレンスをみればグラフの設定変更についてわかるのですが、小手先のところだけ理解している感が否めません。

特にnew chart(○○,{○○})というところがわかりません。
なんとなく第1引数は変数、第2引数は連想配列なのかな？と思っています。

だとすればchartは関数なのかな？と思うのですが、
それがあっているとすれば、なぜ関数がnewされているのかわかりません。勉強不足で申し訳ありませんが、初心者の私にご教授いただけないでしょうか？

以上、よろしくお願いいたします。

//////////////////////////////////////////////////////
色々とWEB上で調べた結果「コンストラクタ関数」というものかもしれません。しかしコンストラクタ関数を調べても理解が難しく、「class」「普通の関数」との違いが判然としません。もしnew chart()がコンストラクタ関数なのであれば違いを教えていただけないでしょうか？

該当するソースコード

html

 <div>
        <canvas id="myChart" height="100"></canvas>
 </div>

javascript

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myBarChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        datasets: [{
            label: "初めてのデータセット",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },
    options: {}
});
</script>
0 likes

2Answer

kazukinagata
@kazukinagata

jsは関数にnew演算子を付けることでコンストラクタ関数という、他の言語でいうclassのような振る舞いを持たせることができます。

0Like

Comments

  1. @aono1234

    Questioner

    早速ご回答ありがとうございます！！

  2. @kazukinagata

    下のコメントに補足をしますと、そもそもjsにはもともとclassがないので、それに変わるものがコンストラクタ関数です。

    仕組みを知るにはプロトタイプやthisについて理解をしないといけないのですが、平たく言うと、コンストラクタ関数は関数内で定義した構造を持つオブジェクトを作ることが出来ます。

    もちろん普通の関数でもオブジェクトを返すことはできますが、コンストラクタ関数で生成されたオブジェクトはコンストラクタ関数とプロトタイプを通じて繋がっているので、例えばこんなことが出来るのがただの関数との違いです。

    ```javascript
    function Car() {}
    car1 = new Car();
    car2 = new Car();

    console.log(car1.color); // undefined

    Car.prototype.color = 'original color';
    console.log(car1.color); // 'original color'

    car1.color = 'black';
    console.log(car1.color); // 'black'

    console.log(Object.getPrototypeOf(car1).color); // 'original color'
    console.log(Object.getPrototypeOf(car2).color); // 'original color'
    console.log(car1.color); // 'black'
    console.log(car2.color); // 'original color'

    ```
blue32a
@blue32a

Chartは関数ではなくクラスです。

To create a chart, we need to instantiate the Chart class.

「チャートを作成するには、Chart クラスをインスタンス化する必要があります。」

ざっくり言うと、クラスというのは「データや処理をひとまとめにした設計図」で、インスタンスというのは「設計図から生成された実体」です。

JavaScriptではnew演算子を使ってインスタンス化するのですが、その時にコンストラクタという特殊なメソッド（constructorメソッド）が実行されます。

Chartクラスとそのインスタンス化
const item = document.getElementById('myChart');
const userConfig = {/* 省略 */};
const myChart = new Chart(item, userConfig);

class Chart {
   // new Chart()の引数はコンストラクタに渡される
   constructor(item, userConfig) {
       // 省略
   }
}

0Like

Comments

  1. @aono1234

    Questioner

    ご回答ありがとうございます。大変勉強になりました！クラスなのですね

Your answer might help someone💌

LoginSign Up