import

インポート（モジュール・パッケージ）

意味モジュールを取り込む

importとは？

import文は、他のモジュールからエクスポートされた機能を取り込むために使用されます。

importの具体的な使い方

名前付きインポートの例

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from './math.js';

const result = add(5, 3);
console.log(`5 + 3 = ${result}`);

👇出力結果

5 + 3 = 8

'math.js'からadd関数を取り込み、使用しています。

名前空間インポートの例

// math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// main.js
import * as math from './math.js';

const sum = math.add(4, 2);
const product = math.multiply(4, 2);
console.log(`4 + 2 = ${sum}`);
console.log(`4 * 2 = ${product}`);

👇出力結果

4 + 2 = 6
4 * 2 = 8

'math.js'のすべてのエクスポートをmath名前空間として取り込み、複数の関数を使用しています。

importに関するよくある質問

Q. importとrequireの違いは？

A. importはES6モジュールの一部で、静的インポートに使用されます。requireはCommonJSの機能で、動的インポートに使用されます。importはブラウザでネイティブにサポートされていますが、requireはNode.js環境で主に使用されます。

Q. importは非同期ですか？

A. 基本的なimport文は同期的です。しかし、動的インポートを行う場合（import()関数を使用）、それは非同期になります。

Q. importの際のパス指定方法は？

A. 相対パスの場合は './file.js' や '../folder/file.js' のように指定します。絶対パスの場合は '/root/file.js' のようになります。node_modulesからのインポートは 'module-name' のように指定します。

importが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのimportやdynamic import、Parcel、Rollup、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。