Vue.js で電卓を構築して学んだこと-jsチュートリアル-php.cn

Vue.js で電卓を構築して学んだこと

Patricia Arquette

リリース： 2024-10-20 06:22:02

オリジナル

1065 人が閲覧しました

What I’ve Learned from Building a Calculator with Vue.js

4 番目のプロジェクトでは、Vue.js を使用して電卓アプリを開発しました。 JavaScript を使用してユーザー入力を処理し、動的な結果を表示し、計算を実行する方法を理解する上で貴重な経験となりました。このアプリの構築中に私が学んだ重要な教訓を詳しく説明します。

1. ユーザー入力の処理と表示の更新

電卓はユーザー入力 (数値と演算子) を受け入れ、表示を動的に更新する必要があります。 Vue の リアクティブプロパティ を使用して、現在の入力と結果を追跡しました。 Vue の ref 関数を使用すると、次の値の保存と変更が簡単になりました。

const result = ref('');
const calculated = ref(false);

ログイン後にコピー

ユーザーが数値または演算子をクリックするたびに結果プロパティが更新され、表示に最新の入力が表示されるようになります。関数 handleClick は、結果に値を追加するために使用されます:

const handleClick = (value) => {
    if (calculated.value) {
        result.value = value; // Reset the result if a calculation was just completed
        calculated.value = false;
    } else {
        result.value += value;
    }
}

ログイン後にコピー

これは、ユーザーインタラクションの処理と、リアクティブプロパティに基づいたインターフェイスの更新に関する重要なレッスンでした。

2. オペレーターの管理: 冗長入力の回避

電卓を構築する際の重要な課題の 1 つは、複数の演算子が連続して追加されないようにすることです (例: 3 4 のような入力を避ける)。これに対処するために、最後の文字がすでに演算子である場合に演算子を置き換えるチェックを追加しました:

const handleOperatorClick = (operator) => {
    if (/[+*/-]$/.test(result.value)) {
        result.value = result.value.slice(0, -1) + operator; // Replace the last operator
    } else {
        result.value += operator; // Add the new operator
    }
    calculated.value = false; // Reset flag
};

ログイン後にコピー

このメソッドにより、入力文字列の末尾に演算子が 1 つだけ存在することが保証され、計算機の堅牢性が向上します。

3. 入力のクリアと削除

電卓は、すべての入力をクリアする (AC ボタンを使用)、または最後の入力文字を削除する (DEL ボタンを使用) 機能を提供する必要があります。これら 2 つのアクションを、clearAll メソッドと clear メソッドを使用して実装しました。

Clear All (AC): 入力全体をリセットします。

const clearAll = () => {
    result.value = '';
    calculated.value = false;
};

ログイン後にコピー

最後の文字を削除 (DEL): 入力文字列の最後の文字を削除します。

const clear = () => {
    if (result.value && result.value.length > 0) {
        result.value = result.value.slice(0, -1); // Remove the last character
        if (result.value.length === 0) {
            clearAll(); // If the input is empty, reset everything
        }
    } else {
        clearAll();
    }
};

ログイン後にコピー

これは、文字列操作を処理し、スムーズなユーザーエクスペリエンスを提供する上で役立つ演習でした。

4. 計算の実行

電卓の中核機能の 1 つは、ユーザーが入力した式を評価することです。 JavaScript の組み込み eval() 関数を使用して、入力式の結果を計算しました。

const calculate = () => {
    let stringifiedResult = new String(result.value);
    result.value = eval(String(stringifiedResult)); // Evaluate the expression
    calculated.value = true; // Set flag to indicate the calculation is done
};

ログイン後にコピー

この基本的な計算機にとって eval() はシンプルで効果的ですが、任意のユーザー入力を処理するときに eval() が引き起こす潜在的なセキュリティリスクについて学びました。将来のプロジェクトでは、安全性と柔軟性を向上させるためにカスタムパーサーの作成を検討する可能性があります。

5. Vue と Bootstrap を使用したユーザーインターフェイス

電卓インターフェイスを構築するために、迅速で応答性の高い設計のために Bootstrap を使用しました。ボタンは、数字と演算子に適切な色分けをしてグリッドに配置されています。

const result = ref('');
const calculated = ref(false);

ログイン後にコピー

Vue のイベント処理と Bootstrap のクラスを組み合わせて、見た目に魅力的なと応答性の高い計算機インターフェイスを作成する方法を学びました。

6. エッジケースの処理と UX の強化

電卓を構築しているときに、いくつかの特殊なケースに遭遇しました。たとえば、計算を実行した後、ユーザーが新しい数値を入力した場合、計算機は前の結果をリセットする必要があります。これは、計算されたフラグをチェックすることで処理されました:

const handleClick = (value) => {
    if (calculated.value) {
        result.value = value; // Reset the result if a calculation was just completed
        calculated.value = false;
    } else {
        result.value += value;
    }
}

ログイン後にコピー

もう 1 つの便利な機能は、ユーザーの気が変わった場合に最後の演算子を自動的に置き換えるなど、表示をより直感的にフォーマットすることで、ユーザーエクスペリエンスを向上させました。