「Processingでゼロから学ぶプログラミング・ビジュアルアート」の連載をはじめます

2019-04-09

長いので3行まとめ

昨年度の講師業を無事やりきりました👏

昨年度の多摩美の非常勤講師就任のお知らせから1年。ひとまず無事にやりきることができました。全力を尽くしたので悔いはありませんが、振り返ってみるとさまざまな反省点がありました。

反省1: 資料が散在しがち・検索性が悪かった

初年度は再利用できる資産も少なく、教材をほぼゼロから準備しながら、毎週のフィードバックを高速で反映し続ける必要があります。教材の作成手段は、編集コストを最優先に考えDropbox Paperを選択しました。

授業中はプレゼンモードで説明しながら、配布資料は印刷用のPDFでカバーする作戦です。これにより資料作成自体は間に合いましたが、PDFになった資料は検索性が悪く、コードのコピペにも不向き。学生が「あのときの資料どこだっけ?」と思ってもなかなか見つからず、ネットで検索して適当な記事を掴んでしまう…といった事案もたびたび発生していました。

反省2: 書籍ではプログラミングの初歩をカバーしきれない

ビジュアルアートの書籍は増えつつありますが、絵作りを中心に解説したものが大多数を占めています。プログラミングの基礎について簡単に触れるものはありますが、体系的に学べる書籍はなかなか見つかりません。担当科目ではこの基礎の部分を手厚くカバーする必要がありました。

前年度は念のために参考書籍を設けていましたが、うまく活用しきれなかったというのが正直なところです。

ZERO-PDE

これらの問題を解決するために、今年度から「Processingでゼロから学ぶプログラミング・ビジュアルアート」(略称「ZERO-PDE」)の連載をスタートします。

授業で利用する教材のすべてを、1年間かけてすべてWebで閲覧できるようにする予定です。これ一本あれば、ひととおりの基礎が習得できるレベルを目指していきます。

ソースコード関連はGitHubにあげていきます。

多摩美、1月頭には授業が終わって長ーい春休みに突入するのですが(うらやましい)、そこから余暇含む膨大な時間をかけて準備を進めてきました。前年度の資料は参考にはしているものの、ほぼフルスクラッチで作り直しています。

検索性を改善

Webへの移植にあたり、講義資料の横断的な検索機能を用意しました。これで前年度のPDFのような不便さはだいぶ抑えられるはずです。ソースコードのコピペも思いどおりになりました。

悲願の検索機能

実装面の話を少しだけしておくと、このウェブサイトは「Hugo」という静的サイトジェネレーターで構築していますが、同時に検索用のJSONも生成するよう手を入れました。Hugoで検索機能を実現する際によく利用されるのが「Lunr」という検索ライブラリですが、日本語を含む検索に癖があり常用できないレベルだったので、最終的には生のJSONデータをそのまま正規表現で絞り込むようにしています。(この程度のデータ量なら、特にパフォーマンスチューニングしなくても十分な速度が出るんですね…いい時代だ)

ほしい機能は自分で実装

いまどき、わざわざ手間をかけて自前でホスティングしなくても…という気持ちもありましたが、ほしい機能を自分で実装できるというのは強みになります。

例えば、for文や関数など、初見では複雑な制御を解説するときに紙芝居があると便利ですよね。ということで作りました。

好きなエディターで、Markdownで書ける幸せ

先にも書いたとおり、このサイト上のすべてのコンテンツはHugoで生成しています。使い慣れたテキストエディター(Vim)を使ってMarkdownで書けるのは精神衛生上とてもよいことです。

(Dropbox Paperは全体的によくできていますが問題もありまして、特にコードブロックと日本語入力の相性が悪く、頻繁に // nににっほ日日本語コッッココッコメント みたいな入力になってストレスがやばかった…)

なぜ教材を公開するのか

教材の作成には膨大な時間をかけているので、このまますべて公開してしまってよいのだろうかという迷いも正直ありました。それでも公開に踏み切った理由は2つほどあります。

理由1: 教材の質の担保

教育というものは教室に閉じており、運用実態の見えないブラックボックスになりがちです。自身の学生時代にもひどい授業をいくつか経験してきましたが、その悲惨な内情は外側には伝わっていなかったのかもしれませんね。

教材を広く公の目のもとにさらすことで、ある程度その質を担保できるのではないか、というのがひとつの理由です。プレッシャーは上がりますし、質が低いと問題になれば改善のきっかけになります。誤りがあればSNSやGitHubのプルリクエスト機能で直接指摘を入れることもできます。

理由2: 教育の機会均等への貢献

講師を務めるようになってから、教育について考える・学ぶ時間が大幅に増えました。つい先日、教育学者の苫野一徳氏による『教育の力』という本を読み終えました。正解がなく発散しがちな教育論において、ひとつずつ丁寧に積み上げて話を展開しており、とてもためになる本でした。

教育の格差

本書の中で述べられていることのひとつが教育の格差です。現代の日本社会の構造においては、貧富など家庭環境の差がそのまま教育の格差につながってしまっているのではないか…という指摘です。

この格差については自分自身も問題意識を持っています。実際に貧困で苦しんだ近しい人から、運よくプログラミングに触れる機会を得て窮地を脱したという話を聞くと、何かできることはないだろうかと考えてしまうものです。

オンライン学習による機会均等

この格差問題を解決するアイディアのひとつがオンライン学習です。海外ではカーンアカデミーをはじめとする仕組みがすでに機能しはじめています。

日本でもオンライン学習の環境は整いつつあります。先の人も、当時プログラミングを学ぶ際はドットインストールにお世話になったという話でしたし、いまならProgateなど選択肢も増えつつあります。

教材をすべてインターネットに公開することで、インターネットにつながるコンピューターを利用できる人であれば、誰でも学びはじめることができます。この「教育の機会均等」に僅かながらも貢献したいという思いが、公開を後押しするもうひとつの理由になりました。手を動かす楽しさがより多くの人へ届くことを願っています。

反転学習

もうひとつ、これはまだ構想にすぎませんが…講義資料がさらに充実すれば「反転学習」にもチャレンジできるようになります。

旧来の学習スタイルは座学主体、みんな同じペースで学んでいきます。意欲的な人にとっては退屈でしょうし、興味のない人にとっても単なる時間の無駄です。個性ある数十人を同一形式に押し込むこと自体が、もともと無理のあるやりかたなのだと考えるようになりました。

オンライン教材が充実すれば、生徒は各々のペースで自主的に学びながら、それぞれの興味にあわせた学習を進められるようになります。学校(座学)と家(宿題・課題)との役割を反転させ、授業時間を議論や相談に充てる試み。これが反転学習の大まかな仕組みです。

まとめ

長々と書いてしまったのでそろそろ切り上げます。

担当する授業は通年科目なので、「ZERO-PDE」は1年かけてコンテンツが出揃うことになります。

プログラミングやビジュアルアート・ジェネラティブアートに興味はあるけど、なかなかはじめられない…そんな人がいましたら、この機会にぜひチャレンジしてみてください。

今日から1年間、学生と一緒にプログラミングを学んでみませんか。

書いている人:cocopon

Developer/Designer. Web/iOSなどのフロントエンドを主軸に、UIデザインから開発全般まで手がける。

趣味が高じて、ドット絵やジェネラティブアートが仕事になりつつある。