JavaScriptモジュール
モジュール
JavaScriptモジュールを使用すると、コードを個別のファイルに分割できます。
これにより、コードベースの保守が容易になります。
モジュールは、ステートメントを使用して外部ファイルからインポートimportされます。
type="module"モジュールはscriptタグ内にも依存します。
Export
関数または変数を含むモジュールは、任意の外部ファイルに保存できます。
エクスポートには、名前付きエクスポートとデフォルトエクスポートの2種類があります。
Named Exports
person.jsという名前のファイルを作成して、エクスポートしたいものを入力します。
名前付きエクスポートは2つの方法で作成できます。個別にインラインで表示することも、下部に一度にすべてを表示することもできます。
インラインで個別にする場合
person.js
export const name = "Jesse";
export const age = 40;
最後でまとめて一気に
person.js
const name = "Jesse";
const age = 40;
export {name, age};
Default Exports
`message.jsという名前の別ファイルを作成し、それをデフォルトのエクスポートのデモに使用してみましょう。
1つのファイルに含めることができるデフォルトのエクスポートは1つだけです。
例
message.js
const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;
Import
モジュールをファイルにインポートするには、モジュールの名前がエクスポートかデフォルトエクスポートかに応じて2つの方法があります。
名前付きエクスポートは中括弧を使用して構築されます。デフォルトのエクスポートはそうではありません。
注
モジュールは、HTTP(s)プロトコルでのみ機能します。
file://プロトコルを介して開かれたWeb ページは、インポート/エクスポートを使用できません。
モジュールは、HTTP(s)プロトコルでのみ機能します。
file://プロトコルを介して開かれたWeb ページは、インポート/エクスポートを使用できません。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。