JavaScriptモジュールを使ったコード再利用性の向上方法

   // math.js
   export function add(a, b) {
       return a + b;
   }
   export const PI = 3.14;

   // main.js
   import { add, PI } from './math.js';
   console.log(add(2, 3)); // 5
   console.log(PI); // 3.14

// utils.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}
export const version = '1.0.0';

// logger.js
export default function log(message) {
    console.log(message);
}

// main.js
import { add, subtract, version } from './utils.js';
console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2
console.log(version); // '1.0.0'

// main.js
import log from './logger.js';
log('Hello, world!'); // 'Hello, world!'

// moduleA.js
const value = 42;
export function getValue() {
    return value;
}

// moduleB.js
const value = 'Hello, world!';
export function getValue() {
    return value;
}

// main.js
import { getValue as getValueA } from './moduleA.js';
import { getValue as getValueB } from './moduleB.js';

console.log(getValueA()); // 42
console.log(getValueB()); // 'Hello, world!'

// moduleC.js
const secret = 'This is a secret!';
export function revealSecret() {
    return secret;
}

// main.js
import { revealSecret } from './moduleC.js';
console.log(revealSecret()); // 'This is a secret!'

// 'secret' はグローバルスコープには存在しません
console.log(typeof secret); // 'undefined'

// userModule.js
export const User = {
    name: 'Alice',
    age: 25
};

// adminModule.js
export const User = {
    name: 'Bob',
    role: 'Administrator'
};

// main.js
import { User as RegularUser } from './userModule.js';
import { User as AdminUser } from './adminModule.js';

console.log(RegularUser.name); // 'Alice'
console.log(AdminUser.name); // 'Bob'

// mathModule.js
export const MathUtils = {
    add: (a, b) => a + b,
    subtract: (a, b) => a - b
};

// stringModule.js
export const StringUtils = {
    capitalize: (str) => str.charAt(0).toUpperCase() + str.slice(1),
    lowercase: (str) => str.toLowerCase()
};

// main.js
import { MathUtils } from './mathModule.js';
import { StringUtils } from './stringModule.js';

console.log(MathUtils.add(2, 3)); // 5
console.log(StringUtils.capitalize('hello')); // 'Hello'

// 命名規則に従った例
export const UserUtils = {
    createUser: (name, age) => ({ name, age }),
    deleteUser: (user) => console.log(`${user.name} has been deleted`)
};

// userModule.js
export const UserUtils = {
    createUser: (name, age) => ({ name, age }),
    deleteUser: (user) => console.log(`${user.name} has been deleted`)
};

// main.js
import { UserUtils } from './userModule.js';

const user = UserUtils.createUser('Alice', 25);
UserUtils.deleteUser(user); // 'Alice has been deleted'

npm install --save-dev webpack webpack-cli

// webpack.config.js
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

npx webpack --config webpack.config.js

npm install --save-dev rollup

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife',
        name: 'MyBundle'
    },
    plugins: [
        resolve(),
        commonjs(),
        terser()
    ]
};

npx rollup --config rollup.config.js

npm init -y

npm install lodash

// CommonJSモジュール
const _ = require('lodash');
console.log(_.chunk(['a', 'b', 'c', 'd'], 2)); // [['a', 'b'], ['c', 'd']]

// ES6モジュール
import _ from 'lodash';
console.log(_.chunk(['a', 'b', 'c', 'd'], 2)); // [['a', 'b'], ['c', 'd']]

npm install express

// server.js
const express = require('express');
const app = express();
const PORT = 3000;

app.get('/', (req, res) => {
    res.send('Hello, world!');
});

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

// user.js - ユーザー管理に関する機能のみ
export function createUser(name, age) {
    return { name, age };
}

export function deleteUser(user) {
    console.log(`${user.name} has been deleted`);
}

// mathOperations.js - 単一の機能に特化したモジュール
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

// utils.js - 汎用的なユーティリティ関数
export function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

export function isArrayEmpty(arr) {
    return arr.length === 0;
}

// モジュールAがモジュールBに強く依存しないように設計
// moduleA.js
export function fetchData() {
    // APIからデータを取得する
}

// moduleB.js
import { fetchData } from './moduleA.js';

export function processData() {
    const data = fetchData();
    // データを処理する
}

// api.js - 明確なインターフェースを提供するモジュール
export function getUser(id) {
    // ユーザーを取得するロジック
}

export function updateUser(id, data) {
    // ユーザー情報を更新するロジック
}

// mathOperations.test.js
import { add, subtract } from './mathOperations';

test('adds 1 + 2 to equal 3', () => {
    expect(add(1, 2)).toBe(3);
});

test('subtracts 5 - 3 to equal 2', () => {
    expect(subtract(5, 3)).toBe(2);
});

npm install --save-dev jest

{
  "scripts": {
    "test": "jest"
  }
}

// mathOperations.js
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

// mathOperations.test.js
import { add, subtract } from './mathOperations';

test('adds 1 + 2 to equal 3', () => {
    expect(add(1, 2)).toBe(3);
});

test('subtracts 5 - 3 to equal 2', () => {
    expect(subtract(5, 3)).toBe(2);
});

npm test

// api.js
export async function fetchData(url) {
    const response = await fetch(url);
    return response.json();
}

// api.test.js
import { fetchData } from './api';

global.fetch = jest.fn(() =>
    Promise.resolve({
        json: () => Promise.resolve({ data: 'mocked data' })
    })
);

test('fetches data from API', async () => {
    const data = await fetchData('https://api.example.com/data');
    expect(data).toEqual({ data: 'mocked data' });
});

npm test -- --coverage

// taskManager.js
let tasks = [];

export function addTask(task) {
    tasks.push(task);
}

export function deleteTask(taskId) {
    tasks = tasks.filter(task => task.id !== taskId);
}

export function getTasks() {
    return tasks;
}

// ui.js
import { addTask, deleteTask, getTasks } from './taskManager.js';

export function renderTasks() {
    const taskList = document.getElementById('task-list');
    taskList.innerHTML = '';
    const tasks = getTasks();
    tasks.forEach(task => {
        const li = document.createElement('li');
        li.textContent = task.name;
        taskList.appendChild(li);
    });
}

export function setupUI() {
    document.getElementById('add-task-button').addEventListener('click', () => {
        const taskName = document.getElementById('task-name').value;
        addTask({ id: Date.now(), name: taskName });
        renderTasks();
    });

    document.getElementById('delete-task-button').addEventListener('click', () => {
        const taskId = parseInt(document.getElementById('task-id').value, 10);
        deleteTask(taskId);
        renderTasks();
    });
}

// api.js
const API_URL = 'https://api.example.com/tasks';

export async function fetchTasks() {
    const response = await fetch(API_URL);
    return response.json();
}

export async function saveTasks(tasks) {
    await fetch(API_URL, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(tasks)
    });
}

// main.js
import { renderTasks, setupUI } from './ui.js';
import { fetchTasks, saveTasks } from './api.js';
import { getTasks } from './taskManager.js';

async function initializeApp() {
    const tasks = await fetchTasks();
    tasks.forEach(task => addTask(task));
    renderTasks();
    setupUI();
}

window.addEventListener('load', () => {
    initializeApp();

    window.addEventListener('beforeunload', () => {
        const tasks = getTasks();
        saveTasks(tasks);
    });
});