Menu
Coddy logo textTech

モジュールとは?

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 - ゲームのスコアリングとポイントシステムを管理し、スコアを追跡してポイント計算を処理します。

challenge icon

チャレンジ

簡単

すでに接続されている2つのモジュール、user-module.jsgame-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で呼び出す
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

オブジェクト指向プログラミングのすべてのレッスン