Sc283(1) 情報科学応用演習I 資料 (Part 5)　

[解説] 流れ図

プログラムの構造を把握しやすくするために，その「仕事手順」（シナリオ）（参考：プログラミングの流れの3）を図示することは，一般的に広く行われている．特に大きくて複雑なプログラムの場合，図を用いずにプログラムの構造を把握することは困難である．そのような目的の図として，古くから 流れ図 (フローチャート) が広く使われている．

流れ図とは，処理の内容を書いた箱（図形要素）を，実行順に線（または矢印）でつないで表したものである．一般的には，上から下・左から右へ進行するように書くが，必要に応じて任意の方向に矢印を伸ばしても良い．ただし，分岐（後述）の図形要素を除き，すべての図形要素は，入口の線も出口の線も1本ずつで，合計2本の線しか接続してはいけない．実行順序を分岐させるときは，必ず分岐の図形要素を用い，合流する場合は線を合流させる． （箱への入口線を複数にして，箱で合流させてはいけない． → 参考）

処理の内容を書いた箱（図形要素）は，その処理内容に応じて，いくつかの決まった書き方がある．（右図参照）

開始と終了 - 両端が丸い図形要素．流れ図は，必ずこの図形要素で始まり，この図形要素で終わる．
通常の処理 - 四角い箱．通常の様々な処理を記述するのに用いる．
分岐 - 菱形．分岐の条件を記述し，複数の出口（線）を描く．
準備 - 両端が尖った箱．宣言などを記述する場合に用いる．
手入力 - 台形．キーボードによる入力などを記述するのに用いる．
出力 - 下が波の箱．印刷などを記述するのに用いる．
表示 - ブラウン管の形(?)．ディスプレイなどへの表示を記述するのに用いる．
定義済み処理 - 両端が2重線の箱．関数の呼び出しなどを記述するのに用いる．
個人的に使う分には，ややこしければ上3つ（開始と終了・通常の処理・分岐）で済ませても構わない．なお，反復（繰り返し）は分岐を用いて記述する．

図が広がりすぎて途中で切りたいときには 結合子 を用いる．結合子は対で用いられ，線のつながりを表す．対応する結合子は中に同じ番号を書いて表す．
（ページ内）結合子 - 円
他ページ結合子 - 五角形

[解説] 構造化プログラミング

基本原理

プログラムの実行順序の構造は，すべて3つの基本的な処理の構造 (順次処理・分岐処理・反復処理) の組み合わせで表現ができる．(構造化定理; Dijkstra)

段階的詳細化

プログラムの複雑な機能も単純な機能の組み合わせでできていると考え，実現しようとしている(複雑な)機能(部品，モジュール)を，より単純な機能(部品，モジュール)に分解していくことで，プログラムを段階的にだんだん詳細に設計していく設計手法を 段階的詳細化 と呼ぶ．

この考え方に先ほどの構造化の基本原理を組み合わせ， 3つの基本的な構造を当てはめながら分解していくのが 構造化プログラミング である．流れ図で考えると，はじめはプログラム全体を一つの (四角の) 箱と考え，その箱を段階的に，順次・分岐・反復のいずれか構造で置き換えていくことで，流れ図を作り上げていくことに相当する． (参考：「段階的詳細化のパターン」（次項）．また，次のタスクの流れ図例も見よ)

十分に細分化され，分解された各々の処理が十分に単純になれば，その単純な処理を コーディング (プログラムのコードを記述すること) し，分解の逆をたどってプログラム全体を組み上げていくことができる．

このような手法を取ることにより，プログラムの構造が整理されて把握しやすくなり，また，読みやすいプログラムを作成することができる．

段階的詳細化のパターン

詳細化前 ⇒ 詳細化後 ⇒ JavaScriptコードパターン

[課題] 流れ図の作成

課題番号：	5-1
課題名：	流れ図の作成
提出方法：	印刷して提出
締切：	次回の演習の開始時刻まで

概要

流れ図の解説を参照して，何らかの「手順」を流れ図を使って表してみる．

内容詳細

何の手順であるかを必ず明記し，その手順を表す流れ図を作成する（課題1-1「手順の記述」で記述した手順を対象としてもよい．）．流れ図の図形要素（箱）の 4～8 は，2（四角）で代用してよい．また，必要に応じて結合子（9, 10）を用いてもよい．

なお，段階的詳細化の過程は必ずしも記述しなくてもよい．ページ数は特に限定しない．

報告について

「課題レポート提出に関する諸注意（プリントアウトして提出する場合）」に従って，レポートとして提出する．次回の演習の開始時に回収するので用意しておくこと．

レポートの作成の手段は任意とするが，A4サイズを縦に用い，必ず表紙を付けて左肩を綴じること．（Word，Visio，Powerpoint，Paint，手書きなど，任意の作成手段でよい）

[タスク] 計算練習プログラム (1)

概要

1～10 の自然数の足し算の問題を出題して，入力された解答をチェックするプログラムを作成する．問題は10問出題するものとする．ただし，

問題は，乱数 (Math.random()) を用いてランダムに生成する．
問題は prompt(…) を用いて，下図のように出題し，答えを入力させる．
入力した解答の正誤により，「正解です」か「違います」のいずれかを alert(…) を使って表示する．

ファイル名は js05-1.html とする．

ヒント

10回の繰り返しを数えるための変数 i，問題となる2つの整数のための変数 n, m，正解を保持するための変数 sol，入力した答えを保持するための変数 ans を用意しよう．
Math.random() が生成する乱数は0以上1未満の小数なので，これを整数に変えるためには，切り捨ての関数 Math.floor(…) を併用すると良い．
0 ～ k-1 の整数の乱数を生成するには， Math.floor(Math.random() * k) とすればよい (なぜ，これでよいか考えてみよう)．また，出題は 1～10 の自然数なので， Math.floor(Math.random() * 10) のままでは 0～9 となって適切ではない．どうすればよいか考えてみよ．
流れ図を書いてみよう (例)

雛形を以下に示す．

<!DOCTYPE html>
<title>JavaScript Sample 5-1</title>
<body>
<script type="text/javascript">
<!--
// 変数  i:カウント，n,m:問題，sol:正解，ans:解答
var i, n, m, sol, ans;

// 計算練習10回
// ここは自分で考えること

// -->
</script>
</body>

備考

例を以下に示す．リンクをクリックすれば実行できる．(別ウィンドウで実行される)

js05-1a.html （例のコードと流れ図）

[課題] 計算練習プログラムの拡張

課題番号：	5-2，5-3，5-4（，5-5，5-6）
課題名：	計算練習プログラムの拡張 a ～ c （d，e はオプション）
ファイル名：	task05-2.html，task05-3.html，task05-4.html (，task05-5.html，task05-6.html)
締切：	次々回の演習日の直前の日曜日，18:00まで

内容

先の計算練習プログラム (1) に対して，以下の各々の変更や拡張を実現するにはどのようにすればよいか考え，実際に，計算練習プログラムを書き直す．

（課題5-2） alert(…) の代わりに document.writeln(…) を用いて，最終的に以下のような画面を得るようにする．(task05-2.html)
```
第1問 3+4=? 解答 7 正解です
第2問 2+10=? 解答 20 違います 正解は 12 です
…
```
（課題5-3）上に加え，更に，最後に正解と不正解の個数を画面に表示するようにする．(task05-3.html)
（課題5-4）上2項とは別に，10個の各問題について，解答が正解だったときは何もせず，不正解だったときには，その旨表示して，正解するまで同じ問題を繰り返すようにする．(task05-4.html)
余力があれば，以下のチャレンジ課題（オプション）を遂行してもよい．
（課題5-5）足し算ではなく，引き算の練習プログラムにする．その際，正解が正の数になるように問題を作成すること．(task05-5.html)
（課題5-6）足し算，引き算がランダムに混在するような練習プログラムにする．引き算の場合は，やはり正解が正の数になるようにすること．(task05-6.html)

報告について

プログラムの作成時には，元の計算練習プログラム (1) からの変更箇所について，プログラム中にその変更内容を説明するコメントを書き入れることを強く推奨する．

Moodle の各々の課題ページから各々のプログラムのファイルを提出すること．ファイル名はすべて半角文字とする．

ヒント

こちらのページ（http://usir.kobe-c.ac.jp/users/miura/Sc283/part05hint.swf）を参照．