--- id: bd7158d8c442eddfaeb5bd17 title: JavaScript 電卓を作成する challengeType: 3 forumTopicId: 301371 dashedName: build-a-javascript-calculator --- # --description-- **目標:** と同様の機能を持つ [CodePen.io](https://codepen.io) アプリを作成します。 以下の[ユーザーストーリー](https://en.wikipedia.org/wiki/User_story)を達成して、すべてのテストに合格してください。 アプリにはあなた独自のスタイルを設定してください。 このプロジェクトを完了するために、HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、および jQuery を自在に組み合わせて利用することができます。 このセクションはフロントエンドフレームワークの学習を目的としていますので、React などのフロントエンドフレームワークを使用してください。 上記以外の他のテクノロジーは推奨されません。使用する場合は自己責任で行ってください。 Angular や Vue などの他のフロントエンドフレームワークのサポートを検討していますが、現時点ではサポートされていません。 このプロジェクトで推奨している一連のテクノロジーを使用して生じた問題についてはすべて、報告を受け入れ、修正するよう努めます。 コーディングの成功を祈ります！ **ユーザーストーリー 1:** `=` (等号) を含み、対応する `id="equals"` を持つ、クリック可能な要素が電卓にあります。 **ユーザーストーリー 2:** 0～9 の各数字を含み、次の対応する ID を持つ、10 個のクリック可能な要素が電卓にあります: `id="zero"`、`id="one"`、`id="two"`、`id="three"`、`id="four"`、`id="five"`、`id="six"`、`id="seven"`、`id="eight"`、`id="nine"`。 **ユーザーストーリー 3:** 4 つのクリック可能な要素が電卓にあり、各要素は、4 つの基本的な算術演算子のいずれかと、対応する ID (`id="add"`、`id="subtract"`、`id="multiply"`、`id="divide"`) を持ちます。 **ユーザーストーリー 4:** `.` (小数点) を含み、対応する `id="decimal"` を持つ、クリック可能な要素が電卓にあります。 **ユーザーストーリー 5:** `id="clear"` を持つクリック可能な要素が電卓にあります。 **ユーザーストーリー 6:** 値を表示するための要素が電卓にあり、対応する `id="display"` を持ちます。 **ユーザーストーリー 7:** いつでも `clear` ボタンを押すと入力値と出力値がクリアされ、電卓が初期化後の状態に戻り、ID `display` を持つ要素に 0 が表示されます。 **ユーザーストーリー 8:** 数字を入力すると、ID `display` を持つ要素に入力が表示されます。 **ユーザーストーリー 9:** 任意の長さの一連の数字について、任意の順序で加算・減算・乗算・除算ができ、`=` を押すと、ID `display` を持つ要素に正しい結果が表示されます。 **ユーザーストーリー 10:** 電卓に数字を入力する際、複数のゼロで始まる数字は入力できません。 **ユーザーストーリー 11:** 小数点要素をクリックすると、現在表示されている値の後ろに `.` が追加されます。1 つの数字に 2 つの `.` を付けることはできません。 **ユーザーストーリー 12:** 小数点を含む数字の計算 (`+`、`-`、`*`、`/`) ができます。 **ユーザーストーリー 13:** 演算子を同時に 2 つ以上入力した場合は、最後に入力した演算 (負の記号 (`-`) を除く) が実行されます。 たとえば、`5 + * 7 =` と入力した場合の結果は `35` (`5 * 7`) になります。`5 * - 5 =` と入力した場合の結果は `-25` (`5 * (-5)`) になります。 **ユーザーストーリー 14:** `=` の直後に演算子を押すと、前の計算結果に対する新しい計算が開始されます。 **ユーザーストーリー 15:** 四捨五入については、小数点以下の桁数の精度になります (厳密な基準はありませんが、たとえば `2 / 7` のような計算を小数点以下 4 桁以上の適切な精度で処理することができます)。 **電卓のロジックについての注意:** 電卓の入力ロジックには、主に即時実行ロジックと数式ロジックの 2 つの考え方があります。 この例では数式ロジックを利用して計算の優先順位を確認しており、即時実行はしていません。 どちらも有効ですが、選択するロジックによっては、特定の式についてこの例と異なる結果になる場合があることに注意してください (下記の例を参照してください)。 別の計算機で計算を検証できる限り、こうしたバグについては考慮しないようお願いします。 **例:** `3 + 5 x 6 - 2 / 4 =` - **即時実行ロジック:** `11.5` - **数式ロジック:** `32.5` 独自のペンを作成するために、こちらの CodePen テンプレートを使用し、`Save` をクリックして独自のプロジェクトを構築することができます。 または、下記の CDN リンクを使用して、使い慣れている環境でテストを実行することもできます: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` 完了したら、すべてのテストに合格した作業中のプロジェクトの URL を送信してください。 # --solutions-- ```js // solution required ```