ここからは、実際に電卓上に配置したボタンをクリックしたときの動作をプログラミングしていきましょう。
このページでも、なるべく難しいことは考えずにとにかく慣れることを最優先として、必要最低限のことだけを考えて進めていくようにしたいと思います。
Visual Studio Community 2019(以下VS2019)では、例えばフォーム上に配置した部品(フォーム自体も含む)がクリックされると、「〇〇がクリックされました！」というお知らせ(イベント)が発生する仕組みとなっているため、部品がクリックされたときに実行したい処理は、イベント発生時に呼び出される専用の場所の中にプログラムを書いていくことになります。 これをイベントドリブンプログラミングといます。
ではまず、数字の「1」ボタンがクリックされたときの処理を書いていきましょう。
前の記事で説明したとおり、数字を表示するための液晶に相当する部品は Labelコントロールを使用しており、ここではLabelコントロールのNameプロパティを「Val_Display」としているので、 「Val_Display」 に数字の “1” を表示する処理を書きます。
では、「1」ボタンがクリックされた！というイベントで呼び出される専用の場所を用意するため、Form1のデザイン画面で「1」のボタンをダブルクリックしてみましょう。
少し待つと、以下のようなコード(※)が表示されます。 (ここでは、「1」ボタンのNameプロパティが「Button1」であると仮定しています)
※コードとは、プログラミング全体を構成する一つ一つの処理(通常は一行)を指します。
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
End SubPrivate Sub で始まり、 End Sub で終わっている２行のコードが自動的に生成されました。 Private Sub の後には続けて Button1_Click(・・・)と書かれています。 これで、画面上の「Button1」がクリックされた！というイベントが発生した時に実行したい処理を書くための場所が準備されました。
処理をしたい内容は Private Sub と End Sub の間に書けばよいので、 「Val_Display」 に “1” を表示する処理は以下のマーカー部のように記述します。
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Me.Val_Display.Text = "1"
End Subイコール “=” の左辺には、Me.Val_Display.Text とあり、右辺には “1” とあります。 液晶に相当するLavelコントロールのNameプロパティは 「Val_Display」なのですが、単純に Val_Display ＝”１” と書いてもエラーとなってしまいます。 なぜなら、コントロールに対して処理を行うためには、処理の対象をピンポイントで明示しなければコンピューターには解釈できないないためです。
例えば、子供が親に「指を挟んで痛い」と伝えたとしたら、親は「どの指を挟んだの？」と聞くでしょう。 そうすると子供は「右手の小指の爪のあたりをドアで挟んで青くなってて痛い」と具体的に答えると思います。 この場合、場所をピンポイントで伝えるために「右手」「小指」「爪」と階層のように説明をし、また発生した状態を「青くなって」「痛い」と説明しています。
つまり、プログラミングにおいてコントロール上に “1” を表示するためには、Labelコントロール 「Val_Display」 が配置されている場所(上位オブジェクト)を明示し、そして「Val_Display」において文字を表示する場所「.Text」プロパティを明示します。 上位オブジェクトはフォーム「Form1」なので、 Form1.Val_Display.Text = “1” と書きたいところですが、プログラム自体をForm1 の中に記述している場合は、自分のことを Me と置き換えて記述する決まりとなっているため、 Me.Val_Display.Text = “1” となります。
このように、処理したい対象を上位オブジェクトから下位オブジェクトまで明示するプログラミングを「オブジェクト指向プログラミング」と呼びます。 イベントドリブンやらオブジェクト指向やらややこしい感じですが、慣れてくればどちらも意識することなく自然と身に付くと思います。
それでは、「1」ボタンクリックで “1” を表示するコードを書いたら早速実行させてみましょう。 VS2019上部メニューの下にある再生ボタンのような「▶ MyProject」(※)をクリックしてください。 ※MyProject はその時のプロジェクト名です。
そして、「1」ボタンをクリックすると、液晶部分の「Val_Display」に ”１” が表示されました！
ほかの「2」～「9」や「0」の数字ボタンにも同じようにプログラムを書いていけば、それぞれの数字ボタンに対応した値が表示部に表示されていきます。
ボタンクリックでコントロールに文字を表示するという、電卓アプリケーションとしての最初の動きを実装することができ、少し達成感を味わうことができました。
ところが、、、既にお気付きと思いますが、電卓というからには数字ボタンを続けてクリックすると、クリックした分の数字が表示部に表示されなければなりませんが、今は “1” や “5” など単独の数字しか表示されず、このままではいつまでも十の位以上の数値入力ができません。
つまり電卓としては、「0」から「9」までの数字ボタンを続けてクリックした場合には、既に画面上に表示されている数字の末尾にどんどん数字を付け加えていくという処理でなければなりません。
では、現在の単独表示のコードを、文字を付け加えていくコードに書き換えます。 答えは以下の通り。
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Me.Val_Display.Text = Me.Val_Display.Text & "1"
End Sub上記のように右辺を Me.Val_Display.Text & “1” という記述に書き換えることで、末尾に文字を追加していく処理となります。 これは、現在の Val_Display に入っている文字と “1” の文字を “&” で結合する処理となります。 では、最初のコードを上記コードに書き換えて再度実行してみましょう。
数字ボタンを続けてクリックすると、クリックした分の数字がちゃんと表示部に表示されました。 実際には細かい部分で処理を記述しなければならない部分はありますが、ひとまず単純な数字入力については形になってきました。
以上で、「ITとは情報を”記憶(記録)”する技術、情報を”処理“する技術、情報を”伝達“する技術」の”伝達” (数字を表示して人に伝える)についての機能を実装することができました。
次に実装する機能は何といっても計算そのものの処理ですが、これに入るためにはプログラミングの基礎として大切なことを理解しておかなければなりませんので、次回は “記憶”の基本である「変数」と “処理”の基本である「計算式」について見ていきたいと思います。