まずは動かしてみよう
何はともあれSmall Basicを動かしてみよう。
Small Basicの画面
ワープロなどの普通のアプリケーションを起動するのと同じようにスタートメニューからSmall Basicを起動すると、次のような画面が表示されると思います。
画面は三つの部分からなっています。ここではそれぞれ赤青緑の箱で囲み1〜3の番号をつけてみました。
1の赤い線で囲まれた部分は「ツールバー」または「リボンツールバー」と呼ばれ、これから作るプログラムを実行したり保存したりするために使います。
2の青い線で囲まれた部分は「エディター」と呼ばれ、ここにSmall Basicのプログラムを編集します。
3の緑の線で囲まれた部分にはプログラムをしていく際に便利なヒントやヘルプが表示されます。
実験してみよう
何はともあれ実験してみます。
エディターの中に次のようなプログラムを入力してみましょう。
GraphicsWindow.DrawRectangle(100,100,200,200) GraphicsWindow.DrawEllipse(200,200,150,150)
誤りなく正確に入力できたらツールバーの「実行」と書かれた青い三角のボタンを押してみよう。そうすると入力したプログラムが実行できます。
このプログラムは「長方形」と「円」をウィンドーに描画するプログラムです。一行目が長方形を、二行目が円を描くようにコンピュータに指示するための命令です。
では、三行目に次の行を追加してみてください。
GraphicsWindow.DrawEllipse(100,200,250,250)
下のほうがチョットはみ出してしまってるけど、大きさの違う円がもう一つ描画されました。
プログラミングをするには少しの英単語を覚えないといけないので、中学校一年生には大変かもしれませんがこのプログラムを一つずつ見ていってみましょう。ただその前に幾つか覚えておくとよい規則があるので、それを先に説明します。
Small Basicの中で使われている「単語」では大文字小文字が混じって使われているのに気づいているかもしれないけど、これは実は複数の英単語をくっつけて表現しているのです。理由はもう少しあとで詳しく説明しますが、ここでは「空白」が使えない場所があるので、便宜的に単語と単語の境目を分かりやすく表すために大文字を使っていると考えてくさい。
例えば、
Graphic window ==> GraphicWindow
Draw rectangle ==> DrawRectangle
みたいな感じに単語と単語の間の空白を取って、それだと単語の区切りが分からないので大文字にしているのです。ちなみに辞書を繰ると分かりますがそれぞれの単語の意味は、Graphic(図形)、Window(窓)、Draw(描画する)、Rectangle(長方形)、Ellipse(楕円)というくらいの意味です。
じゃぁ、「.(ピリオド)」はどういう意味をもつのでしょうか？試しに一行目の「GraphicWindow」と「DrawRectangle」の間の「.(ピリオド)」を「,(カンマ)」に変えて実行してみてください。
エディターウィンドウの下が分割されて次のようなエラーメッセージが表示されました。
いくつかのエラーが発見されました...
1,15:認識できないステートメントです。
ここでいう「ステートメント」とは「命令文」くらいの意味合いです。
つまり「.(ピリオド)」はここでは特別な意味をもっていて、この通りに入力しないとパソコンは正しく命令を解釈できないのです。
今日のポイント
コンピュータは人間が指示したとおりに動きます。指示の文法や手順が間違っていると期待した動きをしなかったり、エラーになります。このようなエラーを「バグ」と呼びます。バグを修正しない限りコンピュータはまったく動かないか、期待した動きをしません。
さて、先ほど「,(カンマ)」に変えた「.(ピリオド)」を元に戻しておきましょう。
ところで話が少し戻りますが、先の例題を入力中に度々次のようなポップアップが現れたことに気づいたでしょうか？
これは「インテリセンス」と呼ばれるプログラムの入力を助けるための仕組みです。キーボードから途中まで入力していくとその先を予測し、テキトウな選択肢のリストをリストアップしてきます。そのままキーボードで最後まで単語を打ってもかまいませんが、カーソルキーの上下キーで適当なキーワードをリストから選択してもかまいません。途中まで入力した単語にマッチするキーワードがリストにない場合、インテリセンスは灰色に霧がかかったようになります。この場合は多分それまでに入力した単語に入力ミスがあるので、もう一度よく確認してみましょう。
次に入力したプログラムの適当な箇所、例えば"DrawRectangle"というセンテンスのどこか適当な場所にカーソルを移動してみましょう。そうすると、ウィンドウの右側にメッセージが表示されました。
これはカーソルが現在ある位置にあるSmall Basicの命令などのヘルプやヒントを表示しています。ここをよく読んでいけばSmall Basicのプログラミングをする際にとても有用な情報を得ることができます。
折角なので"DrawRectangle"の意味するところをみてみましょう。
DrawRectangle
選択されたペンを使用をして、画面上に四角形を描きます。
GraphicsWindow.
DrawRectangle(x, y, width, height)
x
四角形の X 座標。y
四角形の Y 座標。width
四角形の横幅。height
四角形の高さ。戻り値
なし
"DrawRectangle"は「()」の中に「,(カンマ)」で区切られた四つの数値を指定する必要があり、それぞれが四角形の左上の隅のX座標、Y座標、四角形の横幅と縦幅を表していることが分かります。これらの四つの数値のことを「パラメータ」とか「引数」と読んだりします。
ところでSmall BasicのXY座標について少し注意が必要です。
Small Basicのグラフィックスで座標を表現する場合は数学で使うXY座標系とは少し異なりY軸が下方向に向いています。つまり、グラフィックウィンドーの左上端がXY座標の原点(0,0)となります。
"DrawEllipse"は楕円を描画する命令です。
DrawEllipse
選択されたペンを使って画面上に楕円を描きます。
GraphicsWindow.
DrawEllipse(x, y, width, height)
x
楕円の X 座標。y
楕円の Y 座標。width
楕円の横幅。height
楕円の高さ。戻り値
なし
楕円は横幅と高さが同じ値の場合「円」になることに注意してください。DrawEllipseで指定するX座標とY座標はチョットややっこしいですが、描画する楕円がぴったり収まる長方形(円の場合は正方形)の左上端の座標です。
試しに次のプログラムを入力して実行してみましょう。DrawRectangleとDrawEllipseのそれぞれ四つのパラメータが同じ値であることに注意してください。
GraphicsWindow.DrawRectangle(100,100,300,200) GraphicsWindow.DrawEllipse(100,100,300,200)
結果は多分このようになるでしょう。
まとめ
今回はここまで。
DrawRectangleやDrawEllipseのパラメータの値を変えるとどうなるか試してみましょう。
今日出てきた用語
プログラミングでは色々な用語が出てきます。その用語が初めて出てきたときには説明をするようにしますが、お父さんが忘れてしまっているな、と思ったときには教えてください。
