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

出典: フリー教科書『ウィキブックス（Wikibooks）』
ナビゲーションに移動 検索に移動

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

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

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

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

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

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

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

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

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

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

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

つまり、

プログラムA: 現れた敵モンスターごとに異なるアルゴリズム。モンスターの強さや外見、特殊攻撃（スライムなら、「溶かす」攻撃）、弱点（ゾンビは、僧侶の成仏攻撃に弱い）など。
プログラムB: プレイヤーの入力コマンド『たたかう』『にげる』など、モンスターの種類に関係しない、共通のアルゴリズム。

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


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

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

が必要になる。


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

プログラムA: 現れた敵モンスターごとに異なるアルゴリズム。モンスターの強さや外見、特殊攻撃（スライムなら、「溶かす」攻撃）、弱点（ゾンビは、僧侶の成仏攻撃に弱い）など。
プログラムB: プレイヤーの入力コマンド『たたかう』『にげる』など、モンスターの種類に関係しない、共通のアルゴリズム。
プログラムC: 戦闘が発生した場合は、プログラムAとプログラムBを実行する。

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


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

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


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

HTMLの構造化[編集]

HTML[編集]

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

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

たとえばWebページを記述するための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 type="text/css">

</style>

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

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

ファイル例 

<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文書の構造を把握しやすくなります。

  • 字下げ（じさげ）

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

<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>

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

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


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

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

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

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

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

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

<html>
  <head>
    <title>わたしたちの学校</title>
  </head>
  
  <body>
    <script type="text/javascript">
      var hensuu;
      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）も出ています。

"https://ja.wikibooks.org/w/index.php?title=高等学校情報/情報の科学/構造化&oldid=113074" より作成