手順 6: ボタン コントロールの名前の設定Step 6: Name Your Button Controls

PictureBox はフォームで 1 つだけ使用しています。There's only one PictureBox on your form. このコントロールには、追加したときに自動的に pictureBox1という名前が付けられています。When you added it, the IDE automatically named it pictureBox1. CheckBox も 1 つだけで、 checkBox1という名前が付けられています。There's only one CheckBox, which is named checkBox1. この後コードを記述しますが、そのコードでは CheckBox と PictureBox を参照します。Soon, you will write some code, and that code will refer to the CheckBox and PictureBox. これらのコントロールについては、どちらも 1 つだけであるため、コードで pictureBox1 または checkBox1 となっていても何を指しているのかがわかります。Because there's only one of each of these controls, you will know what it means when you see pictureBox1 or checkBox1 in your code.

注意

Visual Basic の場合は、どのコントロールの名前も既定で先頭文字が大文字になるため、名前は PictureBox1CheckBox1のようになります。In Visual Basic, the default first letter of any control name is initial cap, so the names are PictureBox1, CheckBox1, and so on.

ボタンはフォームに 4 つあり、 button1button2button3、および button4という名前が付けられています。There are four buttons on your form, and the IDE named them button1, button2, button3, and button4. 現在の名前を見ただけでは、どれが [Close] ボタンでどれが [Show a picture] ボタンなのかわかりません。By just looking at their current names, you don't know which button is the Close button and which one is the Show a picture button. そのため、ボタン コントロールにもっとわかりやすい名前を付けると便利です。That's why giving your button controls more informative names is helpful.

ビデオへのリンクこのトピックのビデオ版については、「チュートリアル 1: Visual Basic によるピクチャ ビューアーの作成 - ビデオ 3」または「チュートリアル 1: C# によるピクチャ ビューアーの作成 - ビデオ 3」を参照してください。link to videoFor a video version of this topic, see Tutorial 1: Create a Picture Viewer in Visual Basic - Video 3 or Tutorial 1: Create a Picture Viewer in C# - Video 3. これらのビデオでは、旧バージョンの Visual Studio を使用しているため、一部のメニュー コマンドやその他のユーザー インターフェイス要素が若干異なります。These videos use an earlier version of Visual Studio, so there are slight differences in some menu commands and other user interface elements. ただし、概念および手順は、現在のバージョンの Visual Studio でも同様です。However, the concepts and procedures work similarly in the current version of Visual Studio.

ボタン コントロールの名前を設定するにはTo name your button controls

  1. フォームで [閉じる] ボタンをクリックしますOn the form, choose the Close button. (すべてのボタンが選択されたままになっている場合は、Esc キーを押して選択を取り消します)。[プロパティ] ウィンドウで、(Name) プロパティが表示されるまでスクロールします (If you still have all the buttons selected, choose the ESC key to cancel the selection.) Scroll in the Properties window until you see the (Name) property. (プロパティがアルファベット順になっている場合は、(Name) プロパティは上の方にあります)。次の図に示すように、名前を closeButton に変更します。(The (Name) property is near the top when the properties are alphabetical.) Change the name to closeButton, as shown in the following picture.

    closeButton という名前が表示された [プロパティ] ウィンドウProperties window with closeButton name
    closeButton という名前が表示された [プロパティ] ウィンドウProperties window with closeButton name

    注意

    ボタンの名前を、close と Button の間に空白文字を含む「 closeButton」という名前に変更しようとすると、IDE で "プロパティの値が無効です" というエラー メッセージが表示されます。If you try changing the name of your button to closeButton, with a space between the words close and Button, the IDE displays an error message: "Property value is not valid." 空白文字 (およびその他のいくつかの文字) は、コントロール名に使用できません。Spaces (and a few other characters) are not allowed in control names.

  2. 他の 3 つのボタンの名前を backgroundButtonclearButton、および showButtonに変更します。Rename the other three buttons to backgroundButton, clearButton, and showButton. 名前を確認するには、 [プロパティ] ウィンドウにあるコントロール セレクターのドロップダウン リストをクリックします。You can verify the names by choosing the control selector drop-down list in the Properties window. 新しいボタン名が表示されます。The new button names appear.

  3. フォームで [Show a picture] ボタンをダブルクリックします。Double-click the Show a picture button on the form. 代わりに、フォームの [Show a picture] ボタンをクリックして、Enter キーを押すこともできます。As an alternative, choose the Show a picture button on the form, and then choose the ENTER key. これを行うと、IDE では [Form1.cs] (Visual Basic を使用している場合は[Form1.vb] ) というメイン ウィンドウで追加のタブが開きます。When you do, the IDE opens an additional tab in the main window called Form1.cs (Form1.vb if you're using Visual Basic). このタブは、次の図に示すように、フォームの背後にあるコード ファイルを示します。This tab shows the code file behind the form, as shown in the following picture.

    Form1.cs タブの Visual C# コードForm1.cs tab with Visual C# code
    Visual C# コードが表示された [Form1.cs] タブForm1.cs tab with Visual C# code

  4. コードの次の部分にフォーカスを設定します。Focus on this part of the code. (Visual Basic を使用していてコードの Visual Basic バージョンを表示するには、次の [VB] タブをクリックします)。(Choose the VB tab below if you're using Visual Basic to view the Visual Basic version of the code.)

    Private Sub showButton_Click() Handles showButton.Click
    
    End Sub
    
    private void showButton_Click(object sender, EventArgs e)
    {
    }
    

    showButton_Click()というコードが表示されています。You are looking at code called showButton_Click(). [showButton] ボタンのコード ファイルを開いたときに、これがフォームのコードに追加されます。The IDE added this to the form's code when you opened the code file for the showButton button. デザイン時に、フォームでコントロールのコード ファイルを開いて、コードが存在しない場合はコントロール用のコードが生成されます。At design-time, when you open the code file for a control in a form, code is generated for the control if it doesn't already exist. メソッドと呼ばれるこのコードは、プログラムを実行し、コントロール (この場合は、 [Show a picture] ) をクリックしたときに実行されます。This code, known as a method, runs when you run your program and choose the control - in this case, the Show a picture button.

    注意

    このチュートリアルでは、自動的に生成される Visual Basic コードのかっこ () で囲まれた部分をすべて削除して、コードを簡略化してあります。In this tutorial, the Visual Basic code that's automatically generated has been simplified by removing everything between the parentheses, (). このような場合は、コードの同じ部分を削除してかまいません。Whenever this occurs, you can remove the same code. いずれの場合もプログラムは正常に機能します。Your program will work either way. チュートリアルの残りの部分では、自動的に生成されるコードについてはできる限り簡略化して示します。For the remainder of the tutorials, any automatically generated code is simplified whenever possible.

  5. Windows フォーム デザイナーのタブ (Visual C# の場合は[Form1.cs [デザイン]] 、Visual Basic の場合は [Form1.vb [デザイン]] ) をもう一度クリックし、 [Clear the picture] ボタンのコード ファイルを開いてフォーム コード内のメソッドを作成します。Choose the Windows Forms Designer tab again (Form1.cs [Design] in Visual C#, Form1.vb [Design] in Visual Basic) and then open the code file for the Clear the picture button to create a method for it in the form's code. 残りの 2 つのボタンについてもこの手順を繰り返します。Repeat this for the remaining two buttons. それぞれについて、フォームのコード ファイルに新しいメソッドが追加されます。Each time, the IDE adds a new method to the form's code file.

  6. メソッドをもう 1 つ追加するために、Windows フォーム デザイナーで CheckBox コントロールのコード ファイルを開きます。IDE で checkBox1_CheckedChanged() メソッドが追加されます。To add one more method, open the code file for the CheckBox control in Windows Forms Designer to make the IDE add a checkBox1_CheckedChanged() method. このメソッドは、ユーザーがチェック ボックスのオンとオフを切り替えるたびに呼び出されます。That method is called whenever the user selects or clears the check box.

    注意

    プログラムの作業を行うときは、コード エディターと Windows フォーム デザイナーを頻繁に切り替えることになりますが、When working on a program, you often move between the code editor and Windows Forms Designer. IDE ではプロジェクト内を簡単に移動することができます。The IDE makes it easy to navigate in your project. ソリューション エクスプローラー を使用して Windows フォーム デザイナーを開くには、Visual C# の場合は [Form1.cs] 、Visual Basic の場合は [Form1.vb] をダブルクリックします。または、メニュー バーで [表示][デザイナー]の順にクリックします。Use Solution Explorer to open Windows Forms Designer by double-clicking Form1.cs in Visual C# or Form1.vb in Visual Basic, or on the menu bar, choose View, Designer.

    コード エディターに表示される新しいコードを次に示します。The following shows the new code that you see in the code editor.

    Private Sub clearButton_Click() Handles clearButton.Click
    
    End Sub
    
    Private Sub backgroundButton_Click() Handles backgroundButton.Click
    
    End Sub
    
    Private Sub closeButton_Click() Handles closeButton.Click
    
    End Sub
    
    Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
    
    End Sub
    
    private void clearButton_Click(object sender, EventArgs e)
    {
    }
    
    private void backgroundButton_Click(object sender, EventArgs e)
    {
    }
    
    private void closeButton_Click(object sender, EventArgs e)
    {
    }
    
    private void checkBox1_CheckedChanged(object sender, EventArgs e)
    {
    }
    

    追加した 5 つのメソッドは、(ユーザーがボタンをクリックしたときやチェック ボックスをオンにしたときなど) イベントが発生するたびにプログラムで呼び出されることから、 イベント ハンドラーと呼ばれます。The five methods that you added are called event handlers, because your program calls them whenever an event (like a user choosing a button or selecting a box) happens.

    デザイン時に IDE でコントロールのコードを表示して、イベント ハンドラー メソッドが見つからないと Visual Studio はコントロールのためにこれを追加します。When you view the code for a control in the IDE at design time, Visual Studio adds an event handler method for the control if one isn't there. たとえば、ボタンをダブルクリックすると、そのボタンの Click イベントに対するイベント ハンドラー (ユーザーがボタンをクリックするたびに呼び出されるイベント ハンドラー) が追加されます。For example, when you double-click a button, the IDE adds an event handler for its Click event (which is called whenever the user chooses the button). チェック ボックスをダブルクリックすると、そのチェック ボックスの CheckedChanged イベントに対するイベント ハンドラー (ユーザーがチェック ボックスのオンとオフを切り替えるたびに呼び出されるイベント ハンドラー) が追加されます。When you double-click a check box, the IDE adds an event handler for its CheckedChanged event (which is called whenever the user selects or clears the box).

    コントロールのイベント ハンドラーを追加した後は、Windows フォーム デザイナーでコントロールをダブルクリックするか、またはメニュー バーで [表示][コード]の順にクリックして、いつでもイベント ハンドラーに戻ることができます。After you add an event handler for a control, you can return to it at any time from Windows Forms Designer by double-clicking the control, or on the menu bar, choosing View, Code.

    名前は、プログラムを作成するときに重要になります。メソッド (イベント ハンドラーを含む) には任意の名前を付けることができます。Names are important when you build programs, and methods (including event handlers) can have any name that you want. IDE でイベント ハンドラーを追加した場合は、コントロールの名前と処理されるイベントに基づいて名前が作成されます。When you add an event handler with the IDE, it creates a name based on the control's name and the event being handled. たとえば、 showButton というボタンの Click イベントのイベント ハンドラー メソッドには showButton_Click() という名前が付けられます。For example, the Click event for a button named showButton is called the showButton_Click() event handler method. また、メソッドであることを示すために、通常はメソッド名の後に左かっこと右かっこ () が追加されます。Also, opening and closing parentheses () are usually added after the method name to indicate that methods are being discussed. コード変数名を変更する場合は、コードの変数を右クリックし、 [リファクター]をクリックし、 [名前の変更]をクリックします。If you decide you want to change a code variable name, right-click the variable in the code and then choose Refactor, Rename. コードのその変数のすべてのインスタンスの名前は変更されます。All instances of that variable in the code are renamed. 詳細については、「名前の変更リファクタリング (C#)」または「名前の変更リファクタリング (Visual Basic)」を参照してください。See Rename Refactoring (C#) or Rename Refactoring (Visual Basic) for more information.

続行または確認するにはTo continue or review