更新

例題で学ぶ JavaScriptプログラミング(応用編)

小山智史

(入門編)
1. 準備
2. JavaScript言語とプログラムの実行
3. 簡単なJavaScriptプログラム
4. データの型と変数 5. 演算
6. 入出力
7. 関数
8. 条件分岐: if文
9. 繰り返し: while文とfor文
10. 配列と連想配列
11. 関数: 再帰による関数定義
12. 文字列の処理と正規表現
13. 乱数の利用
付録A. JavaScript言語のまとめ

(応用編)
14. BMI早見表
15. 文書整形
16. 順序機械: 自動販売機
17. 教材分析
18. ゲームとパズル
19. 対話型学習ソフト

 基礎編ではすべてliteracy.htmlのWebページでプログラムを動作させました。この応用編で取り上げるプログラムはそれぞれ別のHTMLファイルにしてliteracy.htmlからリンクすることにしますので、準備してください。

14. BMI早見表

 基礎編で度々登場したBMIですが、ここではBMIの早見表を作ってみます。表示内容を書き換えることはないので、document.writeを使って表示します。

 次のようにbmitable.htmlを作り、literacy.htmlからリンクをクリックして表示してください。

 以下のような早見表が表示されます。

 早見表を2cm/2kg刻みにし、値によって文字の表示色を変えると以下のようになります。

(練習) BMIの早見表のプログラムを参考に、各自、関心のある事柄ついて早見表を作りなさい。


15. 文書整形

15.1 データの一覧表示

 sumo.js の内容を一覧表示してみます。

 次のように表示されます。

15.2 定形文書の作成

 ワープロソフトの機能のひとつに「差し込み印刷」があります。定型文書の宛名の部分に住所録データから必要項目を当てはめるというような機能です。

 ここでは、下記左のテキストエリアに「雛形」を用意します。ボタンを押すと、右のテキストエリアに結果が表示されます。

 ボタンを押すと、左のテキストエリアの内容を template という変数にしまい、#1 ~ #4 をそれぞれ名前、出身地、身長、体重に置き換えて右のテキストエリアに表示されます。

(練習) 上記の定型文に、BMIの値も表示させるようにしなさい。

15.3 定型メールの受信処理

 イベントの参加申し込みなど、最近はWebのフォーム入力で行うことがほとんどかもしれませんが、メールが使われる場合もあります。

 メールで以下のような案内があったとします。

 これに対して届いた返信メールを以下のようにテキストエリアに貼り付けます。

 ボタンを押すと「%%...%%:」を調べて、内容がそれぞれの箇所に表示されます。

 実際には記載事項に不備がないかや、二重登録でないかなど、もっと詳細にチェックします。


16. 順序機械: 自動販売機

 150円のジュース自動販売機のプログラムを作りましょう。お金は50円と100円が使えるものとします。自動販売機の内部状態としては、0円状態、50円状態、100円状態の3つが考えられます。出力はジュースまたはジュースとおつり(50円)です。この自動販売機の動作は下の図のように表すことができ、これを状態遷移図といいます。矢印は状態の遷移を表し、その矢印に付随して入力と出力を記載しています。このような機械を順序機械(または有限状態機械)といいます。


図 自動販売機の状態遷移図

 状態遷移関数および出力関数は以下のような表で表すことができ、表中には「次の状態/出力」が記載されています。この表を状態遷移表といいます。

表 状態遷移表(表中は「次の状態/出力」)
  入力
0円50円100円
現在の状態 0円0円/なし50円/なし100円/なし
50円 50円/なし100円/なし0円/ジュース
100円 100円/なし0円/ジュース0円/ジュース・おつり

 状態遷移表の状態遷移関数と出力関数を連想配列 S で記述し、以下のように順序機械のプログラムを書くことができます。

 このプログラムは以下のように動作します。

 プログラム中、S={...} の箇所は、状態遷移表を S[現在の状態][入力][次の状態,出力] のように表しています。例えば S["0円"]["50円"][0] は"0円"状態で"50円"の入力があった時の次の状態"50円"、S["0円"]["50円"][1] はその時の出力"なし"、...となっています。

 表示を工夫すると以下のようになります。

ジュース自動販売機


 

17. 教材分析

17.1 頻出単語

 英文テキストを調べ、大小文字の区別なしに、3回以上現れる単語を調べるプログラムです。入力されたテキストを tolower() で大文字を全部小文字に変換し、replace() でアルファベット以外の数字や記号を除きます。単語のカウントを行い、集計終了後に3回以上現れた単語を表示します。

以下の入力欄に英文テキストを入力し、ボタンを押してみてください。(デフォルトの文章はこちらから引用しました)

17.2 パターン検索

 以下は、入力した正規表現にマッチする単語を探して表示するプログラムです。

「 ^..t 」は「3文字目が t の単語を探しなさい」という意味です。「 e$ 」とすれば「最後が e で終わる単語」、「 ^t.*t$ 」とすれば「 t で始まって t で終わる単語」ということになります。

17.3 可読性(読みやすさ)

 ARI Readability Score は次式で与えられます(L.L.Cherry, W.Vesterman:``Writing Tools - The STYLE and DICTION Programs'',UNIX Document, USD-32.)。

英語文書が与えられたとき、以下のプログラムは、段落や文章や単語の数、1段落の平均文数、1文の平均単語数、1単語の平均文字数、そしてARIスコアを計算し、表示します。

以下の入力欄に英文テキストを入力し、ボタンを押してみてください。

(練習) 日本語文書を解析し、40文字以上「、」が現れない文、および80文字以上「。」が現れない文を抽出するプログラムを作りなさい。

(練習) 日本語の可読性の尺度として、次式が提案されている。例えば、小学3年レベルの文章ならばGが3、中学3年レベルの文章ならばGが9と評価される。(情報処理学会HI37-7, 1991)

この式に基づき日本語文書を解析し、可読性を表示するプログラムを作りなさい。

17.4 百人一首

 hyaku.js というファイルには「百人一首の上句、下句、作者」のデータが以下のように入っています。テキストエディタでこのファイルを開いて中を確認してください。

 次のプログラムは、上句と下句と作者のそれぞれにキーワードを指定して、該当する句を表示するものです。例示では上句の先頭文字が「春夏秋冬」のいずれかで、作者に「天皇」を含む句を指示しています。

 ボタンを押してみてください。

(練習) 百人一首について、別の点に着目して調べなさい。

17.5 テキスト生成

 prob27.js にはスペース(sp)を含むアルファベット27文字の出現確率が以下のように入っています(確率データは R.I.Damper, 1984)。テキストエディタでこのファイルを開いて中を確認してください。

 以下のプログラムはこの確率でランダムに100文字のテキストを生成するものです。

 ボタンを押してみてください。英文らしくはありませんが...。


18. ゲームとパズル

 ゲームとパズルのプログラムを取り上げます。どちらもコンピュータが問題を解いているように見えるかもしれませんが、解法はプログラムとして与えていることに注意してください。

18.1 石取りゲーム

 10個の石があります。交互に1~3個の石を取り、最後に石を取ったら負けというゲームです(奥村晴彦「C言語による最新アルゴリズム事典(技術評論社)」)。

 このプログラムは次のようになっています。

 コンピュータの戦略は以下の箇所にあります。

相手が1個取ったらコンピュータは3個...というように4個ずつ確実に減らすことができるので、4の倍数+1個残せれば勝ちが決まります。それがだめなら1個取ります。

(練習) 石の数(n)や、取ることができる最大個数(m)を変えてみなさい。そして、「あなた」が勝つことができるかどうか試みなさい。

18.2 ハノイの塔

 3本の棒A,B,Cがあり、Aの棒にn枚(以下の例では4枚)の円盤が積み重ねられています。これらの円盤をBの棒に移すにはどのような手順で移動したらいいかという問題です。ただし、円盤は1度に1枚ずつ移動し、小さな円盤の上に大きな円盤を重ねることはできません。

図8 ハノイの塔

 以下のプログラムは、どのように移動すればよいかを表示します。

 プロクラムはとても短いもので、関数 hanoi() の中では、hanoi() を再帰的に呼び出しています。from の n-1 枚の円盤をとりあえず buf に移し、次に from に残った1枚の円盤を to に移し、buf に移した n-1 枚の円盤を to に戻します。このように「より簡単な問題に分解して問題を解決する方法」を分割統治といいます。

 この例のように「自分の考え方が正しいかどうか」を実際にプログラムを作って検証するということはプログラミングの重要な利用法のひとつです。

円盤の表示を工夫したプログラム...


19. 対話型学習ソフト

19.1 記述式クイズ

 下記は「対の関係」を記述式で問うプログラムです。データを変えれば、「日本語を示し、英単語を問う問題」、「英単語を示し、逆の意味の英単語を問う問題」、「漢字を示し、読みを問う問題」などとなります。

(練習) プログラムを変更し、全問終了後に正答数を表示するようにしなさい。

19.2 穴埋め問題

 プログラムは以下のようになっています。

 誤答時にヒントを出すなど、いくつかのパターンのクイズを作成できるJavaScriptプログラムがこちらにあります。

(練習) プログラムを変更し、データの構成を、「問題,解答1,解答2,...」のようにし、2つ以上の解答を許すようにしなさい。


koyama88@cameo.plala.or.jp