Web Frontier

今回、練習用に作るプログラムは、次のようなものです。ちょっと最初から難しいかも知れませんが、フォームの通りに配置して見て下さい。 目的は、上のボタンを押すたびに値を１づつ増やすというプログラムを考えてみる事にしましょう。

そして、下の「Clear」ボタンで上のボタンの値を「0」に戻します。 尚、このウィンドウは「練習」という名前が付いていますが、これはフォームの「オブジェクト　インスペクタ」です。 フォーム上のどこでもいいのでクリックすると、フォームの情報に切り替わります。そこの「Caption」の所を「練習」とします。

というコンポーネントがあると思いますのでそれを上のように２つフォーム上に配置して下さい。 そうすると、最初は、「Button1」「Button2」という名前が付いていると思います。 これも、各「Caption」の所で「0」「Clear」という名前に変更して下さい。 そうすると、上のように変わるはずです。「Caption」というのは「見出し」という意味です。 HTMLを御存知の方は<Caption>...</Caption>というのがありますね。

「Name」というのもあります。「Name」はそこのコンポーネントの名前です。 同じ名前は使えません。例えば、上のボタンでは初期値は「Caption」も「Name」も「Button1」となっています。 「Name」はユニーク（一意的：一通りしかない）なものです。 下のボタンではやはり「Caption」も「Name」も「Button2」になっていますが、「Caption」はボタンに表示する文字列、 「Name」はIDみたいな感覚で捉えて頂ければと思います。「Name」はすべてのコンポーネントにあります。 つまり、「Caption」はどちらも同じものを使う事が出来ますが、「Name」は同じものは使えません。 試しにやって見て下さい。「すでに使われています！」と出るはずです。

という訳です。それではいきなりですが、プログラムを書いて見る事にしましょう。

それでは始めてみる事にしますが、次のようなものになります。

• 「Button1」がクリックされたら、「Button1」に書かれている数値を1づつ増やす！
• 「Button2」がクリックされたら、「Button1」に書かれている数値を0に戻す！

上のような仕組みになります。単純なものですが、初めてとなるとかなり難しいと思います。何も知らないで分からないのは当然なのでゆっくり見て行く事にしましょう。上の文章を言い換えると、次のようになる事はお分かりでしょうか？

• 「Button1」がクリックされたら、「Button1」の「Caption」を1増やす！
• 「Button2」がクリックされたら、「Button1」の「Caption」を0にする！

というのを同じ事になるのは分かりますでしょうか？まず、気を付けなくてはならない事があります。 「Delphi」には型というものがあります。簡単に言いますと、文字列型、数値型、Boolean型というものがあります。今は「ふ〜ん」と思ってくれる程度で構いません。

例えば、「オブジェクト インスペクタ」の設定の変更で「True」「False」と設定するのがありましたね？ あれは要するに設定するか設定しないか？つまり２つにひとつです。 こういうのは、Boolean型（ブーリャン型）と呼ばれます。 そして、「Width」「Left」などの位置などは「100」とか「200」とか数値です。これらは数値型です。 そして、「Caption」や「TEdit」にあるような「Text」などは文字列型と分けて使われます。 これは後に非常に重要となってくるので今はぼんやりでいいですが、覚えて下さい。

さて、実際にプログラムを書く訳ですが、 どういう風に書けばいいの？といいますと、「Button1」に書きますので、「Button1」をまずカチッとクリックして下さい。 そうすると、「Button1」の「オブジェクト インスペクタ」に切り替わります。 そして上の方にあるタブを「イベント」に切り替えます。

そうすると下のような画面に切り替わります。 ここには「OnClick」などがありますね。これらはイベントと呼ばれます。 「OnClick」は「クリックされたら…」という事です。 つまり、このボタンがクリックされたら… という事です。 ここの空白の欄をダブルクリックして下さい。そうすると、次のような画面に切り替わります。

ちなみにこれは「Delphi 5.0」のものです。「Delphi 5.0未満」は、左のような詳細項目がありません。 取りあえずは、プログラム部分を御覧になって下さい。

ちなみにこれは「Delphi 5.0」のものです。「Delphi 5.0未満」は、左のような詳細項目がありません。取りあえずは、プログラム部分を御覧になって下さい。

procedure TForm1.Button1Click(Sender:TObject);

begin
   {ここにプログラムを書いて行きます。}
end ;

「procedure」は「プロシージャ」と呼びます。 和訳すると、「手続き」という意味です。これは取りあえず、「ふ〜ん」で構いません。 時期に理解出来ると思います。ここでは、「Button1がクリックされた時にここのプログラムが実行されます」 という事を意味しています。プログラムは「begin」〜「end」に書いて行きます。 「begin」は「始め」、「end」は「終わり」という意味は中学生でも知っていますよね。 さて、どのようなプログラムを書いたらいいのでしょうか？先程言ったように、

• 「Button1」がクリックされたら、「Button1」の「Caption」を1増やす！

というのをまず考えます。次のようにプログラムを書きます。

procedure TForm1.Button1Click(Sender:TObject);

var cnt : Integer ;
begin
   cnt := StrToInt(Button1.Caption) ;
   cnt := cnt + 1 ;

   Button1.Caption := IntToStr(cnt) ;
end ;

という感じになります。と言っても意味不明でしょうから、説明をじっくりして行きます。 まず、「begin」〜「end」に書くのに何でその前に「var」とかあるの？とお思いになった方いらっしゃると思います。 「var」というのは「variable」（変数）という英単語の略で、 C言語などでお馴染みだと思いますが、変数宣言と呼ばれるものです。 ここで変数という言葉を聞いた事のない方のために変数の説明をします。知っている方は飛ばし読みして下さいね。

「変数」とは「変わる数」、プログラム中で「変わる数」という事です。 よく言われる例えが「情報を保管しておくための箱」などと言われたりします。 ここで言う情報とは「数値」や「文字列」だったりします。プログラム中では、ある値を足したり引いたり、 文字列だったら連結したり削ったりしたい訳です。 そういう場合に、変数で宣言しておく事によって扱いやすくなったりなるのです。 これが変数という概念です。変数の宣言の仕方は、次の通りです。

var （変数名） : （変数の型） ; 

変数名はここでは「cnt」というものを使っていますが、何でも構いません。 「x」でも「a」でも「AaA」でも、何でも構いません。自分の好きな変数名を指定する事ができます。 ただ、「Delphi」は変数名の大文字・小文字の区別をしません！ よって「AaA」も「aAa」も同じ変数として扱われるために、なるべく変数名は小文字で統一しましょう。 また、「a」とか「b」とかを使うより、一目で見て分かる変数名を付けた方がいいでしょう。 これはミスらないための鉄則です。多少長くても、分かる変数名を付けましょうッ！

「変数の型」とはなんでしょう。 先程少し述べた、「数値型」「文字列型」「Boolean型」とかいいましたが、アレです。 今回はボタンのカウントをアップさせます。カウントは数値として扱うのは分かりますよね？ 1、2、3…とこれはまぎれもなく数値です。よく使う型について述べる事にします。

Integer

「整数」という意味です。「0、±1、±2、±3」を扱う場合はこれを指定します。

String

「文字列」型を扱う場合です。'あいうえお'などです。尚、文字列には、必ず''（シングルクォーテーション）で囲んで扱います。

今は、この２つだけを知っておけば十分かと思われます。文字列は必ず''で囲むと言いましたが、 数値も''で括ると文字列として扱われますので注意して下さい！ つまり、11→数値、'11'→文字列、という事になります。

これをふまえて考えてみる事にしましょう。 まず最初に「cnt という変数を整数型としてプログラム内で使う事を宣言する！」という事を最初に言っている訳です。 これでプログラム内では「cnt」という自分で作った変数を利用する事ができるようになります。 また、「数値」と「整数」とかごっちゃになっていると思いますが、数値と言っても幅広く、 「整数」「小数」などありますよね。小数の場合には、「Integer」ではなく「Extended」とかいうのを使いますが、 今は整数のみ使うという事で「Integer」を使います。 「Delphi」のヘルプで「Extended」とでも入れて確認して見てもいいと思いますが、 今は複雑になるのでなるべく見ないようにして下さい。

cnt := StrToInt(Button1.Caption) ;

上記でも、「Delphi」では「：=」というものを使います。 これの事を「代入演算子」といいます。「A ：= B ；」でBの値をAに代入する！という意味を持ちます。 右辺の値を左辺に代入するという意味です。これは非常に重要です。絶対覚えて下さい！ 尚、気付いた方もいらっしゃると思いますが、プログラムの一文の終わりには必ず「；」を付けます。

更に、見覚えのある単語がありますね。 「Button1」「Caption」です。「Button1」の「Caption」を参照するには、「Button1.Caption」のように、「．」 （ドット）でつないで行きます。「Button1. 」とドットを打ってしばらくしていると、 候補が出てきますので試して見て下さい。

ちなみに、「Button1.Visible」とすると、 「Button1」の「Visible」を参照します。「Visible」は見えるようにするか、見えないようにするかでしたね。 忘れた方は前のページを御覧になって下さい。 ここでは、「Button1」の「Caption」の値を変更して行くので「Button1.Caption」の値をまず変数「cnt」に代入している訳です。 しかし、「Button1.Caption」の「Caption」は先程言いましたように、型があり、 これは文字列型です。型が違うもの同士を代入する事はできません！よく考えて見て下さい。

'あいうえお' + 100

とかを考えたら分かると思います。文字列に数値などを足したりする事はできませんので、 ここでは型を統一してあげる必要があります。ここでちょっと混乱した方もいらっしゃると思います。 「Caption」の値は「0」だから、整数型じゃないの？と思うかも知れません。 しかし、ここでの「Caption」は文字列型であり、「0」も文字列型である事を意味しています。 つまり、文字列での「0」を意味しているのです。 ですから、「StrToInt」というものを用いて、「文字列→整数」へと変換してあげている訳です。 これにより、型の形が整数型に変わります。「StrToInt」とは何となく分かると思いますが、 「StringToInteger」（文字列から整数へ…）という意味です。 文字列を整数型に変換するなんて何か変！と思う方もいるかも知れません。確かに、

StrToInt('あいうえお') ;

これはエラーが起きます。なぜなら、『あいうえお』は整数に変換できないからです。逆に、

StrToInt('100') ； 

これは正解です。「100」という文字列（''で囲まれているので文字列）は整数に変換できますよね。 この操作により、「Button1」の「Caption」の値を整数型として、変数cnt に代入している事に最終的にはなります。 変数宣言でもしたように、「cnt」は整数型、StrToInt（Button1.Caption）も整数型で無事代入できた訳です。

cnt := Button1.Caption ;

としたら、これは何度も言うようにいけません。左辺「cnt」が整数型で宣言しているのに対し、 右辺「Button1.Caption」は文字列型だからです。型の不一致はよく出てくるエラー（僕も今でも間違えます）ので、 これも心配せずに徐徐に力を付けて行って下さい。次の行に、

cnt := cnt + 1 ;

というのがあります。これも言語経験者はお馴染みですが、経験ない方は「えっ？」と思うでしょう。 特にＣ言語などでは「cnt = cnt + 1 ；」と書くので混乱する事は必至です（＾＾；）。 これも先程行った事を思い出して下さい。「cnt + 1」を「cnt」に代入するという意味です。 この操作によって、結果は、「cnt」は1増加して新たに、「cnt」に代入される… 「cnt」の値を1増やしている事になります。尚、「cnt」の値を2増やしたいのであれば、

cnt := cnt + 2 ;

とすればいいだけの話です。つまり、自分自身の値を増やす！という事を意味しています。そして、最後に、

Button1.Caption := IntToStr(cnt) ;

これは、一番最初の行の逆を行っています。「cnt」は整数型なので、「Button1.Caption」に代入するには「文字列型」へと変換する必要があります。 そこで「IntToStr」を使います。「StrToInt」の逆で「整数→文字列」へ変換するものです。 これにより、「Button1.Caption」の値が変更される事になります。 この結果、「Button1」の「Caption」が「0」→「1」へと変わります。 また、「1」→「2」へと変わります。どんどんクリックするたびにカウントアップするプログラムが完成した訳です。 さて、実際に実行して動かして見て下さい。ボタンを押すたびにカウントアップされましたか？ されていれば成功です。適当に、プログラム内の式を変えてみて、 2倍づつ増加させて見たりしてみるのも確認としてはおもしろいでしょう。

今は、分かりやすくプログラムを何行も書きましたが、慣れてくると次のように一行で書けたりします。 しかし、最初は練習のために惜しまずに何行書くのも必要です。プログラムは最初は真似から始まります。 また、プログラムは学校の授業のような暗記モノではありません。

自分で、こうしたらどうなるのだろう…　これとこれはどう違うの？という疑問を常に持って下さい。 そうしなければ上達はしません。大学で教わるプログラムが上達しないのはこのためです。 与えられた事をやっているだけではいつまで経っても抜け切れません。 「やらなきゃ！」という強迫観念に刈られてやるのでは絶対に上達しません。 自分から進んで、疑問を持って当たる事が最短距離だと自分は思っております。 こう思っているだけで上達度は人一倍違うと思いますので、心に留めておいて頂きたいと思ってます。 ですから、ここでも、何か疑問あれば人に聞くのも手です。 まずは自分で調べてそれでも無理な壁だったら、色々他のサイトにある掲示板質問してみて下さい。 さて、話は反れてしまいましたが、一行で書くには、

procedure TForm1.Button1Click(Sender:TObject);
var cnt : Integer ;
begin
   Button1.Caption := IntToStr(StrToInt(Button1.Caption)+1) ;
end ;

複雑ですが、やってる内容を良く見ると納得しませんか？変数も使っていませんが、 直接Button1.Captionの値を使っているので使う必要はありません。

では、問題です。次の場合の誤りを訂正して見て下さい。答えは白で隠されているので、 マウスで選択して自分が思った結果と一致していれば、もう完璧です。ここでは言う事はないでしょう。 また、間違ってしまった方はもう一度よく読んで下さい。 一度で理解できる人はなかなかいません。何度も読み返して納得行くまで読んで下さい。 プログラムは最初のハードルを根気で乗り越えれば後はスムーズに行けます。 最初のとっかかりが一番大変なのです。ここで挫折するかしないかで大きく分かれます。 大抵の人はここで挫折します。しかし、挫折せずに続ける事が先程もいった最短距離です。 「継続は力なり」というのは正にこの事でしょう。 という訳でちょっと時間かかっても構いませんので考えて見て下さい。

procedure TForm1.Button1Click(Sender:TObject);
var cnt : String ;
begin
 　cnt := Button1.Caption ;
 　cnt := cnt + 1 ;
 　Button1.Caption := cnt ;
end ;

答えは...　以下を選択して反転させると答えが浮かび上がって来ます。

procedure TForm1.Button1Click(Sender:TObject);
var cnt : String ;
begin
 　cnt := Button1.Caption ;
 　cnt := cnt + 1 ;
 　cnt := IntToStr(StrToInt(cnt) + 1) ;
 　Button1.Caption := cnt ;
end ;

ちょっと難しかったと思いますが、 正解した方は万々歳です！次へ進んでも問題ありません。

そういえば、「Clear」が抜けていました。 でも、ここまでこれた方ならもうお分かりでしょうか。「Button2」の「OnClickイベント」の所に、

procedure TForm1.Button1Click(Sender:TObject);
var cnt : String ;
begin
 　Button1.Caption := '0' ;
end ;

とすればOKです。しかしここで、、、

procedure TForm1.Button1Click(Sender:TObject);
var cnt : String ;
begin
 　Button1.Caption := 0 ;
end ;

としてしまった方は要注意です。もう一度読み返して見て下さい。

前者は、ノーマルな「0」つまり、 整数としての「0」ですので、整数の「0」を文字列型である「Caption」に代入する事は型の食い違いとなりエラーです。 後者は、''（シングルクォーテーション）で囲まれていますので、文字列としての「0」として扱っていますので正解です。 また、今度は、カウントアップではなく、 ボタンをクリックするたびにどんどん横幅が長くなって行くプログラムを考えて見て下さい。 ボタンの幅を設定するには、

Button1.Width

これは幅ですので、お分かりのように整数値ですのでそれをふまえて実装して見て下さい。 一行で書けた型は素晴らしい！です。でも、この場合は、一行で書いた方が速いので答えは一行で書いて見ましょう。 答えは以下の部分を選択すれば浮き上がって見えます。まずは、長くても構いませんのでじっくり考える事が重要です。 すぐに答えを見るのでは力は尽きません。考える力というものを付けるために5分でも構いませんので考えて下さい。 どうしても、降参の場合は、答えを見て納得すればいいだけの話です。 それで覚えた方が全然力の付き方も違います。

procedure TForm1.Button1Click(Sender:TObject);
var cnt : String ;
begin
 　Button1.Width := Button1.Width + 1 ;
end ;

先程とは違って何かスマートですね。 先程は、「Caption」が文字列型であったので、カウントアップという整数を扱うために型の食い違い→型変換する必要があったために、 あんな面倒な手続きをしました。しかし、今回は、全部整数なので、最初っから統一されているわけで余計な型変換が入らない訳です。 逆に高さを変えたければ、

Button1.Height

では、少しひねった発展問題です。 Button1がクリックされた時に、Button1の横幅を増やし、 同時にButton2の縦幅を増やすプログラムはどのようにすればいいか考えて見て下さい。 イベントは「Button1」の「OnClick」に書くのはお分かりでしょうから、考えて見て下さい。

procedure TForm1.Button1Click(Sender:TObject);
var cnt : String ;
begin
 　Button1.Width := Button1.Width + 1 ;
 　Button2.Height := Button2.Height + 1
end ;

なんて事はありません。 このようにすればいいのです。ここまで分かれば言う事はないので、自信を持って下さい。 では次の章へ行きましょう！