手順 9: レビュー、コメントの追加、およびコードのテストStep 9: Review, Comment, and Test Your Code

次に、コードにコメントを追加します。You next add a comment to your code. コメントは、プログラムの動作には影響しないメモです。A comment is a note that doesn't change the way the program behaves. コメントを追加すると、コードを読む人が動作内容を理解しやすくなります。It makes it easier for someone who is reading your code to understand what it does. コードにコメントを追加することをお勧めします。Adding comments to your code is a good habit to get into. 行をコメントとしてマークするには、Visual C# では 2 つのスラッシュ (//) を使用します。In Visual C#, two forward slashes (//) mark a line as a comment. Visual Basic では、単一引用符 (') を使用してコメントとしてマークします。In Visual Basic, a single quotation mark (') is used to mark a line as a comment. コメントを追加したら、プログラムをテストします。After you add a comment, you test your program. プロジェクトで作業している間にコードを頻繁に実行してテストすることをお勧めします。これによって、コードが複雑になる前に、問題を早期に見つけて修正することができます。It's good practice to run and test your code frequently while you're working on your projects, so you can catch and fix any problems early, before the code gets more complicated. これは反復テストと呼ばれます。This is called iterative testing.

一部の機能を作成しただけで、まだ完成はしていませんが、既にピクチャを読み込むことはできます。You just built something that works, and although it's not done yet, it can already load a picture. コードへのコメントの追加とテストを行う前に、頻繁に使用することになるコードの概念についてここでレビューしておきましょう。Before you add a comment to your code and test it, take time to review the code concepts, because you will use these concepts frequently:

  • Windows フォーム デザイナーで [Show a picture] ボタンをダブルクリックしたとき、プログラムのコードに自動的にメソッドが追加されました。When you double-clicked the Show a picture button in Windows Forms Designer, the IDE automatically added a method to your program's code.

  • メソッドはコードを整理する 1 つの方法で、これを使用してコードをまとめることができます。Methods are how you organize your code: It's how your code is grouped together.

  • ほとんどの場合、メソッドではいくつかの処理を特定の順序で行います。たとえば、ここで作成した showButton_Click() メソッドでは、ダイアログ ボックスを表示してから、ピクチャを読み込みます。Most of the time, a method does a small number of things in a specific order, like how your showButton_Click() method shows a dialog box and then loads a picture.

  • メソッドは、コード ステートメント、またはコード行で構成されます。A method is made up of code statements, or lines of code. コード ステートメントをまとめたものがメソッドであると考えることができます。Think of a method as a way to bundle code statements together.

  • メソッドを実行する (呼び出す) と、メソッド内のステートメントが最初のものから順番に 1 つずつ実行されます。When a method is executed, or called, the statements in the method are executed in order, one after another, starting with the first one.

    ステートメントの例を次に示します。The following is an example of a statement.


    ステートメントは、プログラムに処理を実行させる指示にあたります。Statements are what make your programs do things. Visual C# の場合、ステートメントは必ずセミコロンで終わります。In Visual C#, a statement always ends in a semicolon. Visual Basic の場合は、行の末尾がステートメントの末尾になります In Visual Basic, the end of a line is the end of a statement. (Visual Basic ではセミコロンは必要ありません)。上記のステートメントでは、ユーザーが OpenFileDialog コンポーネントで選択したファイルを読み込むように PictureBox コントロールに指示しています。(No semicolon is needed in Visual Basic.) The preceding statement tells your PictureBox control to load the file that the user selected with the OpenFileDialog component.

    ビデオへのリンクこのトピックのビデオ版については、「チュートリアル 1: Visual Basic によるピクチャ ビューアーの作成 - ビデオ 5」または「チュートリアル 1: C# によるピクチャ ビューアーの作成 - ビデオ 5」を参照してください。link to videoFor a video version of this topic, see Tutorial 1: Create a Picture Viewer in Visual Basic - Video 5 or Tutorial 1: Create a Picture Viewer in C# - Video 5. これらのビデオでは、旧バージョンの 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 add comments

  1. コードに次のコメントを追加します。Add the following comment to your code.

    Private Sub showButton_Click() Handles showButton.Click
        ' Show the Open File dialog. If the user clicks OK, load the
        ' picture that the user chose.
        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
        End If
    End Sub
    private void showButton_Click(object sender, EventArgs e)
        // Show the Open File dialog. If the user clicks OK, load the
        // picture that the user chose.
        if (openFileDialog1.ShowDialog() == DialogResult.OK)


    これで showButton ボタンの Click イベント ハンドラーが完成し、使用できる状態になりました。Your showButton button's Click event handler is now finished, and it works. コードの記述を開始するとき、最初に if ステートメントを記述しました。You have started writing code, starting with an if statement. if ステートメントは、"ある条件を確認し、それに当てはまる場合に処理を実行する" ようにプログラムに指示するステートメントです。An if statement is how you tell your program, "Check this one thing, and if it's true, do these actions." ここでは、[ファイルを開く] ダイアログ ボックスを開き、ユーザーがファイルを選択して [OK] をクリックした場合にそのファイルを PictureBox に読み込むように指示しています。In this case, you tell your program to open the Open File dialog box, and if the user selects a file and chooses the OK button, load that file in the PictureBox.


    IDE はコードを簡単に記述できるように設計されており、そのための方法の 1 つとしてコード スニペットが用意されています。The IDE is built to make it easy for you to write code, and code snippets are one way it does that. スニペットは、小さなコードのブロックに展開されるショートカットです。A snippet is a shortcut that gets expanded into a small block of code.

    使用可能なすべてのスニペットを表示できます。You can see all of the snippets available. メニュー バーで、[ツール][コード スニペット マネージャー] の順にクリックします。On the menu bar, choose Tools, Code Snippets Manager. Visual C# の場合、if スニペットは [Visual C#] にあります。For Visual C#, the if snippet is in Visual C# . Visual Basic の場合、if スニペットは [条件とループ][コード パターン] にあります。For Visual Basic, the if snippets are in Conditionals and Loops, Code Patterns. このマネージャーを使用して、既存のスニペットを参照したり独自のスニペットを追加したりすることができます。You can use this manager to browse existing snippets or add your own snippets.

    コードの入力時にスニペットをアクティブにするには、そのスニペットを入力して Tab キーを押します。To activate a snippet when typing code, type it and choose the TAB key. 多くのスニペットは IntelliSense ウィンドウに表示されます。Tab キーを 2 回押すのは、1 回目で IntelliSense ウィンドウからスニペットを選択し、2 回目でそのスニペットを使用するように IDE に指示するためですMany snippets appear in the IntelliSense window, which is why you choose the TAB key twice: first to select the snippet from the IntelliSense window, and then to tell the IDE to use the snippet. (IntelliSense は if スニペットはサポートしますが、ifelse スニペットはサポートしません)。(IntelliSense supports the if snippet, but not the ifelse snippet.)

  2. プログラムを実行する前に、ツール バーの [すべてを保存] (次の図を参照) をクリックしてプログラムを保存します。Before you run your program, save your program by choosing the Save All toolbar button, which appears as follows.

    [すべてを保存] ツール バー ボタンSave All toolbar button
    [すべてを保存] ボタンSave All button

    または、メニュー バーで、[ファイル][すべてを保存] の順にクリックしてプログラムを保存します。Alternatively, to save your program, on the menu bar, choose File, Save All. 早めに、かつ頻繁に保存することをお勧めします。It's a best practice to save early and often.

    実行中のプログラムは次の図のようになります。When it's running, your program should look like the following picture.

    Picture ViewerPicture Viewer
    Picture ViewerPicture Viewer

プログラムをテストするにはTo test your program

  1. F5 キーを押すか、ツール バーの [デバッグ開始] をクリックします。Choose the F5 key or choose the Start Debugging toolbar button.

  2. [Show a picture] をクリックして、記述したコードを実行します。Choose the Show a picture button to run the code you just wrote. 最初に、[ファイルを開く] ダイアログ ボックスが開きます。First, the program opens an Open File dialog box. ダイアログ ボックスの下部にある [ファイルの種類] ボックスにフィルターが表示されることを確認します。Verify that your filters appear in the Files of type drop-down list at the bottom of the dialog box. 次に、ピクチャがある場所に移動して、そのピクチャを開きます。Then navigate to a picture and open it. 通常、Windows オペレーティング システムに付属しているサンプルのピクチャが My Documents フォルダーの My Pictures\Sample Pictures フォルダーにあります。You can usually find sample pictures that ship with the Windows operating system in your My Documents folder, inside the My Pictures\Sample Pictures folder.


    [Select a picture file] ダイアログ ボックスにイメージが表示されない場合は、ダイアログ ボックスの右下のボックスで All files (.*) フィルターが選択されていることを確認します。If you don't see any images in the **Select a picture file* dialog box, be sure that the "All files (*.*)" filter is selected in the drop-down list on the lower right side of the dialog box.

  3. ピクチャを読み込みます。ピクチャが PictureBox に表示されます。Load a picture, and it appears in your PictureBox. その後、境界線をドラッグしてフォームのサイズを変更してみてください。Then try resizing your form by dragging its borders. フォーム内にドッキングした TableLayoutPanel 内に PictureBox をドッキングしてあるため、ピクチャの領域が、幅はフォームと同じで、高さはフォームの上部 90% に収まるようにサイズ変更されます。Because you have your PictureBox docked inside a TableLayoutPanel, which itself is docked inside the form, your picture area will resize itself so that it's as wide as the form, and fills the top 90 percent of the form. TableLayoutPanel コンテナーと FlowLayoutPanel コンテナーを使用したのはそのためです。これらのコンテナーを使用することで、ユーザーがフォームのサイズを変更したときに適切なサイズが維持されます。That's why you used the TableLayoutPanel and FlowLayoutPanel containers: They keep your form sized correctly when the user resizes it.

    この時点では、大きなピクチャはピクチャ ビューアーの境界線を超えます。Right now, larger pictures go beyond the borders of your picture viewer. 次の手順では、ウィンドウに合ったピクチャを作成するコードを追加します。In the next step, you'll add code to make pictures fit in the window.

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