JavaScript講座
(メールマガジン編)

8/18日発行 ヨッシーの”ホームページを作ろう!(JavaScript編)”★補足U★

基本的な書き方

このメールマガジンもだんだんとプログラムを作るようになってきましたが、
今回は基本的なプログラムの書き方についてやってみたいと思います。
プログラムを書くにあたって大切なことをやるのを忘れていました。(笑)
では、今回もがんばっていきましょう。

★ 記号について ★

まず質問にあった";""( )""{ }"についてやってみよう。

";"について

コンピューターはそんなに賢くないので、僕らがすべて教えてあげなければならない。
プログラムというのもある意味では普通の文なんだ。
つまり、コンピューターにとってプログラムは文章を読んでいるようなものなんだね。
文章には句点”、”や読点”。”があるよね。
僕らは本を読むときにその句読点があればとても読みやすいよね。
(僕は文章を書くのが下手なので、句読点の位置とかたぶんめちゃくちゃですね・・・・・。本をたくさん読んでいる人にとったらこのメールマガジンはすごく読みにくいかもしれない。我慢してくださいね。スイマセン・・・。)
そして、コンピューターも同じようにどこで文が切れているかを教えてあげないといけないんだ。
僕らの場合は文章から句読点が抜けていてもある程度自分で解釈して読むことができるよね。
でも、さっきも言ったようにコンピューターはそんなに賢くないから、きちんと教えてあげないといけないんだ。
そして、その役割をするのが";"という記号なんだ。
じゃあ、次のプログラムを見てみよう。


a=10
b=20
c=30


たとえばこれは人間が見たら三つは独立して違う命令だってわかるよね。
けれどコンピューターにとったらこれら3つは連続しているように解釈してしまうんだ。
(プログラムによってはこれで大丈夫なのものもあります。今回はJavaScriptについて。)


<コンピューターにはこのように見える(?)>
a=10b=20c=30


だから、どこで文が切れているかわからないんだね。
そこで、コンピューターにどこで文が切れているのかをわからせるために";"という記号を使うんだ。
つまり、さっきのプログラムをきちんとコンピューターにわからせるには、


a=10;
b=20;
c=30;


とすればいいよね。
このようにしてそれぞれ文が終わったら終わりのマーク";"をつけてやらないといけないんだ。
それは逆に考えると、";"さえつけていれば、


a=10;b=20;c=30


というふうに、1行で書いてもOKということなんだよ。
行は一行だけど";"があるので、コンピューターにはどこからどこが1つの文かがわかるようになっているね。

"( )","{ }"について

次はカッコ"( )","{ }"についてだね。
"( )"は基本的に関数の引数や計算の時に使うんだ。
"{ }"は基本的に複数の命令をまとめるカッコだと思っておいてね。
これはこれからもいろいろな命令についてやっていくと思うけど、そのときそのときに命令と一緒に書いておくのでそれを丸暗記(?)していこう。
慣れてきたらわかるようになってくるからね。
これも、またもう一度以前のを見てみようね。
詳しい説明は難しいのでしないけど、いろいろなプログラムを見ていくと自然にわかってくるようになるからね。
(プログラミングは慣れが大事)

 

★ スタイルについて ★

次はプログラムのスタイルについてやってみよう。
いままでのメールマガジンを見てもわかると思うけどプログラムは全部左詰めじゃなく、いくつか空白が空いているね。
これを字下げと言うんだ。
これはそうしなくちゃいけないというわけじゃなく、そうしたほうが見やすいということだけなんだ。
例えば前回のプログラム、


<HEAD>
<SCRIPT language="JavaScript">
    function tasu2(a,b){
        c=a+b;
        return c;
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SCRIPT language="JavaScript">
    document.write(tasu2(3,10));
</SCRIPT>
</FORM>
</BODY>


これはところどころ右に少しずらして書いているね。
これは、見やすくするためだけであってプログラムには全く関係ないんだ。
だから、面倒臭いひとは無理に空白を作らなくてもすべて左に詰めてもいいんだよ。
その時は次のようになるんだ。


<HEAD>
<SCRIPT language="JavaScript">
function tasu2(a,b){
c=a+b;
return c;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SCRIPT language="JavaScript">
document.write(tasu2(3,10));
</SCRIPT>
</FORM>
</BODY>


これでもプログラムは動くよ、でも少し見にくいよね。
今回の例では少しわかりにくいかもしれないけど、大きなプログラムになってくると、この字下げという作業がとても重要になってくるんだ。
今のうちから少しずつ意識して書いていくようにしよう。
(※基本的に、字下げをするのは{}でくくられたプログラムの場合が多い。)


back.gif (1116 バイト) next.gif (705 バイト) top.gif (583 バイト)