メモ: JavaScript #5：電卓アプリをVite対応にする

公開：2026.05.07(木) 09:37

電卓アプリをVite対応にする

以下記事で作成した簡易電卓をVite対応に変更してみる。 ※ JavaScript #2：簡単な電卓を作る
※ JavaScript #3：ライブラリを使ってみる
※ JavaScript #4：ビルドツールについて

1. index.htmlの編集

calc-vite\index.htmlを編集する。
主なポイントは、
・styleはstyle.cssに記載するのですべて削除
　style.cssの読み込みもmain.jsで行うので記載しない
・jsはmain.jsに記載するのですべて削除
　main.jsを読み込むようにする。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Vite 電卓</title>
  </head>
  <body>
    <div id="app">
      <!-- ここに電卓のHTMLを貼り付けます -->
      <div id="calculator">
          <input type="text" id="display" readonly>
          <div class="buttons">
              <button>7</button><button>8</button><button>9</button><button>/</button>
              <button>4</button><button>5</button><button>6</button><button>*</button>
              <button>1</button><button>2</button><button>3</button><button>-</button>
              <button>0</button>
              <button>C</button>
              <button>=</button>
              <button>+</button>
          </div>
      </div>
    </div>
    <script type="module" src="./src/main.js"></script>
  </body>
</html>

2. main.jsの編集

calc-vite\src\main.jsを編集する。
主なポイントは、
・style.cssもimportで読み込む
・math.jsをimportして使う

import './style.css'
import { evaluate } from 'mathjs'

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 = '';
        } else if (value === '=') {
            try {
                // インポートした evaluate 関数を使う
                display.value = evaluate(display.value);
            } catch (e) {
                display.value = 'Error';
            }
        } else {
            display.value += value;
        }
    });
});

3. style.cssの編集

calc-vite\src\style.cssを編集する。

body {
    display: flex;
    justify-content: center; /* 横方向の中央 */
    align-items: center;    /* 縦方向の中央 */
    height: 100vh;         /* 画面いっぱいの高さ */
    background-color: #f0f0f0;
    margin: 0;
}

#calculator {
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* 表示画面のスタイル */
#display {
    width: 100%;
    height: 50px;
    font-size: 24px;
    text-align: right;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
    border: none;
    border-radius: 5px;
}
.buttons {
    display: grid;
    /* 4つの列を同じ幅(1fr)で作る */
    grid-template-columns: repeat(4, 1fr); 
    /* ボタン同士の隙間 */
    gap: 10px;
}

button {
    padding: 20px;
    font-size: 18px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #eee;
    transition: background-color 0.2s; /* ホバー時のアニメーション */
}

/* マウスが乗った時 */
button:hover {
    background-color: #ddd;
}

/* 計算ボタンなどの色を変える（お好みで） */
button:nth-child(4n) {
    background-color: #ff9500;
    color: white;
}
.wide {
    grid-column: span 2;
}

これで電卓が動作する。

メモ

JavaScript #5：電卓アプリをVite対応にする

電卓アプリをVite対応にする

0 件のコメント:

その他の記事