教育向けプログラミング言語としてのCoffeeScript

2017年現在、残念ながら人気のある言語とは言えないCoffeeScriptですが、世界で600万以上のユニークユーザー数を誇るプログラミング教材「コードモンキー」でも利用されています。CoffeeScriptバージョンを`say`関数でサルにしゃべらせると、1.7.1がベースであることがわかります（サルの右下吹き出しに表示されています）。
![coffee-script-version.png](https://qiita-image-store.s3.amazonaws.com/0/221185/82024085-4a2e-6d3d-1db6-040713e78c0e.png)

##「コードモンキー コードの冒険」とは
いわゆる「課題解決型」のプログラミング教材です。「課題解決型」の有名どころは[Hour of Code](https://hourofcode.com/jp/learn)や、最近話題になった[子供向けコーディング 50 周年のDoodle](http://www.google.com/doodles/celebrating-50-years-of-kids-coding)でしょうか。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Celebrate <a href="https://twitter.com/hashtag/CSEdWeek?src=hash&amp;ref_src=twsrc%5Etfw">#CSEdWeek</a> &amp; 50 yrs of kids coding languages by checking out our VERY FIRST coding <a href="https://twitter.com/hashtag/GoogleDoodle?src=hash&amp;ref_src=twsrc%5Etfw">#GoogleDoodle</a>! 🐰🥕🐰→ <a href="https://t.co/Kr7pjrLXOr">https://t.co/Kr7pjrLXOr</a> <a href="https://t.co/V0aJFBBAM2">pic.twitter.com/V0aJFBBAM2</a></p>&mdash; Google Doodles (@GoogleDoodles) <a href="https://twitter.com/GoogleDoodles/status/937550459195203584?ref_src=twsrc%5Etfw">2017年12月4日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[子供向けコーディング 50 周年のDoodle](http://www.google.com/doodles/celebrating-50-years-of-kids-coding)では、ビジュアル言語を使ってウサギを動かし、各面でいろいろな配置になっているニンジンを取ることで、コーディングの基礎を学べます。[「コードモンキー コードの冒険」](https://codemonkey.jp/)は、ウサギではなくサルが、ニンジンではなくバナナを取るために、ビジュアル言語ではなくCoffeeScriptでサルの動きをプログラミングする教材です。プログラミング教育大国イスラエルでは、1,700もの小学校に導入されていて、児童たちが毎年CoffeeScriptを学んでいるのです。ご存知でしたか？
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">こちらは本家イスラエルでの「コーディングオリンピック」。「とよプロ2017」では、この予選に使われたチャレンジを初めて日本の小学生16人に挑戦してもらいました。<br>CodeMonkey(コードモンキー)活用事例: イスラエルの &quot;Coding Olympics&quot; (日本語字幕) <a href="https://t.co/mLSGjEL9sv">https://t.co/mLSGjEL9sv</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; ゴード氏 (@Gord_4) <a href="https://twitter.com/Gord_4/status/942588289944502273?ref_src=twsrc%5Etfw">2017年12月18日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>フルライセンス版では400ある課題（チャレンジ）のうち、30までを無償でプレイすることができます。こちらは[Hour of Code](https://hourofcode.com/jp)の教材として利用されたり、各種プログラミング出張授業でも利用されています。

書いたコードの一般的な優劣は星の数で採点されます。冒頭のバージョンをしゃべらせるコードは明らかに余計なことをしてるので、二つ星です。

![2-stars.png](https://qiita-image-store.s3.amazonaws.com/0/221185/71f6cdce-44d2-0356-5d75-6f508a28cd26.png)

たまに大人を唸らせるような別解に出会うこともあり、星の数が絶対というわけではありません。

## 教育向けプログラミング言語としてのCoffeeScript
CoffeeScriptは果たして教育向けプログラミング言語として適しているのでしょうか？

>CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.

[公式ページ](http://coffeescript.org/)の冒頭に記載されている通り、CoffeeScriptは、JavaScriptの優れた部分を簡単な方法で記述するために開発された言語であり、教育を目的に作られたものではありません。今回、小学1年生から6年生までの児童に教えてみた経験を踏まえ、教育用として優れていると感じた点を以下のようにまとめてみました。

1. 文末セミコロン不要
2. 引数の括弧不要
3. ブロック記述のための括弧不要
4. モダンなプログラミング言語
5. モダンブラウザで実行可能

## 文末セミコロン不要
[「コードモンキー コードの冒険」の最初のチャレンジ](https://www.playcodemonkey.com/challenges/0)は、以下のようなコードとなっています。

```coffeescript:チャレンジ0
step 15
```
チャレンジ0では既にコードは完成していて、ユーザーに与えられた課題は「RUN!」ボタンをクリックするだけですが、仮にJavaScriptで記述すると、

```javascript:チャレンジ0
step(15);
```
となります。`step(number-of-steps)`はサルを歩かせる定義済み関数あるいはメソッドです。行末に`;`を付ける必要のないCoffeeScriptはその分お手軽ですね。そもそも日本人にとっては`;`という記号は決して見慣れたものではないはず。私もBASIC言語の`PRINT`文の出力制御で初めてコロン・セミコロンの存在を知ったような気がします。コード量が多くなるとつい行末のセミコロンを忘れてしまうこともありますよね。

「1文字違っただけでプログラムが動かない」ということも、「プログラミング」で学ぶべき重要な事柄の一つではありますが、心配しなくても他で間違えます！文末セミコロンは、これからプログラミングという概念を学ぼうとする児童たちから、取り除いてしまってもいいストレスではないでしょうか。

##引数の括弧不要

既に示した通り、[「コードモンキー コードの冒険」の最初のチャレンジ](https://www.playcodemonkey.com/challenges/0)のコードでは、`step`関数を使っており、その引数`15`は、サルを歩かせる歩数です。

```coffeescript:チャレンジ0
step 15
```
C言語を始めとするプログラミング言語の「関数の呼び出し方」の記述法は、高校数学で習う関数f(x)の表現に倣ったものだと思いますが、対象が小学生であれば、数学の関数と関連づける必要性も薄いでしょう。括弧は関数が対象とする引数がどこからどこまでなのかを明確にしてくれるので、プログラムが複雑になってくると、とても便利なのですが、入門段階では開いた括弧を閉じるのさえ面倒です。これもCoffeeScriptが優れていると言えるでしょう。

引数のない関数の呼び出し方はどうでしょう。チャレンジ71からマッチ棒をつかむ`grab`と手放す`drop`という引数なしの関数が出てきますが、これらは皆さんご存知の通り、`grab()`、`drop()`と括弧を付けなくてはなりません。他言語経験者は「なぜ？」となるのですが、今回対象とした小学生は`()`をまとめて一つの記号のように考え、さほど悩まずに進めていました。

##ブロック記述のための括弧不要

CoffeeScriptのRubyやPython譲りのインデントによるブロック記述は、見通しのよいコードを書きやすくていいですね。児童にとっては、括弧の数が合わなくてエラーになる、といったストレスがなくなり、多くの時間をより課題解決に割くことができるでしょう。

ところで「コードモンキー コードの冒険」で出てくる最初のブロック記述は、`times`です。え、そんなのCoffeeScriptにないよ、って思いますよね。「コードモンキー」では、Ruby譲りの`整数.times ->`という文を導入しています。「これはCoffeeScriptにはない文ですよ」とは、あまり説明していません。ごめんなさい。

`整数.times ->`は`for`ループに変換されます。

##モダンプログラミング言語

世代的にはBASICには大変お世話になりましたが、せっかくプログラミングを学ぶなら、もう少し近代的な言語がいいですよね。型チェックもない動的型付け「モダン」か？と叱られるかもしれませんが… え、GorillaScript?

新しい言語は、言語構造自体がプログラミングを容易にしてくれています。FOR文のループ変数をループの外で意図せず書き換えたため思ったような動作をしない、というようなデバッグをする必要はないわけです。

でも、BASICはLチカとか、簡単な制御を試すのにはいいですよね。

CoffeeScript登場時、簡単にクラスを記述できることが大きな強みでしたが、「コードの冒険」では、クラスやインスタンスはあまり表に出てきません。サル視点のコードなので、サルを10歩動かす場合は`step 10`、カメを同じく10歩動かす場合は`turtle.step 10`と記述することを学ぶだけです。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">CodeMonkey&#39;s GAME BUILDER! Become a game designer: <a href="https://t.co/9U3Qcg1DFF">https://t.co/9U3Qcg1DFF</a> via <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a></p>&mdash; CodeMonkey Studios (@CodeMonkeySTU) <a href="https://twitter.com/CodeMonkeySTU/status/879700204060127233?ref_src=twsrc%5Etfw">2017年6月27日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

続編的位置付けの[「ゲームビルダー」](https://codemonkey.jp)では、Scratchのように、スプライト毎にコードを記述して、ゲーム作りを学んでいきます。おなじみ`this.`の代わりの`@`をよく使うようになりますが、コンテキストによって何を指す？のような解説や議論は、なされません。さらなる続編に期待しましょう。

##ブラウザで実行可能

JavaScriptで記述されたCoffeeScriptコンパイラを使用しているため、モダンなJavaScriptが動作するブラウザであれば実行可能です。画面構成上、操作性が損なわれるスマートフォンなどからのアクセスは禁止していますが、インストールなしで動作するというのは、大きなメリットです。学校のPCの場合など、アプリを新たにインストールするのは、容易ではないですし、セキュリティ面でもできれば避けたいですよね。

##まとめ
CoffeeScriptが教育向けプログラミング言語として優れている点について述べてきました。「コードモンキー」からCoffeeScriptラブな人が生まれるかどうか分かりませんが、今あなたが書いているコード、お子さんや甥や姪、読めるのかもしれませんよ！

「5行で解こう！」

とか言われたりして…