webpackでローカルサーバーを起動
ソース変更時に変更内容をリアルタイムにブラウザに反映する
以下の3つを使います。
yarn
webpack
chart.js
上記3つを使って、jsでグラフを描画するコードを書いて動作を確認していきます。
yarnとは？webpackとは？という方は以下の記事をご参照ください。
まずはソースコードの準備から始めていきます！
ソースコードの準備
まずはソースコードの準備をしていきます。
最終的なフォルダ構成
最終的なフォルダ構成は以下の通りです。
├── dist // index.htmlを格納
├── node_modules // yarnでインストールしたモジュールが入る
├── package.json // パッケージを管理
├── src // 作成するjsファイルを入れるディレクトリ
├── webpack.config.js // webpackの設定ファイル
└── yarn.lock // インストールしたパッケージ情報が書かれたファイル
yarn init
まず、yarn initで初期化処理を行い、package.jsonを生成します。
// 実行するコマンド
yarn init上記コマンドを実行すると、ターミナル上で色々聞かれますが、全てエンターキーを押せばOKです。
chart.jsのインストール
yarnでchart.jsをインストールします。
// 実行するコマンド
yarn add chart.jsHTMLファイルの作成
まず、HTML格納用のディレクトリを作成します。
// 実行するコマンド
mkdir dist次にdist直下に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='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],
}]
}
})webpackでローカルサーバーを起動
webpackインストール
- webpack-dev-server：インストールするとwebpackで開発サーバーを立ち上げることができるようになる
// 実行するコマンド
yarn add webpack webpack-cli webpack-dev-server --devwebpack設定
webpackの設定ファイル「webpack.config.js」を作成します。
「webpack.config.js」に記載する内容は以下の通りです。
module.exports = {
mode: "development",
devServer: {
static: "dist",
open: true
}
};ローカルサーバーを起動
以下のコマンドを実行します。
// 実行するコマンド
yarn run webpack-dev-server以下のようにブラウザでグラグが描画されていることが確認できます。
chartjs
ソース変更時に変更内容をリアルタイムにブラウザに反映する
src/index.jsのソースコードを変更します。
6行目のグラフタイプを変更して保存します。
- 変更前：type: ‘bar’
- 変更前：type: ‘line’
保存後、自動的にブラウザのリロードが走り、グラフが以下のように線グラフに変更されます。変更内容が自動的にブラウザに反映されることが確認できました！
chartjs-line
まとめ
実際に動かすことで、webpackの理解が深まったかなと思います。
