JavaScript #4：ビルドツールについて

公開：2026.05.06(水) 23:45

JavaScriptのビルドツール

Web開発における「ビルド」とは、「開発者が書きやすいコード」を「ブラウザが読みやすいコード」に変換・最適化する工程のこと、らしい。

なぜビルドが必要なのか？
現代のWeb開発では、ブラウザが直接理解できない技術をたくさん使用する。
・ TypeScript: ブラウザは実行できないので、JavaScriptに変換する必要がある。
・ モジュール管理: 多くのライブラリ（math.jsなど）を組み合わせて使う際、バラバラのファイルを1つにまとめた方が

読み込みが速い。

・ 最適化: コード内の不要な改行やスペースを削り、ファイルサイズを極限まで小さくする（Minify）。

トレンドのツール：Vite（ヴィート）らしい。

前回作成した簡易電卓(JavaScript #3：ライブラリを使ってみる) をViteを使ったプロジェクトへアップグレードしてみる。

1. Viteプロジェクトの作成

既存の ~/docker/node.js フォルダで作業しても良いが、新しく calc-vite というプロジェクトを作ることにする。
WSL(Ubuntu)で以下コマンドを実行
質問はすべてEnterで進める。

docker compose exec app npm create vite@latest calc-vite -- --template vanilla

※ --template vanilla … ReactやVueといったフレームワークを使わない、純粋なJavaScriptプロジェクトを作成

実行結果：

xxx@xxx:~/docker/node.js$ docker compose exec app npm create vite@latest calc-vite -- --template vanilla
Need to install the following packages:
create-vite@9.0.6
Ok to proceed? (y)


> app@1.0.0 npx
> create-vite calc-vite --template vanilla

│
◇  Install with npm and start now?
│  Yes
│
◇  Scaffolding project in /app/calc-vite...
│
◇  Installing dependencies with npm...

added 15 packages, and audited 16 packages in 8s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
│
◇  Starting dev server...

> calc-vite@0.0.0 dev
> vite


  VITE v8.0.10  ready in 269 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
    

Viteの画面で止まるのでCTRL+Cで終了。
プロジェクトディレクトリ配下に calc-vite フォルダが作成される。

2. フォルダ構成の変更

プロジェクトフォルダの compose.yaml の volumes 設定を変更し、新しいプロジェクトフォルダをマウントするようにする。

services:
  app:
    image: node:20-slim
    user: "node"
    volumes:
      - ./calc-vite:/app  # 作成したプロジェクトフォルダをマウント
    working_dir: /app
    ports:
      - "5173:5173"       # Viteのデフォルトポートに変更
    command: npm run dev  # Viteの開発用サーバーを起動
    tty: true      
    

Viteはコンテナ外からの接続を許可していないらしく、WindowsからViteにアクセスできない。
"npm run dev"した場合はWindowsからでもアクセスできるように calc-vite\package.json の以下設定を変更する。

    "dev": "vite --host",
    

3. 初期セットアップと起動

設定を書き換えたら、以下の手順でコンテナを再起動し、必要なライブラリをインストールする。

# 一旦止めて再起動
docker compose down
docker compose up -d

# ライブラリのインストール
docker compose exec app npm install

# 再度 mathjs をインストール
docker compose exec app npm install mathjs

実行結果：

xxx@xxx:~/docker/node.js$ docker compose down
[+] down 2/2
 ✔ Container nodejs-app-1 Removed                                                                       1.0s
 ✔ Network nodejs_default Removed                                                                       0.2s
xxx@xxx:~/docker/node.js$ docker compose up -d
[+] up 2/2
 ✔ Network nodejs_default Created                                                                       0.0s
 ✔ Container nodejs-app-1 Started                                                                       0.2s
xxx@xxx:~/docker/node.js$ docker compose exec app npm install

added 2 packages, and audited 18 packages in 766ms

9 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
xxx@xxx:~/docker/node.js$ docker compose exec app npm install mathjs

added 10 packages, and audited 28 packages in 1s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
    

4. 動作確認

Windowsでブラウザを起動し http://localhost:5173 へアクセスしViteの初期画面が表示されればOK

5. Viteプロジェクトのファイル構成

Viteプロジェクトフォルダの主要はフォルダ・ファイル

・ index.html：アプリの入り口
・ main.js：プログラムのメイン処理。VB.NETの Main() メソッドに近い役割
・ style.css: デザイン（CSS）を書く場所
・ public/ フォルダ: 画像など、そのまま公開したいファイルを置く場所

---