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

webpackでローカルサーバーを起動して、ソース変更時に変更内容をリアルタイムにブラウザに反映する

webpackでローカルサーバーを起動して、ソース変更時に変更内容をリアルタイムにブラウザに反映するということをやっていきます!
本記事でやること

webpackでローカルサーバーを起動
ソース変更時に変更内容をリアルタイムにブラウザに反映する

以下の3つを使います。

使うもの

yarn
webpack
chart.js

上記3つを使って、jsでグラフを描画するコードを書いて動作を確認していきます。

yarnとは?webpackとは?という方は以下の記事をご参照ください。

yarnとwebpackを使ってchart.jsでグラフ描画!!
実際にyarn/webpackの環境を作って、動かすことで理解が深めよう... yarnとはnpm(Node Package Manager)と同様、JavaScriptプログラミング言語のパッケージマネージャー。npmと一緒に使えます。 npmと比べてインストールが速く、厳密にモジュールのバージョンを固定できます。

まずはソースコードの準備から始めていきます!

ソースコードの準備

まずはソースコードの準備をしていきます。

最終的なフォルダ構成

最終的なフォルダ構成は以下の通りです。

├── 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.js

HTMLファイルの作成

まず、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 --dev

webpack設定

webpackの設定ファイル「webpack.config.js」を作成します。

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

module.exports = {
  mode: "development",
  devServer: {
    static: "dist",
    open: true
  }
};

ローカルサーバーを起動

以下のコマンドを実行します。

// 実行するコマンド
yarn run webpack-dev-server

以下のようにブラウザでグラグが描画されていることが確認できます。

chartjs

chartjs

ソース変更時に変更内容をリアルタイムにブラウザに反映する

src/index.jsのソースコードを変更します。

6行目のグラフタイプを変更して保存します。

  • 変更前:type: ‘bar’
  • 変更前:type: ‘line’

保存後、自動的にブラウザのリロードが走り、グラフが以下のように線グラフに変更されます。変更内容が自動的にブラウザに反映されることが確認できました!

chartjs-line

chartjs-line

まとめ

実際に動かすことで、webpackの理解が深まったかなと思います。

公式:https://webpack.js.org/concepts/

スポンサーリンク
webpack
フォローする
さゆフィクション