ただメモができるだけのブラウザアプリ「TextArea」はこちらw

yarnとwebpackを使ってchart.jsでグラフ描画!!

スポンサーリンク

yarn/webpackの環境を作って、動かすことで、yarn/webpackの理解が深めようという記事です。

yarnとwebpackを使ってchart.jsでグラフを書いてみます。

npmを使ったバージョンの記事もありますので、よろしければご参照ください。

npmとwebpackを使ってchart.jsでグラフを書いてみる
npm/webpackの使い方を理解を深めるため、npmとwebpackを使ってchart.jsでグラフを書いてみる。npmとはNode Package Manager の略。JavaScriptプログラミング言語のパッケージマネージャー...webpackは複数のJavaScriptを一つのファイルにまとめる。

yarnやwebpackの理解に役立てばと思います。

まずは用語説明から入っていきます。

用語説明

本記事で扱う3つの用語について説明していきます。

用語説明

yarn
webpack
Chart.js

yarnとは

  • npm(Node Package Manager)と同様、JavaScriptプログラミング言語のパッケージマネージャー
    • npmと一緒に使えます
      • npmと比べて以下のメリットがあります。
        • インストールが速い
        • 厳密にモジュールのバージョンを固定できる
    • パッケージの依存関係を定義するためのファイルとして、「package.json」というファイルが作られる
    • 公式:https://yarnpkg.com/cli/install

yarn利用時の基本的なフォルダ構成

基本的なフォルダ構成は以下のようになります。

├── dist  // ビルドしたファイルが入るディレクトリ
├── index.html   // 今回、chart.jsを表示させる用のHTMLファイル
├── node_modules  // yarnでインストールしたモジュールが入る
├── yarn.lock   // インストールしたパッケージ情報が書かれたファイル
├── package.json  // パッケージを管理
└── src  // ビルド前のjsファイルをを入れるディレクトリ

webpackとは

  • 複数のJavaScriptファイルを一つのファイルにまとめくれます
    • 以下のようなメリットがあります
      • 読み込み順を気にしなくて良い
      • 1回のリクエストで済むため高速

Chart.jsとは

  • グラフ描画できるJavaScriptライブラリ

yarnとwebpackを使ってchart.jsでグラフを書いてみる

yarnのインストール

以下のコマンドでインストールします

// 実行するコマンド
sudo npm install -g yarn

yarn init

まず、yarn initで初期化処理を行い、package.jsonを生成します。

// 実行するコマンド
yarn init

上記コマンドを実行すると、ターミナル上で色々聞かれますが、全てエンターキーを押せばOKです。

webpackのインストール

以下のコマンドでwebpackをインストールします

// 実行するコマンド
yarn add -D webpack webpack-cli

yarnでinstallするときは、installではなくaddと書きます

JavaScriptの自動ビルドを有効化

JavaScriptを変更した場合に自動でビルドするに設定します

// 実行するコマンド
npx webpack --watch

JavaScriptの変更を自動で検知してビルドしてくれるという便利機能。使っときましょ!

chart.jsのインストール

yarnでchart.jsをインストールします。

// 実行するコマンド
yarn add chart.js

chart.jsを表示するHTMLファイルの作成

「index.html」を作成します。

「index.html」の中身は以下参照

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Chart.js</title>
</head>
<body>
    <div style="width:50%;">
        <canvas id="myChart" width="400px" height="400px"></canvas>
    </div>
    <script src='dist/main.js'></script>
</body>
</html>

chart.jsのグラフを描画するjavascript

chart.jsのグラフを描画するjavascriptファイルを作成します。

まず、javascript格納用のディレクトリを作成します。

// 実行するコマンド
mkdir src

次にsrc直下にindex.jsというファイルを作成します。

index.jsに記載する内容は以下の通りです。


import Chart from 'chart.js/auto';

const ctx = document.getElementById('myChart');

const chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['data1', 'data2', 'data3'],
        datasets: [{
            label: 'chart label',
            data: [1, 2, 3],
        }]
    }
})

動作確認

index.htmlにアクセスし、chart.jsの画像が表示されればOKです。

以上、yarnとwebpackを使ってchart.jsでグラフ描画でしたー

chartjs

まとめ

npmとほとんど同じですね。yarnとnpmを比べると以下のメリットがあるので、yarnを使っていくほうが良いかと思います!

  • インストールが速い
  • 厳密にモジュールのバージョンを固定できる