You are here:

ナッキーの「Turbo Delphiはじめて奮戦記」- 第4回 画面もコードもすっきりさせよう!

By: Hitoshi Fujii

Abstract: 前回アンケートフォームを作りましたが、もう少しかっこよくしたいですよね。フォームを上手にレイアウトして見た目をグレードアップ。さらに、コードには変数を使ってすっきりさせましょう。なんだかプログラマっぽくなってきた!?

Hide image
nacky75

ナッキー

前回のアンケートプログラムではメッセージボックスが簡単に表示できましたね。if文っていう構文を使ったのは、ちょっと難しかったなぁ。今回は、そのプログラムを加工して、もっとグレードアップするんだって。手を加えるだけなんだから、今回は楽勝かも?

 

Hide image
takahashi75

高橋先生

今回も新しいことがいっぱい出てくるよ。もっと自由にプログラムを作るために重要な項目なんだ。プログラムの実行を一時的に止めて調べるデバッガの機能も紹介します。

    コードをすっきりさせよう

前回のプログラムでは、アンケートを1件入力してメッセージボックスを1つ表示しました。今回はアンケートを1件入力するたびに画面上に表示を加えるよう、書き換えるんだって。

Hide image
01完成図

図01完成図

まずはTurbo Delphiを起動して第3回のプログラムを開きます。プロジェクトの名前は「Profile.bdsproj」でしたね。あ、開き方を聞いておくのを忘れていました。

高橋先生:Turbo Delphiを起動すると、Turbo Delphi画面中央部に、いろいろなリンクが入っているホームページを表示します。ホームページの右上部にある「最近のプロジェクト」を見てみよう。一覧の中に「Profile.bdsproj」は入っていないかな?見つけたら、クリックするだけで開くことができます。

Hide image
02ホームページ

図02ホームページ

一覧にない場合はツールバーの[プロジェクトを開く(Ctrl+F11)]ボタンをクリックして、「プロジェクトを開く」ダイアログボックスからプロジェクトを探そう。

Hide image
03プロジェクトを開くボタン

図03プロジェクトを開くボタン

[開く]ボタンでユニットだけを開いてもコンパイルや実行は行えません。

ホームページは、起動すると最初に表示される画面ね。右上に「最近のプロジェクト」欄があります。一覧を見てみると、「Profile.bdsproj」があったあった。クリックだけでプロジェクトが開くのね。この前作ったフォームが表示されました。

    変数

前回のプログラムでは、男性か女性か、ペットを飼っているかどうかでメッセージボックスの表示を切り替えるためにif文を使っています。

まずは、複雑になったif文をすっきりさせましょう。今回は「変数」というのを使うんだって。変な数ではなくて、変えられる値という意味だって言っていたけど、どんなものなのかな

高橋先生:「変数」は数値だけじゃなく文字など、様々なものを取っておく入れ物です。プログラムでは「この入れ物にはこんな名前を付けました。入れられるのはこんな種類です」と宣言しなくては使えません。

ナッキー:入れ物に名前を付けて宣言するの?「宣誓!」とか、言うのかな?さらに種類もあるのね。

高橋先生:宣言は、変数名とデータ型の名前を記述するだけです。データ型が、入れられる値の種類を示しているんだ。

ナッキー:型ってクッキー型とか?

高橋先生:遠くないけど、ちょっと違うな。型抜きパズルが近いんじゃないかな。丸や星型のブロックを、穴の中に通す遊びです。形が違うと穴を通らなくて、形が同じだと穴を通り抜ける。データ型でも、データ型の種類と入れる変数の値の種類が同じでなければ入れられないのです。

Hide image
04データ型

図04 データ型

プロフィールの入力結果は文字列なので、文字列が入れられるデータ型を用意します。データ型の種類はたくさんあるけど、ここでは文字列型の1つ「string」というデータ型を使うよ。

次に宣言の方法を説明します。ここではイベントハンドラ内で使える変数を作ろう。

変数宣言を書く場所はイベントハンドラ内のbeginの前です。空白行を挿入して、先頭に「var」を入れます。varはインデントなしです。変数の宣言はvarの下からはじめます。varの下にはいくつ変数を記述してもかまいません。宣言の記述は

var

変数名 :(コロン) 型名;

変数名 : 型名;

となります。変数名の命名規則も一部紹介しましょう。

  • 半角英数で、数字以外からはじめる。
  • 同じイベントハンドラ内で重複する名前をつけない。
  • 大文字小文字は区別されないので、「A」も「a」も同じ変数名とみなされる。

規則にしたがって、入力結果をまとめる変数を作ってください。

変数は宣言しなくちゃダメで、宣言には変数名とデータ型が必要。宣言を書く場所は「var」の後ろ。よし、これさえ覚えれば変数が使えてプログラミングの幅も広がるから、がんばらなくっちゃ。

では、入力結果を入れておく変数を宣言しましょう。変数名は「Profile_Data」にしておきます。ツールバーの[フォーム/ユニットの切り替え]ボタンなどを使って、画面表示をコードエディタに切り替えます。すでに記述しているButton1Clickイベントハンドラを見てください。「begin」の前に空白行を追加して変数宣言を追加します。

procedure TForm2.Button1Click(Sender: TObject);
var
  Profile_Data : string;
begin
  | 
end;

これで「Profile_Data」変数に文字列が代入できるようになったわ。

高橋先生:じゃあ、次に変数に入力結果を代入していこう。全項目を変数に連結させてください。まずは1つ目の「名前」を変数に代入してみます。次に変数に対して新たな項目を連結してください。

前回記述したメッセージボックスに表示するためのif文は使わないから、「コメント」にしよう。コード上にプログラマのコメントを入れることができます。そのまま文字を書くとコンパイルの対象となって、エラーになってしまうよ。先頭に「//」を入れるか「{}」で囲もう。

//(スラッシュ・スラッシュ)は右側がコメント

{}はカッコ内がコメント

//  ShowMessage(Edit1.Text + ':' + ComboBox1.Text);

これで、「//」から右の一文はは実行されません。

では、前回のif文をコメントにしておきましょう。ここでは、「//」を使う方法を選択しました。Button1Clickイベントハンドラを表示して、// をいっぱい入力。それから、変数にEdit1の内容を代入するコード(太字の部分)を追加します。

procedure TForm2.Button1Click(Sender: TObject);
var
  Profile_Data : string;
begin
//  if RadioGroup1.ItemIndex = 0 then
//    if CheckBox1.Checked then
//      ShowMessage(Edit1.Text + ':' +
//        ComboBox1.Text + ':' + '男性' +
//          ':' + 'ペットを飼っている')
//    else
//      ShowMessage(Edit1.Text + ':' +
//        ComboBox1.Text + ':' + '男性')
//  else
//    if CheckBox1.Checked then
//      ShowMessage(Edit1.Text + ':' +
//        ComboBox1.Text + ':' + '女性' +
//          ':' + 'ペットを飼っている')
//    else
//      ShowMessage(Edit1.Text + ':' +
//        ComboBox1.Text + ':' + '女性');
Profile_Data := Edit1.Text; 
end;

次は変数に連結するのね。連結は「+」だったっけ。とすると「ComboBox1.Text + Profile_Data」となるのか。どこに代入すればいいのかな?教えて、高橋先生!

高橋先生:数学の感覚でコードを見ると変な感じがするけど、代入文だから「:=」だね。「:=」右側にも左側にも同じ変数やプロパティが登場することがあるよ。間を「:」で区切るから「':'」も一緒に連結してください。

それから連結の順番も大切です。「ComboBox1.Text + Profile_Data」とすると「住所名前:」ということになってしまうよ。このコードでは「Profile_Data + ':' + ComboBox1.Text」としてください。

同様にして「誕生日」以外のほかの項目も追加していきましょう。

「1 = 1 + 2」みたいで、ちょっと変な感じだけど「代入」は「計算」とは違うのね。こうやって変数を使うと、項目を1つ1つ代入できて文がわかりやすくなります。それに、「+」で連結すると後に追加される感じなんだ。順番を間違えないようにしようっと。コードはこうなるのかな?

procedure TForm2.Button1Click(Sender: TObject);
var
  Profile_Data : string;
begin
Profile_Data := Edit1.Text;
Profile_Data := Profile_Data + ':' + ComboBox1.Text;
if RadioGroup1.ItemIndex = 0 then
  Profile_Data := Profile_Data + ':' + '男性'
else
  Profile_Data := Profile_Data + ':' + '女性';
if CheckBox1.Checked then
  Profile_Data := Profile_Data + ':' + 'ペットを飼っている'
else
  ; 
end;

あれ?「else」の続きが必要のないとき、どうするんだったかな?教えて、高橋先生!

高橋先生:条件を満たさない場合の処理がないとき、「else」以下全部を省略します。文末の「;(セミコロン)」を忘れないでください。

「else」はいらなかったんだ。では「ペットを飼っている」のチェックボックスの部分だけ書き換えます。「;(セミコロン)」を忘れずに。さっき入力した「Profile_Data := Edit1.Text;」の次から記述します。あ、下のコードは、コメントの部分は省略しちゃっています。太字の部分を追加します。

procedure TForm2.Button1Click(Sender: TObject);
var
  Profile_Data : string;
begin
Profile_Data := Edit1.Text;
Profile_Data := Profile_Data + '' + ComboBox1.Text;
if RadioGroup1.ItemIndex = 0 then
  Profile_Data := Profile_Data + '' + '男性'
else
  Profile_Data := Profile_Data + '' + '女性';
if CheckBox1.Checked then
  Profile_Data := Profile_Data + '' + 'ペットを飼っている'; 
end;

    出力項目の設置

今回はアンケートを1件入力するたびに画面上に表示を加えるんだったわね。よぉし、次はTEditをいっぱい追加だ。

高橋先生:ちょっと待ってナッキー、TEditだとフォーム上に置ける個数が限られてしまいます。複数の項目を表示するコンポーネントはいろいろあるんだよ。今回は「TListBox」コンポーネントを使ってみよう。TListBoxコンポーネントはリスト状に項目を並べることができて、一覧から1つ選択できるコンポーネントなのです。TListBoxが持つ表示用のプロパティは「Items」プロパティです。

ナッキー:知らないコンポーネントはまだまだありそうだわ。

高橋先生:チャンスがあれば使ってみる、というようにしてみて。だんだんと知っているコンポーネントが増えてくるはずだよ。使い方はその都度ヘルプなどを参照すればいい。

  • ヘルプの使い方
    ツールバー右端の[ヘルプ目次]ボタンをクリックすると、「Borlandヘルプ」画面を表示します。画面左下部の「キーワード」タブを選択して、画面左のナビゲーションを切り替えます。「キーワード」タブは「キ...」と表示されているかもしれません。

Hide image
05Borlandヘルプ

図05 Borlandヘルプ

「検索する文字列(L);」に探したいコンポーネントの種類名などを入力します。そうするとトピック一覧に「コンポーネントの種類名+クラス」という項目が表示されます。

「コンポーネントの種類名+クラス」という項目をクリックして右側にコンポーネントの説明を表示します。

ナッキー:ヘルプの文章はちょっと難しいことも書いてあるけれど、わかるところだけ読んでも参考になるかも。

では、TListBoxコンポーネントを配置します。TListBoxを置く場所を作らなくちゃね。フォームをちょっとだけ縦方向に広げます。Turbo Delphi画面右下部のツールパレットから「Standard|TListBox」コンポーネントを探します。見つかったら、Button1の下に配置しましょう。ちょっとしかフォームを広げなかったので、表示し切れなくてはみ出しちゃってますね。

Hide image
06TListBoxコンポーネントの

図06 TListBoxコンポーネントの配置

そんな時は、フォームの「AutoScroll」プロパティを設定するんだって。フォームを選択して、「オブジェクトインスペクタ|プロパティ」ページで「レイアウト|AutoScroll」を「True」に変更してください。コンポーネントを表示し切れなかったとき、スクロールバーが表示されます。

あとは、ListBox1のItemsプロパティに結果を表示するコードを書けばいいんですね。Itemsプロパティってどんなプロパティなんだろう?リスト状に項目を並べるって言っていたわね。教えて、高橋先生!

高橋先生:では、フォーム上のListBox1コンポーネントを選択して、「オブジェクトインスペクタ|プロパティ」ページのローカライズ対象にあるItemsプロパティをみてみよう。右欄に[…]ダイアログボタンがついているので、クリックして「文字列リストの設定」ダイアログボックスを表示します。何行か文字を入力してみてもいいですよ。

Hide image
07文字列リストの設定ダイア

図07 文字列リストの設定ダイアログボックス

[OK(O)]ボタンをクリックすると、入力したとおりに文字が表示されます。実行してみると一覧のどれか一つを選択できるようになっています。

Hide image
08リストボックス

図08 リストボックス

・配列

項目は複数ありますが、どれもListBox1のItemsプロパティです。それぞれの項目を区別するために番号を割り振っているんだ。「ListBox1.Items-その1」「ListBox1.Items-その2」といったイメージだね。

このような値の持ち方を「配列」といいます。割り振っている番号のことは「添え字」や「要素番号」と呼んでいる。配列で値を持つ場合、実際のコードでは

コンポーネント名.プロパティ名[添え字]

と書くよ。今回の場合は「ListBox1.Items[0]」「ListBox1.Items[1]」。TListBoxの1行目で、添え字が始まる番号は「1」ではなく「0」になっています。

配列で持つことによって、1つ1つ読み込みたいときは番号付きで呼んだり、項目すべてを一度で操作したりできるよ。


ナッキー:配列って便利なんですね。じゃあ、項目を追加したいときには、「ListBox1.Items[0] := '新項目'」というように追加するんですね。

高橋先生:その方法でも追加できるね。すでに項目が入っているか、何番目から追加するかを調べることが必要なので手間がかかります。「メソッド」を使おう

コンポーネントやプロパティ専用の手続きなどを「メソッド」と呼びます。TListBoxのItemsプロパティはメソッドを持っています。TListBoxのItemsに項目を追加するメソッドは「Add」です。パラメータには追加する文字列(string型)が必要です。

コード上でのメソッドの呼び方は

コンポーネント名.プロパティ名.メソッド名(パラメータ1,パラメータ2,~);

です。コンポーネントが持っているメソッドの場合は「プロパティ名」が不要です。

コンポーネント名.メソッド名(パラメータ1,パラメータ2,~);

では、Button1Clickイベントハンドラにコードを追加してみましょう。パラメータにはstring型の値が必要なんですって。追加したいのは「Profile_Data」変数。パラメータの型と変数の型は同じなので、問題なく使うことができるわね。そうそう、ListBox1のItemsプロパティに文字を入力してみたから、全部削除しておかなきゃね。ペットを飼っているかどうかをチェックするif文の下にコードを追加します(太字部分)。

procedure TForm2.Button1Click(Sender: TObject);
var
  Profile_Data : string;
begin
Profile_Data := Edit1.Text;
Profile_Data := Profile_Data + ':' + ComboBox1.Text;
if RadioGroup1.ItemIndex = 0 then
  Profile_Data := Profile_Data + ':' + '男性'
else
  Profile_Data := Profile_Data + ':' + '女性';
if CheckBox1.Checked then
  Profile_Data := Profile_Data + ':' + 'ペットを飼っている';

ListBox1.Items.Add(Profile_Data); 
end;

これでコードは完成しました。いよいよ保存して、実行よ!保存はツールバーの[すべて保存]ボタン、実行は[実行]ボタンをクリックしてね。今回は[すべて保存]ボタンをクリックしても、ダイアログボックスは表示されません。1度保存してあれば上書きされるんだって。確認できたらフォームの[×(閉じる)]ボタンで終了します。

Hide image
09リストに追加

図09 リストに追加

    画面をすっきりさせよう

一応スクロールするとリストボックスは見えるけど、スクロールは面倒だな。あと、「ペットを飼っている」を付けると後ろのほうの文字が見えませんでした。もうちょっと見た目を加工したいな。操作はフォームデザイナで行います。ツールバーの[フォーム/ユニットの切り替え]ボタンなどを使って画面表示を切り替えます。

    Alignプロパティ

高橋先生:画面を整えるプロパティに、「Align」プロパティがあるよ。今回はそれを使ってみよう。フォームの「AutoScroll」プロパティを「True」にしたままでは設定できないので、「False」に戻しておいてね。

「Align」プロパティはコンポーネントをウィンドウ枠まで広げて配置します。ユーザがウィンドウ枠を広げたらそれに合わせてコンポーネントも移動したり、広がったりします。Alignプロパティの配置には上下左右のどこかにくっつけるタイプと、Alignプロパティを設定したコンポーネントと隣り合わせて使うタイプがあります。どこかにくっつけるタイプは「alTop」「alBottom」「alLeft」「alRight」。隣り合わせるタイプは「alClient」です。

ためしに、ツールパレット「Standard|TPanel」コンポーネント5つで、すべて設定してみました。

Hide image
10TPanelコンポーネントとAli

図10 TPanelコンポーネントとAlignプロパティ

Form1を選択して、「オブジェクトインスペクタ|プロパティ」ページの「レイアウト|AutoScroll」プロパティを「False」に戻します。次に、配置したTListBoxの「表示|Align」プロパティを「alBottom」に設定してみます。あ~あ、ボタンが見えなくなっちゃった。

高橋先生:フォームの「サイズ変更ハンドル」を使って広げたり、縮めたりしてみてごらん。ちゃんとボタンも表示します。ちょうどいいサイズまで調整してみてね。

Hide image
11入力項目の表示

図11 入力項目の表示

何とか見えるようにサイズを調整しました。

    TPanelコンポーネントで画面の整理

ユーザがサイズ変更したらまた、リストボックスがボタンの上なんかに重なっちゃうわよね。ウィンドウ枠を動かさないようにするのがいいかしら?

高橋先生:そうすると、ユーザの自由度が下がるよ。やむをえない事情なら仕方ないけれど、この場合はほかに手がある。ListBox1以外のコンポーネントにもAlignを設定すればいいんだよ。

ナッキー:えー!全部のコンポーネントがビヨーンって伸びちゃうじゃないですか。

高橋先生:今度はウィンドウ枠まで広がると困るよね。広げるコンポーネントを別において、その上にListBox1以外のコンポーネントを配置するんだよ。

ナッキー:コンポーネントの上にコンポーネントを置くんですか??

高橋先生:そう。コンポーネントを上に載せられるコンポーネントがいくつかあるよ。今回は、TPanelコンポーネントを使ってみよう。配置できたら、Panel1のAlignプロパティを「alClient」に設定します。

では、ツールパレットから「Standard|TPanel」コンポーネントを画面に配置します。それから、Panel1を選択して「オブジェクトインスペクタ|プロパティ」ページの「ローカライズ対象|Caption」プロパティの中身を全部消します。さらに「レイアウト| Align」プロパティを「alClient」に設定します。うっ。ほかのコンポーネントが全然見えなくなっちゃいました。

Hide image
12TPanelのプロパティ設定

図12 TPanelのプロパティ設定

高橋先生:コンポーネントを選択して、切り取って、Panel1の上に配置しよう。こんなときは構造ペインでコンポーネントを選択できます。構造ペインでは[Shift]キーを押しながら選択すると、連続して表示されているコンポーネントがすべて選択されてしまうんだ。[Ctrl]キーなら1つずつ選択できるよ。間違って選択しても[Ctrl]キーを押しながら、もう1度クリックすれば選択が解除できます。

Hide image
13構造ペインで選択

図13 構造ペインで選択

[Ctrl+X]キーで切り取り、[Ctrl+V]キーで貼り付けが行えます。必ずPanel1を選択してから貼り付けを行ってください。

コンポーネントを切り取って、パネルの上に貼り付けるのね。まずは選択かぁ。[Shift]キーだと全部選ばれちゃうって言っていたから、[Ctrl]キーを押します。押しながらListBox1とPanel1以外を全部選択してください。選択できたら[Ctrl+X]キーを押します。わあ、コンポーネントがなくなった。次は、必ずパネルを選択してから貼り付けましょう。Panel1を選択して、[Ctrl+V]キーを押します。なくなったときは心配したけどちゃんと貼り付けられました。

これで、サイズ変更しても平気なのね。あれ?さっきと変わらないよ。

高橋先生:Alignプロパティでも「alClient」に設定すると、サイズ変更されてしまうんだよ。下に潜り込んでいるわけではないんだけど、見えなくなっちゃうから同じように思うよね。そこで、もう1つのプロパティ「Anchors」を設定しよう。Anchorsプロパティはフォームの端から、設定したコンポーネントまでの距離を固定します。上下左右それぞれで設定できます。ListBox1が上にあがってくるのを防ぎたいので、ListBox1の上からの位置を固定します。

レイアウトのプロパティもいろいろあるんだね。先にフォームサイズを、すべてのコンポーネントが表示できるように調整しておくんだって。フォームの大きさを直しておいてください。次にListBox1にプロパティを設定するので選択しておきます。「オブジェクトインスペクタ|プロパティ」ページの「レイアウト| Anchors」プロパティの先頭の「+」をクリックして展開します。表示された一覧から「akTop」を探して「True」に設定します。

これで、サイズ変更しても入力項目は見えるし、表示用のリストボックスは好きなサイズにできますね。保存して実行してみましょう

Hide image
14完成図

図14 レイアウト完成

    エラーチェック

ナッキー:実行テストのとき、名前が入力されていなくてもリストボックスに追加されてしまいます。ちょっとかっこ悪い。

高橋先生:入力があるかないかをチェックしていないからですね。ボタンをクリックしたとき「入力チェック」を行いましょう。

ナッキー:文字が入っているかどうかがわかるんだぁ。

高橋先生:文字列が入っていないことは「''(シングルクォーテーション2つ)」で表します。これを「長さゼロの文字列」といいます。だから、条件文にTextプロパティの値が長さゼロの文字列と等しいか?とすることで、真偽を確かめられますね。

Edit1のTextプロパティに値が入っていたら、入力結果をメッセージボックスに表示しましょう。

では、先に条件文を考えなくっちゃ。チェックするのはEdit1のTextプロパティです。

Edit1.Text = ''

これらの条件文をif文に入れます。名前が入力されているかどうか聞いて、なかったらメッセージボックスを出します。

if Edit1.Text = '' then
  ShowMessage('名前が入力されていません');

値が入っていたら、入力結果をリストボックスに出します。Button1Clickイベントハンドラの一番下に記述します(太字部分)。

procedure TForm2.Button1Click(Sender: TObject);
var
  Profile_Data : string;
begin
//  if RadioGroup1.ItemIndex = 0 then
//    if CheckBox1.Checked then
//      ShowMessage(Edit1.Text + ':' +
//        ComboBox1.Text + ':' + '男性' +
//          ':' + 'ペットを飼っている')
//    else
//      ShowMessage(Edit1.Text + ':' +
//        ComboBox1.Text + ':' + '男性')
//  else
//    if CheckBox1.Checked then
//      ShowMessage(Edit1.Text + ':' +
//        ComboBox1.Text + ':' + '女性' +
//          ':' + 'ペットを飼っている')
//    else
//      ShowMessage(Edit1.Text + ':' +
//        ComboBox1.Text + ':' + '女性');
  Profile_Data := Edit1.Text;
  Profile_Data := Profile_Data + ':' + ComboBox1.Text;
  if RadioGroup1.ItemIndex = 0 then
    Profile_Data := Profile_Data + ':' + '男性'
  else
    Profile_Data := Profile_Data + ':' + '女性';
  if CheckBox1.Checked then
    Profile_Data := Profile_Data + ':' + 'ペットを飼っている';

  if Edit1.Text = '' then
    ShowMessage('名前が入力されていません')
  else
    ListBox1.Items.Add(Profile_Data);
end;

Hide image
15エラー処理

図15 エラー処理

    デバッガの使い方-ブレークポイント

ナッキー:今回はエラーチェックまでやったから、プログラミングを満喫ね。

高橋先生:実はもう1つ大事な機能を覚えて欲しいのですが。

ナッキー:もっとコーディングするんですか?

高橋先生:今度は書くのではなくて、実行テストのときの機能なんだよ。

実行しても思ったように動かないとき、その原因を「バグ」といいます。何とかして、そのバグをなくさないといけないんだ。その作業が「デバッグ」。そして、デバッグ作業のためのツールを「デバッガ」といいます。代表的なデバッガの機能は「ブレークポイント」です。ブレークポイントは実行の途中でパっと一時停止してくれる。止まったところで変数やプロパティの値を調べて思惑どおりに値が保持されているかをチェックできるんだ。

処理の順番をチェックするのにも使えるよ。ブレークポイントで止めておいて「ステップ実行」でコードを1文ずつ進めることができる。通るはずのコードを通っていない、などを調べることができます。

ブレークポイントは行の左側グレーの部分をクリックすると赤い丸印がついて置くことができる。ちょっと進めたいときは、ステップ実行をします。キーボードの[F8]キーを押すと1ステップ進むよ。ステップ実行をやめたいときは、ツールバーの[実行]ボタンをクリックすると通常どおり進めることができます。

ブレークポイントの赤い丸印をクリックすると、ブレークポイントを外せます。

ナッキー:実行の途中の状態を見ることができるんですね。

高橋先生:ここでは、if文の分岐の様子をたどってみましょう。

コードが動く様子を見られるなんて、ちょっと楽しそう。まずは、ブレークポイントを置くんだって。ここはエラーチェックのif文を見てみよう。ツールバーの[フォーム/ユニットの切り替え]ボタンなどを使って、画面表示をコードエディタに切り替えます。Button1Clickイベントハンドラの入力チェック、「if Edit1.Text = '' then」行の左側グレーの部分をクリックします。

Hide image
16ブレークポイント

図16 ブレークポイント

赤い丸がつくんだね。じゃあ、実行してみよう。ツールバーの[実行]ボタンをクリックします。別にいつもどおりで、止まっている感じじゃないなぁ。教えて!高橋先生。

高橋先生:ブレークポイントを置いた場所はどこだった?イベントハンドラの中じゃなかったかな?ブレークポイントはその場所まで実行が進まないと、止まってくれない。イベントハンドラに置いたときにはそのイベントを起してね。

ナッキー:そうなんだ。ブレークポイントまで勝手に行ってくれるのかと思った。

高橋先生:一時停止しているときはコードエディタの方が表示されて、フォームは見えなくなってしまいます。フォームを手前に出そうとしても画面を表示する機能も止まっているので途中の状態をフォーム上で確認することはできないんだ。一時停止しているときは、タイトルバーに[停止]と表示されます。

ナッキー:画面を見ながらのデバッグは無理なんだー。

高橋先生:一時停止しているとコードの左端グレーの部分に緑の小さな矢印が表示されます。これは、これから実行しようとしている行を示しています。緑の矢印がついている行はまだ処理が終わっていないので、代入などの結果を知りたい場合は、1行分ステップ実行を行ってください。

Hide image
17停止中

図17 停止中

では、Button1をクリックして、ブレークポイントで止まってみよう。お、止まった。

じゃあ、if文でどっちに行くかを調べるのね。ステップ実行の[F8]キーを押します。あ、何も入れなかったから、エラーになっちゃった。「名前Ӕ