電卓アプリをVite対応にする
以下記事で作成した簡易電卓をVite対応に変更してみる。
※ JavaScript #2：簡単な電卓を作る
※ JavaScript #3：ライブラリを使ってみる
※ JavaScript #4：ビルドツールについて
1. index.htmlの編集
2. main.jsの編集
3. style.cssの編集
これで電卓が動作する。
※ JavaScript #3：ライブラリを使ってみる
※ JavaScript #4：ビルドツールについて
1. index.htmlの編集
calc-vite\index.htmlを編集する。
主なポイントは、
・styleはstyle.cssに記載するのですべて削除
style.cssの読み込みもmain.jsで行うので記載しない
・jsはmain.jsに記載するのですべて削除
main.jsを読み込むようにする。
主なポイントは、
・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して使う
主なポイントは、
・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;
}
これで電卓が動作する。
