【JavaScript ES6学習】Modulesのエクスポート

2019/06/17

codecademyで学習したことをまとめています。
プログラミング初心者の私が学習しながら書いた、完全に自分用のメモみたいなものなので、他人が見ると意味不明だったり、間違いがある可能性があるのでご注意ください。

codecademyは無料でかなりのことが学習できる素晴らしいサイトですが、英語です。
なのでこの記事に書かれている日本語の用語も間違っているかもしれないのでご了承ください。

この記事の目次

1 今回学習した項目
2 モジュール(Modules)とは？
3 モジュールのエクスポート
4 エクスポートの別の書き方
5 Default export
6 Named Exports
7 Export Named Exports
8 Export as
9 Combining Export Statements

今回学習した項目

codecademy
JavaScript
Lesson 11 Hello Modules, module.exports, module.exports II, export default, Named Exports, Export Named Exports, Import Named Imports, Export as, Combining Export Statements

今回はモジュールをエクスポートする方法です。
エクスポートする方法は複数あり、用途によって使い分けるとよさそうです。
JavaScriptの学習をしながらこれを書いてますが、はっきり言って理解が追いついていません。

モジュール(Modules)とは？

モジュールとは、再利用したいコードをプログラムからエクスポートし、他のプログラムにインポートする機能。

モジュールは次の理由により便利とのこと

デバッグ、コードの修正が簡単になる
コードの再利用ができる
情報をプライベートに保てる
ネームスペースの汚染、衝突が起こらない

モジュールのエクスポート

モジュールは別のファイルで作成します。
次の例では“menu.js”と言うファイルを作成しています。

//menu.js
let Menu = {};
Menu.specialty = "Roasted Beet Burger with Mint Sauce";

module.exports = Menu;

let Menu = {};でモジュールを代表するオブジェクトを作成。
一文字目は大文字にするのが慣習みたいです。

Menu.specialtyでプロパティを宣言しています。

module.exports = Menu;でMenuオブジェクトをモジュールとしてエクスポートします。

エクスポートの別の書き方

モジュールのエクスポートの、さっきとは違う書き方です。

//menu.js
module.exports = {
  specialty: "Roasted Beet Burger with Mint Sauce",
  getSpecialty: function() {
    return this.specialty;
  }
};

module.exports =に続いてモジュールを書く感じですね。
プロパティが2つあり、2つ目は無名関数(anonymous function)です。

//order.js,
const Menu = require('./menu.js');

console.log(Menu.getSpecialty());

モジュールをインポートする側はこう書きます。

Default export

Default exportは次のように書きます。

//menu.js
let Menu = {};

export default Menu;

ところでDefault exportって何？

Named Exports

let specialty = '';
function isVegetarian() {
};
function isLowSodium() {
};

export { specialty, isVegetarian };

他の例

let availableAirplanes = [
  {name: 'AeroJet',
   fuelCapacity: 800,
   availableStaff: ['pilots', 'flightAttendants', 'engineers', 'medicalAssistance', 'sensorOperators']
  },
  {name: 'SkyJet',
   fuelCapacity: 500,
   availableStaff: ['pilots', 'flightAttendants']
  }
];

let flightRequirements = {
  requiredStaff: 4
};

function meetsStaffRequirements(availableStaff, requiredStaff) {
  if (availableStaff.length >= requiredStaff) {
    return true;
  } else {
    return false;
  };
};

export {availableAirplanes, flightRequirements, meetsStaffRequirements};

Export Named Exports

export let specialty = '';
export function isVegetarian() {
};
function isLowSodium() {
};

Export as

asを使うと変数を別の名前(aliase)でエクスポート出来ます。

let specialty = '';
let isVegetarian = function() {
};
let isLowSodium = function() {
};

export { specialty as chefsSpecial, isVegetarian as isVeg, isLowSodium };

Combining Export Statements

複数のエクスポート方法を組み合わせることも可能です。
こんなふうに。

let specialty = '';
function isVegetarian() {
};
function isLowSodium() {
};
function isGlutenFree() {
};

export { specialty as chefsSpecial, isVegetarian as isVeg };
export default isGlutenFree;

またはこんなふうに

export let Menu = {};

export let specialty = '';
export let isVegetarian = function() {
};
export let isLowSodium = function() {
};
let isGlutenFree = function() {
};

export default isGlutenFree;

【JavaScript ES6学習】基礎文法編目次