Visual Basic 入門講座

Visual Basic 中学校 > 入門講座 >

第２回　ボタンを作る

この記事が対象とする製品・バージョン (バージョンの確認方法)

	Visual Basic 2019	◎	対象です。
	Visual Basic 2017	◎	対象です。
	Visual Basic 2015	◎	対象です。
	Visual Basic 2013	◎	対象です。
	Visual Basic 2012	○	対象ですが一部画面が異なる場合があります。
	Visual Basic 2010	○	対象ですが一部画面が異なる場合があります。
	Visual Basic 2008	○	対象ですが一部画面が異なる場合があります。
	Visual Basic 2005	○	対象ですが一部画面が異なる場合があります。
	Visual Basic.NET 2003	△	対象外ですがほとんどの操作は同じなので参考になります。
	Visual Basic.NET (2002)	△	対象外ですがほとんどの操作は同じなので参考になります。
	Visual Basic 6.0	×	対象外です。

今回はWindows（ウィンドウズ）でのプログラムによく出てくるボタンを作ってみます。ボタン作りを通してVBでのプログラミングの基本的な方法を説明します。

１．準備

さっそく新規プロジェクトを作成してみましょう。プロジェクトとは１つにまとまったプログラムのことでしたね。

前回同様Windows フォーム アプリケーションを選択してください。プロジェクトの作成方法がわからない場合は前回の説明を参照してください。

今回はプロジェクト名は特に関係ないので自由につけてください。これからも特に説明のない限りプロジェクト名は自由な名前で結構ですが、後で見たときにどんなプログラムだったかわかるような名前にしておくのが良いです。

操作  -  画面設定を最初の状態に戻す方法 Visual Studioでは設定や操作で画面をいろいろと変えられるので、いじっているうちに最初とは違う画面になってうまく戻せなくなってしまうかもしれません。 こんなとき、[ウィンドウ]メニューの[ウィンドウ レイアウトのリセット]をクリックするだけで簡単にインストールしたばかりの最初の表示状態に戻すことができます。 ■画像：ウィンドウ レイアウトのリセット

２．ツールボックス

４．ボタンのプログラム　までの作業の流れを動画で見ることができます。動画はVB2005のものですが基本的な操作は同じなので参考になります。 動画を見る WMV形式。4.95MB。1分26秒。音声あり。 この動画は本文の内容の一部を映像にしたものです。動画を見た後で本文も読んでみてください。動画が見られない場合は気にせず本文だけをよく読んでください。

２−１．コントロール

今回はボタンを扱いますが、プログラムではボタン以外にも文字を入力するテキストボックス(TextBox)や、画像を表示するピクチャーボックス(PictureBox)などさまざまな部品を扱います。

これらのように画面に貼り付けて使う部品のことを「コントロール」と呼びます。

■画像：いくつかのコントロール

２−２．ツールボックスの開閉

コントロールを使用する手順は共通していて、ツールボックスから目的のコントロールを選択して、フォーム上でそのコントロールを配置したい位置をマウスでなぞるだけです。

ツールボックスは画面の左側にあります。

■画像：閉じているツールボックス

もし、ツールボックスが表示されていないようなら、[表示] メニューから [ツールボックス] をクリックすると表示されます。(以前のバージョンのVisual Studioでは [表示] - [その他のウィンドウ] - [ツールボックス])

マウスでクリックするとツールボックスが開いてこのようになります。

■画像：開いてフォームに重なっているツールボックス

このようにツールボックスには水彩画のパレットのようにいろいろなコントロールが並んでいます。

別の場所をクリックするとツールボックスは閉じます。ツールボックスが開いたり閉じたりするタイミングはVisual Studioのバージョンによって少し違います。

この状態だと、フォームの左側がツールボックスの裏に隠れてしまい少し見にくくなってしまいます。

それが嫌なときはツールボックスの右上にある画鋲(がびょう)のアイコンをクリックします。

■画像

そうするとこのようにフォームに重ならないようにツールボックスが表示され、この位置で表示が固定されます。もう一度画鋲をクリックすると閉じた状態に戻ります。

■画像：固定されたツールボックス

私はこの固定した状態の方が作業がしやすいので画鋲をクリックしておくことが多いです。現代(2019年)はディスプレイのサイズも大きく、ツールボックスを常に表示しておいてもあまり邪魔にならないので、初心者の方には作業しやすいように画鋲をクリックしてツールボックスを固定にしておくことをお勧めします。

２−３．ツールボックスの内容

ツールボックスの内容は状況によって変わります。今はWindows フォーム アプリケーションの画面をデザインする画面なので、Windows フォーム アプリケーションのデザインに使用するものがツールボックスに並んでいます。

私の環境で数えてみるとVisual Studio Community 2019ではこの状況で60個以上のコントロールがはじめから使用可能なようです。

たくさんのコントロールを整理するためにツールボックスでは「タブ」というものを使ってコントロールをカテゴリごとに分けています。これはたくさんのファイルを整理したいときにフォルダーを使うのと同じ発想です。

Visual Studio Community 2019ではじめの状態では、「すべての Windows フォーム」、「コモン コントロール」など以下の10個のタブが存在します。

ツールボックスのタブはクリックすると開閉できます。すべて閉じるとこのようになります。

■画像：すべてのタブを閉じたところ

この状態でコモン コントロールのタブをクリックして展開すると、下のようになります。

■画像：コモンコントロールを展開したところ。

再びタブをクリックすると閉じることができます。

最初から存在する10個のカテゴリは次のような分類になっています。

■表：Windows フォーム アプリケーション 画面デザイン時のツールボックスのタブ

よく使うコントロールは「コモン コントロール」に登録されているので、はじめのうちはコモン コントロールだけしか使わないことでしょう。

他のタブも簡単な説明を書いておきましたが、現時点では使いこなせる知識がないので気にしないでください。

メモ  -  どんなコントロールがはじめから用意されているか？ 初級講座第１６回 コントロールの鳥瞰 では、用意されているコントロールのほとんどについてざっと紹介していますのでどうしても気になる人は先に見てみてもよいでしょう。 今回ボタンを使う方法を説明しているので、それがわかればとりあえず自分でいろいろなコントロールをフォームに貼り付けてみてどんなものか直接いじることもできます。

３．ボタンの配置

では、いよいよツールボックスからボタンを選択してプログラムしてみましょう。

ツールボックス上にある「Button」をクリックしてください。

そして、マウスでフォーム上のボタンを貼り付けたい位置をなぞって（ドラッグして）ください。あなたがなぞった位置になぞった大きさのボタンができます。

■画像：フォームにボタンを貼り付ける

上の画像のようになりましたか？これでボタン配置作業は完了です。

一度貼り付けた後でもマウスで自由に位置を変更できますし、ボタンを選択したときに八方に表示される小さな白い四角をマウスでドラッグすることでボタンの大きさも簡単に変えられます。

操作  -  ボタンを貼り付けるその他の方法 本文ではツールボックスでButtonをクリックし、マウスでフォームをなぞるという方法を紹介していますが、ツールボックスからフォームにコントロールを貼り付けるには他の方法もあります。 ツールボックスでButtonをダブルクリック ツールボックスからフォームにButtonをドラッグ＆ドロップする ツールボックスでButtonをクリックするなどして選択してから[Enter]キーを押す 本文で紹介しているマウスでフォームをなぞる方法が一番良くつかわれていると思いますがお好みの方法で良いです。

この状態で一度プログラムを実行してみましょう。実行ボタンをクリックしてください。

■画像：実行ボタン

実行すると確かにボタンがひとつあるフォームが表示されるでしょう。でもボタンをクリックしても何もおきませんね。１行もプログラムしていないからしかたありません。

配置したボタンを削除するにはデザイン時にボタンを右クリックして「削除」を選択するか、Deleteキーを押します。

４．ボタンのプログラム

ではボタンをクリックしたときに何か起こるようにプログラムをしてみましょう。ボタンがクリックされたときの動作をプログラムするにはデザイン画面に戻って配置したボタンをダブルクリックしてください。（ツールボックスのボタンじゃないですよ）

ボタンをダブルクリックするとコードエディターに切り替わり、次のようになっています。

■リスト１：ボタンをダブルクリックした直後の状態

ここから次のように１行プログラムを追加してください。

■リスト２：ボタンをクリックしたときに作動するプログラム

この例では全部で５行ありますが、上下の２行はVBが自動で生成するプログラムなので自分で書く必要はありません。自分で書く必要があるのはButton1.Text = Now.ToStringの１行目だけです。この意味は「ボタンの文字を現在日時を文字で表現したものにしなさい」という意味です。開始ボタンで実行してボタンをクリックすると、ボタンに現在の日時が表示されます。

２行目のPrivate Sub Button1_Click…の行の意味は簡単に言うと「ボタンがクリックされたら」という意味です。

４行目のEnd Sub意味は「ボタンがクリックされたときのプログラムはここまで」という目印見たいなものです。

もし、実行ボタンをクリックしたときに「ビルドエラーが発生しました。続行しますか？」というようなメッセージが表示された場合は、プログラムがどこか間違っている場合です。[いいえ]を選択して、もう一度よく見直してください。

ところで、ボタンを配置したときにはボタンに「Button1」と表示されていてかっこ悪いですよね。もちろんこの表示されている文字もプログラムしないで簡単に変えることができるのですがその方法はまたの次回に説明します。

５．まとめ

今回はボタンをフォームに配置してプログラムする手順を説明しました。ボタンに限らずツールボックスにならんでいるコントロールはすべて同じ手順で配置してプログラムすることができます。他のコントロール を配置して遊んでみてください。それでは！

発展学習  -  VBのコントロールはC#などと共通 発展学習では意欲的な方のために現段階では特に理解する必要はない項目を解説します。 ツールボックスに並んでいるすべてのコントロールはVB専用のものではなくVisual C#など他の.NET言語でも利用します。しかも利用する手順は今回解説した手順とまったく同じです。 これはVBもC#も .NET言語と呼ばれるものはすべて .NET (ドットネット）という決まりに対応するように設計されているからです。そしてツールボックスのコントロールはVBではなくこの.NETに所属しており、VBやC#から.NETの機能を呼び出すという点で共通なのです。 このような理由でVBの勉強をしていても自然とVisual C#なども扱えるようになっていきます。たとえば今回最後に出てきたプログラムの部分はC#で書くと次のようになります。違いはありますが似ていますよね。 private void button1_Click(object sender, EventArgs e) {     button1.Text = DateTime.Now.ToString(); }

重要な用語