webpack | さゆフィクション

TypeScript と webpack( + yarn)でWebアプリ開発環境を構築する

sayu — Mon, 13 Mar 2023 23:27:03 +0000

TypeScript と webpack( +yarn)でWebアプリ開発環境を構築していきます。

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

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

yarnプロジェクトの作成からTypeScript + webpackの開発環境構築まで記載します。ソースはコピペできますので、まずは簡単に環境構築してTypeScript + webpackへの理解を深めていきましょ。

TypeScriptのローカル環境構築

最終的なフォルダ構成

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


├── dist    // index.htmlを格納
├── node_modules    // yarnでインストールしたモジュールが入る
├── package.json    // パッケージを管理
├── src    // 作成するtsファイルを入れるディレクトリ
├── tsconfig.json    // TSファイルをJSファイルにコンパイルするための設定ファイル
├── webpack.config.js    // webpackの設定ファイル
└── yarn.lock    // インストールしたパッケージ情報が書かれたファイル

yarn init

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

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

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

webpackとtypescriptのインストール

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

// 実行するコマンド
yarn add webpack webpack-cli webpack-dev-server typescript ts-loader -D

webpack設定

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

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


const path = require('path');
const outputPath = path.resolve(__dirname, "public");

module.exports = {
    mode: 'development',
    entry: './src/index.ts',
    output: {
        filename: 'bundle.js',
        path: `${outputPath}`
    },
    devServer: {
        static: "dist",
        open: true
    },
    module: {
        rules: [{
            test: /\.ts/,
            use: 'ts-loader',
            exclude: /node_modules/,
        }, ],
    },
    resolve: {
        extensions: ['.ts', '.js'],
    }
};

tsconfig.jsonの作成

tsconfig.jsonファイルを作成します。

tsconfig.jsonファイルは、TSファイルをJSファイルにコンパイルするための設定ファイルです。

「tsconfig.json」に記載する内容は以下の通りです。


{
  "compilerOptions": {
    "sourceMap": true,
    "target": "ES5",
    "module": "ES2015",
    "strict": true,
    "moduleResolution": "node"
  }
}

HTMLファイルの作成

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

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

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

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




    
    
    hello world

TypeScriptファイルの作成

「hello world」とブラウザに出力するTypeScriptファイルを作成します。

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

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

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

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


window.onload = function()
{ 
    var elem = document.getElementById('sample')!;
    elem.innerHTML = 'hello world';
}

動作確認

以下のコマンドでローカルサーバを起動します。

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

ブラウザ上で、「hello world」と表示されればOKです。

まとめ

簡単にTypeScript と webpack( + yarn)でWebアプリ開発環境を構築できたと思います。

環境はできたので、あとはTypeScriptの理解を深めていきてたいところです。

TypeScriptの関連記事です。

TypeScriptの変数や引数宣言時の?(クエスチョンマーク)と!(ビックリマーク)が意味するもの

TypeScriptの変数や引数宣言時の?(クエスチョンマーク)と!(ビックリマーク)が意味するものについて。メンバ変数や引数の?:(クエスチョンマーク＋コロン)は、必須のプロパティじゃないときにつけます。変数の!:(ビックリマーク＋コロン)は必須のときにつけます。

TypeScriptとJavaScriptの違い-型宣言・クラス・ジェネリクス

JavaScriptを拡張して作られたものですが、JavaScriptとは違い静的型付けのクラスベースオブジェクト指向言語 TypeScriptをコンバートすると、JavaScriptのコードに変換されるためJavaScriptが動く環境であればすぐに使うことができる。

公式：https://www.typescriptlang.org/docs/

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

sayu — Sun, 12 Mar 2023 03:26:55 +0000

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

本記事でやること

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

以下の3つを使います。

使うもの

yarn
webpack
chart.js

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

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

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

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

ソースコードの準備

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

最終的なフォルダ構成

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

├── 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に記載する内容は以下の通りです。




    
    
    Chart.js

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

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

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

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

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

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

chartjs-line

まとめ

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

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

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

sayu — Sat, 11 Mar 2023 04:46:10 +0000

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」の中身は以下参照




    
    
    Chart.js

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でグラフ描画でしたー

まとめ

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

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

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

sayu — Sat, 11 Mar 2023 04:10:42 +0000

npm/webpackの使い方を理解を深めるため、npmとwebpackを使ってchart.jsでグラフを書いてみます。

yarnを使った場合の記事もありますので、yarnを使いたい方は以下の記事をご参照ください。(npmとyarnどちらを使うかで悩んだら、yarnを選択した方が良いです)

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

まずは用語説明からです。

用語説明

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

用語説明

npm
webpack
Chart.js

npmとは

Node Package Manager の略。
JavaScriptプログラミング言語のパッケージマネージャー
パッケージの依存関係やパッケージの競合関係を解決してくれる
- パッケージの依存関係を定義するためのファイルとして、「package.json」というファイルが作られる
公式：https://docs.npmjs.com/

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

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

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

webpackとは

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

Chart.jsとは

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

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

早速グラフを描いていきます。

npm init

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

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

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

webpackのインストール

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

// 実行するコマンド
npm install -D webpack webpack-cli

JavaScriptの自動ビルドを有効化

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

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

chart.jsのインストール

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

// 実行するコマンド
npm install chart.js

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

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

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




    
    
    Chart.js

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です。

chartjs

まとめ

実際にnpm/webpackの環境を作って、動かすことで、npm/webpackの理解が深まったかなと思います