js:module

差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

--- js:module [2021/06/16 09:42]
tanaka [ワイルドカードによるimport]
+++ js:module [2021/07/05 10:36] (現在)
y2sunlight [グローバルスコープに関する注意]
@@ 行 47: / 行 47: @@
 モジュール内のメンバをインポートするにはimportキーワードを使用します。
-<sxh javascript;title:main.js>
+<sxh javascript;title:Example>
 import { School, Student } from './school.js'
 var abc_school = new School('ABC School');
@@ 行 71: / 行 71: @@
 モジュール内のimport要素に対して個々に別名をつけることができます。
-<sxh javascript;title:main.js>
+<sxh javascript;title:Example>
-import {School as MySchool, Student as MyStudent} from './school'
+import {School as MySchool, Student as MyStudent} from './school.js'
 var abc_school= new MySchool('ABC School');
 var suzuki= new MyStudent('Suzuki');
@@ 行 81: / 行 81: @@
 アスタリスク( ''*'' )を使用してモジュール内のすべての要素をインポートすることができます。但しこの場合、モジュールに対して別名を付与します。
-<sxh javascript;title:main.js>
+<sxh javascript;title:Example>
-import * as school from './school'
+import * as school from './school.js'
 var abc_school= new school.School('ABC School');
 var suzuki= new school.Student('suzuki');
@@ 行 103: / 行 103: @@
 <sxh javascript;title:Example>
-import School from './school'
+import School from './school.js'
 var abc_school= new School('ABC School');
 </sxh>
@@ 行 150: / 行 150: @@
 モジュールの機能は単独のスクリプトのスコープに対してインポートされます。インポートされた機能はインポートしたスクリプトの内部からしかアクセスできません。即ち、インポートされた機能はグローバルスコープから利用することはできません。
+また、モジュールの場合、自動的に [[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode|Strict モード]]になり、var命令の省略は禁止されます。
-> TODO 例を書く
+<sxh html;title:index.html>
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+<body>
+  <script type="module" src="main.js"></script>
+  <script>
+    // local_schoolはモジュールの内部からしかアクセスできない
+    console.log(local_school.name);    // NG
+    foo_school = new School('Foo School')  //NG
+  </script>
+</body>
+</html>
+</sxh>
+<sxh javascript;title:main.js>
+import { School } from './school.js'
+var local_school = new School('Local School');
+console.log(local_school.name);  // OK
+// モジュール内ではグローバルスコープを持つ変数が作成できない。
+// global_school = new School('Global School');
+// console.log(global_school.name); NG
+</sxh>
+<sxh javascript;title:school.js>
+export class School {
+    constructor(name) {
+        // プロパティの定義
+        this.name = name;
+    }
+}
+</sxh>
+\\

js/module.1623804125.txt.gz · 最終更新: 2021/06/16 09:42 by tanaka