INIAD

INIAD｜東洋大学情報連携学部

© 2024 INIAD

プログラミング問題を解いてみよう

はじめに

東洋大学情報連携学部(INIAD)ではAO型推薦入試（ジャンル・セレクト型）の【ジャンルA.コンピュータ・サイエンス型】の選択肢の一つとして、指定されたプログラムを改良・拡張するという課題があります。この課題では、ウェブブラウザで動くHTML/CSS/JavaScriptによるアプリケーションを対象としていますが、C/C++やJava, Python, Ruby, ML, Haskellなどの他のプログラミング言語を使っている皆さん、新たにプログラミングにチャレンジしてみたい皆さんが課題にチャレンジできるよう、サンプルの問題を例に問題の解き方(の一例)を説明します。

サンプル課題

サンプル問題をダウンロード

問題の解き方(例)

まず、このサンプル課題を解くためにはJavaScriptに関する基本的な知識が必要です。(問題によってはHTMLやCSSに関する知識が必要なものもあります。) いずれも様々なウェブサイトや書籍で学ぶことが出来ますので、必要に応じて勉強してみてください。

ここでは Windows 10 上で Google Chrome を用いて問題を解く手順の一例を示します。(多くのブラウザにも似たような機能が含まれており、それを用いて問題を解くことも可能です。また、まったく別の方法を用いて解くことも可能です。)

1. まずはサンプル問題をダウンロードし、中に含まれている index.html を Google Chrome で開いてください。まずは問題文を読んで、何をすればよいのか理解しましょう。
sample-s1

2. この課題では、HTMLに含まれるJavaScriptを読んで、その誤りを修正して正しく動作する必要があることが分かりました。(試しに動かしても正しく動作しないようです。) ソースコードを閲覧・編集するため、「メモ帳」を開き、そのウィンドウの中に先ほどのHTMLをドラッグ＆ドロップし、メモ帳でHTMLを開きましょう。
sample-s2

3. メモ帳にHTMLが表示されました。サンプル問題はまず JavaScript を修正することが目標となりますから、<script> タグに囲まれた部分を探しましょう。
sample_s3

4. 先ほど見つけたプログラム部分を読んで、プログラムがどのように作られているか確認しましょう。(JavaScriptの知識が必要です。) どうやら、is_prime() という関数が、引数に与えられた数が素数かどうかを判定する関数で、このプログラムの心臓部ともいえそうです。

ということで、is_prime() が正しく動作するかを確認してみましょう。初めに開いたウェブブラウザ(Google Chrome)に戻り、[F5]キーを押して、先ほどの修正をブラウザ上に反映させます。続いて、右上のメニューから「その他のツール(L)」>「デベロッパー ツール(D)」をクリックします。
sample-s4

5. 下のほうに出てきた「デベロッパー ツール」の中から、「Console」と書かれたところをクリックして表示をコンソールに切り替えます。(はじめからConsoleが選ばれている場合は、そのままで大丈夫です。)
sample-s5

6. コンソールでは、JavaScript の文や式を打ち込み、それを実行することができます。is_prime() が正しく動作するかを確認するため、試しに is_prime(123) と打ち込んで、最後に[Enter]キーを押してみましょう。

sample-s6-2

少なくとも 123 は正しく合成数(素数ではない)と判断されており、問題ないようです。

7. 「123」だけ確認しただけではなんとも言えないので、1～10までの自然数について、素数判定がすべてうまくいくかを確認してみましょう。先ほどと同じ要領で、以下の内容をコンソールに打ち込んでください。(console.log(...) は、コンソールに結果を出力する関数です。)

for (var i = 1; i <= 10; i++) { console.log(i, is_prime(i)); }

結果、以下のようになり、1～10までのすべての i に対し、is_prime(i) が false となっています。つまり、1～10までのすべての数が合成数(素数ではない)と判定されてしまったようです。is_prime() 関数にはバグがあるようです。
sample-s9

8. is_prime() が誤った結果を返す引数の例として、ここでは 7 を例に挙げ、is_prime(7) が誤った結果(false)を返す理由を調べることにします。この関数は、約数が見つかった時に for ループを抜け、合成数であると判定し false を返すように作られていますから、誤って見つけてしまった約数が何なのかを調べてみましょう。

メモ帳の画面に戻り、以下のように console.log(...) の行を追加し、HTMLファイルを保存してください。これで、合成数であると判定されたときに、見つかった約数を表示することができるようになるはずです。(繰り返しになりますが、console.log(...) は、コンソールに結果を出力する関数です。)
sample-s7

9. HTMLをきちんと保存したあと、ブラウザ(Google Chrome)の画面に戻り[F5]キーを押して、先ほど書き換えたプログラムの内容をブラウザにも反映させます。続いて、コンソールに is_prime(7) と入力してみましょう。
sample-s8

なんと、約数 7 が原因で 7 が素数ではないと判断されていることが分かりました。素数とはそもそも、1とその数自身(ここでは7)以外の約数を持たない数のことですから、約数として調べる範囲が間違っていたようです。(ここでは2～6の間に約数がないかを調べるべきだった)

もうお分かりですね。is_prime() 関数の中の for (…) 文を以下のように修正して、プログラムが正しく動くようになったかを確認しましょう。

  • 修正前: for (var i = 2; i <= n; i++) {
  • 修正後: for (var i = 2; i < n; i++) {
まとめ
  • HTML/CSS/JavaScript プログラムの動作確認はウェブブラウザで、修正は「メモ帳」で行うことができます。
  • ブラウザのコンソール機能を使うと、関数を実行したり、プログラム中の変数の内容を表示したりすることができます。
  • プログラムの中からコンソールに表示したいときは、console.log(...); を追加しましょう。

なお、ウェブブラウザにはほかにも様々なデバッグ機能が用意されていますし、世の中には「メモ帳」よりもプログラミングの編集に適したテキストエディタが多数公開されています。この記事はあくまでも簡易に準備できる方法を説明したものですので、より本格的なプログラミングをしてみたい方はウェブ等を調べてみてください。

ARTICLE CATEGORY