プログラミング教育に JavaScript を使いたい

##この記事の趣旨

**大学等で１〜２年生にプログラミングがよく教えられていますが、そこで教える言語として JavaScript はどうでしょうか？という話**です。なにか高度な技術的話題が含まれているわけではありません。でももし、他の言語は知っているけど JavaScript は使ったことがないという方がおられたら、入門の役に立つかも？

##動機

大学の学部生（１〜２年）向けにプログラミングを教える授業がよく設定されていますが、どの言語を教えるのか？どんな環境を使うのか？というのは、ちょっと悩ましいところがあります。古くは（または現在も？）Ｃ言語がよく教えられているけど、そろそろ Python にしましょうよ、とか。いや、僕（教員）は Python は使ってなくて教えられない、とか、演習室の計算機には環境が入ってませんよとか、だれがアップデートするんですかとか、そういう周辺的要素もありがちです。また、最近はオンライン授業が増えてたり、対面授業でも **BYOD (bring your own device) が進んでますが、そのときに学生の PC に環境を用意させるのはわりと面倒**です。

また最近よく感じるのは、コマンドプロンプトやターミナルで、**文字の入出力中心のプログラミングに今の学生さんたちが魅力を感じてくれない**という問題があります。「こんなに面倒くさくて陰気なものだとは思わなかった」という感じ。そもそも今どきの学生にはコマンドプロンプトを知っている人がほとんどおらず、そういうのを使う人は黒魔術師扱いです。それよりも、日頃使っているような見た目や操作感のソフトウェア（要するにアプリ）を作りたいとか、見た目に楽しく直感的なグラフィックス表示をさせたり、ゲームを作らせたりして、モチベーションアップしたい。

ということで、Ｃ言語プログラミングを教えたことがある方向けに、JavaScript に切り替えてはどうでしょうか？みたいな意図の動画を作ってみました。こういうのはなかなか口頭や資料で説明しても分かってもらいにくいので、いつか来たるべきときのための学内説明用という意図で作りましたが、JavaScript は全然知らない！という方にも、どんなふうにプログラムが組めるのかがだいたいわかるので、ぜひ見てみてください。Hello World からデバッガの使い方、入力欄やボタンとの連携、簡単なグラフィックス表示までを20分でざっくり説明しています。

<iframe width="560" height="420" src="https://www.youtube.com/embed/ilvKsv0YHvA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

動画内で使用しているソースコードはこちらにあります
https://shiura.com/html5/beginner/

##なぜ JavaScript なのか？

一部、前述したことの繰り返しになりますが、JavaScript を推す理由は以下の点です。

- ウェブブラウザ上で動くので、別途、**実行環境やコンパイラをインストールする必要がない**。PC の管理者権限も必要ない。
- 日頃、学生が触れているウェブブラウザ上で機能するものが作れるので、**役に立つものが作れる実感**が得られやすい。
- **GUI 要素（テキストボックス、ボタン、スライダー等）を組み込んだプログラム**が容易に作成できる。
- **グラフィックス表示やマウス入力**、画像の読み込みなどが簡単に扱える。
- **ブラウザ組み込みのデバッガが秀逸**で、プログラムの動作中の様子（変数の値など）を簡単に確認できてトラブル解決しやすい。
- **言語の見た目や制御構造がＣ言語に近い**ので、Ｃ言語でこれまで教育してきた人たちにも馴染みやすい。
- Ｃ言語とは異なり配列の要素数を気にする必要はなく、文字列の扱いもモダンなので、**better C 的な観点でちょうどよい**。
- ウェブプログラミングは需要が高いので**就職にも有利**。

一方デメリットとして、以下のようなことはあります。

- サンドボックス的に動作するので、PC 内のファイルの読み出し・保存などが自動化できない（手動で読み込ませたり、ダウンロードすることは出来る）。
- Ｃ言語の初学者が苦労する配列要素数の管理やポインタの扱い、malloc / free、文字列処理などは、一度通っておくべき道であるという議論。

## 余談

自分自身は昔から、ちょっと人に使ってもらうプログラムを作るとかいうときに、さて何を使うか、モヤモヤすることがあり、それは以下のような点でした。まず GUI まわり。

- OS・環境依存するものは避けたい。たとえば Mac の Xcode で Interface Builder と objective-C とかを使ってアプリを作ると Windows には展開できないし、逆に Visual Studio でやるのも抵抗感がある。機種依存を避けるには Qt とかあったけど有償だったりして、例えば OpenGL + glut + glui で作っていた時期があったりしたが、obsolete 指定されたりして悲しみ。
- 大規模な開発環境は入れたくないので、できればテキストエディタでサラッと書くだけで OK のものがよい。また、GUI のインタフェースを作るのに Interface Builder 等の GUI ツールを使ってしまうと GUI の定義ファイルを直接編集しづらいので、GUI 定義もプログラムと一緒にテキストエディタで編集したい。
- プログラムと GUI の定義は、管理や配布の観点で同一のファイルに入れられたら嬉しいが、ソースコード部分とガッチリ一体化（混在）するのはいや。MVC (model / view / control) の分離という観点でも望ましくない。

またその他の要素として、

- グラフィックスを簡単に書きたい。できればタートルグラフィックスレベル。
- デバッガで楽にデバックしたい。
- 画像や動画を扱うことが多いので、画像が簡単に読み込み・保存できると嬉しい。カメラにも直接アクセスしたい。
- ランタイムを別に配布するとか、そういうのはできれば避けたい。配布（送付）を簡単にしたい。
- 最近は、公式ストアから配布されない（認証されていない）野良アプリは配布もインストールもやりづらい。または抵抗感がある。

これらの課題がウェブブラウザ + JavaScript でほぼ解決されました。例えば、自分は3Dプリンタを共同プロジェクトの共通利用設備として管理していますが、3Dモデリングはやったことがないという人向けに、<a href="https://shiura.com/html5/img2stl.html">画像の画素値を高さとする STL ファイルの生成プログラム</a>を作りました。前は普通にローカル環境で、コマンドラインから実行するアプリでしたが、それだと使ってもらうにも一苦労で、相手がそのプログラムの実行環境を持ってないと結局、自分が処理することになったり。それが上記のようなウェブサービスに出来ると「ここにアクセスして使ってください」で済む。しかも Monaca を使えばそのままスマホアプリにも変換できたりして便利なことこの上ないです。

p.s.<br>趣味・遊びと実用・教育用を兼ねて、短めの JavaScript プログラムをいくつか<a href="https://shiura.com/html5/">こちら</a>で公開しています。プレゼンタイマーなどもありますので、よければどうぞ。