WirelessWire News Technology to implement the future

by Category

ハックから始めるプログラミング教育

Hack Another Day

2015.10.28

Updated by Ryo Shimizu on October 28, 2015, 08:14 am JST

 先日のエントリーでは、闇雲にScratchやViscuit、MOONBlockのようなビジュアル言語やBASICのようなノスタルジー言語を教えるのは得策ではない、という主張をしました。

 ナタしか持たない人はすべてのものをナタで斬ろうとします。
 教材としての言語も、時と場合によって使い分けるべきでしょう。

 今年の成蹊大学経済学部でのプログラミング講座は、まずキーボードに慣れてもらうところから始めることにしました。

 というのも、大学の教員をやっているとわかると思いますが、他の講座との連携が全くうまくいかないのです。たとえば私の講義ではかつてはビジュアル言語から先に教えていました。しかし、翌年、他の教員のより高度なプログラミング言語の授業をうけるときになって躓く生徒が続出してしまいました。なぜなら、私はプログラミングの基礎的な概念だけ教えればいいと考えていたのですが、ほかの授業ではキーボードを使ってR言語やHTMLなどを実際に打ち込む必要があるからです。

 そこで今回はビジュアル言語による講義をやや後回しにして、まずはキーボード捜査に習熟してもらうことを目標にしました。

 最初に行うのは、キーボードの左上から右下まで順番に打つ、という練習です。
 たとえばこんな感じです。

1234567890-^¥qwertyuiop@[asdfghjkl;:]zxcvbnm,./_

これができたら、次にシフトキーを押しながらやはりすべてのキーを押してみます

!"#$%&'()0=~|QWERTYUIOP`{ASDFGHJKL+*}ZXCVBNM?_

 プログラマーはしばしば特殊な記号を使います。
 記号の読み方がわかっていなければ、それを使いこなすこともできません。

 そこで次に、記号の読み方を教えます。

 「`」と「'」を示し、これがバックオートとアポストロフィ(またはシングルクォート)と呼ばれていることを説明します。

 必要な記号が必要なときに呼び出せる必要があります。
 プログラムミスをしたときに、それは,(カンマ)か.(ドット)を打ち間違えているのだということを理解する必要があります。

 「:(コロン)」と「;(セミコロン)」は似ていますがプログラム言語での使い方は全く違います。それは「¥(円マーク)」をバックスラッシュと呼ぶときに通貨記号である「$(ダラー)」と全く異なる使われ方をすることを教える必要があります。

 最近の私のお気に入りの教え方は、キーボード操作に一通り慣れたところでChromeブラウザのアドレスバーの部分に「javascript:alert("Hello")」と打たせることです。

スクリーンショット 2015-10-28 7.03.29

 これはびっくりします。

 そう、実は普段から使うWebブラウザのアドレスバーは、プログラム可能になっていたという驚きです。
 こんなつまらないところから、プログラミングを身近に感じて欲しいのです。

 初学者は、Google検索するときに「"(ダブルクォーテーション)」を使うと検索結果が違うことすら知らなかったりします。

 プログラミングはコンピュータと会話をする方法の一つです。
 Googleの検索窓という身近なものでさえ、プログラミングの入り口になりうるのです。

 さて、今回、私は講義に先立って、2年前の私の講義を受講していたいわば一期生に「印象に残っていたことは何か」と聞いてみました。

 すると返ってきたのは意外な答えでした。「あのタイマーのやつ、凄く面白かったです」

 あのタイマーのやつ、というのは同じようにアドレスバーに「javascript:window.setTimeout(function(){alert("Hello")},10000)」と書くものです。

 「自分のパソコンが壊れた!?って思って。それが意図的に引き起こせることだと知ってプログラミングって面白いと思いました」

 こういう発想は使える、と思いました。
 そこで今回の授業ではそこから一歩踏み込んで本格的なプログラミングを教える前にJavaScriptコンソールで教えてみることにしました。

 Chromeをはじめとするモダンなブラウザには、Webアプリケーションを開発するためにJavaScriptコンソールというものが用意されています。

 Windowsではctrl+shift+jを打鍵するといつでも呼び出せます。これを使って成蹊大学のWebページにいくつかイタズラをしよう、という発想でプログラミングの入り口に立ってもらうことにしました。

 たとえばこんな感じです。

 「とりあえず、コンソールにこう入力してみよう」

スクリーンショット 2015-10-28 7.16.01

 「この"とんかつ"の部分は、自分の好きなものに変えていい。自分の名前とか、好きな人の名前とか、とにかく自分の好きなものにしていい」

 この指導法には、いくつか重要な意味があります。
 まず、この時点で私はオブジェクトとは何か、プロパティとはなにか、documentとはなにか、writelnとは何で、writeとは何が違うのか、()の意味はなにか、""の意味は何か、ということを一切、説明していないのです。なぜなら私自身がプログラミング言語を最初に学んだ時、""の意味など知らずに使っていたからです。プログラミング言語が言語である以上、文法の理論から教えるのは誤りだと私は思います。体系的に学ぶときには必ず文法が出てきますが、文法よりもまず雰囲気から伝えるべきというのが私の第一の考え方です。

 また、「自分の好きなものを入力しなさい」というのは、プログラムがお仕着せのものではなく、誰でも(この場合は初学者である生徒諸君でも)支配可能であるというメッセージを伝えるためです。そして、出力結果として出てくる言葉が自分の好きなものであるかどうかは特に重要です。人間は自分の好きなものにより強く反応するからです。

 これが表示されると、こうなります。

スクリーンショット 2015-10-28 7.20.40

 「次に、カーソルキーの上を押すと、さっき入力したプログラムが復元される。そこでリターンを押すと、さらに表示される。それを繰り返して、画面を一杯にしてごらん」

スクリーンショット 2015-10-28 7.16.16

 喜々として同じ操作を繰り返す生徒たち。一心不乱にカーソルキーの上と、リターンキーを交互に押します。

 「できた人は?」

 数人の生徒が手を挙げました。

 「疲れた?」

 「疲れました」

 私はうなずいて、こう続けます。

 「最初の授業で説明したように、コンピュータが得意なのは、同じ動作を繰り返すことです。しかしプログラミングをしらないみなさんは、同じ動作を馬鹿みたいに繰り返すしかない。プログラミングを知っていると、誰でもすぐに画面一杯に好きな言葉を表示できます」

 そこで私は次のプログラムを打ち込んで見せました。

スクリーンショット 2015-10-28 7.24.00

 ここで私は「for」文の読み方すら教えていません。
 けれども、結果を見ればこのプログラムが何をするかは一目瞭然です。

スクリーンショット 2015-10-28 7.24.06

 
 驚きの声。

 ここから、おもむろに変数について教えます。
 特に躓きやすいのは、代入という概念です。

 子供は代入という概念で躓いたりしません。そもそも方程式(等式)を知らないからです。
 しかし大人は「a=a+1」というごく普通の代入式でまず混乱します。

 ここは丁寧に教えます。

スクリーンショット 2015-10-28 7.26.48

 こういう基礎的なことを体験させるのに、REPLは便利です。
 BASICが教育的に理想とされていたのも、このREPLに相当するダイレクトモードがあるからでしょう。

 さて、一通り教えたあとで、for文について教えます。実はi++は実際にはi=i+1なのだと。
 さらに、iとは何かということについても教えます。

スクリーンショット 2015-10-28 7.28.27

 ここまで教えたところで、こう問いかけます。

 「さて、これがプログラミングです。では、みなさんはこの段階から、実際にFacebookのようなSNSを作ることができる段階まで、あとどのくらいかかると思いますか?」

 すると想像を絶するギャップに一同が絶句します。ひとりの生徒に当てて答えさせると「5年くらいですか」という答えを得ました。

 「実際には2年もあれば十分です。ザッカーバーグはもっと早かったかもしれません。でももっと単純なWebサイトなら、3ヶ月もあれば作ることが出来ます。なぜなら、今みなさんが体験しているのは、20世紀の終わりごろに生まれた、ごく原始的なプログラミングテクニックでしかないからです。実際にはプログラミング技術は飛躍的に進化し、もっと高度なことがもっと簡単にできるようになっています。僕が子供の頃は、今皆さんが体験したような原始的なことしかプログラミングできませんでした。そこからWebサイトを自分でプログラミングできるようになるまで、10年以上が必要でした。しかし今の時代、Webサイトを作るだけならもっと簡単にできます。それがプログラミングの進化であり、みなさんがプログラミングを是非とも学んでおくべき理由のひとつです。難しいからではなく、簡単だからこそ学ぶべき価値があるのです」

 一同、よくわからないという顔をしています。
 それはそうでしょう。

 プログラミングを習うごく初期段階では、それを何に使ったらいいのかわからないのです。
 これが、小学生にプログラミングを教えるのと大学生や社会人にプログラミングを教えることの絶望的な差です。子供は画面に好きな文字やキャラクターがでるだけで興奮しますが、大人はそんな程度では興奮まではしてくれないのです。

 そこでこれだけ単純なプログラムであっても、なにか役に立つことができるのだということを示す必要があります。しかし実際には、フィボナッチ数列の計算などさせても退屈なだけです。

 「しかし二年も待てないでしょうし、この講座は半年で終わってしまいます。そこで簡単なことしかできなくても、役に立つプログラムの書き方を教えましょう。そうだな、例えば・・・意中の異性にプログラミングで告白する方法を教えます」

 「そんな方法があるのか」という顔で男子学生が私を見つめます。
 私はおもむろにJavaScriptコンソールで次のようなプログラムを入力します。

スクリーンショット 2015-10-28 7.11.06

 「気になる女の子が居たら、彼女が離席している間にこっそりこのプログラムをJavaScriptコンソールから打ち込むんだ。JavaScriptコンソールを閉じてしまったら、彼女にはバレない。一分待つとこうなる」

スクリーンショット 2015-10-28 7.11.22

 「ギャッ!!」
 

 「怖い!」

 「これで告白とか引く」

 女生徒が悲鳴を上げる。
 それでいいのです。

 「私が伝えたかったのは、プログラミングが簡単であるということと、プログラミングは応用次第でいかようにもなるということです。このプログラムは携帯で写真をとっておくといいでしょう。ぜひ友達や恋人にいたずらしてみてください。あ、こういうのもできますよ」

スクリーンショット 2015-10-28 7.37.17

 「怖い!」

 「好きだ、でも呪い、でも沢山でると怖いというのは面白いですね。もう少しスマートなプログラムを書いてみましょうか」

スクリーンショット 2015-10-28 7.40.42

 
 もちろん最初はifについてもelseについても説明しません。
 けれども、生徒たちはこのプログラムを見て、何をするものなのか「感じ取る」ことができます。

 こういうプログラミングの単純な面白さは、高度なテクニックがなくても、工夫次第でいくらでも遊べるということです。

 最後に授業の感想を生徒に聞いてみると

 「キーボードで言われたとおりに入力するというのがこんなに難しいと思いませんでした」

 「ちょっとした工夫や表示する言葉が変わるだけで、人間の心に与える印象が大きく変化することに驚きました」

 という反応が返ってきました。

 ただ、顔をみれば誰もがプログラミングの魅力の入り口に立てたのだな、と私は感じます。

 ここまでに、オブジェクトやコールバックという高度な概念を使っているのですが、関数という概念さえ説明しないまま、私はまずプログラミングを「考えるのではなく、感じる」というやり方で面白さを見出してもらおうと思いました。この段階ではまだ「JavaScriptとはプログラミング言語の名前である」ということすら教えていません。

 こういう教え方を選択したのは、やはり一期生が翌年のR言語の授業で、本質的にはプログラミングを理解していたものの、細部、特にクォートやカッコの対応について上手く理解してもらえていなかったからです。一期の授業で私が重視したのは主にプログラミングを本質的に捉え、表現手段としてのプログラミングがあるということを伝えることでした。だから最終回では全員がJavaScriptのゲームを作って持ってきました。

 ただしプロのプログラマーを養成することが目的ではないので、インデントや記号の読み方などの対応関係はあまり重点的に教えませんでした。

 しかし三年次以降に他のプログラミングに関する講義があると聞き、基礎的なプログラミングの方法まではマスターさせておくべきと考え、今回のようにキーボードを積極的に打たせるかたちの授業を行うことにしました。

 来週はSIGGRAPH ASIAで休講なので今回は「次回までに今回教えたテクニックだけを使って、どんなイタズラができるか考える」という課題を出しました。文字を表示するだけで色々出来そうです。

 次回はどんなイタズラが飛び出すのか、私もいまから楽しみです。

 プログラミング言語を教える方法はひとつではありません。
 プログラミング教育という概念自体がまだ未熟なので、色々な方法を試す必要があります。

 ビジュアル言語で教えるのはたくさんある手段のうちひとつですし、非ビジュアル言語で教えるのも同様です。
 重要なのは何を教えたいか、教えることによってどういうことを理解する人材になって欲しいか、ということです。

 大学の授業はプログラミングの入り口に過ぎないので、ここから面白さを見出し、独学でプログラミングを極めようとする学生もいれば、あくまで「教養として」プログラミングを知ることができてよかったなあ、と安堵する学生もいます。

 プログラミングはこれからもっと簡単になっていきます。

 簡単になった結果、遠からぬ将来プログラミングをできる人が増え、出来ない人は淘汰されていく方向になるでしょう。それはあたかもPCを使える人と使えない人との差に似ています。

 そのために私が最重視していることは、決してプログラミングを恐れさせない、嫌いにさせない、侮らせないということです。

 それが私にしばしば卑近な例を学生にプログラミングさせる理由と言ってもいいでしょう。
 この分野にはまだまだ色々な教え方があるはずで、新しい教え方を思いついたら、それを試さない手はないのです。

 そしてプログラミングを教えるという活動を通してこそ、真に必要なプログラミングの次の進化の方向性が掴めるはずですし、それにあわせてプログラミング言語そのものを進化させていくのが教育と開発、両方の現場に足を掛ける者としての使命だと私は考えています。

WirelessWire Weekly

おすすめ記事と編集部のお知らせをお送りします。(毎週月曜日配信)

登録はこちら

清水 亮(しみず・りょう)

新潟県長岡市生まれ。1990年代よりプログラマーとしてゲーム業界、モバイル業界などで数社の立ち上げに関わる。現在も現役のプログラマーとして日夜AI開発に情熱を捧げている。

RELATED TAG