プログラミング初心者が計算機を作ろうと四苦八苦しているリポジトリです。
完成までどれくらいかかるかわかりませんが、コツコツやっております。
- HabuCalc
- 目標
- 進捗状況
- 2023/09/15
- 2023/09/16
- 2023/09/18
- 2023/09/24
- 2023/09/26
- 2023/09/27
- 2023/09/29
- 2023/09/30
- 2023/10/01
- 2023/10/02
- 2023/10/03
- 2023/10/09
- 2023/10/10
- 2023/10/11
- 2023/10/27
- 2023/10/28
- 2023/10/30
- 2023/10/31
- 2023/11/02
- 2023/11/06
- 2023/11/07
- 2023/11/10
- 2023/11/11
- 2023/11/12
- 2023/11/13
- 2023/11/14
- 2023/11/16
- 2023/11/21
- 2023/11/22
- 2023/11/23 - 2023/11/24
- 2023/12/09
- 2024/01/13
- 2024/01/18
iOSの計算機app並の機能を備えた計算機をプログラムする
数値を画面に表示できるようにした。
- 最初の画面('0'が表示されている場合)、'0'や'00'を押しても画面に表示しない。
- '0'や'00'以外の数字を押すと初期の'0'を置き換える
- 1から9までの数字を押すことで、連続した数値を入力することができるように。
TODO
- 小数点を取り扱えるようにする
- 小数点'.'を押した時、画面に自動的に'0.'を表示する
- 2個以上の小数点を入力できないようにする
- 小数点以下の桁数の制限
- エラーハンドリングの実装
小数点ボタン'.'を押した際に'0.'と表示されるようにした。
- 小数点を押下後にオペレータを押したときの挙動を設定する
計算のためのclassを記述した。
- 表示値をオペランドとして呼び出せるようにする
- オペレータボタンを押した時、正しくメソッドを呼び出せるようにする
オペランドAとオペランドBをそれぞれ変数に格納できるようにした
- 各オペランドをメソッドの引数に代入して計算を実行する
進捗
- 基本的な計算機能を実装した
- ファイルを整理
TODO
-
%と±の挙動を改善する(押下して即表示させる) -
ClearとClearEntriesの機能を実装する
transfomerの扱いを検討中
TODO
- 続けて計算できないバグを修正する
- イコールを押した後に計算を続けるパターン
- イコールを押さずに計算を続けるパターン
- 新たな条件部: 両オペランド入力済みかつオペレータが押された時
- オペレータが押された時点で一時的な計算結果を表示する
- 一時的な計算結果はオペランドAとする
- オペランドBの入力を受け付ける
- 新たな条件部: 両オペランド入力済みかつオペレータが押された時
- オペランドBの入力にバグあり
- 表示位置を左側に変更
進捗
- Clear, ClearEntries機能を実装
- 計算ログを追加
- ログのクリアボタンを追加
進捗
- オペランドBの入力は'0'から開始するように変更
- オペランドB入力開始時まではオペランドAの表示は保持したかったがどうしてもうまく行かない
- オペランドAを表示する
<input>を追加して対応
TODO
- 計算の続行に関しての挙動を修正する(2023/09/27のTODO)
- キーボード入力に対応する
- 数字
- オペレータ
- スマホ操作に対応する
- 選択中のオペレータのスタイルを切替可能にする
- 選択中のオペレータは反転させる等
進捗
- 数字のみボタン入力に対応
TODO
- オペレータボタンもキー入力に対応させる
- 機能制限版用のディレクトリを追加
- 連続計算機能の実装のみを行う
TODO
- オペレータ -> イコールを押したときの挙動を修正する
- 表示された'0'で計算してしまう
- ログ出力用の関数を記述(script_limited.js)
- イベントリスナーを整理(script_limited.js)
- 連続計算するためには、必ず'='を押さなければならない
- '='を押すことなくオペレータを押すことで適切な処理をするには...
- オペレータに'='と同等の機能を持たせればいい(はず)
- limited-verのコードを応用してnormal-ver(script3.js)を書き換える
script3.jsを追加- ディレクトリのファイルを整理
limited-verを移動index.htmlをルートディレクトリに移動
-
index.htmlで一通りの計算ができるように -
data-transformationをdata-symbolsに変更 -
script3.jsでシンボルを扱うメソッドを追加%や±を使えるようにした
-
初期の表示を0にする
-
キーボード入力に対応させる
- 検証しやすくするためにこちらを優先したい
-
スマホ操作に対応させる
-
新しいシンボルを追加する(スクリプトは後回し)
| Symbol | Name | Func | JPN |
|---|---|---|---|
| Parentheses | - | かっこ | |
| mc | Memory Clear | メモリを消去する | - |
| m+ | Memory Plus | 表示値をメモリに足す | - |
| m- | Memory Minus | 表示値をメモリから引く | - |
| mr | Memory Recall | メモリに保存されている値を呼び出す | - |
| - | 一部のボタンを代替機能に切り替える | - | |
| Squared | 表示値の平方を計算する | 二乗 | |
| Cubed | 表示値の立法を計算する | 三乗 | |
| Exponentiation | 表示値を指数,次の入力値を底として計算する | y乗 | |
| Napier's constant | eを底,表示値を底として計算する | 指数関数 | |
| Power of 10 | 10を底，表示値を指数として計算する | 十のべき | |
| Reciprocal | 表示値の逆数を計算する | 逆数 | |
| Square root | 表示値の平方根を計算する | 平方根 | |
| Cube root | 表示値の立方根を計算する | 三乗根 | |
| y-th root of x | 表示値のn乗根を計算する(nは次の入力値) | xのy乗根 | |
| Natural logarithm | 表示値の自然対数を計算する | 自然対数 | |
| Common logarithm | 10を底とする表示値の対数を計算する | 常用対数 | |
| Factorial | 表示値の階乗を計算する | 階乗 | |
| Sine | 表示値のサインを計算する | サイン | |
| Cosine | 表示値のコサインを計算する | コサイン | |
| Tangent | 表示値のタンジェントを計算する | タンジェント | |
| Napier's constant | e(2.71828...)を入力する | ネイピア数 | |
| EE | Enter Exponent | 指数表現 | 指数入力 |
|
|
Radian / Degree | 度とラジアンを切り替える | ラジアン |
| Hyperbolic sine | 表示値のハイパーボリックサインを計算する | 双曲線正弦関数 | |
| Hyperbolic cosine | 表示値のハイパーボリックコサインを計算する | 双曲線余弦関数 | |
| Hyperbolic tangent | 表示値のハイパーボリックタンジェントを計算する | 双曲線正接関数 | |
| pi | 円周率を入力する | 円周率 | |
| Random | 0から1までの乱数を生成する | ランダム |
| Symbol | Name | Func | JPN |
|---|---|---|---|
| - | 次の入力値を底,表示値を指数として計算する | - | |
| - | 2を底,表示値を指数として計算する | - | |
| - | 表示値の対数を,次の入力値の底で計算する | - | |
| - | 2を底とする表示値の対数を計算する | - | |
| - | 表示値の逆サインを計算する | - | |
| - | 表示値の逆コサインを計算する | - | |
| - | 表示値の逆タンジェントを計算する | - | |
| - | 表示値のハイパーボリックサインを計算する | - | |
| - | 表示値のハイパーボリックコサインを計算する | - | |
| - | 表示値のハイパーボリックタンジェントを計算する | - |
- キーボード入力に対応
- キーボードでの操作方法をHTMLに記述,CSSも調整
TODO
- キーボード入力時のログ出力を調整する
- iOSの計算機を模倣してHTMLに新たなボタンを追加
- 機能はせず。これから実装予定。
- ボタンの追加に伴いCSSレイアウトを調整
- 数字の英単語を入力すると該当する数値がコンソールに表示されるようにした
TODO
- 単語入力に関するエラーハンドリングを実装する
- 単語で入力した数値をオペランドにできるようにする
- 数字の単語のほか、オペレータやシンボルにも対応する
- 数字の英単語を入力しEnterを押すとログウィンドウに表示されるようにした
<input>にplaceholder属性を追加し、入力フィードでの操作をわかりやすくした- 英単語と記号を対応させた
operatorとsymbolのオブジェクトを追加
TODO
- オペレータとシンボルも入力に対応させる
-
$x^2$ ,$x^3$ ,$e^x$ ,$10^x$ ,$x!$ の計算に対応
-
$e^x$ を修正 -
$x!$ にエラーハンドリングを追加 -
計算機能の追加
-
$1/x$ ,$2√x$ ,$3√x$ ,$ln$ ,$log10$ ,$sin$ ,$sinh$ ,$cos$ ,$cosh$ ,$tan$ ,$tanh$ ,$π$ ,$e$ ,$EE$ ,$Rand$
-
-
ボタンを拡張する(2nd)に対応する
-
パラメータで計算の方法(ラジアンと度数法)を変更可能にする
- htmlでボタンを追加
- 三角関数はラジアンと度数法で計算できるように
- 逆三角関数の計算ができるように
-
$sin$ ,$cos$ ,$tan$ のメソッドを整理
TODO
- 三角関数のコードにエラーハンドリングを追加する
- 入力のみの機能を整理する
-
$e$ ,$π$ ,$Rand$ ,
-
- ボタン配置を整理する
- エラーメッセージをログに表示する関数を作成する
- エラーハンドリングをログウィンドウに表示する関数とオブジェクトを記述
- エラーの表示にアニメーションを追加
- 三角関数のメソッド
sin(mode),cos(mode),tan(mode)それぞれにエラーハンドリングを追加
TODO
-
$()$ を使った計算を実装する -
mc,m+,m-,mrの機能を実装する - ログ表示を改良する(macOSの計算機を参考にする)
- キー入力に不具合あり
- ハイフンの入力
- Enter
- キー入力用のオペレータ配列を作る
- ショートカットキーは廃止
script4.jsを作成logMessages(button)を改良classが未完成のため、計算機能は一時的に使用不可能に
TODO
-
classを機能毎に分割する - 各
classのconstructorを設定し直す - イベントリスナーなどが参照する
classを変更する -
ErrorHandlerを設定する
TODO
-
classで変更すべき点-
this.currentOperand -
this.previousOperand -
this.operator -
this.option - その他異なるクラスにまたがるプロパティを変更する
-
- jsファイルを
classごとに分割 html変換したmdファイルのリンクをindex.htmlに追加
-
main.js- 各
classの統括 - 入力値を
classへ渡す - 値を
index.htmlに出力 - ログを表示する
- イベントリスナー
- 各
-
UIHandler.js-
getDisplayNumber(): 数字の入力 -
updateDisplay(): 数字の表示 -
appendNumber(): 数字の追加 clearEntries()clear()
-
-
OperationHandler.js-
chooseOperation:operatorの入力 -
compute(): 四則演算の結果をthis.resultに代入する
-
-
MathOperation.js- 四則演算(
addition(),subtract(),multiply(),divide()) - %, ±, y乗,
$10^y$ ,$x^2$ ,$x^3$ ,$e$ ,napierExp(),$1/x$
- 四則演算(
-
MathFunction.js- 三角関数, rand, pi, log, log10, 指数表現, 階乗
-
SymbolHandler.js-
transform(): 各symbolをthis.currenOperationに代入する
-
-
ErrorHandler.js- エラーに関する
class
- エラーに関する
TODO
- ファイル間を連携させる
- モジュール化を試す
- モジュール化で値をやり取りするテスト
UIHandler.jsからOperationHandler.jsへ
TODO
- ログの表示を修正する
- 0を先に入力し続いて数字を入力すると先頭に0がついたままになるバグ
- 計算に関するメソッドを整理する
コードが煩雑になりすぎて理解ができなくなってしまったので書き直しを検討中...
- コードを復習するため、
Vanilla-JavaScript-Calculatorのコードを拝借
復習のためにclassではなくfunctionを用いて再度計算機を作成することに決定
今後、Youtube等の講座やチュートリアルを受講して計算機作成の基礎を学ぶ予定
- Youtubeの学習で書いたコードを新しいファイルに整理
- それぞれのリンクをindex.htmlに記述
- 既存のUIを残し、スクリプトを作り直します。
🐍 <ｼｬ-!