Steg JavaScript Tutorial

Appearance

importとexport ​

この章では、JavaScriptのモジュールシステムについて学習します。importとexportは、コードを複数のファイルに分割して整理するための重要な機能です。

モジュールシステムとは？ ​

モジュールシステムとは、コードを複数のファイルに分割して管理する仕組みです。これにより以下のメリットがあります：

  • コードの再利用: 一度書いた機能を他のファイルでも使える
  • 保守性の向上: ファイルごとに責任を分離できる
  • 名前空間の管理: 変数名の衝突を防げる

基本的な仕組み ​

  • export: ファイル内の変数や関数を外部に公開する
  • import: 他のファイルで公開されているものを読み込む

実際にコードを書いて体験してみましょう。

exportでデータを公開してみよう ​

まず、他のファイルで使用するためのデータを作成し、exportで公開してみましょう。

text.jsというファイルを新規作成し、以下のコードを記述してください：

js
// text.js
export const text = 'Hello World!'

コードの解説 ​

  • export: このファイルから外部にデータを公開するキーワード
  • const text: 公開する変数名
  • 'Hello World!': 公開するデータの内容

このようにexportを使うことで、他のファイルからこのtext変数を使用できるようになります。

importでデータを読み込んでみよう ​

次に、index.jsファイルで先ほど作成したtextを読み込んで使用してみましょう。

js
// index.js
import { text } from './text'

console.log(text)

コードの解説 ​

  • import { text }: text.jsからtext変数を読み込む
  • from './text': 読み込み元のファイルパス（.jsは省略可能）
  • { }: 波括弧は「名前付きexport」を読み込む際に使用

この書き方を**名前付きimport（Named Import）**と呼びます。

コードを実行してみよう ​

さっそく作成したコードを実行してみましょう。ターミナルで以下のコマンドを実行してください：

bash
node index.js

エラーが発生する理由を理解しよう ​

上記のコマンドを実行すると、おそらく以下のようなエラーが表示されます。(node.jsのバージョンによるけど)

bash
SyntaxError: Cannot use import statement outside a module

これは「モジュールの外でimport文を使用することはできません」という意味のエラーです。

なぜエラーが起こるのか？ ​

Node.jsでは、デフォルトでは従来のJavaScript形式（CommonJS）でファイルを実行しようとします。しかし、importとexportは**ES Modules（ESモジュール）**という新しい形式の機能です。

そのため、ES Modulesを使用することをNode.jsに明示的に伝える必要があります。

ES ModulesとCommonJSの違い

  • CommonJS: Node.jsの従来の形式（require()とmodule.exportsを使用）
  • ES Modules: ECMAScript標準の新しい形式（importとexportを使用）

現代のJavaScript開発では、ES Modulesが主流になっています。

ES Modulesを有効にする方法 ​

ES Modulesを使用するには、以下の2つの方法があります。

方法1: package.jsonで設定する（推奨） ​

プロジェクトのpackage.jsonファイルに以下の行を追加します：

json
{
  "name": "your-project-name",
  "version": "1.0.0",
  "type": "module",
  ...
}

"type": "module"を追加することで、プロジェクト全体でES Modulesが使用可能になります。

方法2: ファイル拡張子を変更する ​

index.jsのファイル名をindex.mjsに変更することでも、そのファイル単体でES Modulesを使用できます。

bash
# ファイル名を変更
mv index.js index.mjs

# 実行
node index.mjs

正しく実行してみよう ​

どちらかの方法でES Modulesを有効にした後、再度実行してみましょう：

bash
node index.js

今度は正常に実行され、ターミナルにHello World!と表示されるはずです！

exportとimportの種類について理解しよう ​

ES Modulesには主に2つの書き方があります。

1. 名前付きexport/import（Named Export/Import） ​

今まで使っていた書き方です：

js
// text.js
export const text = 'Hello World!'
export const message = 'こんにちは'

// index.js
import { text, message } from './text'
console.log(text)    // Hello World!
console.log(message) // こんにちは

2. デフォルトexport/import（Default Export/Import） ​

ファイルから1つの主要なものを公開する場合に使用します：

js
// text.js
const text = 'Hello World!'
export default text

// index.js  
import text from './text'  // 波括弧なし
console.log(text) // Hello World!

使い分けのポイント ​

  • 名前付きexport: 複数の値を公開したい場合
  • デフォルトexport: ファイルのメイン機能を1つだけ公開したい場合

TIP

一つのファイルで両方の方式を組み合わせることも可能ですが、シンプルさを保つためにどちらか一方に統一することを推奨します。

まとめ ​

この章で学習した内容を振り返ってみましょう。

学習できたこと ​

  • モジュールシステムの基本概念と利点
  • exportを使ったデータの公開方法
  • importを使ったデータの読み込み方法
  • ES Modulesを有効にする設定方法
  • 名前付きexportとデフォルトexportの違い

次のステップ ​

モジュールシステムを使うことで、大きなプロジェクトでもコードを整理して管理できるようになります。

今回作成したモジュールを、別のリポジトリから呼び出し可能とするために、GitHub の Public Repository として公開し、実際に npm install してみましょう！