JavaScript | ES6+ 文法：モジュール – import の別名

JavaScript JavaScript
スポンサーリンク

「import の別名」とは何か（まずイメージから）

import の別名 は、
「他のファイルから持ってきた名前に、今のファイルで使いやすい別の名前を付け直す」 仕組みです。

  • 同じ名前が他でも使われていて衝突しそうなとき
  • もっと分かりやすい名前にしたいとき
  • ライブラリ側の名前を、プロジェクトの命名ルールに合わせたいとき

に使います。

キーワードは as です。

import { add as plus } from "./math.js";
JavaScript

math.js では add という名前で export されていますが、
このファイルの中では plus という名前で使えるようになります。

名前付き import に別名をつける（基本パターン）

基本形：import { 元の名前 as 新しい名前 } from “…”

名前付き export を別名で import するときの形はこれです。

// math.js
export function add(a, b) {
  return a + b;
}
export function sub(a, b) {
  return a - b;
}
JavaScript
// main.js
import { add as plus, sub as minus } from "./math.js";

console.log(plus(2, 3));  // 5
console.log(minus(5, 2)); // 3
JavaScript

ここが重要です。
as の左側（add, sub）はモジュール側で export されている「本来の名前」。
右側（plus, minus）は「このファイルで使う名前」です。

元のモジュールに影響は一切なく、
「このファイルから見た呼び名」を変えているだけ、というイメージでOKです。

名前が衝突するときに避けるための別名

例えば、2つのモジュールから format という関数を import したいとします。

// dateFormat.js
export function format(date) { /* 日付の整形 */ }

// numberFormat.js
export function format(num) { /* 数値の整形 */ }
JavaScript

同じファイルでそのまま import すると名前がかぶってしまいます。

// NG（エラーになる）
import { format } from "./dateFormat.js";
import { format } from "./numberFormat.js";
JavaScript

なので、別名を付けます。

// OK
import { format as formatDate } from "./dateFormat.js";
import { format as formatNumber } from "./numberFormat.js";

formatDate(new Date());
formatNumber(12345);
JavaScript

ここが重要です。
「同じ名前の export を複数のモジュールから使いたいとき、別名がないと成立しない」。
as は衝突を避けるための必須テクニックでもあります。

default import と別名の関係

default import 自体は「常に別名」みたいなもの

export default の import は、もともと「好きな名前を付けていい」仕組みなので、
ある意味「毎回別名 import」だと言えます。

// greet.js
export default function greet(name) {
  console.log(`Hello, ${name}`);
}
JavaScript
// main.js
import greet from "./greet.js";      // greet という名前で使う
import hello from "./greet.js";      // 別のファイルでは hello という名前で使ってもよい
JavaScript

default import では {} を使わずに、
いきなり「このファイルでの名前」を書きます。

ここが重要です。
default export は、import 側が自由に名前を付けて OK。
名前付き export は、{ 元 as 先 } で明示的に別名を付ける。
この違いを整理しておくと混乱しません。

default ＋ 名前付きを同時に import して別名を使う

default export と名前付き export が共存している場合もあります。

// user.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

export function createGuest() {
  return new User("Guest");
}
JavaScript

これを import する側：

// main.js
import U, { createGuest as makeGuest } from "./user.js";

const a = new U("Alice");
const g = makeGuest();
JavaScript

U は default の別名、makeGuest は名前付き export の別名です。
「自分のファイルでしっくりくる名前」を自由に選べます。

名前空間 import と別名（import * as 別名）

まとめてオブジェクトとして受け取るときの別名

import * as 別名 という形を使うと、
「そのモジュールの名前付き export を全部まとめて、1つのオブジェクトとして受け取る」ことができます。

// math.js
export function add(a, b) {
  return a + b;
}
export function sub(a, b) {
  return a - b;
}
JavaScript
// main.js
import * as math from "./math.js";

console.log(math.add(2, 3));
console.log(math.sub(5, 2));
JavaScript

ここで math が「別名」です。
math.add, math.sub のように、「名前空間」っぽく使えます。

別のファイルでは、違う名前でも構いません。

import * as m from "./math.js";
m.add(1, 2);
JavaScript

ここが重要です。
import * as 名前 の “名前” も、import 側で自由に決める別名。
「このモジュール一式を何と呼ぶか」を決める感覚に近いです。

「何でわざわざ別名を使うの？」という話（設計の視点）

プロジェクト全体で名前を揃えるために使う

ライブラリ側の名前が、自分たちの命名ルールと合わないこともよくあります。

// ライブラリ側（英語）
export function setUserName() {}
JavaScript

プロジェクトでは「動詞＋名詞」ではなく、「名詞＋動詞」で統一したい、などのポリシーがあるとします。
そんなとき、import 時に別名にすることで「こちら側の世界」に揃えられます。

// 自分のコード
import { setUserName as userSetName } from "some-lib";

userSetName("Alice");
JavaScript

ライブラリを差し替える時にも、import の部分だけ修正すれば、
プロジェクト内の他のコードはそのままにできます。

読みやすさを優先した名称に変える

名前が短すぎる／曖昧すぎる場合もあります。

// lib.js
export function fn(d) { /* ... */ }
JavaScript

このまま使うと「fn？d？何それ？」になりがちです。

import { fn as formatDate } from "./lib.js";

const result = formatDate(new Date());
JavaScript

ここが重要です。
「このファイルで読んだときに、意味が伝わる名前か？」
を基準に、import 時に思い切って別名を付けるのはかなり有効です。

衝突を避けつつ、「どこから来たか」も分かるようにする

例えば、複数のライブラリから似た名前の関数を import するとき。

import { parse as parseUrl } from "url-lib";
import { parse as parseJson } from "json-lib";
JavaScript

こうしておけば、

  • parseUrl() → URL のパース
  • parseJson() → JSON のパース

が一目で分かります。

「もともとどのモジュールの関数だったか」も名前に含めると、
後から読んだときに迷子になりにくいです。

具体的な例で import の別名に慣れる

例1：日付と数値の format を使い分ける

// dateFormat.js
export function format(date) {
  return date.toISOString().slice(0, 10);
}
JavaScript
// numberFormat.js
export function format(num) {
  return num.toLocaleString("ja-JP");
}
JavaScript
// main.js
import { format as formatDate } from "./dateFormat.js";
import { format as formatNumber } from "./numberFormat.js";

console.log(formatDate(new Date())); // 2025-12-20 など
console.log(formatNumber(1234567));  // 1,234,567
JavaScript

例2：ユーティリティを名前空間＋別名でまとめる

// stringUtils.js
export function capitalize(str) { /* ... */ }
export function trimAll(str) { /* ... */ }
JavaScript
// main.js
import * as S from "./stringUtils.js";

console.log(S.capitalize("alice"));
console.log(S.trimAll("  hello  "));
JavaScript

例3：default ＋ 名前付きを別名で扱う

// api.js
export default function request(url, options = {}) {
  /* ... */
}

export function buildUrl(path) {
  return "https://api.example.com" + path;
}
JavaScript
// main.js
import req, { buildUrl as makeUrl } from "./api.js";

const url = makeUrl("/users");
req(url, { method: "GET" });
JavaScript

まとめ

import の別名 の核心は、
「外から来た名前を、そのファイルに合った名前に付け替えられる」 ことです。

押さえておきたいポイントを整理すると：

  • 名前付き import では import { 元 as 別名 } の形で別名を付けられる
  • 名前が衝突するとき、役割を明確にしたいとき、プロジェクトの命名ルールに合わせたいときに使う
  • default import は元々「好きな名前で import できる」ので、常に別名のようなもの
  • import * as 別名 で「モジュール一式」に名前を付けることもできる
  • 「このファイルを読む人にとって一番わかりやすい名前か？」を基準に別名を付けると、設計として強い

まずは、意図が曖昧な関数名や、名前がかぶりそうな関数を import するときに、
as を使ってみてください。
「名前を変えるだけで、こんなにコードが読みやすくなるのか」という感覚が掴めてきます。

スポンサーリンク
タイトルとURLをコピーしました