JavaScriptを使ってプログラム体験！

1月13日と15日に京都府様から委託された「京都・新卒就職応援セミナー業務」のお手伝いをしましたのでその授業レポートです。

使ってみようJavaScript！

今回のカリキュラムは、JavaScriptを使用したプログラミング授業です。プログラミングの理解と興味や楽しさを持っていただくのが目的です。

開始30分前からパソコンの準備や教材の配布などのセッティングにドタバタしていましたが、なんとか開始時間までに準備完了しました。生徒さんは16名で大学生か専門学校生の20代前半の方たちです。

ほとんどの方がプログラム未経験ですので、皆さん緊張した表情で配布された資料に目を通しています。

授業の講師は野間先生です。長年ゲームソフトの開発に携わっておられ、新人指導の経験も豊富で頼もしい先生です。

プログラムとはどのような物なのか？

さて、授業開始です。はじめに身近なプログラムについての話から始まりました。冷蔵庫やテレビなどの家電製品に組み込まれているプログラムや運動会のプログラムを例に普段の生活の中でプログラムが関わっていることを説明しました。

そしてパソコン操作に向かうと思いきや、2人1組でペアをつくり付箋並べゲームを始めます。

このゲームのルールは、

１、2人1組でペアをつくります

２、各自で付箋を好きな形に並べます

３、並べた付箋の形を再現するための説明文を書きます

４、ベアの人と説明文を交換し、それを読み取って付箋を並べます

５、説明文と並べた付箋の形があっていたら正解

というものです。

早速、付箋を並べていきます。単純に３段に並べる人、傘の形を作る人、さらには重ね合わせて立体的に並べる人など皆さん創意工夫があり、楽しそうです！

次に付箋の並べ方の説明文を箇条書きで書きます。

数行で終わる人もいれば、ちょっと凝った形を作ったために説明に苦心して何回も書き直している人もいます。中には何をすればよいかわからないない人もいて、そこはすぐに先生がフォローにはいります。後ろの席だったので説明がききとりにくかったかもしれませんね。自信をもって書ける人は少なかったように見えます。

そして、ペア相手の説明文を交換しそれを読み取って、付箋を並べます。

すぐに終わる人、なかなかできない人それぞれ奮闘しています。制限時間が過ぎ、答え合わせをします。

答え見たとたん、「おお！」「ああ？（苦笑い）」「ええ？」と皆さん一喜一憂の表情です。ほとんどの人が自分の理解と相手の理解に違いに驚いていました。

この説明文こそがプログラムにあたるものなのです！

誰が、行っても同じ結果がでるように書かれていることが重要なのですね。

結果は、半分くらいの方が正解でした。このあたりで、緊張感が漂っていた教室の雰囲気も緩んできていい感じになってきました。

プログラムについて

さて、本題のプログラミングの話に入ります。プログラムの言語には、JavaScript、PHP、Cなどいくつかありますが、ま今回の授業で言語は、JavaScriptを使います。

JavaScriptは主にブラウザで動くもので、ブラウザで表示するためにはHTMLが必要です。授業ではJavaScriptに重点を置くため、HTMLはあらかじめ用意されたファイルを使用します。

HTMLはindex.htmlとういファイルでJavaScript はmain.jsというファイルで進めていきます。今回の教材は、メモ帳などテキストエディターを使いますので家に帰ってからも簡単に復習できますね。

まず、index.htmlをブラウザで表示します。

すると、左上に四角い箱ができ、箱の上にカーソルを持ってくると箱の下に数字が2つ表示されました。カーソルを動かすを数字も変わります。これは、カーソルの位置（座標）を認識して数字で表示しているプログラムです。

さて、main.jsのファイルをエディターで開きます。でも中には何もかかれていません。

今回は、このmain.jsファイルにプログラムを書いていきます。

説明は後回しで、まずは配布された教材に書かれているスクリプトを書き込んでいきます。

var counter = 0;

function mainFunc() {

counter = counter + 1;

document.getElementById(“point”).innerHTML = counter;

}

index.htmlをブラウザで実行すると先ほどの四角の下に数字がカウントされていくのがわかります。

慣れない入力操作でカッコが全角になっていたり、スペルミスがあったりとすぐにできる人もいれば、苦戦している人もいますが、メンターと一緒に問題解決していきます。間違うと修正に時間かかるのでじっくり確認しながら書くのがコツでね。

書いたスクリプトの説明です。

まず、1行目に「var」という記述があります。これは変数宣言のことです。

変数の重要な役割として２つあります。１、覚える、２、見分けるという2つです。

特に覚えるという概念はとても重要です。

計算しても覚えることをしなければ答えを呼び出すことができないのです。

counter = 5 + 8 *2 ;

ここでは、counterという変数に値が入ります。

入る数字は21ですね。これを「代入」と呼びます。もう一つ大事なことがあります。

それは「変数は１つの事しか覚えられない」点です。２度代入すると、２つ目を覚えて１つ目を忘れます。「上書き」されるのです。

var counter; counter = 1; counter = 3; counter= counter + 1;

この場合、最後の「counter」に入る数字は何でしょうか？

「３+counter!」「counter?」生徒さんに先生が質問しますが、答えますが当たりません。残念ながらこの回答は正しい答えを出せる人は残念ながらいませんでした。

この答えは「４」です。前の行のcounterの数字「3」に「+１」に書き換わるのですね。

このあたりから少し難しくなってきたので、表情が硬くなってきた人も出てきました。参加者の皆さんおとなしい方が多くて少し発言が少ないようです。「何がわからないのか」を質問してほしいと思いました。

次に「関数」の説明です。

書式は次の通り（日本語部分は任意）です。

function　関数名(引数){ 　　各種処理 }

var counter = 0;
function mainFunc() {

　　counter = counter + 1;

　　document.getElementById(“point”).innerHTML = counter;
}

上記では「mainFunc」は関数名となり、｛｝範囲内は関数内の処理となります。

この行ではmainFunc 関数が始まるよ、と書いてあります。

実際の記述では、2行目のfunctionの「｛」から「｝」に囲まれた範囲をブロックといいます。これは上の記述の１つをブロックとしてfunction のmainFuncという関数名に指定したのです。すると、あとはmainFuncを呼び出すだけで同じ結果になります。

この関数の説明は私も聞いていて少し難しかったです。

繰り返しの処理はわかるのですが、それがプログラムではどのように書かれているかを理解するのは、慣れが必要かなと思いました。生徒さんの中にも同じ思いの方もおられたようです。

次は、画像の表示です。

HTMLファイルの中にpic_shipというID名で画像ship.pngを呼び出すプログラムを書きました。

</body>

と書かれています。

全部で３つ用意してありますが、今回は1つ目の「pic_ship」を使用します。

「pic_ship」はプログラムで使用する名前で、「ship.png」は画像のファイル名です。

main.jsに下記のスクリプトを書きます。

function mainFunc() {

　var canvas = js_display.getContext(“2d”);

　var image = new Image();

image.src = document.getElementById(“pic_ship”).src;

canvas.drawImage(image, 0, 0);

}

ブラウザで確認すると、ship.pngというファイル名の三角の宇宙船？のような画像が、左上に配置されていれば正解です。

画面に表示されなかったり、思った場所へ配置できないなど試行錯誤していましたが、最後は全員指定の場所へ配置できました！

ここでもやはり慣れないテキスト入力が一番の難関で、うまくいかない時はメンターが生徒さんに「どこに問題」があるのかを聞きながら解決していきます。そうすると出来たときに自身で達成感を感じていただけるのでモチベーションも下がりませんね。

最後に

ほとんどの方がはじめてのプログラム体験でしたが、なんとか集中力を切らさず取り組んでおられたようで安心しました。この授業で少しでもプログラムに興味を持って将来に役立てていただければ幸いです。