イヌでもプログラミング講座

JavaScript プログラミング講座

そろそろ、本格的にプログラムの勉強だ！

はじめに

まず、複数の人様のプログラムソースを比べて眺めていると、同じことをしているはずなのにそれぞれのソースを見ればプログラム処理が全く違うと思ったりしませんか？
最初のうちはみんなそのように思い浮かぶと思います。しかし、プログラムでやってることは実は同じなのです。

やってることは同じなのになぜ違うようにソースが見えるのかは３通り理由があります。

１つは選択する部品です。
目の前にいろんなガラクタを並べられてこれで「ある物」を作りなさいと言われると、人それぞれで、使うガラクタは違っても最後には同じ「ある物」が完成します。プログラムの命令も似たようなものがあれば、使う命令は違っても結局は同じことが実現できますし、同じ命令でも形を少し変えた使い方ができる場合があります。

２つ目はプログラムソースを誰が見てもわかりやすく表現する手段をとるか、プログラムの処理効率を重視する手段をとるかです。
前者はソースが見やすくプログラムの変更が容易で応用性がある反面、無駄な処理があって処理効率が悪く、ソースの行が長くなる欠点があります。
後者は無駄な処理を省いて処理効率が向上してソースの行が短くなる反面、ソースが見づらくプログラムの変更が難しい欠点があります。

３つ目はプログラムを作る人の性格です。プログラミングはその人の性格がそのまま浮き彫りになります。
大きく分ければ神経質(几帳面)な性格、いい加減(自己中)な性格のどちらかです。
神経質な人がプログラムを作れば、あーゆー時、こーゆー時といろいろな操作や処理パターンが脳裏に浮かんで、エラー対策を施してプログラムがでかくなります。いい加減な性格の人がプログラムをつくればプログラムは短いのですが応用が利かずにちょっと変わった操作や環境の変化で動かなくなるか、エラーで爆発したりしてコンピュータもご機嫌を損ねて自己中が感染してしまいます。

この３つのパターンが入り混じると、あたかも違うプログラムのように見えてしまいます。

myDate = new Date();
myHour = myDate.getHours();
myMessage = myMes[myHour];
document.write(myMessage);
のようなプログラムも、慣れてくると
document.write(myMes[(new Date()).getHours()]);
のように1行にまとめることもできます。 (Step.2参照)
前者と後者は全く違うプログラムではなく、全く同じプログラムです。

本講座では手軽な部品を使い、ソースの見易さ重視で、几帳面な性格で各ステップを進めているはずでした。だんだん、いい加減に…（オイオイ

プログラムを作る上で統一性というのは重要です。皆さんのプログラミングスタイルはどのようになりそうかは、ここでなんとなく分かったかと思います。

データの種類　「数値と文字列」

データとして「数値」と「文字列」という２種類があります。これは、なんとなく分かるでしょう。
「１２３」は数値で、「こんにちは」は文字列です。ひとつの文字「こ」を文字とかキャラクターといって、複数の文字の集まり「こんにちは」を文字列とかストリングといっています。

しかし、「１２３」も「ひゃくにじゅうさん」であれば、数値ですが、「いち・に・さん」という数字ですが文字列もあり得ます。では、「１２３」が数値なのか文字列なのか、プログラム(JavaScript)では、どう、区別しているのでしょう。はい、数値はそのまま「１２３」と記入して、文字として扱う場合は、「"１２３"」と、ダブルクォーテーションマークで囲みます。これで JavaScript は、文字列と区別します。ですから、「こんにちは」というダブルクォーテーションマークで囲まない文字列はあり得ませんし、これは数値でもありません。こんな、あり得ない表現や指示を JavaScript に書き込むと「エラー」と軽く、冷たく扱われます。

変数とは

「変数」というからには、何か数字的な数式的な発想をすると思いますが、そんなに難しく考えなくてOKです。単刀直入に「変数」とは、上記の「データ」、つまり、「数値」や「文字列」を格納する「器（うつわ）」です。「格納する」という表現はあまり使いませんが、その他に「保存する」「セットする」「待避する」「代入する」という表現を使います。いずれも同じことです。説明するためのニュアンスや気分で変わります。(^^;

この「データを保存する（入れておく）器」のことを変数といいます。

では、この変数をプログラム的に表現すると、どうなるのでしょうか？
namae 、 Nedan 、seibetsu 、 shumi1、shumi2 。なんでもいいんです。適当に自分で付けたアルファベットと数字の組み合わせが、JavaScript に書いた途端、変数になるのです。この変数にデータを保存して、必要なときにデータを取りだして使う、これが変数の役割です。

適当に変数名を付けるといっても、めちゃくちゃな名前や安易な名前をつけてもダメです。上の例のように、メール送信者の名前を待避させたいのなら namae でよいのですが、漢字氏名、ふりがな、と２種類の名前を待避するために、namae1、namae2 と変数名を付けるのは安易です。途中でどっちが漢字氏名だったかなとわからなくなります。KanjiNamae、Furigana といった付け方がポイントです。あまり長い変数名もタイプ（入力）が面倒くさくなります。

先ほど、「変数名はなんでもいいんです」といいましたが、すみません、実は、なんでもいいというわけでもありません。プログラム（JavaScript）には、データ、変数以外に、想像は付くと思いますが、指示を与える「命令語」があります。

if 、for 、return 、function などなど、この命令語と同じ名前を変数名としたら、JavaScript どころか、作っている人間も訳が分からなくなりますね。そういうことで、命令語は変数名にできません。そして、みなさんの場合、どんな命令語があるかまだ見当も付かないと思います。「私は命令語を全部知っているのだ！」と言っても、JavaScript がバージョンアップして新たに命令語が追加されて、それが今まで使っていた変数名と、かち合ったというケースも考えられます。

ですから、私は変数名の頭に「 my 」を付けて、myNamae、myNedan、mySeibetsu というふうに変数名を表現しています。このように決めごとをしていれば、初心者の方にはもちろん、自分自身も変数名なのか、命令語なのか人目でわかりますよね。
my から続く命令語はないのか？　JavaScript がバージョンアップして、myNamae という命令語が追加されるのでは？・・・そこまで考えたら、脳みそが爆発します。　深く考えすぎると頭が爆発しますが、考えすぎないと２０００年問題のときのように、コンピュータが爆発します。中間をいきましょう！ (^^;

「変数名はなんでもいいことはない」の続きですが、変数名は半角英数字のみです。全角文字はダメです。あと先頭に数字もいけません。また、大文字、小文字は区別します。myNamae と Mynamae は別物の変数です。ご注意を。

変数にデータをセットする

では、変数にどうやってデータをセットするのでしょう？
myNamae = "Tatsuya"
myNedan = 1000
mySeibetsu = "男"
このように、イコールで代入します。プログラム知識がない皆さんは、おそらく学校の数学を思い出したでしょうか？
数学では「よって、myNamae は "Tatsuya" と等しい」という表現を使ったような・・・。

プログラムでは、イコールは、右の値を左に代入するという命令になります。

遠かれ近かれ、myNamae という器に "Tatsuya" というデータをいれたので、等しいと言えば等しいですね。(^^;

右を左に代入する訳ですから、左は器でなければなりません。
100 = 500 のように、データそのものに、データをセットしようなんてすれば、当然、「エラー」と軽くあしらわれます。

myMikan = 100
myNedan = myMikan
このように、変数(myMikan)を変数(myNedan)にセットした場合は、右の変数の中身を、左の変数にセットしますので、myNedan も 100 というデータが入ります。データが移動するわけではありませんので、myMikan も 100 が残っています。コピーした感じですね。

本当の「変数にデータをセットする」文法は。。
var myMikan = 100
このように、「 var 」という変数設定宣言命令!? に続いて記述しますが、これは省略可能です。私の講座では、このように省略可能なものは省略して、できるだけ、不要な専門用語をさけてわかりやすい表現で記述します。さらに、ちょっとした例外は「例外として・・・」とコメントせずに、ズバッと切り捨てます。(^^;

セミコロンの謎

JavaScript では、１つの命令(文法)単位で、セミコロンを付けます。
myMikan = 100;
myNedan = 100 ;
これは、「はい、これで１つの命令だよ、処理してくれ」というマークです。
「おいおい、そんなマークがないと JavaScript は命令の単位が分からないのか？俺なら分かるぜ」と思うでしょうが、JavaScript は、命令を横にダラダラ記述できるのです。
myNamae = "Tatsuya" myMikan = 100 myNedan = 100
訳が分かりますか？　よって、セミコロンで教えてあげます。
myNamae = "Tatsuya"; myMikan = 100; myNedan = 100;

計算をしてみる（足し算、引き算）

計算はコンピュータのお得意芸。計算結果を変数にセットしてみましょう。
５０＋２０＝７０ですね。この７０をいう答えを変数 myTotal に求めるには、お察しの通り、
myTotal = 50 + 20 ;
です。myToTal の中身は７０が入っています。まず、右辺の計算を行って、その結果を左辺に代入します。

myTotal = (50+20) * 2 ;
括弧も算数の考え方と同じです。計算の優先順位です。「＊」は「× (掛け)」のことです。よって、myTotalは、１４０ですね。
myTotal = (50+20) / 2 ;
「／」は「÷(割る)」のことです。答えは、３５ですね。(^^;

もちろん、変数を使って計算もできます。
myApple = 100;
myOrange = 50;
myTotal = (myApple * 5) + (myOrange * 10) ;
リンゴ１個１００円が５個と、ミカン１個５０円が１０個で、myTotal は、1000円ですね。(^^;

計算というと、数値のみと想像しますが、文字列にも「＋」のみ、使えます。
myMessage = "どうも" + "すみません";
文字列「どうも」と「すみません」を足したら、答えはなんでしょう！？
答え ( myMessage )には、"どうもすみません" が入っています。文字列に使う「＋」は「足す」ではなく「くっつける」ということです。ですから、文字列には、引いたり、掛けたり、割ったりできません。足し算だけ使えます。(^^;

myName = "Tatsuya";
myMessage = "こんばんは、" + myName + "さん";
は、myMessage には、"こんばんは、Tatsuyaさん" がセットされます。

また、計算はコンピュータのお得意芸ですから、べき乗とか、余りを求めるのは当然、サイン、コサイン、タンジェント、四捨五入やら、いろいろできます。

もうちょっと、計算について、入り込んでみましょう。
アクセスカウンタのような、１ずつカウント（計算）していく場合は、
myCount = myCount + 1;
となります。myCount に 5000 が入っていた場合は、まず、右辺で 5000+1 を計算してそれを左辺に代入するので、myCount は、5001 となります。
この「１プラスする」計算は、
myCount ++ ;
という省略型計算式が使えます。インクリメントと呼ぶ書式です。この「１プラスする」というのはプログラムを組み始めると結構使うので、省略型ができたのでしょうか !? みなさんも「１プラスする」時が来たら、ぜひ使ってみましょう。タイプが楽ですよ。(^^;
ちなみに、「１マイナスする」ときは、myCount -- ; です。デクリメントといいます。myCount = myCount - 1 ; と同じことです。

さらに、ちなみに、「２ずつプラスする」ときは、myCount += 2 ; という省略型があります。頭が壊れそうになったら、そんなものは忘れて、 myCount = myCount + 2 ; を使いましょう。これでイイのです。いろんなやり方がありすぎて、訳が分からなくなるんですよね。でも、答えはいっしょなのです。 (^^;

判断命令「ｉｆ文」

「 if 」という命令語をマスターしてみましょう

「 if 」とは、直訳して分かるように、「もしも」です。
「もしも、こーだったら、あーしなさい」という命令語です。

書式は
if ( 条件式 ) { 条件が成立した場合の処理 }
です。

例えば、「住所が大分県であれば、送料は５００円です」というプログラムだったら
if ( myAddress == "大分県" ){ myCost = 500 ; }
となります。

変数 myAddress に "大分県" という文字列がセットされていれば、myCost という変数に 500 をセットしました。

条件式の == は等しいかという比較演算子で、この場合、myAddress の内容は "大分県" か ? ( myAddress にセットされている文字列と "大分県" という文字列は等しいか? → myAddress は大分県か？) となり、条件が成立したので隣の { } 内の処理を実行します。

myAddress が "大分県" でなければ、条件不成立なので、{ } 内の処理はしません。また、{ } 内にはいくらでも命令が書けます。

条件式は他に以下の通りです。

A == B	A と B は等しい
A != B	A と B は等しくない
A > B	A は B より大きい
A >= B	A は B 以上
A < B	A は B より小さい
A <= B	A は B 以下

大分県以外は送料１０００円」であれば、
if ( myAddress != "大分県" ) { myCost = 1000 ; }
となります。

では、「大分県は送料５００円で、その他は送料１０００円」という if 文はというと、
if ( myAddress == "大分県" ) { myCost = 500 ; }
if ( myAddress != "大分県" ) { myCost = 1000 ; }
と、2行 if 文を書けばOKなのですが、一般的には下のようにします。

if ( myAddress == "大分県" ) { myCost = 500 ; }
else { myCost = 1000 ; }
else は、直前の if 文の条件が不成立の場合に、else { } 内の処理をします。この場合の else は、myAddress が "大分県" じゃなかったらという意味を持ちます。

では、「大分県は送料５００円、沖縄は２５００円、その他は１０００円」の if 文は、
myCost = 1000;
if ( myAddress == "大分県") { myCost = 500 ; }
if ( myAddress == "沖縄県") { myCost = 2500 ; }
でOKですが、一般的には

if ( myAddress == "大分県") { myCost = 500 ; }
else if ( myAddress == "沖縄県" ) { myCost = 2500 ; }
else { myCost = 1000 ; }
となります。

説明すれば、「大分県なら５００円、大分県じゃなくて沖縄県なら２５００円、大分県でも沖縄県でもなければ１０００円」という if 文パターンです。

「北海道は送料２０００円」を追加するなら、
myCost = 1000 ;
if ( myAddress == "大分県") { myCost = 500 ; }
if ( myAddress == "沖縄県" ) { myCost = 2500 ; }
if ( myAddress == "北海道" ) { myCost = 2000 ; }
でいいのですが、(^^;

if ( myAddress == "大分県") { myCost = 500 ; }
else if ( myAddress == "沖縄県") { myCost = 2500 ; }
else if ( myAddress == "北海道") { myCost = 2000 ; }
else { myCost = 1000 ; }
とします。

else のある if 文と無い if 文は、どう違うかというと、 else が無い if 文の場合は「それ以外」という判断ができないため、あらかじめ、myCost に、「それ以外の送料」１０００円をセットしておいてから、 "大分県" であれば、５００円にセットしなおします。無駄ですよね～、え？そうでもない!?

もうひとつ、else の無い if 文は、上から順次すべて処理して行きます。大分県で条件成立して処理したのに、続いて、沖縄県か？北海道か？とみていきます。else 付きの if 文であれば、上から順次処理しますが、条件一致すれば、それ以降の else if は処理しません。よって、条件一致の可能性が高い順に記述していけば処理も速い? ということです。え？別に急がない!? (^^;

つかれた、工事中！、こうご期待！