 |
 |
教育実践例 |
 |
|
|
|
カラーチャートを題材にしたJavaScriptでのプログラミング学習
─16進カラーコードの表し方とプログラミングの基礎─
|
|
|
|
|
| 1．はじめに |
ここでご紹介する教材は，JavaScriptを教えるためのものではなく，16進数でカラーコードを表すことで，プログラミングの基本であるif文（フローコントロール）とforループ（繰り返し）を体験し理解することを目標にしています。
本校では1年次で「情報C」を学習します。授業は教科書の内容に沿った座学が中心です。年3回の定期試験で教科書の大部分を試験範囲としています。PC室で行う実習もありますが，1年次の前半は，普通教室での座学です。
|
|
|
| 2．2進数と16進数の計算方法 |
特にその中で，ここで取り上げるJavaScriptの教材につながる内容のものとして，2進数・16進数のプリントの一部を紹介します。情報通信ネットワークの要は，コンピュータにつながるということなので，色や音・画像・映像に至るまですべてのデータが0と1で表されなければなりません。そんな2進法の世界を理解してもらうために本校では，2進数・16進数の計算練習のプリントを作成しています。
2になると繰り上がる2進数の計算練習は，スムーズに2進法を理解する助けになり，プリントの計算練習は予想以上の成果がありました。いくつかプリントの内容を紹介します（図1）。
▲図1 2進数の計算問題
実際のプリントでは，割り算を行って商と余りを出す計算や，2進数を10進数で表す，またその逆などの内容を含みます。
そして16進数についても基本的な計算を通して理解を深めていきます（図2）。
▲図2 16 進数の計算問題
16進数を学習することは大切ですが，それ以上に16進数と2進数の関係を理解することが重要です。16進数はただ2進数を4桁ずつ区切って表したものにすぎません。2進数を2桁ずつ区切って位取りの数とすると，2進数の11，すなわち3が位取りの最大の数となり，4で繰り上がる4進数となります。3桁ずつ区切ると111は7なので8進数，同様に4桁だと15なので16進数となります（図3）。
▲図3 2進数と16 進数の関係
ここで，2進数1桁分を1ビット（bit），16進数2桁分，つまり2進数8桁分が1バイト（byte）という単位であることを説明して，この内容は終了します。
|
|
|
|
| 3．カラーチャートを表示する |
（1）色コードの説明
さて，数の話が16進数まできた段階で色コードの説明に入ります。
画面の色はRed・Green・Blueの光の3原色の明るさのバランスで構成され，それぞれは0〜255までの整数，16進数では0〜FF，つまり16進数2桁で表されます。Red・Green・Blueの明るさはそれぞれ256段階なので，256の3乗分だけ色は表現可能です。これがおよそ1670万色でフルカラーと呼ばれています。そして，コンピュータのどんな環境でも表現可能なセーフカラーと呼ばれる取り決めは，Red・Green・Blueそれぞれの明るさの段階を，16進数2桁の6段階すなわち00・33・66・99・CC・FFのバランスで構成するので色は6× 6× 6＝216色になります。HTMLのカラーコードの表現では，#33FF99のように表し，この場合，左からRedは33，GreenはFF，Blueは99の明るさのバランスになります。
（2）36 色を表示する
ここまでの準備が整ったところでJavaScriptを用いてWeb上で216色のカラーチャートを表示する教材の内容を説明していきます。
プリントは，生徒がサーバから教材用のフォルダをダウンロードして，出来上がりをサーバにアップロードして終了という流れになっています。そしてその間，出来上がりが段階を追って確認できるように，HTML文書を編集しては更新して表示するように構成してあります。表示して違いの分かる段階としては5段階です。
まずはじめに，HTMLの<table>タグを使って表形式で黒#000000を表示します。バックカラーを#000000でフォントの色を白にします。ここでHTMLの基本的な形は完成しています（図4）。
▲図4 黒を表示
<table>タグのブロックをJavaScriptで書くと次のようになります。結果は同じです（図5）。
▲図5 JavaScriptで書く
配列変数hex[]にデータを代入し，繰り返し文でB=0，3，6，9，12，15について実行します。青の1行が表示されます（図6）。
▲図6 青1行を表示
さらに，繰り返し文を二重にして，青に緑を加えると36色が次のように表示されます（図7）。
▲図7 36 色の表示
次に，if文を使ってGreenの明るさがFFのときにのみ，文字を黒で表示し，それ以外は白の表示にします。この2つのステップを加えたコードは次のとおりです。矢印の部分に注意してください。これでBlueにGreenを混ぜた36色が出来上がりました（図8）。
▲図8 6行目の文字を黒で表示
（3）216 色を表示する
次にRedを混ぜて216色が完成します。二重の入れ子になっていた繰り返し文を三重にするだけで出来上がりますが，前段階と同様に，矢印の部分の配列変数の添字を書き換えるのを忘れないことが重要です。コードは簡単です。
しかし，実際に授業を展開していく中で，生徒たちはいろいろと失敗をします。例えば，全角モードで空白を打ってしまったり，セミコロンとコロン，全角のゼロと英文字のO，Lの小文字とiの大文字などのタイプミスです。バグを自分で発見することが，どんなに苦しい作業であるかということを理解できる機会でもあります。
▲図9 216 色カラーチャートとそれを表す JavaScript
|
|
|
|
| 4．情報Cの位置づけ |
（1）導入科目としての情報C
冒頭で本校の普通教科「情報」は，1年生全員に「情報C」を履修させ，授業は教科書中心で座学中心であると書きましたが，もう少し基本的なスタンスを紹介します。
藤沢総合高校に再編される前身の長後高校では1年生全員に「情報基礎」という学校設定科目を履修させていました。教科「情報」が導入される以前のことです。そしてその内容が「情報A」「情報B」「情報C」の中では「情報C」に最も近かったことから「情報C」を履修させることにしました。
本校は総合学科高校なので，2年次以降にコンピュータ教室で行う系列の授業を展開しております。具体的には，専門教科＜商業＞の科目では「商業技術」「文書デザイン」「ビジネス情報」「プログラミング」，専門教科＜情報＞の科目で「マルチメディア表現」，専門教科＜美術＞の科目で「ビジュアルデザイン」，学校設定教科＜人間＞の科目で「映画制作」，また，普通教科＜数学＞の「数学プログラミング」などです。
1年次の「情報C」は，これら2年次以降の科目の導入科目またはガイダンス科目と捉えています。特に今回紹介した教材は，商業科の「プログラミング」の導入と考えております。学習内容を大まかにでも理解して科目を選択し，ミスマッチで悩むことのないようにする配慮です。もちろん目的はそればかりではなく，本来の「情報C」の教科書の内容に沿って，デジタル化やWebでの情報発信を学習する目的でもあります。
（2）なぜJavaScript なのか
if文やforループを使うのであれば，JavaScriptでなくてもよかったのですが，それではなぜ今JavaScriptなのか。本来，JavaScriptは高度なWebページを運営するためのものだと思いますが，この教材では表示することのみの目的で使っています。
実は前述の「数学プログラミング」の授業でBASIC言語を使っていました。それを「情報C」の授業で使ってみたこともありましたが，グラフを描いたり完全数を探すプログラムは，得られる結果に生徒たちの反応があまりよくありませんでした。それに比べるとこのカラーチャートは，表示に成功すると歓声があがったり生徒たちの反応は良好です。
なぜ今JavaScriptなのかという質問の答えは2つあります。1つは，現在JavaScriptが動かない環境はほとんどなく，ブラウザとテキストエディタがあれば十分という手軽さです。もう1つは，Webページを作成する授業の一環として学習の流れをうまく作ることが出来たという点です。
話が少し逸れますが，完全数を探すプログラムはこんなに簡単です。完全数とは，その数の約数のうち自分自身を除くものの和がその数に等しくなるものです。例えば，6の約数は，1，2，3，6ですが，1＋2＋3＝6なので6は完全数です。下記のプログラムは，入力したNの値以下の完全数を探します（図10）。
▲図10 完全数を探すプログラム
（3）感謝のことば
今回ご紹介した教材は，数年前本校に勤務されていたIT支援員の細貝聡志先生に作成していただいたオリジナル教材を改訂し，生徒がゴールしやすくしたものです。
また，2進数・16進数は，私が神奈川県立湘南高校に勤務していた当時，数学科の先輩，吉岡章夫先生に教えていただきました。
更に，BASIC言語のプログラミング環境を提供している文教大学の白石和夫先生に大変感謝しております。
|
|
|
|
|
 |
|
 |
|
 |
|
|
|
 |
