1.初めに
「かんたん操作手順」はVisual Studioを利用したことがない、初心者向けに作成しました。
Visual Studioをインストールした次に、実践して頂けるとお役に立つかもしれません。
C#が初めての方は、Visual Studioをインストールして何をどうすれば・・・良いのか?
途方に暮れると思います。機能が多すぎますよね。
なので、プログラムをする上で最低限使う機能に絞って、Visual Studioの操作手順を説明します。
具体例がないとイメージがわきにくいと思いますので、サンプルソフトの名付け親ソフトを作りながら手順を説明します。
※補足
Visual StudioはMicrosoftが提供している、プログラムの開発環境です。
(個人で使えるバージョンは無料です。)
面白そうなので初めて見たい!と思った方は、C# インストール手順 もあります。
面白いので是非ためしてみて下さい。
サンプルソフトの名付け親の概要
画面はこんな感じです。
犬と猫の名前をつけるソフトです。
名前をつけるボタンをクリックすると、入力された名前を選択された犬か猫の名前にコピーします。
![画像に alt 属性が指定されていません。ファイル名: スライド39.png](https://cozver.com/wp-content/uploads/2020/11/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%8939.png)
使う部品
この部品を画面に配置します。
No | 名称 | 部品 |
① | 命名画面 | Form |
② | 名前(見出し) | Label |
③ | 名前(入力欄) | TextBox |
④ | 犬の名前(表示欄) | Label |
⑤ | 犬の名前(入力欄) | TextBox |
⑥ | 猫の名前(見出し) | Label |
⑦ | 猫の名前(表示欄) | TextBox |
⑧ | どっち?枠 | GroupBox |
⑨ | 犬の選択 | RadioButton |
⑩ | 猫の選択 | RadioButton |
⑪ | 名前をつけるボタン | Button |
プロパティは赤枠の設定をクリックすると表示されます。
![](https://cozver.com/wp-content/uploads/2020/11/スライド46.png)
使うイベント
このイベントにプログラミングします。
No | 名称 | イベント | 説明 |
① | 命名画面 | Load | 命名画面が起動された時に、犬の選択にチェックする。 |
② | 名前をつけるボタン | Click | 名前をつけるボタンがクリックされた時 名前に入力された内容を犬の名前か猫の名前にコピーする。 |
イベントは赤枠の設定をクリックすると表示されます。
![](https://cozver.com/wp-content/uploads/2020/11/スライド47.png)
2.プロジェクトの作成
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
スタート → Visual Studio をクリックします。
Visual Studio が起動します。
「新しいプロジェクトの作成」をクリックします。
![](https://cozver.com/wp-content/uploads/2020/11/スライド1-2-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
「Windows フォームアプリケーション(.Net Framework)」を選択し
「次へ」をクリックします。
![](https://cozver.com/wp-content/uploads/2020/11/スライド1-1-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
プロジェクト名に「名付け親ソフト」と入力します。
場所(保存場所)を指定します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド2-1024x576.png)
3.画面デザイン作成
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
×をクリックし、フォーム閉じます。
![](https://cozver.com/wp-content/uploads/2020/11/スライド3-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
画面(フォーム)名を変更します。
赤枠のフォーム名をクリックすると変更可能になります。
「FormMeimei.cs」に変更します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド4-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
確認メッセージが表示されますので
「はい」をクリックします。
![](https://cozver.com/wp-content/uploads/2020/11/スライド5.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
画面デザインを表示します。
赤枠のフォーム名をダブルクリックします。
![](https://cozver.com/wp-content/uploads/2020/11/スライド6-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
画面のタイトルを設定します。
「命名画面」を設定します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド7-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
部品を選択するツールボックスを表示します。
ツールボックス→すべてのWindowsフォームをクリックします。
![](https://cozver.com/wp-content/uploads/2020/11/スライド8-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
名前(見出し)を配置し、「名前」を設定します。
Labelをクリックし、画面の配置する場所をクリックします。
次に画面右下のプロパティにあるTextに「名前」を設定します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド9-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
名前(入力欄)を配置し、Name を設定します。
TextBoxをクリックし、画面の配置する場所をクリックします。
次に画面右下のプロパティにあるNameに「txtName」を設定します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド10-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
犬の名前(見出し)を配置し、「犬の名前」を設定します。
Labelをクリックし、画面の配置する場所をクリックします。
次に画面右下のプロパティにあるTextに「犬の名前」を設定します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド11-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
犬の名前(表示欄)を配置し、Name を設定します。
TextBoxをクリックし、画面の配置する場所をクリックします。
次に画面右下のプロパティにあるNameに「txtDogName」を設定します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド12-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
犬の名前(表示欄)を入力できないように設定します。
画面右下のプロパティにあるReadOnlyを「True」にします。
![](https://cozver.com/wp-content/uploads/2020/11/スライド13-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
猫の名前(見出し)を配置し、「猫の名前」を設定します。
Labelをクリックし、画面の配置する場所をクリックします。
次に画面右下のプロパティにあるTextに「猫の名前」を設定します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド14-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
猫の名前(表示欄)を配置し、Name を設定します。
TextBoxをクリックし、画面の配置する場所をクリックします。
次に画面右下のプロパティにあるNameに「txtCatName」を設定します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド15-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
猫の名前(表示欄)を入力できないように設定します。
画面右下のプロパティにあるReadOnlyを「True」にします。
![](https://cozver.com/wp-content/uploads/2020/11/スライド16-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
どっち?枠を配置します。
GroupBoxをクリックし、画面の配置する場所をクリックします。
![](https://cozver.com/wp-content/uploads/2020/11/スライド17-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
犬の選択を配置し、Nameを設定します。
RadioButton をクリックし、画面の配置する場所(どっち?内)をクリックします。次に画面右下のプロパティにあるNameに「radDog」を設定します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド18-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
RadioButtonの表示に「犬」 を設定します。
画面右下のプロパティにあるTextに「犬」を設定します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド19-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
猫の選択を配置し、Nameを設定します。
RadioButton をクリックし、画面の配置する場所(どっち?内)をクリックします。次に画面右下のプロパティにあるNameに「radCat」を設定します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド20-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
RadioButtonの表示に「猫」 を設定します。
画面右下のプロパティにあるTextに「猫」を設定します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド21-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
どっち?枠の大きさを設定します。
「どっち?枠」をクリックし選択します。
画面右下のプロパティにあるSizeに「130,60」を設定します。
(幅130、高さ60 です)
![](https://cozver.com/wp-content/uploads/2020/11/スライド22-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
名前をつけるボタンを配置し、Name を設定します。
Button をクリックし、画面の配置する場所をクリックします。
次に画面右下のプロパティにあるNameに「btnNameSet」を設定します。
合わせて、Textに「名前をつける」を設定します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド23-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
部品全部を画面右ななめ上に移動します。
範囲の始まりでマウスをクリックした状態で、範囲の終わりで離します。
範囲内の部品が選択された状態になります。赤枠の十字マークをクリックしながら画面右ななめ上に移動します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド25-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
移動後はこんな感じです。
![](https://cozver.com/wp-content/uploads/2020/11/スライド26-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
画面のサイズを調整します。
赤枠の角をクリックしながら画面右ななめ上に縮めます。
![](https://cozver.com/wp-content/uploads/2020/11/スライド27-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
調整後はこんな感じです。
![](https://cozver.com/wp-content/uploads/2020/11/スライド28-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
画面の背景色を設定します。
画面をクリックし選択状態にします
画面右下のプロパティにあるBackColorに「AliceBlue」を設定します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド29-1024x576.png)
4.プログラミング
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
命名画面が起動された時のイベントを設定します。
画面をクリックし選択状態にします
画面右下のプロパティの「稲妻」マークをクリックして下さい。
イベントが表示されます。その中の Load をダブルクリックします。
![](https://cozver.com/wp-content/uploads/2020/11/スライド30-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
コード入力画面が表示されます。
Loadイベントのコメントを書きます。
Loadイベントの1行上で「///」を入力します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド31-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
コメントが生成されます。
「起動時処理」を追記します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド32-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
名前をつけるボタンクリックのイベントを設定します。
名前をつけるボタンをクリックし選択状態にします
画面右下のプロパティの「稲妻」マークをクリックして下さい。
イベントが表示されます。その中の Click をダブルクリックします。
![](https://cozver.com/wp-content/uploads/2020/11/スライド33-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
コード入力画面が表示されます。
Clickイベントのコメントを書きます。
Clickイベントの1行上で「///」を入力します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド34-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
コメントが生成されます。
「名前をつけるボタンクリック処理」を追記します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド35-1024x576.png)
5.プログラムの実行
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
プログラムを実行します。
画面左上の赤枠部分をクリックして編集内容を保存します。
次に画面中央上部の開始をクリックします。
![](https://cozver.com/wp-content/uploads/2020/11/スライド36-1024x576.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
画面が表示されます。
画面起動時処理で「どっち?」に犬が選択された状態です。
![](https://cozver.com/wp-content/uploads/2020/11/スライド37.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
犬が選択されているとき、名前をつけるボタンをクリックすると
入力された名前が犬にコピーされます。
![](https://cozver.com/wp-content/uploads/2020/11/スライド38.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
猫が選択されているとき、名前をつけるボタンをクリックすると
入力された名前が猫にコピーされます。
![](https://cozver.com/wp-content/uploads/2020/11/スライド39.png)
![](http://cozver.com/wp-content/themes/cocoon-master/images/man.png)
プログラムを停止します。
画面中央上部の停止をクリックします。
プログラムが停止します。
![](https://cozver.com/wp-content/uploads/2020/11/スライド40-1024x576.png)
7.作成された実行ファイル(EXE)の場所
「2.プロジェクトの作成」で指定したフォルダ\名付け親ソフト\名付け親ソフト\bin\Debug
「名付け親ソフト.exe」が作成されます。
これをダブルクリックすることで、Visual Studioなしで名付け親ソフトを実行できます。
8.最後に
この手順はC#のプログラムを作るうえでの開発のパターンのようなものです。
手順を覚えた次に、違う部品やイベントを試してみるのも面白いと思います。
今回の手順で何かつかんでもらえれば嬉しいです。
時間があればデバッグ編も作ってみたいと思います。
お疲れ様でした!