名前付きエクスポートの別名（as）

as キーワードを使うと、エクスポートやインポート時に名前を変更できます。名前の衝突を避けたり、より分かりやすい名前に変えたりする際に便利です。

インポート時の別名

import 文で as を使うと、インポートする値に別の名前を付けられます。

// math.js
export function add(a, b) {
  return a + b;
}

export const PI = 3.14159;

// main.js
import { add as sum, PI as pi } from './math.js';

console.log(sum(2, 3)); // 5
console.log(pi);        // 3.14159

元の名前（add, PI）ではなく、新しい名前（sum, pi）で使用します。

名前の衝突を解決

同じ名前の関数を複数のモジュールからインポートする場合、as で別名を付けて衝突を回避できます。

// stringUtils.js
export function format(str) {
  return str.trim().toLowerCase();
}

// dateUtils.js  
export function format(date) {
  return date.toISOString();
}

// main.js
import { format as formatString } from './stringUtils.js';
import { format as formatDate } from './dateUtils.js';

formatString("  Hello  "); // "hello"
formatDate(new Date());    // "2024-03-15T..."

エクスポート時の別名

export 文でも as を使って、内部の名前と公開する名前を変えることができます。

// utils.js
function internalHelper() {
  // 内部的な名前
}

const privateConfig = {
  debug: true
};

// 別名でエクスポート
export {
  internalHelper as helper,
  privateConfig as config
};

// main.js
import { helper, config } from './utils.js';
// internalHelper や privateConfig ではインポートできない

デフォルトエクスポートと as

デフォルトエクスポートをまとめてエクスポートする際にも as が使えます。

// utils.js
function main() {
  // ...
}

export { main as default };

これは export default main; と同じ意味になります。

再エクスポート時の別名

他のモジュールの値を再エクスポートする際にも as で名前を変更できます。

// index.js
export { Button as PrimaryButton } from './Button.js';
export { default as Modal } from './Modal.js';

よくある使用パターン

長い名前を短くする

import { createAsyncThunk as createThunk } from 'toolkit' のように、長い名前を短縮して使いやすくします。

より説明的な名前にする

import { fn as calculateTotalPrice } のように、文脈に合った分かりやすい名前に変更します。

// 実際のプロジェクトでの例
import {
  createStore as createReduxStore,
  combineReducers as combine
} from 'redux';

import {
  ref as vueRef,
  computed as vueComputed
} from 'vue';

注意点

as を多用しすぎると、コードを読む人が混乱する可能性があります。

適切な使用

名前の衝突回避、明らかに分かりやすくなる場合

避けるべき使用

個人的な好みだけで名前を変える、統一性のない別名

チームでコーディング規約を決めて、一貫性を保つことが重要です。