ナッキーの「Turbo Delphiはじめて奮戦記」 - 第2回 Hello World ではじめてのプログラミング

投稿者:: Hitoshi Fujii

概要: いよいよプログラムを作ります。インストールしてすぐ作れちゃうってスゴイですよね。プログラミングの第一歩は「Hello World」と画面上に表示することにはじまります。簡単だとは聞いているんですが、やっぱりプログラミングって難しいのではないかと不安です。今回はプログラムの統合開発環境の使い方とプログラミングの一連の流れを高橋先生に教えてもらいましょう

Hide image
nacky75

ナッキー

前回はTurbo Delphiをインストールして、開発環境を準備しました。でも起動したところで、いろいろな画面が表示されていて、一体どこから始めるのかさえ、さっぱりわかりませんよね。どこから初めて、どこまでやるとプログラムが完成するのか、という一連の流れと、表示される画面の使い方を少しずつ勉強していこうと思います。高橋先生よろしくお願いします。

 

Hide image
takahashi75

高橋先生

はい、よろしくお願いします。

今回は、いよいよプログラムを作成します。ウィンドウのボタンをクリックすると、「Hello World!」と表示されるプログラムです。

Hide image
02SayHello

図1 完成図

    Turbo Delphiの起動

ナッキー:まずはDelphiを起動してっと。スタートメニューから選ぶのって面倒ですよね。先生デスクトップアイコンにはならないんですか?

高橋先生:できますよ。スタートメニューからTurbo Delphiまでたどっていって、アイコンを、マウスの右ボタンでデスクトップ上にドラッグします。ポップアップメニューで「ここにコピー(C)」を選択してください。

Hide image
01ショートカットnewpre

図2 ショートカット作成

ナッキー:これで次の起動はデスクトップから行えますね。

    とにかく始めてみます

高橋先生から、「おまじないのように [ファイル(F)|新規作成(N)|VCLフォームアプリケーション-Delphi for Win32(V)] を選んでごらん」っていわれたけど、ちょっとごわごわ。

Hide image
02新規作成

図3-1 プロジェクトの作成

Hide image
03プロジェクト作成

図3-2 プロジェクトを作成したところ

出てきた、出てきた。この画面で開発するんですね。

高橋先生: じゃあ、最初に覚えておかなくてはいけない言葉を説明しておきましょう。

  • プロジェクト:プログラムの単位。ひとつのプロジェクトがひとつの実行形式のファイルになります。実行形式のファイルとは、そのファイルが実行できるプログラムっていうこと。
  • フォーム:フォームはプログラムを表示するときの、土台となる部分です。フォームの上に様々な部品を並べて画面を構成します。
  • コンポーネント:コンポーネントは画面を構成する部品です。「素材」というよりは、車のギアや、エンジンといったようにある程度機能を持った要素です。

じゃあ、早速フォームにコンポーネントを配置して、画面を設計してみましょう。

    フォームを設計してみる

では、早速。コンポーネントは、画面右下の「ツールパレット」から選択する。まず、部品をフォームに貼り付けて、画面を作ってから「Hello」って表示される機能をつくるのが順序なんだそうです。

ボタンと入力欄のある画面を作るので、まず、ツールパレットの中の[TButton]をクリックして、フォーム上の真ん中辺をクリック。フォーム上にボタンが現れました。

Hide image
04TButton配置pre

図4 TButton配置

でも、ボタンコンポーネントを配置した場所がイマイチでした。教えて!高橋先生!

高橋先生:コンポーネント移動、選択、サイズ変更、削除について説明しましょう。

  • 移動はコンポーネントの中央あたりを任意の位置までドラッグします。マウスの端に表示される数値は、フォームの左からの位置と、上からの位置をピクセル単位で表します。

Hide image
05移動

図5 移動

  • コンポーネントの操作をする時には、先にどのコンポーネントの操作をするのかを選択する必要があります。マウスでクリックすると「サイズ変更ハンドル」という角や辺に青い丸印が表示され、選択状態になります。フォームの場合はコンポーネント以外の部分をクリックするとフォームが選択できます。

Hide image
06選択

図6 選択

  • サイズ変更は「サイズ変更ハンドル」をドラッグすると自由なサイズに変更できます。フォームの場合は右下の角をドラッグします。

Hide image
07サイズ変更

図7 サイズ変更

  • 削除はコンポーネントを選択してキーボードの[Delete]キーを押します。
  • 移動していると、コンポーネントが揃ったところで、デザインガイドラインが表示されます。位置あわせの目安としてください。

Hide image
08デザインガイドライン

図8 デザインガイドライン

ナッキー:スタンプみたいにコンポーネントを配置して、移動やサイズ変更を行なって画面が完成するんですね。絵を描くより簡単かも。

次に文字入力用の欄を作成します。もう、位置合わせもばっちりですから、問題なし。ツールパレットの[TEdit]をクリックして、先ほど配置したボタンコンポーネントの上に1つ配置します。

Hide image
09TEdit配置pre

図9 Tedit配置

高橋先生:配置したコンポーネントには「コンポーネント名+連番」で自動的に名前が付けられます。画面の左上に「構造」という部分があります。ここには配置したコンポーネントの名前が一覧になります。ここで、必要なコンポーネント名を選択してもコンポーネントの選択が行なえます。

Hide image
10構造ペイン

図10 構造ペイン

じゃあ、とりあえずプログラムを実行してみようか。

    プロジェクトの実行テスト

え?もう、プログラムが動いちゃうんですか?画面上部の「ツールバー」の中央あたりに緑の三角形のアイコンが付いたボタンが[実行]ボタン。クリックしちゃいますよ(なんだか楽しみ)。

Hide image
10実行中

図11 実行中

動いた!でも、ボタンをクリックしても何も起こりませんよ。へこむだけ。

高橋先生:Turbo Delphiに用意されているコンポーネントを使っているから、すでに組み込まれたへこんで出っ張る、という動きができるんですよ。でも、まだプログラムを書いていないでしょう?ボタンを押したらどうなるかは、自分で書かなきゃだめなんだよ。

じゃあ、実行テスト中のウィンドウの[閉じる]ボタンをクリックして、プログラムを終了させてください。

    ボタンの文字を変えよう

高橋先生:ボタンを押したときの動作を書く前に、ボタンの外観をちょっと変えましょう。コンポーネントには、プロパティといって、その外観や性質を設定できる属性がいっぱいあるんだ。例えば、ボタンに表示される文字は、Captionプロパティで設定する。Captionに “はい” と設定すると、ボタンの表面には はい と表示されるんだ。

画面左下のオブジェクトインスペクタを見てごらん。

どれどれ。プロパティいっぱいありますね。表の左側がプロパティの名前で、右側がプロパティに設定された値なんだ。

最初に、Button1の文字を変えましょう。フォーム上のButton1コンポーネントをマウスでクリックして、オブジェクトインスペクタの「プロパティ」ページから、Captionを探します。えんじ色で「ローカライズ対象」って書いてあるところに発見。

Hide image
12オブジェクトインスペクタ

図12 オブジェクトインスペクタ

では、プロパティ値に「English」と入力します。

Hide image
13Captionプロパティ

図13 Captionプロパティ

もうひとつのボタンButton2も、同じような操作で、「Caption」プロパティを「French」にしました。

うん、簡単だ。この調子で、Editのプロパティも設定してみましょう。Editを選択して、「ローカライズ対象|Text」プロパティを探します。ここには、ボタンを押したときの文字を表示するから、最初は何も表示されてちゃいけないんだって。ということで、プロパティ値に入っている文字を削除しちゃいます。

次にフォームのCaptionも変更します。フォームも選択できるんだ、と感心している場合じゃないですが、選択すると、フォームには青丸の代わりにグレーの四角が表示されました。「オブジェクトインスペクタ」にも、ちゃんとフォームのプロパティが表示されています。ここで、「ローカライズ対象|Caption」プロパティに「Say Hello」と入力。フォームのタイトルバーに表示されている文字が「Say Hello」に変わりました!

最後は、フォームの色の変更に挑戦。高橋先生は、「色はいいでしょ」って言ってたけど、ちょっと挑戦してみたいんですよね。

また、フォームを選択して、「表示|Color」プロパティを選択。リストからあらかじめ用意されている色を選択することもできるらしいけど、他の色がいいな。

プロパティ値の欄をダブルクリックすると、お、出た!「色の設定」ダイアログボックスが表示されて、好きな色が選べます。

[色の作成(D)>>]ボタンをクリックすると、画面が広がって細かい色が選択できますよ。好みの色になったら[色の追加(A)]ボタンで追加して、最後は[OK]ボタンで設定終了です。

Hide image
13色の設定

図14 色の設定

Hide image
14プロパティ設定

図15 プロパティ設定

ナッキー: 外観が整うとプログラムらしくなりますよね。でも、プロパティ値を探すのが難しいんですけど。

高橋先生:慣れていただくと、カテゴリ順で並んでいる方がわかりやすいのですが、指示したとおり設定するのには探しにくい事もあります。並び順を変更できますのでやり方を説明しましょう。

  • 「オブジェクトインスペクタ|プロパティ」ページでマウスの右ボタンをクリックしてポップアップメニューを表示します
  • 「表示形式(A)」のサブメニューから「名前順(N)」を選択すると、プロパティがアルファベット順に並びかえられます。

Hide image
15名前順

図16 名前順

ナッキー:アルファベット順になりました。「Caption」はCで始まるから上の方、「Text」はTで始まるから下の方になりますね。

高橋先生:カテゴリ順で表示されている場合を前提として説明を続けますが、みなさんは使いやすい方で続けてください。

    作業内容を保存しよう

高橋先生:一段落したところで、作業を一度保存しておこうか。こまめに保存するようにしたほうがいいからね。

ナッキー:もし、何かがあってパソコンが動かなくなっちゃうと、今までやったことが台無しになっちゃいますしね。では、保存してみます。ツールバーの[すべて保存]ボタンをクリック。なんで「すべて」なんですか?

高橋先生:「すべて」というのは保存する対象が複数あるためです。保存される主なファイルは

プロジェクトファイル:拡張子(bdsproj)プロジェクト全体を管理する

フォームファイル:拡張子(dfm)コンポーネントやプロパティなど画面情報

コード(ユニット)ファイル:拡張子(pas)コード情報

などです。フォームファイルとコードファイルは合わせてユニットと呼ばれます。保存する時にこのユニットと、プロジェクトに名前をつけるように、それぞれ保存のダイアログボックスが表示されます。

2つの名前を付けますが、同じ名前にならないようにしてください。コード上でファイル名が使用されていて、重複する名前が使えないのです。

ナッキー:2つのダイアログボックスで、2つの名前を付けるんですね。2つ目のダイアログボックスを慌てて、消しちゃうところでした。もし、付ける名前や保存先を失敗したらどうしたらいいですか?

高橋先生:ユニットの場合は「ファイル(F)|名前を付けて保存(A)…」メニュー、プロジェクトの場合は「ファイル(F)|プロジェクトに名前を付けて保存(E)…」メニューを選択してもう一度ダイアログボックスを表示してください。

「Unit1に名前を付けて保存」と表示されます。これがユニットの保存ね。保存先は「マイドキュメント」の「Borland Studio Projects」、ファイル名は「Unit1.pas」がデフォルトです。「Unit」の後は連番になっているので、「Unit2」や「Unit3」などの場合もあるとのこと。そのまま[保存(S)]ボタンをクリックします。

Hide image
16Unit1に名前を付けて保存

図17 Unit1に名前を付けて保存

あれ、すぐに次のダイアログボックスが表示されました。こっちがプロジェクトの保存かぁ。保存先はユニットと同じ、ファイル名は「Project1.bdsproj」ですね。プロジェクトも連番になっているので「Project2」や「Project3」などの場合がありますが、そのまま[保存(S)]ボタンをクリックします。

Hide image
17プロパティ設定後実行

図18 プロパティ設定後実行

    ボタンを押したときの動作を設定しよう

ナッキー:次はいよいよボタンを押したときの動作を書くんですよね。

高橋先生:そのとおり。これでプログラムも完成になるよ。でも、ここでイベントハンドラについて勉強しておこう。

ナッキー:いべんとはんどら?

高橋先生:イベントとはパソコン上に起こるさまざまな事象です。クリックした、キーを押した、時間が経過したなどすべてイベントとなります。その情報はOSにためていて、プログラムはOSにイベントが届いてないか問い合わせることで、どんなイベントが起こったかを知ることができます。そのイベントを察知したことをきっかけに動く、一連のコード(命令文)の集まりをイベントハンドラといいます。

Hide image
18イベントとイベントハンド

図19 イベントとイベントハンドラ

ここでは「ボタンをクリックする」というイベントに「エディットに文字を表示する」という処理を結びつけるんですよ。

ここが、一番難しそうなんですよね。いかにもプログラミングって感じ。では早速設定してみます。プロパティの設定の時と同様に、はじめはコンポーネントの選択です。Captionに「English」と設定したボタンを選択。次に「オブジェクトインスペクタ」のページを切り替えます。「イベント」タブをクリックしてイベントページを表示します。表の中の左側は「イベント名」、右側には「イベントハンドラ名」が表示されました。

たくさんありますねぇ。まあ、今は「OnClick」だけに集中。右側の空欄をダブルクリックすれば、新しいイベントハンドラが作成できるらしい。クリック!

Hide image
19イベントページ

図20 イベントページ

げ!見たことないページが出てきた。

高橋先生:ははは、それはコードエディタだよ。フォームの画面が見えなくなってしまったけど、画面の下部の「デザイン」タブをクリックすればすぐに出てくるよ。

Hide image
21コードデザイン切り替え

図21 「コード」タブと「デザイン」タブ

あと、ショートカットキーも用意されていて、キーボードの[F12]キーでもフォームとコードを切り替えることができるんだよ。

ナッキー:なんだ、安心。あと、秘密にしてたんだけど、Button1のOnClickイベントをダブルクリックするところを、間違えて、Edit1のOnClickイベントをクリックしちゃったんだけど…

高橋先生:あー、間違ったイベントハンドラを作成してしまったんですね。でもそのままにして、新たに必要なイベントハンドラを作成してください。

ナッキー:えー!そのままでいいんですか?

高橋先生:うっかり削除してしまうと、他にも削除すべきところが増えてしまいます。具体的には、コードの上の方のtypeで始まるブロックのイベントハンドラ名が定義されているところと、オブジェクトインスペクタのイベントハンドラ名です。何も触らずにそのまま実行テストすると不必要な部分が、自動的に削除されます。

ナッキー:削除すると、作業が増えちゃうんですね。気になるけど、そのままにしておきます。

とりあえず、ボタンの「OnClick」イベントをダブルクリック。コードエディタには、自動的に文字が入ってbeginとend;の間にカーソルがある状態です。自動的に記述されている部分は、うっかり消さないよう気をつけます。

ここに、コード(命令文)を記述するんですよね。ここではエディットのTextプロパティに「Hello World!」という文字列を表示させるコードを記述するっていうんだけど、どう書いたらいいんだか。ここもやっぱり、高橋先生!

高橋先生:コードの文法は面倒でもしっかり覚えてください。今回はコンポーネントのプロパティに値を代入するということを行ないます。まずはコード上でプロパティを表す文法です。

コンポーネント名.プロパティ名

間を「.(ピリオド)」で区切ります。次に設定値ですが、数値の場合はそのまま記述することができますが、文字列の場合は「’(シングルコーテーション)」で囲みます。

’設定値’

最後に値をセットするコードです。

A := B;

末尾は「;(セミコロン)」をつけてください。AにBを代入することができます。

ナッキー:この文法にしたがうと、エディットのTextプロパティは「Edit1.Text」、文字列は「’」で囲んで「’Hello World!’」、値のセットなので「Edit1.Text:=’Hello World!’;」と書けばいいんですね。

自動的に記述している部分も含めて表示しています。コードを確認して、記述します。見やすいように、記述するときには、先頭をちょっと字下げするといいらしい。インデントっていうんだって。

procedure TForm1.Button1Click(Sender: TObject);
begin
  Edit1.Text := 'Hello World!';
end;

end.

じゃあ、コーディングに挑戦。私もこれでプログラマーだわ。あれ、入力していると、途中でポップアップメニューのようなものが表示されます。何ですかこれ?

高橋先生:Edit1の後ろに「.」を入力すると自動的に表示されますね。これは、コード補完という機能で、「Edit1.」に続きそうな文字の候補が現れています。スクロールして探すには多いので、少し限定してみましょう。コード補完はそのままにして「t」と続けます。そうしますと、「t」で始まる候補に絞られるのです。「e」も入力すると「te」で始まる候補になります。

Hide image
20コード補完

図22 コード補完

スクロールして選択対象をダブルクリックするか、キーボードの上下矢印キーで選択対象を変更して[Enter]キーを押すと確定します。

コンポーネント名(例えばEdit1)を探したい場合は、キーボードの[Ctrl+スペース]キーを押すと強制表示します。この機能を使うと、入力ミスが防げます。是非活用してください。

もうひとつのボタンにもコードを記述します。「French」と表示しているボタンを選択して、「OnClick」のイベントハンドラを作成します。コードは、これだっていうけど…

procedure TForm1.Button2Click(Sender: TObject);
begin
  Edit1.Text := ' Bonjour tout le monde !';
end;

end.

まあ、よく分からないけどコードを入力して完成。ツールバーの[実行]ボタンで実行テストしましょう。

Hide image

図23 Say Hello

ナッキー:フォームが表示されず、コードエディタに戻ってしまい、動いていません(涙)。

高橋先生:画面下部の「メッセージ」の中に「Pascalエラー」と表示されていませんか?

Hide image
22コンパイルエラー

図24コンパイルエラー

ナッキー:あります。コード上には赤い帯がかかったようになっています。

高橋先生:赤い帯の付近に、記述間違いがあるようだね。よく見てごらん。

ナッキー:あ、間違ってました。すぐ直します。すみません。今度はちゃんと動きました。どうもありがとうございます。

高橋先生:ナッキーのリクエストがあったので、Button2を押すと「Bonjour」を表示するように、問題を変えてみたんだよ。ハッハッハ。

ナッキー:冗談で言ったのに…。でも、画面を作成するのは楽しかったです。他にはどんなコンポーネントがあるのかな?

高橋先生:では、次回はもう少し色々なコンポーネントを使ってみようね。


ナッキーの「Turbo Delphiはじめて奮戦記」

Prev | Next | Index


次からのサーバー応答:: ETNASC04