VisualStudioで始めるWindowsアプリケーション開発

VisualStudioを使ってWindowsアプリケーションを開発していく流れを紹介します。
以前に、簡単にざっくりと教える機会があったので自分用として。
ちなみにVisualStudioはインストールした前提で話を進めていきます。

VisualStudioについては、下記リンク先からダウンロードできるので試してみてください。

https://visualstudio.microsoft.com/ja/downloads/
これのVisual Studio 2019 コミュニティをダウンロードするといいです。

スポンサーリンク




Windowsアプリケーションの開発の流れ

VisualStudioを用いて、Windowsアプリケーションを開発していく場合、
ざっくりと下図のようなイメージになります。

だいたいこんな感じです。
ざっくりと順を追って説明していきます。

① プロジェクトの作成

VisualStudio2019を起動すると、下図が表示されると思います。

ここから、新しいプロジェクトの作成をクリックします。
押すと、いろいろと項目が出てきます。
すべての言語の中から”Visual Basic”を選択し、
下の項目からWindowsフォームアプリケーション(.NET Framework)を選びます。
選んだら次へをクリックします。
次へを進むと、プロジェクト名や保存場所、フレームワークを選ぶ画面が表示されます。
プロジェクト名は、ここでは”TestProject”としています。
保存場所については、任意の場所でかまいません。
なるべく、ディレクトリの構成に全角文字が入っていない方が好ましいです。
パス関連で、うまく読み込むことができず、プログラムのデバッグ時などで
エラーが発生する恐れがあるからです。設定が一通り済んだら作成をクリックします。
作成を押すことで、プロジェクトが作成され、下図のようなWindowが表示されます。
WindowのForm1.vb[デザイン]と書かれているタブが現在アクティブになっています。
これが、いわゆるデザイナー画面(ビューデザイナー)といわれている、
ボタンやテキストボックス等を配置してアプリケーションの顔を作っていく画面となります。
Windowに表示されている、Form1をダブルクリックしてみてください。
すると、こんどは下図のWindowが表示されたかと思います。
Form1.vbといったタブが新たに生成されると思います。
これが、実際にプログラムを書いていく、コード画面(コードエディタ)になります。
紹介した二つの画面を主に使ってアプリケーションを基本的には作っていきます。

プロジェクトで実際にアプリケーションを作ってみましょう

実際に作成されたプロジェクトを用いて、”Hello World”を表示するアプリケーションを作ってみましょう。
今回、作成するアプリケーションは、以下の機能を持つこととします。

  • ボタンを押したらラベルにHello Worldと表示します
  • 文字のフォントは、メイリオでサイズは20pt
  • ボタンに表示されるテキストは、”押してね”と表示します

この機能を有するアプリケーションを作っていきましょう。

ビューデザイナーで画面のデザインを作る

まずは、ビューデザイナーを開き、今回使うアイテムを配置していきましょう。
ビューデザイナーを開いたら、左端にある”ツールボックス”を開きます。
ツールボックスが表示されたら、”コモンコントロール”をクリックします。
この中から、ボタン<Button>とラベル<Label>をそれぞれドラッグ&ドロップで、Form画面に置いてみましょう。
図のような感じになるかと思います。
※置き方は自由なので好きなようにおいてください。
置いたら、Label1を選択します。
すると、右下の枠にプロパティと表示されているかと思います。
これが現在選択しているアイテムのプロパティとなっています。
この中から、フォント<Font>の項目を探します。
探したら、フォントの2列目をクリックしてカーソルを当てます。
カーソルを当てると、アイコンが入力欄の左端(赤丸枠の部分です。)に現れます。
これをクリックします。
図のような画面が表示されるかと思います。
表示がされたら、フォントを指定のフォントに変更しましょう。
フォント名はメイリオ、サイズは20ptでしたので、それぞれ設定していきましょう。
設定が終わったら、OKをクリックします。
フォントが大きくなった分、アイテムの表示位置が変わっているかと思います。
フォントが正しく変更されていれば成功です。
位置については調整しておきましょう。
次にボタンのテキストを”押してね”に変更していきます。
まず、配置したボタンを選択します。
プロパティが表示されたら、テキスト<Text>という項目を探します。
テキスト項目にカーソルを合わせ、内容を”押してね”と変更します。
配置したボタンの表示名が”押してね”になっていれば、変更ができています。
ここまでで機能として要件を満たす画面ができました。
次からはコード画面を使って、コーディングをしていきます。

コードエディタを使い、プログラムを書く

では、次にコードエディタを開きましょう。

開き方はプロジェクトに表示されている、Form1.vbタブを選択します。
もしくは、右端にあるソリューションエクスプローラーに表示されている、
Form1.vbを右クリックし、”コードの表示”をクリックします。

いずれかを行うことで、コード画面が表示されたかと思います。

実際に、”ボタンを押したときにHello World”と表示されるようなプログラムを書いていきます。
まずは、ボタンが押されたというイベントを発生させてみます。
ビューデザインに戻って、配置したボタンをダブルクリックします。
すると、画面が切り替わりコード画面に遷移したかと思います。
 

と書かれたコードが生成されたかと思います。
これをボタンのイベントといい、ここではボタンが押された(クリックされた)ときに
呼び出されるイベントになります。→イベントハンドラと呼ばれます。 下に簡単な図を……。 イベントハンドラには、画面が表示されるときや、
ラベルやテキストボックス内で文字が変更されたときなどがあります。

今回の”ボタンが押されたときにHello Worldと表示する”機能については、
先ほどのイベントハンドラの中に、Hello Worldと表示するコードを書いていくことになります。

‘ ←で書かれた行の下に書いていくイメージです。
ちなみにVisual Basicで先頭に'(シングルクォーテーション)がつけるとコメントとして認識されます。
処理を思い出す際や、誰かがコードを見てもわかるようにコメントを残しておくことをお勧めします。
最近では、コメントを書かなくてもわかるように書いた方がいいってなんてこともあります。
→僕はコメント厨です……はい。

Hello Worldは配置したラベルに表示をすることになるので、
ラベルのテキストを変更させていくことになります。
ボタンの表示名を変更したときは、プロパティ上で行いましたが、
今回はあらかじめ表示されていないため、コードで書いていく必要があります。
実際に書いていくと、下のようにHello Worldが表示されるコードになります。

「Me.Label1.Text = “Hello World”」と書くことで、Hello Worldという文字列を
配置したラベルに表示するようにしています。

プログラムを実行してみよう

では、実際に先ほど書いたコードを実行してみましょう。
実行するには、デバッグボタンを押します。

デバッグボタンを押すと、小さなウィンドウが表示されます。
この中の”デバッグの開始”を選択します。
すると、プログラムが実行され、作成した画面が別ウィンドウで表示されたかと思います。

それでは、”押してね”と書かれたボタンをクリックしてみましょう。
先ほど、書いたコードが実行され、Label1の表示が”Hello World”へと表示されました。
これでボタンを押したら文字を表示するプログラムができました。
補足

イベントハンドラについては今回ビューデザイナーのボタンをダブルクリックすることで
自動的に生成されましたが、実際に書くこともあります。
そこで、イベントハンドラの構成について簡単に図で補足しておきます。

先ほど書いたコードを例に解説していくと、
””Button1_Click”は、イベント変数名にあたります。
そして、”Button1.Click”がイベント名になります。
→ これはボタンをクリックしたら発生するイベントでした。
※ イベント変数名は自由に変更することができます。

おわりに

ざっとVisualStudioを使ってプロジェクトの作成から、
Windowsフォームアプリケーションの紹介までしてきました。
実際にアプリケーション作りとなると難しいことに多々直面しますが、
簡単に作ることもできるんだと感じてもらえたら良いです。
なんらかの参考になって、新しい楽しみのきっかけとなれば嬉しく思います。

最後に、私がコードを書く際に気を付けていることを書いておきます。

  • 同じ処理が複数ある場合は、一つのメソッド(関数)にまとめる。
  • 何の処理をしているかわかりやすいようコメントを残す。
  • 変数名やメソッド名は誰が見てもわかりやすいように付ける。
  • クラス内やメソッド内で同名の変数は使用しない。
  • 1つのメソッドにif文を書く際は、階層は5~6個まで。(階層を深くしない。)

これらを主に気を付けて書いていってます。
今後も増えそうだけど……。

まだまだ未熟ですが、日々勉強を忘れず継続してスキルアップしていきたい今日この頃。

スポンサーリンク