導入

ES6 (ECMAScript 2015) は、JavaScript に標準化されたモジュール システムを導入し、コードの編成と共有の方法に革命をもたらしました。この記事では、実際の例とデモ プロジェクトを提供して、ES6 インポートの機能と柔軟性を説明しながら、ES6 インポートの詳細を調査します。

目次

1. 基本的なインポート構文
2. 名前付きエクスポートとインポート
3. デフォルトのエクスポートとインポート
4. 名前付きエクスポートとデフォルトエクスポートの混合
5. インポートの名前変更
6. すべてのエクスポートをオブジェクトとしてインポート
7. 動的インポート
8. 実際の例
9. デモ プロジェクト: タスク マネージャー
10. ベストプラクティスとヒント
11. 結論

基本的なインポート構文

ES6 でインポートするための基本的な構文は次のとおりです:

import { something } from './module-file.js';

これは、同じディレクトリ内のファイル module-file.js から、何かという名前のエクスポートをインポートします。

名前付きエクスポートとインポート

名前付きエクスポートを使用すると、モジュールから複数の値をエクスポートできます:

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

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

console.log(add(5, 3));      // Output: 8
console.log(subtract(10, 4)); // Output: 6

デフォルトのエクスポートとインポート

デフォルトのエクスポートは、モジュールのメインのエクスポート値を提供します:

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

// main.js
import greet from './greet.js';

console.log(greet('Alice')); // Output: Hello, Alice!

名前付きエクスポートとデフォルトエクスポートの混合

名前付きエクスポートとデフォルトのエクスポートを 1 つのモジュールに組み合わせることができます:

// utils.js
export const VERSION = '1.0.0';
export function helper() { /* ... */ }

export default class MainUtil { /* ... */ }

// main.js
import MainUtil, { VERSION, helper } from './utils.js';

console.log(VERSION);  // Output: 1.0.0
const util = new MainUtil();
helper();

インポートの名前変更

名前の競合を避けるためにインポートの名前を変更できます:

// module.js
export const someFunction = () => { /* ... */ };

// main.js
import { someFunction as myFunction } from './module.js';

myFunction();

すべてのエクスポートをオブジェクトとしてインポートする

モジュールからすべてのエクスポートを単一のオブジェクトとしてインポートできます:

// module.js
export const a = 1;
export const b = 2;
export function c() { /* ... */ }

// main.js
import * as myModule from './module.js';

console.log(myModule.a);  // Output: 1
console.log(myModule.b);  // Output: 2
myModule.c();

動的インポート

動的インポートにより、オンデマンドでモジュールをロードできます:

async function loadModule() {
  const module = await import('./dynamicModule.js');
  module.doSomething();
}

loadModule();

実際の例

1. 反応コンポーネント:

// Button.js
import React from 'react';

export default function Button({ text, onClick }) {
  return {text};
}

// App.js
import React from 'react';
import Button from './Button';

function App() {
  return  alert('Clicked!')} />;
}

1. Node.js モジュール:

// database.js
import mongoose from 'mongoose';

export async function connect() {
  await mongoose.connect('mongodb://localhost:27017/myapp');
}

// server.js
import express from 'express';
import { connect } from './database.js';

const app = express();

connect().then(() => {
  app.listen(3000, () => console.log('Server running'));
});

デモ プロジェクト: タスク マネージャー

ES6 インポートの動作を示す簡単なタスク マネージャーを作成しましょう:

// task.js
export class Task {
  constructor(id, title, completed = false) {
    this.id = id;
    this.title = title;
    this.completed = completed;
  }

  toggle() {
    this.completed = !this.completed;
  }
}

// taskManager.js
import { Task } from './task.js';

export class TaskManager {
  constructor() {
    this.tasks = [];
  }

  addTask(title) {
    const id = this.tasks.length   1;
    const task = new Task(id, title);
    this.tasks.push(task);
    return task;
  }

  toggleTask(id) {
    const task = this.tasks.find(t => t.id === id);
    if (task) {
      task.toggle();
    }
  }

  getTasks() {
    return this.tasks;
  }
}

// app.js
import { TaskManager } from './taskManager.js';

const manager = new TaskManager();

manager.addTask('Learn ES6 imports');
manager.addTask('Build a demo project');

console.log(manager.getTasks());

manager.toggleTask(1);

console.log(manager.getTasks());

このデモを実行するには、 --experimental-modules フラグを備えた Node.js や、webpack や Rollup などのバンドラーを備えた最新のブラウザなど、ES6 モジュールをサポートする JavaScript 環境を使用する必要があります。

ベストプラクティスとヒント

1. 複数の関数/値には名前付きエクスポートを使用し、主要な機能にはデフォルトのエクスポートを使用します。
2. モジュールを単一目的に集中させてください。
3. ファイルとエクスポートには一貫した命名規則を使用してください。
4. モジュール間の循環依存関係を避けます。
5. ブラウザベースのプロジェクトには、webpack や Rollup などのバンドラーの使用を検討してください。
6. 大規模なアプリケーションでのコード分割とパフォーマンスの最適化には動的インポートを使用します。

結論

ES6 インポートは、JavaScript コードを編成するための強力かつ柔軟な方法を提供します。さまざまなインポートおよびエクスポート構文を理解することで、よりモジュール化され、保守しやすく、効率的なアプリケーションを作成できます。ここで提供されるデモ プロジェクトと実際の例は、独自のプロジェクトで ES6 インポートを使用するための強固な基盤を提供するはずです。

モジュールとインポートをどのように構成するかを決定するときは、プロジェクトの特定のニーズを常に考慮することを忘れないでください。コーディングを楽しんでください!