モジュールとは?
CoddyのJavaScriptジャーニー「オブジェクト指向プログラミング」セクションの一部 — レッスン 7/56。
JavaScriptのコードが大きく複雑になると、すべてを1つのファイルで管理するのが難しくなります。その解決策がモジュールです。コードを別々の整理されたファイルに分割します。
モジュールとは、関連するコードを含むJavaScriptファイルのことです。各モジュールは1つの特定のタスクを処理するため、アプリケーションの理解やメンテナンスが容易になります。
JavaScriptモジュールは、通常の .js ファイルで、他のファイルが import して使用できるように、コード(変数、関数、クラス)を export することができます。
例:
1つの乱雑なファイル:
// ファイル: messy-app.js
let user = "John";
let score = 0;
function login() {
console.log("Welcome " + user);
}
function addPoints(points) {
score += points;
}モジュールで構成された2つのファイル:
// ファイル: user-module.js
let user = "John";
function login() {
console.log("Welcome " + user);
}
// ファイル: game-module.js
let score = 0;
function addPoints(points) {
score += points;
}user-module.js - ユーザー認証とユーザー関連のデータを処理し、ユーザー名とログイン機能を含んでいます。
game-module.js - ゲームのスコアリングとポイントシステムを管理し、スコアを追跡してポイント計算を処理します。
チャレンジ
簡単すでに接続されている2つのモジュール、user-module.jsとgame-module.jsがあります。
あなたのタスクは、user-module.js内で10という値を使用してaddPoints関数を呼び出すことです。
期待される出力:
Score increased! Current score: 10
チートシート
モジュールとは、関連するコードを含むJavaScriptファイルのことです。各モジュールは1つの特定のタスクを処理するため、アプリケーションの理解やメンテナンスが容易になります。
モジュールを使用すると、すべてのコードを1つの大きなファイルで管理するのではなく、整理された個別のファイルに分割できます。
JavaScriptモジュールは通常の.jsファイルであり、コード(変数、関数、クラス)をエクスポート(export)して、他のファイルがそれをインポート(import)して使用できるようにします。
モジュールを使用したコード整理の例:
// ファイル: user-module.js
let user = "John";
function login() {
console.log("Welcome " + user);
}// ファイル: game-module.js
let score = 0;
function addPoints(points) {
score += points;
}自分で試してみよう
import { addPoints } from './game-module.js';
let user = "John";
// TODO: addPoints関数を値10で呼び出す
このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。