第4回 - ESモジュール

ECMAScriptモジュール（JavaScriptモジュール）

JavaScript モジュール | MDN ↗

• モジュールとは便利な関数などをまとめたプラグインの様なもの
• モジュールは1つの.jsファイル
• exportで、モジュールを外部に出力
• importで、モジュールを取り込んで使用

サイトの動作を確認するには、サーバーが必要

ESモジュールの機能を使用する場合、HTTPかHTTPS経由でのみ動作する。

ローカル環境で確認する場合にはLive Server ↗などのローカルサーバーを立ち上げる拡張機能を使用する。

default エクスポート／インポート

1つの.jsファイル（モジュール）の基礎となる機能を設定する

• index.html
• ディレクトリjs

  • sayHello.js モジュールとなるファイル
  • main.js
• ディレクトリcss/

  • …

1. sayHello.jsにモジュールを作成

   sayHello.js

   // exportで設定された関数や変数などだけが他のJSファイルから参照できる。
   export default (name) => {
     console.log(`こんにちは！${name}さん`);
   };

2. 作成したモジュールをmain.jsで取り込む

   main.js

   // helloという任意の名前でモジュールを取り込む
   import hello from "./sayHello.js";
   
   // 任意の名前をつけたモジュールを使用する
   hello("田中"); // こんにちは！田中さん

   注意

   from "./sayHello.js"で指定するファイルパスは

   • ⭕ "./sayHello.js"
   • ⭕ "/js/sayHello.js"
   • ⭕ "../sayHello.js"

   の様に記述できるが、

   • ❌ "sayHello.js"

   の様に./、/、../を付けずに指定することは出来ないので注意

3. main.jsをindex.htmlで読み込む

   index.html

   <script src="js/main.js" type="module"></script>

   注意

   scriptタグにtype="module"がついていないとエラーになる

名前付き エクスポート／インポート

モジュール内の機能に名前をつけて必要な機能だけをインポートする

• index.html
• ディレクトリjs

  • utilities.js いくつかの機能をまとめたモジュール
  • main.js
• ディレクトリcss/

  • …

1. utilities.jsに名前付きモジュールを作成

   utilities.js

   const sayHello = (name) => {
     console.log(`こんにちは！${name}さん`);
   };
   
   const sayBye = (name) => {
     console.log(`さようなら！${name}さん`);
   };
   
   // sayHelloとsayByeを名前付きモジュールとして出力
   export { sayHello, sayBye };

2. 作成したモジュールをmain.jsで取り込む

   main.js

   // utilities.jsで出力したものと同じ名前で取り込む
   import { sayHello, sayBye } from "./utilities.js";
   
   // sayHelloの機能だけ必要な場合
   // import { sayHello } from "./utilities.js"
   
   sayHello("田中"); // こんにちは！田中さん
   sayBye("渡辺"); // さようなら！渡辺さん

   名前付きインポートには波括弧が必要

   defaultインポートの場合は import <モジュール名> form "..."という形で読み込んだが、 名前付きインポートの場合は import { <モジュール名> } from "..."の様にモジュール名を波括弧で囲う必要がある

3. main.jsをindex.htmlで読み込む

   index.html

   <script src="js/main.js" type="module"></script>

オブジェクト

オブジェクトとは、関連するデータや、関数をまとめておく場所で、設定値や関連する機能をまとめておくために使用される。

const obj = {
  // キー: 値
  key: "value", // この1行のかたまりをプロパティと呼ぶ
  key2: 10, // 複数のプロパティを指定する時は,（カンマ）で区切る
  key3: true,
};

また、プロパティの値には関数やオブジェクトを入れ子にすることも可能で、オブジェクトに紐づいた関数のことをメソッドと呼ぶ。

const user = {
  name: "田中",
  age: 25,
  message: function () {
    // メソッド
    console.log("こんにちは");
  },
  address: {
    // userオブジェクトの中にaddressオブジェクトを入れることも可能
    country: "Japan",
    city: "Tokyo",
  },
};

プロパティの参照・追加

プロパティの値を参照したり追加・変更をするにはドット（.）を使用して、下記のように記述します。

プロパティアクセサー - JavaScript | MDN ↗

const user = {
  name: "田中",
  age: 25,
  message: function () {
    console.log("こんにちは");
  },
  address: {
    country: "Japan",
    city: "Tokyo",
  },
};

// .（ドット）を使用してプロパティを参照する
console.log(user.name); // 田中
console.log(user.message()); // こんにちは
console.log(user.address.city); // Tokyo

// プロパティを上書きする
user.name = "山田";
console.log(user.name); // 田中から山田に上書きされる

// 新しくemailというプロパティを追加
user.email = "tanaka@example.com";

複数のオブジェクトを合体させる方法

スプレッド構文（...）を使用して複数のオブジェクトを合体することが出来る。

const secret = { id: 12345, password: "password" };
const profile = { name: "田中", age: 25 };

// secretオブジェクトとprofileオブジェクトの合体
const user = { ...secret, ...profile };
/*
user = {
  id: 12345,
  password: "password",
  name: "田中",
  age: 25,
};
*/

また、スプレッド構文を使用してオブジェクトを合体させると、プロパティの上書きが可能。

const defaultSettings = { theme: "light", fontSize: 14, language: "ja" };
const userSettings = { fontSize: 16, language: "en" };

// 合体時にプロパティを上書きする（後のオブジェクトが優先される）
const settings = { ...defaultSettings, ...userSettings };
/*
settings = {
  theme: "light",
  fontSize: 16,   // userSettingsの値が上書き
  language: "en",  // userSettingsの値が上書き
}
*/

オブジェクトを分解する方法

残余プロパティ（...）を使用してオブジェクトを分解することが出来る。

オブジェクトから特定のプロパティを除外したい場合などに便利。

const user = {
  id: 12345,
  password: "password",
  token: "xyz123",
  name: "田中",
  age: 25,
};

// password変数、token変数、profileオブジェクトに分解
const { password, token, ...profile } = user;
/*
profile = {
  id: 12345,
  name: "田中",
  age: 25,
}
*/

残余プロパティは必ず最後に配置する必要があるので注意

// `...profile`は最後に配置する
const { password, token ...profile }

// これはダメ
const { ...profile, password, token }

関数の戻り値（返り値）

関数は実行結果として関数の実行時にreturnを使用して、なんらかの値を戻すことが出来る。

// 引数a, bを合計して計算結果を戻すadd関数を定義
const add = function (a, b) {
  return a + b; // 計算結果を返す
};

// add関数の実行時に計算結果が返ってくる
console.log(add(5, 3)); // 8

早期リターン（Early Return）

returnの特徴としてreturnと;もしくはreturnと改行が出てきた時点で処理が終了するというものがある。

例外的な条件をあらかじめ弾いておいて、return以降の処理が実行されないようにしたい場合にこの特性が利用され、この処理に関係の無いケースを予め除外しておくパターンのことを早期リターン（Early Return）と言う。

この場合、明示的に返したいものがない場合はreturn;のみで終了させることも可能

const sendFormData = (formData) => {
  // formDataにメールアドレスが存在しているかどうかを先にチェックする
  if (!formData.email) {
    console.error("メールアドレスが存在しません。");
    return;
  }

  // この行以降に色々な処理が続く
};

const onlyMobile = (width) => {
  // 画面幅(width)が440px以上だった場合は処理を止める
  if (width >= 440) {
    console.error("この関数はモバイル専用の関数です");
    return;
  }
};

returnと値の間に改行は入れない

returnの後ろに改行が入ってしまうと、そこに;が入ったものと見なされてしまう。（暗黙のセミコロン挿入） そのためreturnと値の間に改行を入れると意図通りに動かなくなってしまう。

// 問題となるコード
const add = (a, b) => {
  return // 改行が入ったので`;`が入ったことになり、この時点で処理が終了してしまう
    a + b; // a + bは返らない
}