ESavaScript の詳細) リアルワールドのサンプルとデモ プロジェクトを使用してインポートします。

導入

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 から something という名前付きエクスポートをインポートします。

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

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

// 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 <button onClick={onClick}>{text}</button>;
}

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

function App() {
  return <Button text="Click me" onClick={() => 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());

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

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

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

結論

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

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

以上がESavaScript の詳細) リアルワールドのサンプルとデモ プロジェクトを使用してインポートします。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。