関数電卓作成！
adminめっちゃ簡単な関数電卓ですので複雑な計算は間違うかも 限界を試して教えて下さい！
～ここからは細かな解説～
1. HTML セクション
この部分は、ページの基本構造を定義しています。
htmlコードをコピーする<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高機能関数電卓</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.8.0/math.js"></script>
<!DOCTYPE html>: HTML5ドキュメントの宣言。<html lang="ja">: HTMLの言語属性として日本語を指定。<head>: ページのメタ情報（文字コードやタイトルなど）を定義。math.jsライブラリが外部から読み込まれています。このライブラリは、数式の評価や高度な数学的操作を提供します。
2. CSS セクション
この部分で、電卓のスタイルを定義しています。
htmlコードをコピーする<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.calculator {
width: 320px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
overflow: hidden;
}
...
</style>
- body: 電卓が画面中央に配置されるように、フレックスボックスでページ全体を整列。背景色を薄い灰色に設定。
- .calculator: 電卓全体のスタイル。幅を320pxに固定し、角を丸めて、影をつけて立体的にしています。
- 他にも、ボタンや入力フィールド、表示部分のスタイルを設定しています。
3. HTML 構造
電卓のUI（ユーザーインターフェース）部分です。
htmlコードをコピーする<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="var-inputs">
<input type="number" id="x-input" placeholder="x の値">
<input type="number" id="y-input" placeholder="y の値">
</div>
<div class="buttons">
<button onclick="clearDisplay()" class="function">C</button>
...
</div>
<div id="result"></div>
</div>
- <input type="text" id="display" readonly>: 計算式を表示するためのテキスト入力フィールド。
readonly属性により、ユーザーが直接編集できません。 - var-inputs: 変数
xとyの値を入力するフィールド。これにより、数式内でxとyを使用した計算が可能です。 - buttons: 計算操作のためのボタン。
onclick属性を使って、ボタンが押された時にJavaScriptの関数を呼び出しています。
4. JavaScript 関数
ここで電卓のロジックが実装されています。
htmlコードをコピーする<script>
const display = document.getElementById('display');
const result = document.getElementById('result');
const xInput = document.getElementById('x-input');
const yInput = document.getElementById('y-input');
- const display: 計算式を表示する要素を取得。
- const result: 計算結果を表示するための領域を取得。
- const xInput, yInput:
xとyの値を取得するための入力フィールドを取得。
javascriptコードをコピーする function addToDisplay(value) {
display.value += value;
}
- addToDisplay: ボタンが押された時、そのボタンの値を表示部分に追加します。
+演算子を使い、既存の内容に新しい文字を追加しています。
javascriptコードをコピーする function clearDisplay() {
display.value = '';
result.textContent = '';
}
- clearDisplay: 計算式と結果をクリアします。
javascriptコードをコピーする function backspace() {
display.value = display.value.slice(0, -1);
}
- backspace: 入力した式の最後の文字を削除します。
slice()を使って1文字ずつ削除しています。
javascriptコードをコピーする function calculate() {
try {
const x = parseFloat(xInput.value) || 0;
const y = parseFloat(yInput.value) || 0;
const scope = {
x: x,
y: y,
pi: Math.PI,
e: Math.E
};
let expr = display.value;
// Handle special functions
expr = expr.replace(/derivative\((.*?),(.*?)\)/g, 'derivative($1, $2)');
expr = expr.replace(/integrate\((.*?),(.*?),(.*?),(.*?)\)/g, 'integrate($1, $2, $3, $4)');
- calculate:
xとyの値を取得し、それらを計算式の変数として使います。また、Math.PIやMath.Eを定義して、数式内で円周率やネイピア数を使えるようにします。- 正規表現の置換: 微分や積分の関数を特別に扱うため、数式内の対応する部分を適切な形式に変換します。
javascriptコードをコピーする const evaluated = math.evaluate(expr, scope);
result.textContent = `結果: ${evaluated}`;
} catch (error) {
result.textContent = `エラー: ${error.message}`;
}
}
- math.evaluate():
math.jsライブラリのevaluate関数を使って数式を評価します。scopeオブジェクトを渡すことで、xやyなどの変数も使用できます。
javascriptコードをコピーする // カスタム関数の定義
math.import({
derivative: function(expr, variable) {
return math.derivative(expr, variable).toString();
},
integrate: function(expr, variable, start, end) {
return math.integrate(expr, variable, start, end);
}
});
</script>
math.import(): math.jsにカスタム関数を追加しています。ここでは、微分（derivative）と積分（integrate）を電卓で扱えるようにしています。
