Visual Basic 入門講座
VB.NET 2002 VB.NET 2003 VB2005 VB2008 VB2010 VB2012 VB2013 VB2015 VB2017 VB2019

第2回 ボタンを作る

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

VB2019 Visual Basic 2019 対象です。
VB2017 Visual Basic 2017 対象です。
VB2015 Visual Basic 2015 対象です。
VB2013 Visual Basic 2013 対象です。
VB2012 Visual Basic 2012 対象ですが一部画面が異なる場合があります。
VB2010 Visual Basic 2010 対象ですが一部画面が異なる場合があります。
VB2008 Visual Basic 2008 対象ですが一部画面が異なる場合があります。
VB2005 Visual Basic 2005 対象ですが一部画面が異なる場合があります。
VB.NET 2003 Visual Basic.NET 2003 対象外ですがほとんどの操作は同じなので参考になります。
VB.NET 2002 Visual Basic.NET (2002) 対象外ですがほとんどの操作は同じなので参考になります。
VB6対応 Visual Basic 6.0 × 対象外です。

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

概要

・ボタンを作るには、デザイン画面でマウスで貼り付ける。

・ボタンを使うには、ダブルクリックしてからプログラムを入力する。

・Visual Basicのプログラミング画面の表示設定について

 

1.準備

 

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

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

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

操作方法 操作  -  画面設定を最初の状態に戻す方法

Visual Studioでは設定や操作で画面をいろいろと変えられるので、いじっているうちに最初とは違う画面になってうまく戻せなくなってしまうかもしれません。

こんなとき、[ウィンドウ]メニューの[ウィンドウ レイアウトのリセット]をクリックするだけで簡単にインストールしたばかりの最初の表示状態に戻すことができます。
ウィンドウ レイアウトの リセット
■画像:ウィンドウ レイアウトのリセット

 

2.ツールボックス

 

動画  4.ボタンのプログラム までの作業の流れを動画で見ることができます。動画はVB2005のものですが基本的な操作は同じなので参考になります。

動画を見る

WMV形式。4.95MB。1分26秒。音声あり。

この動画は本文の内容の一部を映像にしたものです。動画を見た後で本文も読んでみてください。動画が見られない場合は気にせず本文だけをよく読んでください。

 

2−1.コントロール

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

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

いくつかのコントロール

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

2−2.ツールボックスの開閉

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

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

閉じているツールボックス

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

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

 

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

開いているツールボックス

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

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

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

 

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

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

がびょう

■画像

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

固定されたツールボックス

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

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

2−3.ツールボックスの内容

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

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

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

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

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

ツールボックスのタブをすべて閉じたところ

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

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

コモンコントロールを展開

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

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

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

タブ 分類
すべての Windows フォーム 現在使用可能なすべてのコントロール (ごく少数の例外はあります)
コモン コントロール よく使用するコントロール
コンテナー 他のコントロールを含むことができるコントロール
メニューとツールバー メニューとツールバーを表現するコントロール
データ データベース等と連携するコントロール
コンポーネント 表示されずにプログラムを支援するコントロール
印刷 印刷機能を実現するコントロール
ダイアログ 各種ダイアログとして動作するコントロール
WPF 相互運用機能 WPFの機能を簡単に使用するためのコントロール
全般 空です。自分のコントロールを配置するなどします。

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

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

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

メモ メモ  -  どんなコントロールがはじめから用意されているか?

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

 

3.ボタンの配置

 

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

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

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

ボタンの配置

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

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

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

操作方法 操作  -  ボタンを貼り付けるその他の方法


本文ではツールボックスでButtonをクリックし、マウスでフォームをなぞるという方法を紹介していますが、ツールボックスからフォームにコントロールを貼り付けるには他の方法もあります。

  • ツールボックスでButtonをダブルクリック
  • ツールボックスからフォームにButtonをドラッグ&ドロップする
  • ツールボックスでButtonをクリックするなどして選択してから[Enter]キーを押す

本文で紹介しているマウスでフォームをなぞる方法が一番良くつかわれていると思いますがお好みの方法で良いです。

 

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

VB2013の実行ボタン

■画像:実行ボタン

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

 

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

 

4.ボタンのプログラム

 

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

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

VB2005 VB2008 VB2010 VB2012 VB2013 VB2015 VB2017 VB2019

Public Class Form1

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

    End Sub
End Class

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

 

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

VB2005 対応 VB2008対応 VB2010対応 VB2012 VB2013 VB2015 VB2017 VB2019

Public Class Form1

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        Button1.Text = Now.ToString

    End Sub
End Class

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

 

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

 

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

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

 

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

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

 

5.まとめ

 

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

発展 発展学習  -  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();
}

 

重要な用語

用語 説明
ボタン Windowsのいろいろな画面でよく見かけるボタンです。Windowsのバージョンによって見かけは少し異なります。
ツールボックス ボタンなどフォームに貼り付けて使うための部品が並んでいる場所です。フォームに部品を貼り付けるにはツールボックスから目的の部品を選んでクリックし、フォームの貼り付けたい位置をマウスでドラッグしてなぞります
コントロール ボタンや、ユーザーが文字を入力するテキストボックス、画像を表示するためのピクチャーボックスなど、ユーザーの目に見えてフォームに貼り付けて使う部品を指します。タイマーなど目に見えない部品のことは単に「コンポーネント」と呼ぶ場合もありますが、ひとまとめにして「コントロール」と呼ぶ場合もあります。