手順 9: 確認、コメントの追加、およびコードのテスト

[アーティクル]
06/11/2015

次に、コードにコメントを追加します。コメントは、プログラムの動作には影響しないメモです。コメントを追加すると、コードを読む人が動作内容を理解しやすくなります。コードにコメントを追加することをお勧めします。行をコメントとしてマークするには、Visual C# では 2 つのスラッシュ (//) を使用します。Visual Basic では、単一引用符 (') を使用してコメントとしてマークします。コメントを追加したら、プログラムをテストします。プロジェクトで作業している間にコードを頻繁に実行してテストすることをお勧めします。これによって、コードが複雑になる前に、問題を早期に見つけて修正することができます。これは反復テストと呼ばれます。

一部の機能を作成しただけで、まだ完成はしていませんが、既にピクチャを読み込むことはできます。コードへのコメントの追加とテストを行う前に、頻繁に使用することになるコードの概念についてここで確認しておきましょう。

Windows フォームデザイナーで [Show a picture] ボタンをダブルクリックしたとき、プログラムのコードに自動的にメソッドが追加されました。
メソッドはコードを整理する 1 つの方法で、これを使用してコードをまとめることができます。
ほとんどの場合、メソッドではいくつかの処理を特定の順序で行います。たとえば、ここで作成した showButton_Click() メソッドでは、ダイアログボックスを表示してから、ピクチャを読み込みます。
メソッドは、コードステートメント、またはコード行で構成されます。コードステートメントをまとめたものがメソッドであると考えることができます。
メソッドを実行する (呼び出す) と、メソッド内のステートメントが最初のものから順番に 1 つずつ実行されます。

ステートメントの例を次に示します。
```
pictureBox1.Load(openFileDialog1.FileName);
```
```
pictureBox1.Load(openFileDialog1.FileName)
```
ステートメントは、プログラムに処理を実行させる指示にあたります。Visual C# の場合、ステートメントは必ずセミコロンで終わります。Visual Basic の場合は、行の末尾がステートメントの末尾になります (Visual Basic ではセミコロンは必要ありません)。上記のステートメントでは、ユーザーが OpenFileDialog コンポーネントで選択したファイルを読み込むように PictureBox コントロールに指示しています。

ビデオへのリンクこのトピックのビデオ版については、「Tutorial 1: Create a Picture Viewer in Visual Basic - Video 5 (チュートリアル 1: Visual Basic によるピクチャビューアーの作成 - ビデオ 5)」または「Tutorial 1: Create a Picture Viewer in C# - Video 5 (チュートリアル 1: C# によるピクチャビューアーの作成 - ビデオ 5)」を参照してください。これらのビデオでは、旧バージョンの Visual Studio を使用しているため、一部のメニューコマンドやその他のユーザーインターフェイス要素が若干異なります。ただし、概念および手順は、現在のバージョンの Visual Studio でも同様です。

コメントを追加するには

コードに次のコメントを追加します。

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
        PictureBox1.Load(OpenFileDialog1.FileName)
    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)
    {
        pictureBox1.Load(openFileDialog1.FileName);
    }
}

[!メモ]

これで showButton ボタンの Click イベントハンドラーが完成し、使用できる状態になりました。コードの記述を開始するとき、最初に if ステートメントを記述しました。if ステートメントは、"ある条件を確認し、それに当てはまる場合に処理を実行する" ようにプログラムに指示するステートメントです。ここでは、[ファイルを開く] ダイアログボックスを開き、ユーザーがファイルを選択して [OK] をクリックした場合にそのファイルを PictureBox に読み込むように指示しています。

ヒント
IDE はコードを簡単に記述できるように設計されており、そのための方法の 1 つとしてコードスニペットが用意されています。スニペットは、小さなコードのブロックに展開されるショートカットです。使用可能なすべてのスニペットを表示できます。メニューバーで、[ツール]、[コードスニペットマネージャー] の順にクリックします。Visual C# の場合、if スニペットは [Visual C#] にあります。Visual Basic の場合、if スニペットは [条件とループ]、[コードパターン] にあります。このマネージャーを使用して、既存のスニペットを参照したり独自のスニペットを追加したりすることができます。コードの入力時にスニペットをアクティブにするには、そのスニペットを入力して Tab キーを押します。多くのスニペットは IntelliSense ウィンドウに表示されます。Tab キーを 2 回押すのは、1 回目で IntelliSense ウィンドウからスニペットを選択し、2 回目でそのスニペットを使用するように IDE に指示するためです (IntelliSense は if スニペットはサポートしますが、ifelse スニペットはサポートしません)。

IDE はコードを簡単に記述できるように設計されており、そのための方法の 1 つとしてコードスニペットが用意されています。スニペットは、小さなコードのブロックに展開されるショートカットです。

使用可能なすべてのスニペットを表示できます。メニューバーで、[ツール]、[コードスニペットマネージャー] の順にクリックします。Visual C# の場合、if スニペットは [Visual C#] にあります。Visual Basic の場合、if スニペットは [条件とループ]、[コードパターン] にあります。このマネージャーを使用して、既存のスニペットを参照したり独自のスニペットを追加したりすることができます。

コードの入力時にスニペットをアクティブにするには、そのスニペットを入力して Tab キーを押します。多くのスニペットは IntelliSense ウィンドウに表示されます。Tab キーを 2 回押すのは、1 回目で IntelliSense ウィンドウからスニペットを選択し、2 回目でそのスニペットを使用するように IDE に指示するためです (IntelliSense は if スニペットはサポートしますが、ifelse スニペットはサポートしません)。

プログラムを実行する前に、ツールバーの [すべてを保存] (次の図を参照) をクリックしてプログラムを保存します。

[すべてを保存] ボタン

または、メニューバーで、[ファイル]、[すべてを保存] の順にクリックしてプログラムを保存します。早めに、かつ頻繁に保存することをお勧めします。

実行中のプログラムは次の図のようになります。

ピクチャビューアー

プログラムをテストするには

F5 キーを押すか、ツールバーの [デバッグ開始] をクリックします。
[Show a picture] をクリックして、記述したコードを実行します。最初に、[ファイルを開く] ダイアログボックスが開きます。ダイアログボックスの下部にある [ファイルの種類] ボックスにフィルターが表示されることを確認します。次に、ピクチャがある場所に移動して、そのピクチャを開きます。通常、Windows オペレーティングシステムに付属しているサンプルのピクチャが My Documents フォルダーの My Pictures\Sample Pictures フォルダーにあります。

[!メモ]

[Select a picture file] ダイアログボックスにイメージが表示されない場合は、ダイアログボックスの右下のボックスで All files (*.*) フィルターが選択されていることを確認します。
ピクチャを読み込みます。ピクチャが PictureBox に表示されます。その後、境界線をドラッグしてフォームのサイズを変更してみてください。フォーム内にドッキングした TableLayoutPanel 内に PictureBox をドッキングしてあるため、ピクチャの領域が、幅はフォームと同じで、高さはフォームの上部 90% に収まるようにサイズ変更されます。TableLayoutPanel コンテナーと FlowLayoutPanel コンテナーを使用したのはそのためです。これらのコンテナーを使用することで、ユーザーがフォームのサイズを変更したときに適切なサイズが維持されます。

この時点では、大きなピクチャはピクチャビューアーの境界線を超えます。次の手順では、ウィンドウに合ったピクチャを作成するコードを追加します。

続行または確認するには

チュートリアルの次の手順に進むには、「手順 10: その他のボタンおよびチェックボックスに対するコードの記述」を参照してください。
チュートリアルの前の手順に戻るには、「手順 8: [Show a Picture] ボタンのイベントハンドラーのコードの記述」を参照してください。

次の方法で共有

手順 9: 確認、コメントの追加、およびコードのテスト

コメントを追加するには

プログラムをテストするには

続行または確認するには

その他のリソース