内容へ移動
Water Sunlight
軽量プログラミングの文法 - JavaScript/Python
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
トレース:
js:module
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== JavaScript モジュール ====== --- //[[http://www.y2sunlight.com/water|y2sunlight]] 2021-06-07// ===== モジュールの構文 ===== JavaScriptではES2015<sup>[[js:top#ECMAScript|*2015]]</sup>からモジュールがサポートされました。近年では、モジュールはサーバーサイド、クライアントサイド(ブラウザ)のいずれでも利用できます。 ==== export ==== モジュールは一つのファイルとして定義され、外部からアクセスできるメンバ(クラス、関数、変数、定数など)にはexportキーワードを付与します。以下はStudentクラスの例です。 <sxh javascript;title:school.js> export class School { constructor(name) { // プロパティの定義 this.name = name; } } export class Student { // コンストラクタの定義 constructor(name) { // プロパティの定義 this.name = name; } // メソッドの定義 greeting() { console.log(`I am ${this.name}.`); } } </sxh> export構文 <code> export let name1, name2, …, nameN; // 変数(var, const も) export function functionName(){...} // 関数 export class ClassName {...} // クラス </code> > TODO 説明 ==== import ==== モジュール内のメンバをインポートするにはimportキーワードを使用します。 <sxh javascript;title:Example> import { School, Student } from './school.js' var abc_school = new School('ABC School'); var suzuki = new Student('Suzuki'); suzuki.greeting(); // I am Suzuki. </sxh> import構文 <code> import { name, ・・・ } from module name: インポートする要素 module: モジュール </code> > TODO 説明 > モジュール名はNode.jsなどのサーバーサイドJavaでは拡張子を省略したパスを、ChromeなどのクライアントサイドJavaでは拡張子を指定したパス名を指定します。 \\ ===== 様々な構文 ===== ==== importしたメンバの別名 ==== モジュール内のimport要素に対して個々に別名をつけることができます。 <sxh javascript;title:Example> import {School as MySchool, Student as MyStudent} from './school.js' var abc_school= new MySchool('ABC School'); var suzuki= new MyStudent('Suzuki'); </sxh> ==== ワイルドカードによるimport ==== アスタリスク( ''*'' )を使用してモジュール内のすべての要素をインポートすることができます。但しこの場合、モジュールに対して別名を付与します。 <sxh javascript;title:Example> import * as school from './school.js' var abc_school= new school.School('ABC School'); var suzuki= new school.Student('suzuki'); </sxh> ==== デフォルトのexport ==== エクスポートする要素が1つのモジュールの場合、デフォルトのexport要素を宣言することができます。 <sxh javascript;title:school.js> export default class { constructor(name) { // プロパティの定義 this.name = name; } } </sxh> この様にデフォルトのエクスポートでは要素に名前(この例の場合はクラス名)をつける必要はありません。インポートは以下の様にして行います。 <sxh javascript;title:Example> import School from './school.js' var abc_school= new School('ABC School'); </sxh> \\ ===== クライアントサイドでの利用 ===== モジュールを HTMLに適用するには、スクリプト要素の中でtype="module" を使用します。import と export 文は、モジュールの中でのみ使うことができます。通常のスクリプト(type="javascript")の中では使えません。 以下は、上述のStudentクラスをインポートするChromeでの例です。 <sxh html;title:index.html> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="module"> import { Student } from './student.js' var suzuki = new Student('suzuki'); suzuki.greeting(); // I am suzuki. </script> </body> </html> </sxh> importキーワードの中のモジュール名は、ChromeなどのクライアントサイドJavaでは拡張子を指定したパス名を指定します。 ==== CORSに関する注意 ==== CORS(Cross-Origin Resource Sharing)とは、直訳すると「オリジン間リソース共有」となり、コルスとも呼ばれます。オリジンとはドメインと似ていますが、プロトコルとポート番号を含んだ概念です。 * y2sunlight.com --- ドメイン * http://y2sunlight.com:80 --- オリジン つまり、CORSとは異なったオリジン間でリソースを共有する仕組みのことで、CORSを使わない場合は、セキュリティの観点から[[https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy|同一オリジンポリシー]]に従います。例えば[[https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest|XMLHttpRequest]]はその代表例です。 CORSはモジュールのインポートに対しても有効になります。従って、モジュールを使ったJavaScriptをローカルでテストしようとするときは注意してください。ローカルから HTML ファイルを読み込もうとすると、JavaScript モジュールのセキュリティ要件のために、CORS エラーが発生します。テストはサーバー経由で行う必要があります。 ==== グローバルスコープに関する注意 ==== モジュールの機能は単独のスクリプトのスコープに対してインポートされます。インポートされた機能はインポートしたスクリプトの内部からしかアクセスできません。即ち、インポートされた機能はグローバルスコープから利用することはできません。 また、モジュールの場合、自動的に [[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode|Strict モード]]になり、var命令の省略は禁止されます。 <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.txt
· 最終更新: 2021/07/05 10:36 by
y2sunlight
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ