2022年1月27日 木曜日 12:14

Block title

【プログラミング初心者向け】計算機アプリを作ってみようPart1(設計編)

※本記事はプログラミング初心者向けです。これまでにアプリを作ったことがある、プログラミングをしたことがある方にはレベルが低すぎるのでご了承ください。 皆様こんにちは。リラ吉です。 今回の記事から数パートに分けて、初心者の初心者による初心者のためのプログラミング講座をしたいと思います。 使用する言語はC#でレベルとしては初心者による初心者向けの記事なので、数時間程度で出来るようなものになっていますのでご了承ください。 C#を使用した理由は簡単にUI(表示、操作処理など)を開発できるWPFが使用できるからです。 開発環境は「Visual Studio」 をこの記事では使用します。 「Visual Studio」 のインストール方法については過去の記事をご参照ください。 ただMacOSをお使いの方は裏技はありますが、基本的にはWPFでは開発出来ませんのでご了承ください。 今回作るのは「計算機」です。動作がイメージし易いので設計、テストがしやすいのが選んだ理由です。 最終的な完成イメージは下図のようになります。 今回の記事では実際にプログラムを書く前に簡単に設計をしていきます。 計算機は複雑な内容・処理ではないので、正直設計する必要があるかは微妙なラインではありますが、設計は大事なことですし、時間をかけない程度にやっていきます。 クラス図 かなり適当ですが、クラス図は下図のようになります。 内容を解説すると、計算機を作るうえで大まかに9つのクラスを用意しました。 MainWindow MainWindowはUI(=実際に使う人が見る計算機の画面)にデータを渡す、またUIから渡されたデータをMainWindowModelに渡す役割のクラスです。 MainWindowModel MainWindowModel は MainWindowとDataManagerに「こういう値が来たよ」「こんな風に値が変わったよ」と伝える役割のクラスです。 DataManager DataManagerはMainWindowModelから受け取ったものが一体何なのか、その後どういう処理をすべきか判断している場所です。実はここが一番重要です。 例えば「1」と入力したあと、「.」と入力したらどうなるでしょうか?当然ですが「1」の後ろに「.」をつけて「1.」という小数になります。なのでDataManagerには「1.」になるように判断させます。 しかしこのあとにもう一度「.」を押したらどうなるでしょうか? 私たち人間は「1..」のように小数点の後ろに小数点がないことはわかっていますが、コンピューターはそうはいきません。 こうならないようにDataManagerには「小数点の後に小数点が入力されたらダメ」と判断させなければなりません。 ただこれを聞いてプログラミング経験のある方は それって文字型にしているからであって、数値型(double型など)なら小数点の後ろに小数点が来ないようにするとか考える必要ないんじゃない? そう思われた方もいらっしゃるでしょう。 double型でも問題ありません。というかdouble型のほうが上手くいくかもしれません。 ただ今回は入力した数字や計算結果、数式を表示する場所をTextBlockにしました。 TextBlockのプロパティのTextは文字通りテキストなので、入力した数字等をstring型にして、それをバインドするという設計にしました。 これはどちらが正しいとかでなく、好みの問題になってくるかと思います。 また、DataManagerは下記のクラスとも繋がっています。 CalcStatus CalcStatusはステータス(=今の状況・状態)の列挙型(enum)が書いてある場所です。 計算機にはステータスが必要です。数字を入れた後は「数字を入れた後」という状況になります。 演算子を入れた後は「演算子を入れた後」という状況です。 しかし、プログラミングではステータスのようなものは数字で表されます。 今回作る電卓で言えば0がクリアした後、1が数字を入れ後、2が演算子を入れた後といった感じです。 数字で表しても良いのですが、数字だと作った本人はわかっても、他の人がプログラムを見たとき「ステータスが0ってどういうこと?何を表してるの?」となってしまいます。 クリアした後であれば「ステータスは0」と書くより「ステータスはAfterClear」といった感じで表すほうがわかりやすいです。 これが出来るのが列挙型です。列挙型を使用することで、内部的な処理は数字ですが、私達が見る部分においてはステータスを数字ではなく文字で表すことができます。 Operator 演算子の列挙型が書いてあるクラスです。 CalcOption 二乗や平方根、±のような特殊な計算の列挙型が書いてあるクラスです。 DataStore 値を格納し、計算するクラスです。 NumberButton 数字ボタンを定義しているクラスです。 OperatorButton 演算子ボタンを定義しているクラスです。 これらがこの計算機アプリケーションのクラスになります。この設計をもとに次回の記事からプログラムを書いていきます。 シーケンス図 シーケンス図についても簡単に書いていきます。今回は「数字ボタンを押したとき」「演算子ボタンを押したとき」の2ケースを書きました。   「数字ボタンを押したとき」演算子ボタンを押したとき」 もステータス (=今の状況) によって動作は変わります。 なにも入力されていない状況だと、基本的には数字ボタンを押したときは押された数字をためて(キャッシュして)いき、演算子ボタンを押された際にその数字を一つ目の数字として確定させます。 例えば何も押していない状況で「1」と入力したら「1」がキャッシュされます。もう一度「1」を押すと「11」がキャッシュされます。 その後「+」を押したら「11」という数字が一つ目の数字として確定されるという作りです。 演算子を入力された状態で演算子ボタンを押すと演算子が変わります。 演算子が入力されている状況で数字ボタンを押すと演算子が確定され、数字をためて(キャッシュして) します。 最後に=を押したら数字が二つ目の数字として確定され計算が行われます。 というように書いてもわかりづらいと思うの、例を挙げると、1→2→+→-→3→4→=という順番で押していくと下記のようになります。 ①1が押され1がキャッシュされる ②2が押され、キャッシュされていた数字の末尾(1の後ろ)に2を追加(キャッシュされている値が12になる) ③+が押され、12という値が一つ目の数字として確定される ④-が押され、演算子が+だったのが-になる ⑤3が押され、-が演算子として確定され、3がキャッシュされる ⑥4が押され、キャッシュされていた数字の末尾(3の後ろ)に4を追加(キャッシュされている値が34になる) ⑦=が押され、34という数字が二つ目の数字として確定、一つ目の数字(12)、演算子(-)、二つ目の数字(34)による計算が行われる という流れになります。 実際の実装では制御も入るのでもう少し複雑にはなりますが、基本的にはこの流れになります。 ここまでが計算機アプリの基本的な設計になります。 設計は文字で説明するのが難しいので、もしわかりずらかったら申し訳ございません。 次の記事からVisual StudioでUIを作っていきます。 今回は以上です。それではまた。 リラ吉