Chart.jsをラップしてみる

やったこと

Chart.jsに対してラッパークラス WrapBarChart を作成した。x軸のラベルとy軸のデータを引数として渡すだけでグラフを描画できる draw() メソッドを用意している。

継承（extends）ではなく委譲（Composit）を使った理由

ラッパークラスの実装方針として、Chart クラスを継承する方法と、内部に Chart のインスタンスを持つ委譲の方法がある。今回は委譲を選んだ。

継承を使うと、親クラス（Chart.js）のメソッドがすべて外部に露出してしまい、IFが肥大化する。委譲であれば、外部に公開するメソッドを自分で定義できるため、IFをシンプルに保てる。ライブラリのラップには委譲のほうが適していると思う。

実装コード

class WrapBarChart {
    constructor(ctx) {
        this.ctx = ctx;
        this.chart = null;
    }

    draw(labels, data) {
        this.chart = new Chart(this.ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'y軸',
                    data: data,
                    backgroundColor: 'green'
                }]
            },
            options: {
                scales: {
                    y: { beginAtZero: true }
                }
            }
        });
    }
}

const canvas = document.getElementById('myWrapChart');
const ctx = canvas.getContext('2d');

const chart = new WrapBarChart(ctx);
chart.draw(['１月', '２月', '３月', '４月'], [30, 20, 35, 8]);

実際の表示

まとめ

ラッパークラスを作ることで、Chart.jsの細かい設定を隠蔽し、呼び出し側はデータを渡すだけでよくなる。委譲を使うことでIFを必要最小限に絞れる点が気に入っている。