第70回駒場祭で「はじめてのWebプログラミング教室」を出展しました

駒場祭企画「はじめてのWebプログラミング教室」

第70回駒場祭は、2019/11/22〜11/24の3日間で開催されました。本年度の駒場祭は、初日が平日であったことに加え、雨天予報が出ていたため、来場者数の減少が危惧されていましたが、私たちut.code();の企画「はじめてのWebプログラミング教室」では、多くの方にお越しいただきました。本当にありがとうございました。

さて、本年度の駒場祭では、2つの企画を同時進行する形式をとりました。これは、ut.code();の実際の活動を体験していただくための企画に加え、親子連れの方々にもお楽しみいただける企画を用意したためです。以下、どのような活動が行われたのかをご報告させていただきます。

はじめてのWebプログラミング教室

駒場祭企画全体のタイトルにもなっている企画です。近年、ソフトウェア開発の主流がWeb関連の技術に移行しつつあることを踏まえ、Web技術を用いて開発を行うメリットを感じていただくための企画として設計しました。HTML / CSS / JavaScriptを一通り実際に書いてみて、最終的にインターネット上に公開するところまで実施しました。JavaScriptに関してはプログラミング自体が未経験の方でも楽しんでいただけるよう、jQueryを導入しました。

Visual Studio CodeでWeb開発
Visual Studio CodeでWeb開発

サンプルコードの自動展開

プログラミング学習を妨げる一つの要因に、タイピング速度の問題があります。特に書籍の形式の参考書の場合、サンプルコードが長くなってくると、入力が面倒であることが学習意欲を減退させる原因になることもあります。Web開発の場合、プログラムを書き始める前にある程度定型句となる部分があるため、この問題が顕在化しやすいです。この企画では、学習者の負担を最大限軽減するため、ボタン一つでサンプルコードをプロジェクトディレクトリに展開する機能を用意しました。

実装の方法は至って単純です。Visual Studio Codeの拡張機能を利用しました。Visual Studio Codeの拡張機能開発ではNode.jsの全機能を利用できるため、npmの豊富なライブラリ群を、依存関係を意識することなく気軽に導入することができます。また、デフォルトで用意されているテンプレートが優秀で、TypeScript連携や強力なデバッガまで標準で用意されています。さすが人気エディタですね。

ホスティングサービスへの自動デプロイ

Web開発を行う上での最大のメリットは、やはり製品を即座に全世界に向けて公開することができる点ですね。せっかくWeb開発を体験するのなら、ここまでやらないと意味がない。そのような思いのもと、ホスティングサービス(Netlifyを利用しました)への自動デプロイも、ワンクリックで実施できるようにしました。こちらも公開されているAPIをNode.jsで叩くだけの簡単な作業ですが、自動的にQRコードを生成し、駒場祭にお越しいただいたお客様のスマートフォンでも表示できるようにするなど、はじめての「感動」を重視した体験作りを心がけました。

ビジュアルプログラミング

前項の「はじめてのWebプログラミング教室」は、Web以外のプラットフォームでプログラミングを学習したことがあるものの、つまらないと感じていた方に向けた企画でした。小さなお子様や、コンピューターをあまり使用しない方にもプログラミング的思考を体験していただくために用意した企画がこちらです。

自然言語からプログラミング言語へ

ビジュアルプログラミング言語として有名なものに、米マサチューセッツ工科大学の開発したビジュアルプログラミング言語Scratchがあります。過去のScratchはFlashベースの独自エンジンでしたが、2019年11月現在の最新版のScratchは、Google社のOSSであるBlocklyがベースとなっています。BlocklyはSVGにより描画を行なっているため、現在のScratchはスマートフォンやタブレットなどの環境でも問題なく動作します。

BlocklyはOSSとして開発されているため、独自アプリケーションに組み込むことも比較的容易です。この企画で使用しているソフトウェアは、そんなBlocklyをベースに開発しました。左のパネルに表示されている迷路を、「前に進む」「左/右を向く」といった動作ブロックと、「前/後/左/右に壁がある」といった条件分岐ブロックのみを用い、ランダムに生成される迷路を普遍的に解くことができるアルゴリズムを構築することが目標です。迷路の必勝法といえば片手を片方の壁に付けながら迷路を進む「右手法(左手法)」が有名ですが、この「片手を壁につけながら」という曖昧なルールを、限られた命令のみが使用できるプログラミングの環境においてどのように表現できるかを考え出すことは、プログラミング経験者でなければかなり難しいです。

未来のエンジニアたち

企画を通して非常に印象的だったのが、熱心に課題に取り組んでくださった親子連れの方々の姿でした。用意した企画は2つともかなり難しめだったにも関わらず、楽しんでいただけた方々が多かったようです。

また、すでにプログラミング学習を始めていらっしゃるというお子様や、これからお子様にプログラミングを教えたいという保護者の方々も多くいらっしゃいました。この企画が、少しでもそういった方々の力になれたならば幸いです。