プログラミング講座 ~JavaScript編~

2006-09-05 22:14:52 | | このエントリーを含むはてなブックマーク | Tag: javascript パソコン プログラミング 講座

学校で友達と話すと、時々「プログラミング出来るってすごいよね」的な話になる。「どこが凄いと思うの?」と聞き返すと、「あんなもの(アンケートを集計)作れたりするし」と。「多分、誰でも書けると思うよ」と言えば、「出来たとしてもやらないもん」だからねぇ。

原因はきっと、開発する環境がないことだと思う。開発する環境があれば、おもしろ半分で書くだろうし(私だけ?)。というわけで、誰にでも出来るプログラミング講座(何)。使用する言語は JavaScript。

目的

  • 簡単にプログラムが書けるよ、と言いたい
  • プログラムを書く際の考え方が重要で、書き方はこの際に問わない
  • 肝心のプログラムの内容は「素数の列挙」

準備

  • メモ帳を用意する
  • ファイル名を "prime.html" にして保存する
  • 内容は以下のものをコピペする

テンプレート

<html>
<head>
<title>素数を並べる</title>
</head>
<body>
<script type="text/javascript">
// Edit here!
document.write("Hello, world!");
// Above this line
</script>
</body>
</html>

このファイルを開くと Hello, world! とだけ表示されるページが出来上がる。

素数ってなにさ?

定番、Wikipedia の定義です。

素数(そすう)とは、1とその数自身以外に正の約数を持たない(つまり1とその数以外のどんな自然数によっても割り切れない)、1 より大きな自然数のことである。

素数 - Wikipedia

人間はどうやって考える?

私の場合ですが、次の手順で考えます。

  1. 偶数か奇数かを見る(2 以外の偶数は、2 を約数として持つので素数じゃない)
  2. 3, 5, 7, 11, ... と、小さな素数で調べる数字まで順番に割っていく

つまり、何かで割れたら素数じゃない、という定義まんまの計算をしているわけです。

コンピュータにやらせよう

割り算なんて面倒ですよね。というわけで、先ほどのテキストファイルを弄って素数を表示させて見ましょう。編集するのは、「// Edit here!」と「// Above this line」の間になります。

素数を表示する(1)

// Edit here!
var i = 2;
while (i < 100) {
  var j = 2;
  var isPrime = true;
  while (j < i) {
    if (i % j == 0) {
      isPrime = false;
      break;
    }
    j = j + 1;
  }
  if (isPrime) {
    document.write(i + "<br />");
  }
  i++;
}
// Above this line

簡単に流れだけ書いておきます。詳しくはプログラムの意味にあります。

  1. 調べる数(i)が 2 から 100 までの間、これ以下の処理を繰り返す
  2. 割ってみる数(j)に 2 を入れ、isPrime に true を入れる
  3. 割ってみる数は調べる数より小さい間、割ってみるで割り切れるか調べる
  4. 割り切れたら isPrime に false を入れて、素数ではないことを示す
  5. isPrime が true のままなら調べた数を表示する
  6. 調べる数を 1 大きくし、先頭へもどる

プログラムを変えてみる

このプログラムは 2 から 100 までの素数を表示します。……ということは、10000 までの素数を表示したかったらどこを変えれば良いか、わかりますね。

でも単純に書き換えるとブラウザが止まってしまうくらい、時間がかかります。これは調べる数より 1 小さい数まで割り続けて、どれ一つとして割り切れる数字が無い場合に素数として判定しているところに原因があります。11 などの小さい数なら 9 回割り算*1をすれば判定できますが、9973 なら 9971 回割り算をしなければなりません。そうするととても時間がかかってしまいます。

ここで数学的な知識を使います。素数には“自身の平方根以下の数で割りきれなければ素数ではない”という性質もあるので、5 行目を下のように変えるととても早くなります。

素数を表示する(2)

  while (j <= Math.sqrt(i)) {

一般に無駄な処理を無くし、プログラムの処理を速くすることを“最適化”と言ったりします。

この後は……

一つプログラムを書くことが出来たら、色々と弄ってみます。表示の仕方を変えてみたり、上にも書きましたが 10000 までの素数を表示してみたり、「たぶん、こうするには、ここを変えれば良いのかな」という実験を繰り返すことで覚えていくのが早いと思います。

でもこのプログラムは“素数を表示する”プログラムなので、素数を表示する以外に使い道はないと思います。なので、インターネットを使って色々なプログラムを読み、必要ならリファレンスなどを読んで習得していくと、色々なプログラムを書けるようになるんじゃないかと思います。

そしてプログラムを書く際には、目的(どういう風な処理をさせたいのか)を達成するために、どのような手順が必要なのかを考える部分*2が大切であると覚えておいて貰えると良いかと思います。

プログラムの意味

1 行目、var i = 2; というのが出てきます。これは“i という変数*3に 2 を入れる”という意味を表しています。これは 2 から素数の判定を始めるので、i に 2 を入れています。i を選んだ理由は特別無い*4ので、apple でも sekido でも構いません。

2 行目、while (i < 100) { となっています。{ は 16 行目の } と対応していて、“囲まれている部分を変数 i が 100 未満の時に繰り返す”という意味になります。

3 行目、var j = 2; となっています。1 行目と同様、変数 j に 2 を入れています。

4 行目、var isPrime = true;。変数 isPrime に true を入れています。true は特別な意味を持っていて、Yes/No の Yes みたいな意味を持っています。これは変数 i が素数か否かを覚えておく変数です。

5 行目、while (j < i) {。2 行目と同じように読めば、“j が i より小さい間、繰り返す”ですね。

6 行目、if (i % j == 0) {。if は丸括弧の中(この場合は i % j == 0)が成立するときに、続く中括弧の中を実行します。丸括弧の中は“i を j で割った余りが 0 である”を意味しますので、i が j で割り切れたとき(素数じゃないとき)に中括弧の中が実行されます。

7 行目、isPrime = false;。ここは素数じゃないときに実行されるので、“素数ではない”と覚えておく必要があります。そのため、isPrime という変数に false を入れておきます。

8 行目、break;。5 行目の while に続く中括弧を抜けるおまじないです。無くても動作には支障有りません。

10 行目、j = j + 1;。プログラム特有の書き方で、右の結果を左に入れます。この場合は j の値に 1 を足して、また j に入れるので、元の値に 1 を加える処理をします。

12 行目、if (isPrime) {。isPrime が true の時に、続く中括弧が実行されます。

13 行目、document.write(i + "<br />");。i の値を出力して、改行用の HTML タグである <br /> を出力します。

15 行目、i++;。10 行目の簡略版で、i の値を 1 大きくします。

  • 注1: 2, 3, ..., 9, 10。
  • 注2: “アルゴリズム”ってやつです。一歩進んで前ならえ、一歩進んで……。
  • 注3: プログラムではあらゆるものを変数という“箱”に入れて扱います。
  • 注4: プログラムを書く上で、変数を連続して変化させる時は i や j を用いる事が多いため、私は i を選びました。

Related Entries

There is not related articles.

Trackbacks

Trackback URI: http://blog.c--v.net/trackback/2006/09/05/2

There is no trackback.

Comments

There is no comment.

Name
URI (Homepage or Email)
Body