12:はじめてのプログラム

◆PROCESSINGで始めるゲーム作りとコンピュータ

village 12:はじめてのプログラム

今日の話題

 

05:はじめてのプログラム

それでは、いよいよ初めてのプログラミングに挑戦してみましょう。

といっても、身構える必要はありませんよ。剣を初めて握る人に、いきなり高度な技を出せなんて無茶は言いませんので(笑)。

プログラミングの世界では、初めて何かのプログラミング言語に挑戦する際に、伝統となっている行事(通過儀礼)があります。それが「Hello World」です。

今から学習しようとしている言語(今回ならPROCESSING)を使って、画面に「Hello World」と表示させるだけのプログラムを作成します。

HelloWorld
(画像URL:photo-AC 様:acworksさん)

なぜこれが伝統行事になっているのかは良くわかりません。が、WEBを検索すると、様々なプログラミング言語でHello Worldを表示させる事が話題になっています。

例えばWikiペディアには100以上の言語でHello Worldを表示させる方法が掲載されています。興味がある方は、覗いてみると面白いかもしれません。※

※2017/12現在、ページが消失しています。

プログラミング言語によっては、たった1行の文字列を画面に表示するだけなのに、非常に複雑なことをしなければいけないものもあります。でも安心して下さい。PROCESSINGではとても簡単なんです。

まずは標準エディタを起動します。

次にプログラミング領域に、以下の箇条書きを参考にしてプログラムを入力して下さい。

  • 入力はすべて半角文字になります
  • 大文字小文字の違いにも注意してください。入力は正確に!
  • 文章の最後にセミコロン(;)を記述するのも忘れないでください

入力するプログラムは、以下の通りです。

pro3_hello_world1
出来たでしょうか?。

入力できたら、左上にある実行ボタンを押してみましょう。成功すると標準エディタの下にあるコンソール領域に”Hello World”と表示される筈です。
pro3_hello_world2
おめでとうございます!。たった1行だけですが、これでも立派なプログラムの完成です。
下記は、p5.js で同じように見える処理を実行したものです


もしも不注意で入力ミスをしてしまった場合は、エラーメッセージ領域にエラー内容が表示されます。そんな場合は、慌てずにエラー内容を見て修正しましょう。

ありがちなエラーをいくつかピックアップしてみます。

 

・Error on “Invalid Character”

pro3_hello_world_err1

print(  “…”  );  の最後につけるセミコロン(;)や、丸括弧()、ダブルクォーテーション(”)を、半角文字ではなく全角文字で書いた場合などに表示されます。今回の命令は、すべて半角文字で入力します。

 

・Missing a semicolon “;”

pro3_hello_world_err2

print(  …  );  の最後にセミコロン(;)を付け忘れると表示されます。PROCESSINGでは、1つの命令の最後に必ずセミコロンを書くのが約束となっています。

 

・The function “plint(String)” does not exist

pro3_hello_world_err4

print と書くところを plint などと間違えて記述すると表示されます。「plint なんて命令は知らないよ!」と警告されているんですね。

この他にも幾つかエラーが表示されることがあります。もしもエラーメッセージが表示されたら、その都度メッセージを良く見てプログラムを修正してください。

 

06:Hello Worldの解説

では、作成したプログラムについて解説します。

HelloWorld_dtl
今回入力したプログラムは、以下の3つの部分から構成されています。

  • 命令
  • 引数(パラメータ)
  • 終端記号

・終端記号

終端記号は「命令の終わり」を示す記号です。1つの命令の最後に必ず1つ記述する必要があります。日本語文章のマル記号(。)や英文のピリオド(.)みたいなものです。

HelloWorld_dtl3終端記号に達するまでは、途中で改行することも可能です。例えば今回入力したプログラムは

と、5行にわけて入力する事も可能です(普通は、そんなに改行しませんけどね・・・)。ただし「命令」や「文字列の途中」では改行できませんので注意してください。

 

・命令

命令は、あなたやPROCESSINGが用意する部分です。命令により、様々な機能を実現します。今回の print という命令は、あらかじめPROCESSINGが用意しているものになります。

命令には、多くの場合「引数(ひきすう)」と呼ばれる値を与えます。引数のことをパラメータと呼ぶこともあります。

会社に出かけるお父さん(命令)に、愛情がこもったお弁当(引数)を与えるようなものですね(笑)。そのお陰で、お父さんは会社でいろいろな仕事をこなすことが可能です。

HelloWorld_dtl2
(画像URL:illust-AC 様:そげ さん、みそさん、K_handsさん)

今回利用する print 命令は、「コンソール領域に、引数で与えた文字列を表示する」という機能を提供してくれるものです。

 

・引数(ひきすう)

“(” と “)” で囲った部分が引数です。今回の例では、ダブルクォーテーション(”)で囲った Hello World という文字列が引数そのものになります。

少しややこしいのですが、多くのプログラミング言語では「文字」と「文字列」を明確に区別します。

文字とは1つの字の事です。「a」とか「ア」とか「愛」とかですね。そして、文字が2つ以上つながったものを文字列といいます。「ab」とか「アサガオ」とか「愛してる」などです。

PROCESSINGでは文字はシングルクォーテーション(’)で囲み、文字列はダブルクォーテーション(”)で囲むルールとなっています。

文字と文字列だから今回利用した print 命令には「文字列」を与えている事になります。命令によって、必要な引数の数や、与えることができる引数の型が異なります。

もちろんあなたが作った命令であれば、どんな型の引数をいくつ与えるのかは、自由に決めることができます。

print 命令は、引数で渡された Hello World という文字列を、コンソール領域に表示したわけです。たった1行のプログラムですが、この1行の意味を理解するだけでも、今後のプログラミングに必要な大切な知識を得ることができます。

 

07:プログラムの保存と再開

・保存するには

それでは、たった1行のプログラムですが、記念すべき最初のプログラムとして保存しておきましょう。

保存するには、ファイルメニューから「保存」、または「名前を付けて保存」を選択します。選択すると以下のようなダイアログボックスが開くので「保存」ボタンを押します。

pro3_edit_save

ファイル名は初期状態で、PROCESSINGが自動的につけてくれます。変えたい場合はファイル名の箇所に好きな名前を入力してください。

保存すると、「スケッチブックの場所」で指定した箇所に、先ほど入力したファイル名と同じフォルダが作成されます。

スケッチブックの場所を指定する方法は「10:PROCESSINGを手に入れよう」記事を参照してください。

pro3_edit_save2
そのフォルダ配下に、ファイル名.pde というファイルができます(下記ではsketch_160425a.pde)。これが保存されたプログラムファイルです。

pro3_edit_save3
PROCESSINGでは、保存したプログラムファイルの拡張子が pde となります。

 

・再開するには

保存したファイルを再び標準エディタに呼び出してみましょう。まずは標準エディタを右上の×ボタンで終了させます。

今保存したファイルを読み込むには2通りの方法があります。

1つめは、保存された pde ファイルの場所を開き、pdeファイルをマウスでダブルクリックする事です。これが一番簡単です(笑)。

2つめの方法はPROCESSINGの標準エディタを起動後に、ファイルメニューから「開く」を選択する方法です。

開くを選択すると下記のようなダイアログボックスが開きます。

pro3_edit_load
保存したファイル名と同じフォルダをダブルクリックすると、その配下にある pde ファイルが表示されます。

pro3_edit_load2
pdeファイルを選択し開くボタンを押すと、保存したプログラムファイルが、標準エディタに呼び出されます。

ここで1つ気になることがあるかと思います。

それは、「スケッチブックの場所」で指定した箇所に、「examples」や「libraries」などの身に覚えがないフォルダが出来上がっている事です(汗)。

でも安心して下さい。これらはPROCESSINGが自動的に作成するフォルダなのです。ですので、今は特に気にする必要はありません。

Forest今日の言葉

・引数

命令に与える値のこと。パラメータとも呼びます。値を与えない(つまり引数がない)命令もあります。

・文字

1つの字のことです。「あ」とか「か」ですね。

・文字列

複数の文字が集まったものです。「あい」、「かき」などです。文章も文字列と言えます。

 

 今日のまとめ

  • 命令には引数を与える
  • 文字と文字列は区別して使う

13:プログラムの仕組みへ進む
11:標準エディタの使い方を覚えように戻る
目次へ戻る


本ページで利用している特に参照元記載のないアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。