学生ギルドの事業のSTRAMでチューターをしています。神戸と申します。
先日、ヤフー株式会社さん主催のオンラインハッカソン「Open Hack U 2021 Online Vol.3」に小学生と参加してきました。そのレポートになります。

Open Hack U 2021 Online Vol.3の詳細ついてはこちら↓
https://hacku.yahoo.co.jp/hacku2021online3/

チーム結成の経緯

私たち学生ギルドはモノづくりが好きな大学生や高専生が集まって、小中学生向けにプログラミング教室STREAMを運営しています。

私自身が来年度から神奈川の企業に就職するので、学生ギルドの仲間と何かに全力で取り組めるのはこの春休みが最後のチャンスだと感じていました。

そこで、冬ごろ、次の春休みで出れるハッカソンを探していたところ、Open Hack Uという小学生以上で参加が可能という異例の、つまり大学生と小学生の混合チームを組むことが可能なハッカソンを見つけてしまいました。当初は学生ギルドに運営やチューターとして関わっている大学生や高専生を巻き込んでハッカソンに出ようという心づもりでしたが、せっかくならとSTREAMで教えている小中学生にも声をかけることにしました。

こうして異例の大学生、高専生、中学生、小学生の混合チームが成立しました。

ハッカソンの進め方

各メンバーは年代だけではなく地域もバラバラなので通話アプリを使用しながら、案出しから進めていきました。当日に議事録はこんな感じです。

また、ヤフー株式会社さんがGitHubの講習会を開いてもらえるタイミングで気づいたのですが、13歳未満はGitHubのアカウントを持つことができず、16歳以下はSlackのアカウントを持つことができないんですね。そうすると親と一緒に作ってもらう必要があったり(ハッカソンの参加にSlackはマストだったので、そこだけは頑張ってもらうとして)、Git及びGitHubの環境構築で詰まる可能性とかあったので、googleドライブを使用したコードの共有も行っていました。ただ、せっかくの機会だしGitも触ってもらいたいということで、13歳以上の参加者で大学生側の余裕のあるとき参加してくれた子に関しては個別にGitの設定をしたりはしていました。全員に教えられたわけではないですが……

あと、ちょうど中学生はテスト週間と被っていて夕方からの通話開発に参加できない人が多かったのも想定外でした。大学生はすでに春休み気分ですが、小中学生は5時まで学校があって、当たり前のように宿題もあって、10時前にはもちろん就寝をし、さらにその合間を縫って参加できる子が参加してもらった型です。ハードスケジュールな2週間にしてしまいました。

もちろんハッカソン特有の深夜駆動開発とかもやりにくかったです。毎日午後9時までには終わるようにしてました。最終日だけ僕の進捗管理が甘くて11時近くまでかかってしまった(そこまで小学生に起きててもらってしまった)のは本当に悪なので反省してます.......

技術選定

使用技術はFlaskです。Flaskを使用した理由はいくつかあるのですが、まず、STREAMにおいてPythonを使用したプログラミング教室が行われているので、各小中学生の手元の環境構築がされていることが保証されていた。また、 ​以下コードのように少ない記述でとりあえずHTMLのレンダリングが可能であるので、そもそも最初に動かないという事態を避けることができるだろうというのが狙いでした。

from flask import render_template
@app.route('/hello/')
def hello(name=None):
   return render_template('hello.html', name=name)

あとは個人的に今後Pythonを主体としてWebアプリを書くことはなさそうだと思ってたのでDjangoよりかは、FastAPIとかにも記法が取り入れらているFlaskを学んだ方が後学にのためになるかなと考えたのもあります。

CSSにはtailwindcssを使ってもらいました。理由としては、ドライブで共有してもらうファイルがHTMLファイルだけで済むようになること、あとで各自のドライブの成果物を手でくっ付けるときにCSSの名前が一緒とかで僕が困りそうだったので導入しました。技術構成の概要は以下のようになってます。VercelでFlaskをデプロイする日本語記事が無かったのでちょっと詰まった以外はスムーズだったので技術選定は悪くなかったと思ってます。

Gitでの管理ができないので、小中学生へのタスク降りとしては各ページのHTMLの作成を振り分けたのと、関数を作ってもらいました。

小中学生が強すぎた話

自分がつよければ問題なかったのですが、自分のタスクをしながら小中学生にも教えながらの両立をすることができなかったので、とりあえずリファレンスとかを投げて、困ったら教えてね一緒にやるから。といった形で進めていきました。

まぁ最悪最終日前とかで僕が徹夜してやればなんとかなるやろの精神でした

が、成果物を見てもらえば分かると思うのですがHTMLとCSSのデザインは純度100％の小中学生の成果物をそのまま採用してあれです。(値が可変なところとかはちょっと書き換えたので90％くらいかもしれない)ともかくデザイン丸投げであれが出てきました。ヤバすぎる.......

自分はリファレンスを投げたつけただけなのに....

（本来は丁寧に教えるべきだろうけど手が回ってなかったので......）

徹夜することなくハッカソン発表当日に動いて見た目がいい感じのものが完成することができました。

さらに、チーム最年少のむっくんにはHTMLとCSSの部分が最初に完成したので、裏で数字で管理されてる重要度を文字に置き換える関数を作ってもらいました。

さらに、むっくんには当日の発表も丸投げしました(流石に技術系のところは何となく原稿作りました。時間内に収まるようにアレンジしてもらったけど)。

当日の発表は以下から見ることができます
https://youtu.be/Nm17wqU1jng?t=5278

？？？「お兄さんは何をしたんですか」
かんべ「後半は強い小学生にキャリーしてもらってました」
　　　「あ、小学生はGitHubが使えないのでデプロイしてました.......」
？？？「google driveで更新を受け自動デプロイまでできるようにしたらお兄さんいらないですね？(できるかは分からないけど)」
かんべ「......はい」

成果物

成果物はハックツさんのtopazで紹介しているので是非使ってみてください。

まとめと感想

ヤフーさんとの面談で色々話を聞けたり、普段使わない技術に触れたりと、個人的にとても楽しいハッカソンでした。これを期に小中学生から未来のハッカソンジャンキーが現れると良いなと淡い期待を描きつつ、リファレンスを渡したら完成品を作ってしまう小中学生(当たり前のようにプログラミング教室に通っている)が将来大量に入ってくる、そんなIT業界に就職する自分はもっと危機感を持って頑張らないといけないなとも感じた2週間でした。

STREAMにももっと小中学生の生徒が増えて、チューターの大学生も増えたら内部ハッカソンとかも開催できると絶対楽しいなと思ってます。STREAMの仲間も募集中です(勝手に宣伝)。

素敵なハッカソンを開催していただいたヤフー株式会社のみなさん、ハッカソン参加に全力で協力していただいた学生ギルド運営のみなさん(特に内藤さんと美苗さん)ありがとうございました。。