JavaScript：ES ModulesとViteの地図（概念だけ）

投稿日：2026-01-13

音声

※ AI音声で読み上げます

目次

  1. import/exportの基本（named/default）
  2. 依存関係が見えるメリット
  3. npmとpackage.jsonの超概要
  4. Viteの役割（開発サーバ・ビルド）
  5. 会社PCで導入不可でも理解できる範囲
  6. 注意（ここだけ）
  7. 要約

import/exportの基本（named/default）

この記事は「導入できる・できない」はひとまず置いて、ES Modules（イーエス・モジュール）と Vite（ヴィート）を、地図として頭に入れるための概念整理です。 実務でプロジェクトを見たときに「何をやっている構成なのか」が分かることを目的にします。

ES Modulesは「ファイルを部品として分割して、読み込んで組み立てる」仕組みです。 その中心が export（外に出す） と import（取り込む） です。

named export（名前付き）は、同じファイルから複数個出せます。

// utils.js
export function add(a, b) {
  return a + b;
}
export const VERSION = "1.0.0";

// main.js
import { add, VERSION } from "./utils.js";
console.log(add(2, 3), VERSION);

default export（デフォルト）は、そのファイルの「代表1つ」を出すイメージです。

// logger.js
export default function log(msg) {
  console.log("[LOG]", msg);
}

// main.js
import log from "./logger.js";
log("hello");

使い分けの雑な目安は、

・複数の道具箱として出したい → named

・そのファイルの主役が1つ → default

くらいでOKです。

なお、ブラウザでES Modulesを使うときは、HTML側で typeがmodule になっていることが多いです。 

<script type="module" src="/src/main.js"></script>

依存関係が見えるメリット

import/exportで分割すると、ファイル同士の「つながり（依存関係）」が見えるようになります。 これが地味に強いです。

  • 影響範囲が追いやすい：この関数を直したら、どこに効くかが分かりやすい

  • 再利用しやすい：便利関数を切り出して、別の場所でも使える

  • テストしやすい：部品単位で確認できる

  • 読みやすい：1ファイルが巨大になりにくい

逆に、依存がぐちゃぐちゃだと「どこを直すと壊れるか」が見えにくくなります。 モジュール化は、その事故を減らすための整理術でもあります。

npmとpackage.jsonの超概要

npm（エヌピーエム）は、JavaScriptの部品（ライブラリ）を管理する仕組みです。 その設計図が package.json です。

package.jsonに書かれている代表的な情報は、だいたい次の3つです。

  • dependencies：実行に必要なライブラリ（本番でも使う）

  • devDependencies：開発中だけ必要な道具（ビルドや整形など）

  • scripts：よく使うコマンドのショートカット（例：dev、build）

{
  "name": "my-app",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "react": "^18.0.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

ここで大事なのは、コマンド自体を暗記することよりも、

「このプロジェクトは、どんな部品を使って、どう起動して、どう作っているか」

が package.json を見れば分かる、という点です。

Viteの役割（開発サーバ・ビルド）

Vite（ヴィート）は、ざっくり言うと「開発しやすくして、配布用にもまとめてくれる道具」です。 主な役割は2つです。

1. 開発サーバ

開発中にページを素早く表示したり、変更を即反映したりします。 よく「ホットリロード」みたいな言い方もします（保存したらすぐ反映される体験）。

2. ビルド

配布用に、ファイルをまとめたり、軽くしたりします。 例えば、複数のJSファイルを最適化して、ブラウザで読み込みやすい形にします。 ここで出来上がる成果物（ディストなど）をサーバに置くと、本番サイトとして動く、というイメージです。

つまりViteは、

「開発中は快適に」＋「本番用はきちんとまとめる」

を両方やる立ち位置、と思っておけばOKです。

会社PCで導入不可でも理解できる範囲

会社PCでツール導入ができない場合でも、理解できる範囲は意外と広いです。 「実行」は無理でも「読む・構造を把握する・説明できる」はできます。

  • import/exportの読み方：どの部品をどこで使っているか追える

  • フォルダ構成の意味：srcがソース、distが配布物、などの典型が分かる

  • package.jsonの読み取り：何を使っているか、起動やビルドが何か分かる

  • Viteの役割の説明：開発サーバとビルドの概念を説明できる

実務では「自分のPCで試せない」状況でも、

・ソースを読んで原因を当てる

・環境チームや開発チームに「何が必要か」を言語化する

だけで価値が出る場面があります。

ワンポイント

「Viteを触れない」＝「分からない」ではありません。

まずは import/export と package.json を読めるようになるだけで、プロジェクト理解が一気に進みます。

注意（ここだけ）

  • ブラウザでES Modulesを使う場合、<script type="module"> が必要です（通常scriptと挙動が違います）。

  • import はローカルファイル直開き（file://）だと制限で動かないことがあります。基本は開発サーバ前提です。

  • 会社PCでnpm導入ができない場合は、概念理解に留め、実行は個人環境や許可された環境で行うのが安全です。

要約

  1. ES Modulesはexportで部品を外に出し、importで取り込んで組み立てます。
  2. namedとdefaultを使い分けると、部品の公開方法が整理できます。
  3. モジュール化で依存関係が見え、影響範囲や再利用が分かりやすくなります。
  4. npmとpackage.jsonで、使うライブラリや起動・ビルド手順を管理します。
  5. Viteは開発サーバとビルドを担当し、導入できなくても概念理解は可能です。