Chapter 3: モジュールと開発ツール

規模が大きくなると，ファイルを分割し，ツールで品質を保つことが重要になります。
この章では ES Modules や npm，Lint / Format ツールの使い方を学びます。

ES Modules（モジュール）の基本

別ファイルに切り分けるには export と import を使います。

// stats.js
export function average(numbers) {
  const total = numbers.reduce((sum, value) => sum + value, 0);
  return numbers.length === 0 ? 0 : total / numbers.length;
}

// main.js
import { average } from "./stats.js";

const votes = [34, 28, 45, 51];
console.log(`平均投票数: ${average(votes)}`);

ブラウザで実行する場合は <script type="module"> を指定します。

npm でパッケージ管理

npm（Node Package Manager）は外部ライブラリを管理するツールです。

cd fes-training/javascript
npm init -y

これで package.json が作成されます。依存パッケージの追加も簡単です。

npm install dayjs

import dayjs from "dayjs";

console.log(dayjs().format("YYYY/MM/DD HH:mm"));

Vite で開発環境を整える

Next.js に進む前に，軽量なフロントエンドツールで開発体験を味わいましょう。

npm create vite@latest counter-app -- --template vanilla
cd counter-app
npm install
npm run dev

ブラウザで http://localhost:5173 を開くと，ホットリロード付きの開発環境が確認できます。

Note

Vite は開発中のみ使用し，本番ビルドも可能です。Next.js でも似た体験が得られるので，操作に慣れておくと移行が楽になります。

Lint と Format

コードの品質とスタイルを自動でチェックするために，ESLint と Prettier を導入します。

npx eslint --init

質問例とおすすめ回答：

How would you like to use ESLint? → To check syntax, find problems, and enforce code style
What type of modules? → JavaScript modules (import/export)
Which framework? → None of these
Does your project use TypeScript? → No
Where does your code run? → Browser, Node
Format with → JSON
Install dependencies → Yes

VSCode では拡張機能を入れると保存時に自動整形できます。
package.json に以下のスクリプトを追加しておくと便利です。

{
  "scripts": {
    "lint": "eslint \"src/**/*.{js,ts}\""
  }
}

ハンズオン：ユーティリティライブラリを作る

npm init -y でプロジェクトを初期化。
src/utils/time.js を作成し，日付をフォーマットする関数を実装。

import dayjs from "dayjs";

export function formatFestivalDate(date, format = "YYYY年M月D日 HH:mm") {
  return dayjs(date).format(format);
}

src/main.js から formatFestivalDate を読み込み，現在時刻をログに表示。
npm run lint を実行してエラーがないか確認。

これでモジュール構造とツールの基本が体験できます。

練習課題

ESLint の設定に semi: ["error", "always"] を追加し，セミコロン必須にしてみましょう。
npm install axios を試し，外部ライブラリを使った fetch 処理を書いてみましょう。
Vite プロジェクトで Chapter 2 のチェックインボードを再構築し，ホットリロードの便利さを体感してみましょう。

次へ進む

ツールの準備が整ったら，Chapter 4: 非同期処理とAPI に進み，fetch を使ったデータ取得を学びましょう。