未経験者がWebアプリコンテストで優勝した話

はじめに

この記事はWebアプリ開発に興味はあるけど開発難しそうと思っている人を対象にしています。

webアプリ開発未経験からwebアプリコンテストに応募して優勝賞金100万円を獲得するまでの話を書いていきます。webアプリ開発が想像以上に簡単に始められることが伝われば幸いです。

背景

自己紹介

現在は情報系の大学院修士1年に所属しており、光コンピューティングを研究しています。バイトは４年間塾講師をしています。（ちょっと重要）

Web開発を始めた段階（2021年7月）では、PythonやC言語を使ったアプリの開発経験（おもちゃ程度）はありました。
しかしWeb開発は全くの未経験で、リクエスト・クエリ・フロントエンド・バックエンドと言った言葉を知っているだけで意味は全くわからなかったです。

コンテスト

応募したコンテストはSky株式会社主催の Webアプリコンテスト「TERMINAL2021」です。

コンテストのテーマは
プログラミング教育必修化に向けての学習支援アプリの開発をせよ
（https://sky-terminal.com/ より引用） でした。

審査は書類審査 -> デモビデオ審査（開発期間1ヶ月半）の2回からなり、書類審査で34チームの中から5チーム選ばれ、デモビデオ審査によって5チームから優勝チームが決まります。優勝チームには優勝賞金100万円が授与される、夢のあるコンテストです。

応募は2021年7月に行い、書類選考を経て2021年8月上旬~2021年9月中旬まで開発を行いました。幸運なことに優勝できて賞金100万円を手にしました。

動機

「コンテストに出た動機」とその中でも「TERMINAL2021に出た動機」の２つについてお話しします。

「コンテストに出た動機」は就活のために成果物を作りたかったからです。普通に開発すると作りきらずに終わってしまうと思ったので、コンテストに出ることを決めました。

その中で「TERMINAL2021に出た動機」は、4年間の塾講師のバイトを通して教育に興味があり、TERMINAL2021のテーマがプログラミング教育に関連していて面白そうだと感じたことです。

制作物「ブロッコリー」

概要

「TERMINAL2021」にて製作した作品は、小学生を対象としてブロックコードによる日記作成Webアプリケーション「ブロッコリー」です。

ブロックコードを並べて日記を作り、それに基づいて動画が生成されます。（下図）

動画のタイトル、説明文、サムネイルが設定可能で、他の人と動画を共有することができます。

開発背景

近年小中学生を対象としたプログラミング教育が始まろうとしています。しかしその中で扱われるプログラミング教材には２つの欠点があると考えました。

欠点の１つ目は実生活から離れた題材であることです。
例えば、ネズミロボットをブロックコードで操作して迷路を解く教材がありますが、実生活でネズミロボットを動かす小中学生はほとんどいません。そうした実生活とのギャップがプログラミングに対する関心を抱きづらい原因になっていると思います。

欠点の２つ目は教材を通して得られた成果物を共有することでコミュニケーションが発生する構造になっていないことです。
先のネズミロボットの例だと皆同じ課題に取り組むので、自分の作成したコードを共有しても面白くありません。これは1人で黙々と取り組むことにつながってしまい、プログラミングが楽しく無いと思う原因になります。

こうした理由から誰もが一度は書いたことがある日記を題材としたWebアプリケーションを開発しました。ブロックコードによって作られた日記を元にアプリケーション側で動画を自動生成することで、共有しやすい形にしました。

開発

役割分担

開発は高校の友達2人と僕の３人で行いました。３人全員ともWeb開発未経験だったので、内容はよくわからないままデザイナー・フロントエンド・バックエンドの３つに役割を分けました。

友人A（プログラミング経験なし）：デザイナー
友人B（プログラミング経験あり）：フロントエンド
僕　 （プログラミング経験あり）：バックエンド

知識0からの開発（サーバーサイド）

開発期間は8月上旬から9月中旬の1ヶ月半でした。時間のない中、未経験からWebアプリの知識を勉強して実装（特にサーバーサイド）をする必要がありました。ここからはどのように進めていって、完成まで持っていったのかを書いていきます。

①Webアプリ開発の勉強

最初にWebアプリ開発について勉強をしました。サーバーサイドとは何なのかや、サーバーサイドの実装で主に使用されている言語についてです。その時に学んだことを書いていきます。

注意　
現在進行形でWeb開発の素人ですので誤りを含んでいる場合があります。ただ僕の経験上この理解で開発することはできました。Web開発の敷居を下げるために端的に書かれたものだとご理解ください。

サーバーサイドとは何なのか

サーバーサイドはクライアント（利用者）から送られてきたリクエストに対して、適切なレスポンスを返すプログラムやその環境（サーバーやデータベースなど）のことをいいます。

サーバーサイドの記事でよく出てくるAPIとはリクエストに対して適切なレスポンスを返すためのプログラム群だと理解しておくと全体像が少し見えてきます。

今回僕はサーバーサイド担当としてAPIの設計・実装を行いました。

サーバーサイドで使用される言語

僕が当時調べた範囲だと「TypeScript」、「Go」の２つが有名どころでした。
「TypeScript」はJavascriptの親戚みたいなものです。

Webアプリケーション用プラットフォームとして「Firebase」や「Heroku」が有名どころでした。

②技術選定

技術選定は「有名どころを使っておけばドキュメントが豊富で後々楽そう」という考えから、
言語としてはJavascript（Node.js）, プラットフォームとしてはFirebaseを選択しました。
背景として、Node.js + Firebaseという組み合わせのWebアプリ開発の記事がたくさんあったことがあります。

③サーバーサイドの実装

最初はわからないことだらけでしたが、「Node.js + Firebase」でのWeb開発の記事が大変参考になりました。記事に載っていないことも、エラーコードをコピペしてググる戦法でどうにか対応できました。

僕は大きく分けて２つの機能の実装を行ったのですがどちらも予想よりはるかに時間がかかりました。
大体２つ合わせて3週間で終わる予定でしたが、最終的には5週間ほど実装に時間がかかりました。未経験者の見込みほど甘いものはないので、バッファは大量にとっておくのが良いと思います。

実装をする上で心がけていたことは、とりあえず動けばいいです。普通のエンジニアリングではご法度だと思いますが、未経験者の特権として許されます。とりあえず動くものを積み重ねていって、うまくいかなかったらやり直せばいいです。そうしたサイクルの中で技術や知識が身についていくと思います。技術や知識が十分でない中でこだわることの方が危険です。

④チームメートの意思疎通

Web開発においてチームメートとの意思疎通は非常に重要だと思いました。というのもサーバーサイド・フロントエンド・デザイナーそれぞれが違うイメージを持ったまま開発が進むと、フロントエンド・サーバサイド間や、デザイン・フロントエンド間で実装が噛み合わなくなるからです。

これまでのアプリ開発経験からこの点についてはWeb開発前から薄々感づいていたので、ミーティングを3日おきに行うことでカバーしました。ミーティング内で意見が衝突することもありましたが、
問題を明文化し全員で共有することで「メンバーvsメンバー」でなく 「チームvs問題」 という構図で進めることを意識していました。

完成

〆切の5日前にプロトタイプが完成。本当にギリギリのスケジュールでした。

デモビデオの制作をしたり、親戚の子にデモプレイを依頼したりしていたらあっという間に締め切り前日になりました。徹夜でデモビデオを完成させて無事提出することができました。

結果

嬉しいことに優勝することができました。賞金100万円GET!!

2021年年末に叙々苑で打ち上げしてきます！

終わりに

ここまで読んでいただきありがとうございます。

この記事を通して、Webアプリ開発のハードルが下がっていたら幸いです。
まだWebアプリを作ったことがない方もぜひこれを機に始めてみてください！