JavaScript #6：自作の処理を別ファイルにする

公開：2026.05.07(木) 20:33

※ 記事一覧
← JavaScript #5：電卓アプリをVite対応にする

JavaScriptで自作の処理を別ファイルにしてimportしてみる

前回記事：「JavaScript #5：電卓アプリをVite対応にする」の続き。
自作の処理を別ファイルに切り出して import する、という工程にステップアップしてみる。
今回の目標は、電卓の計算ロジックだけを calculatorLogic.js という別ファイルに分離すること。

1. calculatorLogic.js作成

calc-vite\src\calculatorLogic.js ファイルを新規作成

// calculatorLogic.js の先頭に必要です
import { evaluate } from 'mathjs';

export function calculate(expression) {
    try {
        return evaluate(expression); // window.math ではなく直接 evaluate を使う
    } catch (error) {
        console.error("計算エラー:", error); 
        return 'Error';
    }
}

export function clearDisplay() {
    return '';
}
    

2. main.js修正

calc-vite\src\main.js ファイルを修正、
calculatorLogic.jsを読み込むように変更する。

import './style.css'
// 自作ファイルから特定の関数をインポート（{ } を使う！）
import { calculate, clearDisplay } from './calculatorLogic.js'

const display = document.getElementById('display');
const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
    button.addEventListener('click', () => {
        const value = button.textContent;

        if (value === 'C') {
            display.value = clearDisplay();
        } else if (value === '=') {
            display.value = calculate(display.value);
        } else {
            display.value += value;
        }
    });
});
    

→ JavaScript #7：電卓に履歴機能を追加する

"JavaScript 学習"