高等学校情報/情報の科学/構造化

※ 202年以降の新カリキュラム『情報1』『情報2』に、構造化プログラミングが加わるかもしれません。

基礎知識[編集]

※ 中学校では、すでに技術科で「繰り返し」「条件分岐」など制御の考えかたや、それらのフローチャートの例を習ってます。しかし中学技術科はメカトロニクスなども意識した内容です。このため、「for文」など「if文」などの語彙は中学では習ってない可能性も高いです。（少なくとも2020年頃は）

2021年の近年、小中でプログラミング教育の導入が話題ですが、過去の日本の中高のIT教育の実例によると、どちらかというとHTMLのようなwebプログラミングが主体でした。なので、JavaScriptはまだ習ってない場合があります。

なお、windowsで下記のプログラミングを実行するためには一般に、あらかじめコンパイラなどの実行環境のインストールが必要です。（テキストエディタにそのまま文字を入れても、何も起きません。）

例外的にJavaScriptなら、webブラウザを用いて実行できますが、しかしC言語など他の言語のコードはwebブラウザでは処理が不可能です。

入門レベルの中学高校生が実行するには、たとえば教育用の簡易的なC言語実行アプリ、または教育用のPython実行アプリなどの利用が考えられるでしょう。

典型的なプログラミング[編集]

※ 2022年度以降の新カリキュラムで習う可能性が高い内容です。^[1]

文字列の表示[編集]

テキストを扱うプログラミング言語では、多くのプログラミング言語で、

print("Hello, world!")

のような構文で、文字列を表示します。

上の例はPythonで、printは関数です^[2]。 C言語でも関数ですが関数名が異なり puts("Hello, world!") となります。また、JavaScriptの場合は window.confirm("Hello, world!") と関数ではなくメソッドです^[3]。

Pythonの場合、print("Hello, world!")を実行すると、

Hello, world!

と表示されます。

for[編集]

多くのプログラム言語で、繰り返しには、for文を使います。

たとえばPythonの場合、

for i in range(5): print("a")

なら、表示結果として

a
a
a
a
a

と画面に文字出力されます。

for 変数 in range(回数): 処理 の書式です。

この様にプログラミング言語が異なると、同じ機能を実現するためでも、異なるプログラミングが必要になります。

「コメント」という用語[編集]

たとえば、Pythonでは、「#」という記号を使うことにより、その記号から文末までにメモを入れる事が出来ます。

# 「ようこそ」 と出力
print("ようこそ")

つまり、上記のコード例の場合、#記号以降から文末までの『# 「ようこそ」と出力』の部分は実行されません。

この「#」記号のような機能のことを、プログラミング用語で「コメント」と言います。

コメントの機能は、他の多くのプログラミング言語にもあります。記号の文字そのものは違いますが、C言語やJavaScriptにもコメント機能があるので、プログラム中にメモを必要に応じて書くことができます。

関数[編集]

プログラミングでいう「関数」（function）と、数学用語の二次関数や三角関数などの「関数」（function）とは、意味が違います。（日本語でも英語でも、つづりが同じです。）

プログラミングでいう「関数」とは、コンピュータにさせたい処理手続きをまとめたて名前をつけたものです。

※ なお慣習的にプログラミング界隈では、どうしても数学の三角関数などのことに言及したい場合、区別のため、数学の関数のほうは「数学関数」または「算術関数」などと呼んで、区別する場合があります。

そして、C言語やJavaScriptやPythonなど、多くの現代で普及しているプログラミング言語には、プログラミングでいう「関数」の機能があります。

※ Pythonのプログラミングについては『Python』を参照、その関数の文法については『Python/関数』の「初歩的な内容」の節を参照してください。

※ 関数のコードについては、C言語とPythonとで大きく異なるので、本ページでは説明は省きます。

どの言語でも、理解すべき用語は「関数」のほか、「引数」（ひきすう）と、「戻り値」（「返り値」ともいう）という用語が基本的です。

その他の重要概念[編集]

乱数[編集]

サイコロの目のように、確率的に発生する現象をコンピュータで実行したい場合、「乱数」という機能を使います。これらの機能には、 random （ランダム）などの用語が使われる場合が多いです。

Pythonの場合なら、本wikiでは『Python/モジュールのインポート』に説明があります。

リスト[編集]

Pythonでは「リスト」、C言語やJavaScriptでは「配列」と言われる機能があります。

Pythonの場合については『Python/リスト』を参照してください。

プログラミング以外のコンピュータ課題解決[編集]

コンピュータに計算させたりそれを表示させたい場合、なにも必ずしもC言語やPythonなどのプログラミングの方法を使う必要は無い。

Widows用のオフィスソフトのエクセル（EXCEL）でも、計算などが可能である。（※ エクセルを使う方法は、文部科学省の教員用資料にも紹介されている、教育的にも正当な方法です。）

※ エクセルを使う場合、教養として高校〜大学初級レベルの数学知識の他、さらにIT知識として「CSVファイル」というデータ形式を知っていると、何かと都合がいい。^[4]

構造化[編集]

※ 範囲外: 構造化プログラミング[編集]

詳細は「情報技術/構造化プログラミング」を参照

「構造化」（こうぞうか）という手法は、なにもプログラミングだけに限った話題ではないが、まずプログラミングを例に説明する。

※ 2020年度の教員研修用資料に、プログラミングの「構造化」の話題があります。^[5] よって、将来的に高校カリキュラムに「構造化」の単元が加わる可能性があるかもしれません。

構造化してないダメな例[編集]

まず、ダメなプログラミング手法の例を説明する。

たとえばゲーム制作のため、そのゲームをプログラミングをするさい、ジャンルがRPG（ロールプレイングゲーム）だとして（RPGやドラクエやファイナルファンタジーみたいなジャンル）、いちいち

「スライムが敵モンスターとして出現した場合に、『たたかう』『にげる』コマンド入力などの戦闘に必要なアルゴリズムの設計」や

「ゴブリンが敵モンスターとして出現した場合に、『たたかう』『にげる』コマンド入力などの戦闘に必要なアルゴリズムの設計」や

「ゾンビが敵モンスターとして出現した場合に、『たたかう』『にげる』コマンド入力などの戦闘に必要なアルゴリズムの設計」

などのように、いちいち敵モンスターごとに同じ戦闘コマンド（『たたかう』『にげる』）を、別々の戦闘アルゴリズムとして設計するゲーム作家は、普通は、いないだろう。（何百体もモンスターがいるゲームだってある！モンスターの数だけ共通コマンドのアルゴリズムを作りなおしたら、時間の無駄であるし、そのゲームを入れるためのCD➖ROMやハードディスク容量も無駄に消費する。）

以上、ダメなプログラミング手法の例である。

構造化してある良い例[編集]

では、どのようにプログラミング手法を改善すれば良いだろうか。

上記のRPGゲームのゲームプログラミングの場合、『たたかう』『にげる』コマンドのように、どんなモンスターの場合でも使う共通コマンドのアルゴリズムは、独立した1つのアルゴリズムとして置くと良い。

つまり、

プログラムA: 現れた敵モンスターごとに異なるアルゴリズム。モンスターの強さや外見、特殊攻撃（スライムなら、「溶かす」攻撃）、弱点（ゾンビは、僧侶の成仏攻撃に弱い）など。

プログラムB: プレイヤーの入力コマンド『たたかう』『にげる』など、モンスターの種類に関係しない、共通のアルゴリズム。

のように、あらかじめ分離して作成しておき、その共通コマンドのアルゴリズムの使用のさいには、共通コマンドのアルゴリズムを呼び出して使うようにすれば、いちいちモンスターごとに作り直しをする必要がなく、再利用による効率化である。

なお、戦闘発生時に共通コマンドの呼び出しをするため、さらに次のようなプログラム

プログラムC: 戦闘が発生した場合は、プログラムAとプログラムBを実行する。

が必要になる。

上記の改善案をまとめると、

プログラムA: 現れた敵モンスターごとに異なるアルゴリズム。モンスターの強さや外見、特殊攻撃（スライムなら、「溶かす」攻撃）、弱点（ゾンビは、僧侶の成仏攻撃に弱い）など。

プログラムB: プレイヤーの入力コマンド『たたかう』『にげる』など、モンスターの種類に関係しない、共通のアルゴリズム。

プログラムC: 戦闘が発生した場合は、プログラムAとプログラムBを実行する。

のように、動作ごとにアルゴリズムを分けて設計したほうが、効率的である、・・・という当然のことでしかない。

このように、もし自分のつくったプログラムにおいて、もし、つくったプログラムの一部分が、何度も利用する場合が生じたときは、いっそ、何度も再利用する部分を、別プログラムにしてしまうのが、効率的だろう（作業的にも、メモリ的にも、効率的だろう）。

このように、プログラミングのさい、動作内容の異なるアルゴリズムは作り分けておいて、そのアルゴリズムが必要になったときに呼び出しをするようにしておいて、制作の手間を省いたりするプログラミング手法のことを構造化プログラミングという。

なお、説明の簡単化のため、ゲーム制作を例として説明したが、「構造化プログラミング」とは、なにもゲームプログラミングだけに限らず、あらゆるプログラミングにおいて便利になる事の多い、重要な考え方である。

構造化・モジュール化の際の注意点[編集]

※ ここでいう「モジュール化」とは、機能別に（コードなどを）別々のグループにまとめる事などで、部品の取り替えや交換や更新などを容易にする、という意味です。製造業などでいう「部品のモジュール化」などと同じ意味です。python用語の「モジュール」とは意味が異なります。

構造化やモジュール化などの際の注意点として、モジュールから別のモジュールを呼び出す際の階層構造があまり深くならないように、全体設計をする必要があります。^[6]

この理由のひとつは、会社などの仕事でつくるプログラムは一般的に集団作業だから、です。もし階層構造が深くなりすぎると、他のプログラマーがモジュールを探しづらくなったり、あるいは、モジュールの見落としのミスによって、プログラムミスなどの不具合の発生につながったりします。（※ 研修資料には、こういう理由までは書いてないです。）仮に現時点では自分ひとりで作っているプログラムであったとしても、もしかしたら将来には別の人（たとえば後輩など）がそのプログラムを引き継ぐかもしれない、といった将来まで考える必要があるのです。

※ 複数の似ている処理内容をなんでもかんでも共通化しすぎると、階層構造が深くなりがちです。階層が深くなりすぎるミスは、プロのITプログラマーでも初心者だと、やりがちですので、特に気をつけてください。

同様の理由で、モジュールの数をあまり増やしすぎたりしないようにする工夫も必要ですし、あるいは一つのモジュールから呼び出すモジュールを増やしすぎないようにする工夫も必要です。^[7]

HTMLの構造化[編集]

HTML[編集]

（※ 検定教科書で扱っている範囲。）

文書も、構造化を可能である。

たとえばWebページを記述するためのHTML（エイチティーエムエル）では、

<DOCTYPE html>
<html>
 <head>
  <title>わたしたちの学校</title>
 </head>
<body>
 <h1>わたしたちの学校</h1>
 <p>わたしたちの学校を紹介します。わたしたちの学校は・・・
 </p>
</body>
</html>

のように、記述するが、これも構造化の例である。（なおHTMLについての解説は『高等学校情報/社会と情報/ウェブページの仕組み』の単元にある。）

このように構造化することで、webブラウザが、何がタイトルで何が中身の文章なのかとかを把握しやすくなるし、検索エンジンも同様にタイトルや中身を把握しやすくなる。

CSS[編集]

HTML文書の表示において、「背景を○○色にしたい」とか、「余白をもっと増やしたい」などのレイアウト（見え方）を、通常状態から変更したい場合は、CSS（シーエスエス）と呼ばれる方法で記述します。（Cascading Style Sheet の略。カスケーディングスタイルシート）

CSSは、HTMLとは、別の言語です。ですが、HTMLファイルの中に、CSSタグも記述する事ができます。（検定教科書によっては、CSSをHTMLの機能の一部として扱っている教科書もある。）

CSSのことを単に「スタイルシート」という場合もあります。

とにかく、CSSをどう使用するかというと、まず、

<style>

</style>

のようなタグを、HTML中に追加します。そして、このタグ <style> </style> 中に、レイアウトの仕様を記述します。

たとえば、余白を調整したい場合、次のように body {margin: 25%;} </style>を、タグ <style type="text/css"> </style> 中に追加します。

ファイル例

<DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>わたしたちの学校</title>
  <style type="text/css">
body {margin: 25%;}
  </style>
 </head>
<body>
 <h1>わたしたちの学校</h1>
 <p>わたしたちの学校を紹介します。わたしたちの学校は・・・
 </p>
</body>
</html>

さらに背景色を変更したい場合は、たとえば背景色をピンクにしたい場合は、 body {margin: 25%; background-color: pink;} </style> というふうに記述します。

つまり、

<html>
 <head>
  <meta charset="UTF-8">
  <title>わたしたちの学校</title>
  <style type="text/css">
body {margin: 25%; background-color: pink;}
  </style>
 </head>
<body>
 <h1>わたしたちの学校</h1>
 <p>わたしたちの学校を紹介します。わたしたちの学校は・・・
 </p>
</body>
</html>

このように、CSSを用いることにより、レイアウトと文章内容を別々のタグで記述することで、他のプログラマーや技術者がHTML文書の構造を把握しやすくなります。

字下げ（じさげ）

タグが増えてきて、みづらくなってきました。次のように、各行の始めの位置を、字下げ（じさげ）しましょう。

<DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>わたしたちの学校</title>
    <style>
      body {margin: 25%; background-color: pink;}
    </style>
  </head>

  <body>
    <h1>わたしたちの学校</h1>
    <p>わたしたちの学校を紹介します。わたしたちの学校は・・・</p>
  </body>
</html>

OSの文字入力モードを、直接入力モードにして、スペースボタンでスペース（空白のこと）を入れて、字下げをしてください。スペースボタンの場所は、普通は、キーボードの下のほうにあるはずです。

上記htmlのように、字下げをすると、htmlファイルの構造が、見やすくなります。

範囲外？: JavaScriptのプログラム[編集]

（東京書籍や日本文教出版などの一部の教科書で、JavaScript（ジャバスクリプト）が紹介されている。）

webブラウザ上で、ちょっとしたプログラムを動かしたい時のためのプログラミング言語として、『JavaScript』（ジャバスクリプト）があります。

なお、名前の似た別のプログラミング言語として、『Java』（ジャバ）がありますが、まったく別の言語です。

さて、本書では、JavaScriptについて、説明します。

まず、次のコードを見てください。JavaScriptは、次のコードのようhtmlに埋めこんで（うめこんで）、使います。

<DOCTYPE html>
<html>
  <head>
    <title>わたしたちの学校</title>
  </head>
  
  <body>
    <script>
      var hensuu = 132;
      document.write(hensuu + 100);
    </script>
    <h1>わたしたちの学校</h1>
    <p>わたしたちの学校を紹介します。わたしたちの学校は・・・</p>
  </body>
</html>

まず、JavaScriptを使うためには、<script type="text/javascript">および</script>が必要です。

このタグ内には、JavaScriptのプログラムだけを書かないと、いけません。

もしタグ内に、htmlタグ（pタグやh1タグなど）を書くと、エラーになります。

また、プログラムの文を入力するときは、文字入力モードは、直接入力モードにしてください。ほかの文字モードで入力しても、エラーになるでしょう。

さて、JavaScriptで、足し算などの計算のために変数（へんすう）を使用できます。

まず、上記のプログラムでは、「hensuu + 100」という計算をしています。上記のプログラムでは、「hensuu」は、変数です。

このように、変数をつかって計算を行うためには、「これから変数をつかいます」という事をプログラム中で宣言する必要があります。

変数の使用を宣言するには、変数の名前の前に「var」をつけ、スペースを1文字あけます。言い方を帰ると、varの後ろにある語句が「変数である」と認識されます。

（なお、「var」とは、英語のvariable（バリアブル）が由来であろう。variableの意味は、「変数」。数学用語でも、数学の変数のことを「variable」という。）

「var hensuu;」の意味は、「変数として「hensuu」を用意しなさい」という意味です。さて、javascriptによるプログラミングでは、1個の変数の作業が終わったことを示すために、さいごに「;」（セミコロン）をつけます。

「hensuu = 132;」の意味は、「変数『hensuu』に、数値132を代入しなさい」という意味です。

JavaScriptにかぎらず一般にプログラミングでは、「=」記号の意味は、「代入をやりなさい」の意味です。数学の等号とは、意味が違いますので、気をつけてください。

一般にプログラミングでは、=の右側にある計算の結果を、=の左側にある変数に代入します。

さて、javascriptによるプログラミングでは、1個の変数の作業が終わったことを示すために、さいごに「;」（セミコロン）をつけます。上記のプログラムでも、「var hensuu = 132;」となっています。

他の言語では、変数の宣言方法が違っている場合もあるので、まったく暗記の必要は、ありません。

なお、数学でいう「変数」とは少し事情がちがていて、JavaScriptの変数の名前は1文字でなくても、かまいません。（一般に、ほかのプログラミング言語でも、変数名は1文字でなくても、かまわない。）

そして、JavaScriptの変数は、数でもありますので、四則演算（数学でいう「＋」、「ー」、「×」、「÷」）などの計算をできます。（一般に、ほかのプログラミング言語でも、変数をつかって、四則演算の計算をできる。）

たとえば、上記のプログラムでは、「hensuu + 100」という計算をしています。

そして、式の終わりであることを示すために、さいごに「;」（セミコロン）をつけます。上記のプログラムでも、「hensuu + 100;」となっています。

「document.write()」とは、「カッコ内の式を出力しろ」というような意味のプログラム命令です。

そして、そのカッコ内に、「hensuu + 100」と書かれているので、その式のとおりに計算して「232」（＝132＋100）を表示する仕組みです。

プログラムを実行するには、このJavaScriptの書かれたhtmlファイルごと保存してから、そのまま普通のwebブラウザで、そのhtmlファイルを開くだけです。

実際に上記コードの書かれたhtmlファイルを開いてみると、計算結果の「232」（＝132＋100）も出ています。

アルゴリズムなどの知識[編集]

※ 『高等学校情報科「情報Ⅰ」教員研修用教材　JavaScript 版(第3 章のみ) - 20200716-mxt_jogai01-000001169_001.pdf』などでソートを紹介しています。

ソート[編集]

読者の皆さんは、よく

出席番号:01, 阿部、国語80点、数学55点、

出席番号:02, 内村、　国語50点、数学90点、

出席番号:03, 枝野、　国語70点、数学73点、

のような、データ一覧で、「国語の点数の高い順に並べ替えてみたいなあ・・・」とか思ったことはないでしょうか。

つまり、

出席番号:01, 阿部、国語80点、数学55点、

出席番号:03, 枝野、　国語70点、数学73点、

出席番号:02, 内村、　国語50点、数学90点、

と並べ替えたりとか。

※ 説明を短くするため、クラスの生徒数が3人だけの学級として設定しています。

こういうふうに、ある項目の数値の大小順に並べ替えることを情報技術の用語でソートと言います。

ソートの概念は、単にデータを整理するだけの用途のほかにも、たとえば最短ルートの探索などにも応用できます。（※ 教員向けマニュアルで紹介しているのはコッチ（探索）のほう。）なお、検定教科書で二分探索法などの探索法を教えてるのは偶然ではなく、探索法をする前には前処理としてソートが必要になる場合が多いからです。

なので、ともかくソートの手法はいろいろ応用されるので、ソートという概念を知っておきましょう。

ソートの代表的な手法には数種類あります。教員向けマニュアルでは「選択ソート」と「クイックソート」が紹介されています。

時間に余裕があれば、JavaScriptやPython など、普通のプログラミング言語を使って、ソートをプログラムを自力で作ることも可能です。

どのプログラミング言語にもある、条件分岐の if文やその条件式の中での不等号（ ≦ や ≧ に相当する判定のこと）の利用、繰り返し処理の for文、そしてソートの処理前および処理後の結果を格納するための「配列」（はいれつ）といわれるデータ構造、などの入門的な機能を組み合わせることで、ソートのプログラムを作ることができます。（教員むけプログラムにも、ソートのコード例があります。）

^ 教員用教材【高等学校情報科「情報Ⅰ」教員研修用教材(本編)】第3章 - 20200722-mxt_jogai02-100013300_005.pdf 『コンピュータとプログラミング』 P115あたり
^ Python3では、print は組込み関数ですが、Python2 では命令で文字列を括る括弧は不要でした。
^ JavaScriptでは、確認ダイアログのポップアップを文字列の表示に変えました。
^ 教員研修用資料のP170にもCSVの記述あり。その他、ファイル内検索で何箇所もCSVが出て来る
^ 高等学校情報科「情報Ⅱ」教員研修用教材　第4章 - 20200609-mxt_jogai01-000007843_005.pdf 『情報システムとプログラミング』 P231
^ [1] p208
^ [2] p208

[1] 教員用教材【高等学校情報科「情報Ⅰ」教員研修用教材(本編)】第3章 - 20200722-mxt_jogai02-100013300_005.pdf 『コンピュータとプログラミング』 P115あたり

[2] Python3では、print は組込み関数ですが、Python2 では命令で文字列を括る括弧は不要でした。

[3] JavaScriptでは、確認ダイアログのポップアップを文字列の表示に変えました。

[4] 教員研修用資料のP170にもCSVの記述あり。その他、ファイル内検索で何箇所もCSVが出て来る

[5] 高等学校情報科「情報Ⅱ」教員研修用教材　第4章 - 20200609-mxt_jogai01-000007843_005.pdf 『情報システムとプログラミング』 P231

[6] [1] p208

[7] [2] p208

[1]

[2]

[3]

[4]

[5]

[6]

[7]

高等学校情報/情報の科学/構造化

目次

基礎知識[編集]

典型的なプログラミング[編集]

文字列の表示[編集]

if[編集]

for[編集]

「コメント」という用語[編集]

関数[編集]

その他の重要概念[編集]

乱数[編集]

リスト[編集]

プログラミング以外のコンピュータ課題解決[編集]

構造化[編集]

※ 範囲外: 構造化プログラミング[編集]

構造化してないダメな例[編集]

構造化してある良い例[編集]

構造化・モジュール化の際の注意点[編集]

HTMLの構造化[編集]

HTML[編集]

CSS[編集]

範囲外？: JavaScriptのプログラム[編集]

アルゴリズムなどの知識[編集]

ソート[編集]

案内メニュー