青色プログラム。

日々楽しくプログラミングを学ぶ

【C#】VisualStudioで簡単計算プログラムを作ってみる

 ここ最近ずっとJavaの勉強していますが、
自分がプログラミングを始めたきっかけの人が使っている言語「C#」も触り初めました。

今回はいきなり触ってみる感じですが、C#って何?って方は簡単に言うと「C言語」「C++」の後継言語であり「C++++」の+を合体させて「C#

C++Javaをベースに作られていてJavaをやってる人はC#に入りやすいと言われ、とても似ています!ですが基本はWindows環境です。

 

至らない点もあると思いますがアウトプットが大事なので、まとめてみます。

最初は参考書を参考に「簡単計算プログラム」を作成してみます。
作ってみるって人がいるかは分かりませんが、書いてるとうりにすれば出来るはず。
(上手くいかない&間違えてるなどあればコメントください)

前提:VisualStudio2017(C#,.NET Framework)をインストール

 

1、Visual Studio Community 2017を起動

2、[新規作成] → [プロジェクト]

3、新しいプロジェクトの[テンプレート] → [Visual C#] → [Windows フォームアプリケーション(.NET Framework)] をクリック

4、名前欄に「SimpleCalc」でOKボタン
  From1の何もないアプリ画面が出来ました。

6、画面に[ツールボックス]タブから"TextBox"を探してドラック&ドロップ

7、画面にテキストボックスが作成されました。
  左上に配置する(ガイドラインが出るのでバランスの良い位置に)

8、作成されたテキストボックスをクリックし、
  [プロパティ]タブの(Name)欄を「Input1TextBox」と入力

9、[ツールボックス]から"Label"を探しテキストボックスの右にドラック&ドロップ
  テキストボックスの右に配置します。

10、作成されたラベルをクリックし[プロパティ]タブの(Name)欄に「PlusLabel」と入力
  +と表示させたいので[プロパティ]タブのText欄に「+」と入力

※現在のイメージ:[               ] +

11、+ の右側にツールボックスから"TextBox"をドラック&ドロップ

12、[プロパティ]タブの(Name)に「Input2TextBox」と入力

※現在のイメージ:[    ] + [    ]

13、イメージの右にさらに"Label"を配置

14、[プロパティ]タブの(Name)欄に「EqualLabel」と入力

15、[プロパティ]タブのText欄に「=」と入力

※現在のイメージ:[    ] + [    ] =

16、Form1のサイズがバランスよくないので、Form1をクリック
(作成しているアプリの画面全体を選択してる感じになったら)

17、プロパティのSize欄の数値を「400, 110」に変更

18、= の右に"TextBox"をドラック&ドロップ

19、[プロパティ]の(Name)欄に「AnswerTextBox」と入力

※現在のイメージ:[    ] + [    ] = [    ]

20、イメージに下にツールボックスから"Button"をドラック&ドロップ

21、画面に貼り付けたボタンをつまんで右に伸ばします

※現在のイメージ
[    ] + [    ] = [    ]
[                      button1      ]

22、作成したボタンをクリックし、
[プロパティ]タブの(Name)欄に「CalcButton」と入力
[プロパティ]タブのText欄に「計算する」と入力

23、Form1の[プロパティ]を表示(全体選択)
  プロパティのText欄に「簡単計算プログラム」と入力(タイトルが変わる)

23、見た目が完成しました!VisualStudioの上あたりにある[開始]をクリック

f:id:aocattleya:20180708174359j:plain

こんな感じのアプリの外観が完成!
しかし、数字を書いて計算ボタンを押しても今のままでは画像みたいに結果は出ません

ここからプログラミングコードを書いていきます。

24、さっきの画面に戻り画面の[   計算する   ]ボタンをダブルクリック

25、コード画面に切り替わります。

26、今、点滅している所に下記のコードを書いていきます。

f:id:aocattleya:20180708174758j:plain

27、左上の[ファイル]から[すべて保存]をクリック

28、完成!開始をクリックしたら最初の画像みたいに計算ができるようになりました。

 

しかし、このままでは数字以外や何も書かなかった場合に上手く動作しないので、
コードを変更する必要があります。

29、下記のコードを追加します。

f:id:aocattleya:20180709022322j:plain

 これで完成!

アプリの使用

保存したファイルの場所を開き [SimpleCalc] → [SimpleCalc] → [bin] → [Debug] → [SimpleCals.exe]

 

他にもタイマー、付箋メモ、ボールゲーム、家計簿などいくつか作ってみたので興味があったらGitHubにまとめているので見てみてください。