Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@ikdysk

JavaScript(ES6)のexportとimportについて調べてみた

ES6で導入されたexportとimportについて調べた

注!完全に自分用の忘備録です。

<script type="module">が必須

import / export を使うにはscriptのtype属性に module の指定が必須です。
指定しないと以下のようなエラーになります。

Uncaught SyntaxError: Cannot use import statement outside a module

<script type="module">の実行タイミング

type="module"のスクリプトは最後に実行されます。
またDOM構築後に実行されるので、今までのようにheadタグに読み込むかbodyの閉じタグの上で読み込ませるか考える必要がありません。

実装例(その1)

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JSサンプル</title>
</head>
<body>
<script type="module" src="import.js"></script>
</body>
</html>
import.js
// 'module.js'でexportされたclassをimportする。
import { Point, Rectangle } from './module.js';

// importしたクラスを使用する。
const p = new Point(1, 2);
const r = new Rectangle(0, 0, 5, 5);
console.log(p.toString());
console.log(r.toString());
module.js
// classをexportしている。
export class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return `{x:${this.x}, y:${this.y}}`;
    }
}
export class Rectangle {
    constructor(x, y, width, height) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }
    toString() {
        return `{x:${this.x}, y:${this.y}, width:${this.width}, height:${this.height}}`;
    }
}

export defaultが推奨されている

特に理由がなければexportはdefaultが推奨されています。
参考:Default exports are favored

一旦まとめ

export、importの構文に振れる機会がそんなに多くなくてまだ完全に理解していないので、この記事は自分の理解度と共にアップデートしていく予定です。

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ikdysk
その昔、アンダースコアハックやスターハックを使ってコーディングしてました。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?