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

最終的な考え: 電卓の構築から得られたこと

このプロジェクトでは、動的な入力の処理、状態の管理、Vue.js を使用したクリーンなユーザー インターフェイスの構築について詳しく説明しました。私は次の分野で実践的な知識を学びました:

• 状態管理: ユーザーの入力と結果を動的に追跡および更新する方法。
• イベント処理: ユーザーのアクション (数字のクリック、オペレーターのクリック、および結果の計算) に応答します。
• UI/UX に関する考慮事項: 電卓がエッジケースを適切に処理し、明確で直感的なユーザー インターフェイスを提供することを保証します。
• 文字列操作: 入力文字列を解析および操作して、有効な数式を作成します。

この電卓の構築は、ユーザー入力を管理し、Vue.js を使用して動的でインタラクティブな Web アプリケーションを作成する能力を強化する、やりがいのある経験でした。これらのスキルをより複雑なプロジェクトに適用できることを楽しみにしています!

以上がVue.js で電卓を構築して学んだことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。